AI导哈

Figma MCP反向代理服务器

一个Node.js反向代理服务器，允许多个客户端连接到共享的Figma MCP端点，实现团队协作和多设备访问。

  • by dongquoctien
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 dongquoctien/figma-mcp

使用说明

Figma MCP反向代理

一个Node.js反向代理服务器，允许多个客户端（Cursor、VSCode、Claude Desktop等）连接到共享的Figma MCP端点。

概述

此代理服务器充当MCP客户端和本地Figma MCP服务器之间的桥梁，允许您：

  • 与团队成员分享您的Figma MCP连接
  • 将多个MCP客户端连接到同一Figma实例
  • 从网络上的任何设备访问Figma MCP

先决条件

  • Node.js（v14或更高版本）
  • npm或纱线
  • Figma MCP服务器正在运行 http://127.0.0.1:3845/mcp

安装

  1. 克隆或下载此存储库

  2. 安装依赖项：

npm install
  1. （可选）创建 .env 要自定义配置的文件：
PORT=6969
TARGET_URL=http://127.0.0.1:3845

用法

启动代理服务器

npm start

您应该看到如下输出：

============================================================
Figma MCP Reverse Proxy Server Started
============================================================
Local:            http://localhost:6969
Network:          http://0.0.0.0:6969
Target MCP:       http://127.0.0.1:3845
============================================================
Ready to accept MCP connections from Cursor, VSCode, Claude, etc.
Press Ctrl+C to stop the server
============================================================

检查服务器运行状况

访问 http://localhost:6969/health 验证服务器是否正在运行。

连接MCP客户端

光标

  1. 打开光标设置
  2. 导航到“编辑器”或“MCP设置”
  3. 添加新的MCP服务器配置：
{
  "mcpServers": {
    "figma": {
      "url": "http://localhost:6969/mcp"
    }
  }
}

如果从网络上的另一台机器连接，请更换 localhost 使用您计算机的IP地址：

{
  "mcpServers": {
    "figma": {
      "url": "http://192.168.1.100:6969/mcp"
    }
  }
}

Visual Studio Code

  1. 安装MCP扩展
  2. 打开VSCode设置(.vscode/settings.json 或全局设置）
  3. 添加MCP服务器：
{
  "mcp.servers": {
    "figma": {
      "url": "http://localhost:6969/mcp"
    }
  }
}

克劳德桌面

  1. 打开Claude Desktop配置文件：

    • 窗户： %APPDATA%\Claude\claude_desktop_config.json
    • macOS： ~/Library/Application Support/Claude/claude_desktop_config.json
    • Linux： ~/.config/Claude/claude_desktop_config.json

  2. 添加Figma MCP服务器：

{
  "mcpServers": {
    "figma": {
      "url": "http://localhost:6969/mcp"
    }
  }
}
  1. 重新启动克劳德桌面

配置

代理服务器可以通过环境变量或 .env 文件：

变量 默认值 描述
PORT 6969 代理服务器监听的端口
TARGET_URL http://127.0.0.1:3845 Figma MCP服务器的URL

网络接入

本地网络共享

要允许本地网络上的其他设备连接，请执行以下操作：

  1. 查找您计算机的本地IP地址：

    • 窗户： ipconfig
    • macOS/Linux： ifconfig 或 ip addr

  2. 确保防火墙允许端口6969上的传入连接

  3. 与您的团队共享URL： http://YOUR_IP:6969/mcp

公共互联网共享（高级）

要在互联网上共享，您需要以下解决方案之一：

  1. 端口转发：配置路由器以将端口6969转发到您的计算机
  2. 隧道服务：使用ngrok、Cloudflare隧道或类似工具
  3. 虚拟专用网络：设置VPN以安全访问团队

⚠️ 安全警告：此代理没有身份验证。仅在受信任的网络中使用它，或者在暴露于互联网时添加身份验证。

故障排除

连接被拒绝

  • 验证Figma MCP服务器是否正在运行 http://127.0.0.1:3845
  • 检查端口6969是否已在使用中：更改 PORT 在 .env

MCP客户端无法连接

  • 验证代理服务器是否正在运行
  • 检查防火墙设置
  • 确保URL正确（使用IP地址进行网络共享）
  • 查看代理服务器日志以获取错误消息

502网关故障

  • Figma MCP服务器位于 http://127.0.0.1:3845 没有响应
  • 验证Figma MCP是否正在运行且可访问

WebSocket连接问题

  • 一些MCP功能使用WebSockets，此代理支持WebSockets
  • 检查您的网络/防火墙是否允许WebSocket连接

特性

  • ✅ 完全支持MCP协议
  • ✅ 服务器发送事件（SSE）流
  • ✅ WebSocket支持
  • ✅ 为所有来源启用CORS
  • ✅ 请求/响应日志记录
  • ✅ 健康检查端点
  • ✅ 优雅关闭
  • ✅ 零身份验证（开放访问）

技术细节

代理使用：

  • Express.js -Web服务器框架
  • http代理中间件 -反向代理功能
  • 跨域资源共享 -跨源资源共享
  • 支持MCP的服务器发送事件（SSE）用于流式响应
  • 实时功能的WebSocket升级支持

许可证

麻省理工学院

支持

如果您遇到问题：

  1. 检查代理服务器日志是否有错误
  2. 验证Figma MCP服务器是否可访问 http://127.0.0.1:3845
  3. 测试运行状况端点： http://localhost:6969/health

相关 MCP