Framer Component Web3 Accelerator

This Model Context Protocol (MCP) mechanism serves as an orchestrator for initializing and governing Framer design components that incorporate requisite Web3 features. It furnishes developers with the apparatuses necessary to scaffold, compile, and manage Framer extensions featuring direct blockchain interaction capabilities, such as cryptographic wallet linkage, execution of on-chain logic, and rendering of non-fungible tokens (NFTs).

Capabilities

• Provisioning of novel Framer extensions equipped with integrated DLT features.
• Compilation of extensions suitable for production deployment.
• Inherent Web3 utilities:
  • WalletConnect compatibility layer.
  • Mechanisms for invoking and monitoring smart contracts.
  • Pre-built visual assets for displaying minted tokens.

Prerequisites

• A runtime environment of Node.js, version 16 or later.
• Package managers: NPM or Yarn.
• The official Framer desktop application for local validation and debugging of the extensions.

Deployment Steps

1. Acquire the source code repository: bash git clone https://github.com/sheshiyer/framer-plugin-mcp.git cd framer-plugin-mcp

2. Install all requisite dependencies: bash npm install

3. Compile the server-side assets: bash npm run build

Configuration Protocol

Integrate this service endpoint within your designated MCP configuration file:

For Claude Desktop Interface (~/Library/Application Support/Claude/claude_desktop_config.json):

{ "mcpServers": { "framer-toolkit": { "command": "node", "args": ["/path/to/framer-plugin-mcp/build/index.js"] } } }

For Cursor/Claude Developer Console (~/Library/Application Support/Cursor/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json):

{ "mcpServers": { "framer-toolkit": { "command": "node", "args": ["/path/to/framer-plugin-mcp/build/index.js"] } } }

Operational Commands

Once the setup is complete, the accelerator exposes the following utility functions:

initiate_extension

Generates a fresh Framer component project structure pre-loaded with DLT capabilities.

Arguments: - project_name: The unique identifier for the component. - synopsis: A brief explanation of the component's purpose. - output_location: The destination directory for the newly created project. - feature_set: A collection of desired integrated features (e.g., wallet-connect, contract-invocation, nft-viewer).

Example Payload:

{ "project_name": "crypto-widget-v1", "synopsis": "An interactive widget featuring decentralized connectivity", "output_location": "./components/crypto-widget-v1", "feature_set": ["wallet-connect", "nft-viewer"] }

finalize_extension

Compiles the specified Framer component package for deployment or final asset creation.

Arguments: - component_directory: The file system path pointing to the component's root folder.

Example Payload:

{ "component_directory": "./components/crypto-widget-v1" }

Collaboration Guidelines

We actively encourage contributions! Please feel free to submit a request for inclusion via a Pull Request.

Licensing

This project is distributed under the terms of the MIT License – consult the LICENSE file for comprehensive particulars.