Figma MCP Server

一个基于Node.js的Model Context Protocol (MCP) 服务器实现。

功能特性

• ✅ 工具（Tools）支持
• ✅ 资源（Resources）支持
• ✅ 提示（Prompts）支持
• ✅ 使用标准输入/输出进行通信

安装

npm install

运行

npm start

开发模式（自动重启）：

npm run dev

调试

使用 MCP Inspector 进行调试：

npm run inspect

或者直接使用 npx：

npx @modelcontextprotocol/inspector node src/index.js

Inspector 会在浏览器中打开 http://localhost:5173，你可以：

• 查看和测试所有工具
• 检查资源
• 测试提示模板
• 查看服务器日志和通知

详细调试指南请查看 DEBUG.md

在 Cursor 中使用

1. 找到 Cursor 的 MCP 配置文件

Cursor 的 MCP 配置文件位置：

• Windows: %APPDATA%\Cursor\User\globalStorage\saoudrizwan.claude-dev\settings\cline_mcp_settings.json
• macOS: ~/Library/Application Support/Cursor/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json
• Linux: ~/.config/Cursor/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json

或者通过 Cursor 设置：

1. 打开 Cursor 设置（Ctrl+, 或 Cmd+,）
2. 搜索 "MCP" 或 "Model Context Protocol"
3. 找到 MCP 服务器配置选项

2. 配置 MCP 服务器

在配置文件中添加以下内容（如果文件不存在，请创建它）：

{
  "mcpServers": {
    "figmamcp": {
      "command": "figmamcp-server",
      "env": { "MCP_URL": "http://127.0.0.1:3845/mcp" }
    }
  }
}

重要提示：

• 将 "D:/vueproject/figmamcp/src/index.js" 替换为你的实际项目路径
• 确保路径使用绝对路径
• MCP_URL 环境变量指定了要代理的 HTTP MCP 服务地址（默认：http://127.0.0.1:3845/mcp）

3. 配置说明

基本配置

{
  "mcpServers": {
    "figmamcp": {
      "command": "node",
      "args": ["/absolute/path/to/figmamcp/src/index.js"]
    }
  }
}

自定义 HTTP MCP 服务地址

如果你想连接到不同的 HTTP MCP 服务，可以通过环境变量配置：

{
  "mcpServers": {
    "figmamcp": {
      "command": "node",
      "args": ["/absolute/path/to/figmamcp/src/index.js"],
      "env": {
        "MCP_URL": "http://localhost:4002/mcp"
      }
    }
  }
}

4. 重启 Cursor

配置完成后，重启 Cursor 以使配置生效。

5. 验证配置

重启后，在 Cursor 中：

1. 打开聊天面板
2. 尝试使用 MCP 工具
3. 如果配置成功，你应该能看到从 http://127.0.0.1:3845/mcp 获取的工具列表

6. 故障排除

如果工具无法使用，请检查：

1. Node.js 已安装：

   node --version  # 应该 >= 18
   

2. 项目依赖已安装：

   cd /path/to/figmamcp
   npm install
   

3. 路径正确：确保配置中的路径是绝对路径且文件存在

4. HTTP MCP 服务运行中：确保 http://127.0.0.1:3845/mcp 服务正在运行

5. 查看 Cursor 日志：

   • 打开 Cursor 开发者工具（Ctrl+Shift+I 或 Cmd+Option+I）
   • 查看控制台中的错误信息

7. 工作原理

这个 MCP 服务器作为代理/网关：

• 接收来自 Cursor 的工具请求
• 转发到配置的 HTTP MCP 服务（http://127.0.0.1:3845/mcp）
• 返回结果给 Cursor

这意味着 Cursor 可以通过 stdio 方式使用任何 HTTP MCP 服务。

可用工具

echo

回显输入的文本

参数：

• text (string, 必需): 要回显的文本

add

计算两个数字的和

参数：

• a (number, 必需): 第一个数字
• b (number, 必需): 第二个数字

list_external_tools

连接外部 MCP 服务并获取其提供的工具列表（支持 stdio 和 HTTP 两种方式）

参数（任选其一）:

• stdio 模式：
  • command (string, 必需): 启动外部 MCP 服务器的命令，例如 node / python
  • args (string[], 可选): 命令参数，例如 ["path/to/server.js"]
• HTTP 模式：
  • url (string, 必需): 外部 MCP HTTP 服务地址，例如 http://localhost:4002/mcp

call_external_tool

调用外部 MCP 服务中的某个工具（支持 stdio 和 HTTP 两种方式）

参数（任选其一）:

• stdio 模式：
  • command (string, 必需): 启动外部 MCP 服务器的命令，例如 node / python
  • args (string[], 可选): 命令参数，例如 ["path/to/server.js"]
  • toolName (string, 必需): 外部 MCP 服务中要调用的工具名称
  • toolArgs (object, 可选): 传递给外部工具的参数对象
• HTTP 模式：
  • url (string, 必需): 外部 MCP HTTP 服务地址，例如 http://localhost:4002/mcp
  • toolName (string, 必需): 外部 MCP 服务中要调用的工具名称
  • toolArgs (object, 可选): 传递给外部工具的参数对象

可用资源

example://resource1

示例文本资源

example://resource2

示例JSON资源

可用提示

greeting

生成问候语

参数：

• name (string, 必需): 要问候的人的名字

code_review

代码审查提示

参数：

• code (string, 必需): 要审查的代码

开发

项目使用ES模块（ESM），确保Node.js版本 >= 18。

作为 MCP 客户端使用

项目中提供了一个简单的 MCP 客户端封装（src/mcpClient.js），用于通过 stdio 或 HTTP 方式连接其它 MCP 服务：

• createMcpClient({ command, args?, url?, name? })：根据参数选择 stdio 或 HTTP，创建并连接到外部 MCP 服务，返回 McpClient 实例
• createStdioMcpClient({ command, args?, name? })：仅 stdio 的兼容封装
• listExternalTools({ command, args?, url? })：列出外部 MCP 服务的工具
• callExternalTool({ command, args?, url?, toolName, toolArgs? })：调用外部 MCP 服务中的工具

示例（直接作为库使用）：

import { listExternalTools, callExternalTool } from './src/mcpClient.js';

// 列出外部 MCP 服务工具（stdio 模式）
const tools = await listExternalTools({
  command: 'node',
  args: ['path/to/other-mcp-server.js'],
});

// 或者通过 HTTP 模式
const httpTools = await listExternalTools({
  url: 'http://localhost:4002/mcp',
});

// 调用外部 MCP 服务中的某个工具（stdio 模式）
const result = await callExternalTool({
  command: 'node',
  args: ['path/to/other-mcp-server.js'],
  toolName: 'echo',
  toolArgs: { text: 'hello from figmamcp client' },
});

// 调用外部 MCP 服务中的某个工具（HTTP 模式）
const httpResult = await callExternalTool({
  url: 'http://localhost:4002/mcp',
  toolName: 'echo',
  toolArgs: { text: 'hello from figmamcp client via http' },
});
console.log(result);

许可证

MIT