Web3 Framer Plugin

🚀 Framer Plugin MCP Server

A Model Context Protocol (MCP) server that supports creating and managing Framer plugins with web3 capabilities. This server provides tools to create, build, and manage Framer plugins integrated with web3 features such as wallet connection, smart contract interaction, and NFT display.

🚀 Quick Start

This server is designed to help you create and manage Framer plugins with web3 capabilities. Below are the detailed steps and information.

✨ Features

• Create new Framer plugins with web3 capabilities.
• Build plugins for production.
• Integrated web3 features:
  • Wallet Connect integration.
  • Smart contract interaction.
  • NFT display components.

📦 Installation

Prerequisites

• Node.js 16 or higher.
• NPM or Yarn.
• Framer desktop application for testing plugins.

Installation Steps

1. Clone this repository:

git clone https://github.com/sheshiyer/framer-plugin-mcp.git
cd framer-plugin-mcp

2. Install dependencies:

npm install

3. Build the server:

npm run build

📚 Configuration

Add the server to your MCP settings file:

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

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

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

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

💻 Usage Examples

Basic Usage

After configuration, the server provides the following tools:

create_plugin

Create a new Framer plugin project with web3 capabilities.

Parameters:

• name: Plugin name.
• description: Plugin description.
• outputPath: Output directory path.
• web3Features: Array of features to include (wallet-connect, contract-interaction, nft-display).

Example:

{
  "name": "my-web3-plugin",
  "description": "A Framer plugin with web3 capabilities",
  "outputPath": "./plugins/my-web3-plugin",
  "web3Features": ["wallet-connect", "nft-display"]
}

build_plugin

Build a Framer plugin project for production.

Parameters:

• pluginPath: Plugin directory path.

Example:

{
  "pluginPath": "./plugins/my-web3-plugin"
}

🤝 Contribution

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is under the MIT License - see the LICENSE file for details.