项目简介

本项目是一个 Model Context Protocol (MCP) 服务器，旨在帮助开发者通过 LLM 客户端（如 Claude 或 Cursor）创建和管理具有 Web3 功能的 Framer 插件。它提供了一套工具，允许开发者快速生成、构建和管理 Framer 插件，并集成钱包连接、智能合约交互和 NFT 展示等 Web3 特性。

主要功能点

创建 Web3 Framer 插件: 通过 'create_plugin' 工具，可以根据指定的名称、描述和 Web3 功能快速生成一个新的 Framer 插件项目，包含必要的文件和配置。
构建 Framer 插件: 使用 'build_plugin' 工具可以将 Framer 插件项目编译为生产版本，方便部署和使用。
集成 Web3 功能: 支持在插件中集成 Wallet Connect, 智能合约交互和 NFT 展示等 Web3 功能，方便开发者构建 Web3 应用相关的 Framer 组件。

安装步骤

克隆仓库:

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

安装依赖:
```
npm install
```
构建服务器:
```
npm run build
```

服务器配置

要将此 MCP 服务器添加到 LLM 客户端，您需要配置客户端的 MCP 设置文件。以下是 Claude Desktop App 和 Cursor/Claude Dev 的配置示例。请根据您的实际情况修改文件路径。

Claude Desktop App 配置 ( '~/Library/Application Support/Claude/claude_desktop_config.json' )

{
  "mcpServers": {
    "framer-plugin": {
      "command": "node",
      "args": ["/path/to/framer-plugin-mcp/build/index.js"]  // 将 "/path/to/framer-plugin-mcp/build/index.js" 替换为实际路径
    }
  }
}

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"]  // 将 "/path/to/framer-plugin-mcp/build/index.js" 替换为实际路径
    }
  }
}

配置说明:

'"framer-plugin"': 服务器名称，在客户端中用于标识此服务器。
'"command": "node"': 启动服务器的命令，这里使用 Node.js 运行。
'"args": ["/path/to/framer-plugin-mcp/build/index.js"]': 启动命令的参数，指向编译后的服务器入口文件 'build/index.js'。 请务必将 '/path/to/framer-plugin-mcp' 替换为您本地仓库的实际路径。

基本使用方法

配置完成后，您可以在 LLM 客户端中使用以下工具：

1. create_plugin: 创建一个新的 Framer 插件项目。

参数:

'name': 插件名称 (字符串)
'description': 插件描述 (字符串)
'outputPath': 输出目录路径 (字符串)
'web3Features': 要包含的 Web3 功能数组 (可选), 可选值包括: '"wallet-connect"', '"contract-interaction"', '"nft-display"'

示例请求 (JSON-RPC callTool request):

{
  "jsonrpc": "2.0",
  "method": "callTool",
  "params": {
    "name": "create_plugin",
    "arguments": {
      "name": "my-web3-plugin",
      "description": "A Framer plugin with web3 features",
      "outputPath": "./plugins/my-web3-plugin",
      "web3Features": ["wallet-connect", "nft-display"]
    }
  },
  "id": 1
}

2. build_plugin: 构建 Framer 插件项目。