使用说明
Figma MCP自动化
一个完整的模型上下文协议(MCP)实现,包括一个提供API端点的客户端服务器和一个提供计算器工具的MCP服务器。该系统支持开发过程中的自动重新加载,并将LLM功能与MCP工具调用集成在一起。
🏗️ 项目结构
figma-mcp-automation/
├── mcp-client/ # Express API server with MCP integration
│ ├── src/
│ │ ├── server.ts # Main Express server
│ │ ├── routes.ts # API route handlers
│ │ ├── services/
│ │ │ ├── mcp.ts # MCP client service
│ │ │ └── llm.ts # OpenAI LLM service
│ │ └── types.ts # TypeScript definitions
│ ├── package.json
│ └── nodemon.json # Auto-reload configuration
├── mcp-figma-server/ # MCP server with calculator tools
│ ├── src/
│ │ └── index.ts # MCP server implementation
│ ├── package.json
│ └── nodemon.json # Auto-reload configuration
├── dev-servers.ps1 # PowerShell script to start both servers
├── dev-servers.bat # Batch script to start both servers
└── kill-port-3000.ps1 # Utility to free port 3000
🚀 快速开始
选项1:自动设置(推荐)
# Windows PowerShell
.\dev-servers.ps1
# Windows Command Prompt
dev-servers.bat
选项2:手动设置
# Terminal 1 - Start MCP Server
cd mcp-figma-server
npm install
npm run dev
# Terminal 2 - Start MCP Client
cd mcp-client
npm install
npm run dev
📋 可用工具
MCP服务器工具
add-two-numbers-取两个数字之和- 参数:
number1(数字),number2(编号) - 返回值:两个数字之和
- 参数:
API终点
MCP客户端服务器(http://localhost:3000)
GET /health-健康检查端点GET /tools-列出可用的MCP工具POST /tools/call-直接调用任何MCP工具POST /chat-与LLM聊天(使用自动MCP工具调用)
🔧 API使用示例
健康检查
curl http://localhost:3000/health
列出可用工具
curl http://localhost:3000/tools
直接调用MCP工具
curl -X POST http://localhost:3000/tools/call \
-H "Content-Type: application/json" \
-d '{
"name": "add-two-numbers",
"args": {"number1": 5, "number2": 3}
}'
与LLM聊天(通过工具调用)
curl -X POST http://localhost:3000/chat \
-H "Content-Type: application/json" \
-d '{
"prompt": "What is 15 + 27?"
}'
⚙️ 配置
环境变量
创建 .env 两者中的文件 mcp-client/ 和 mcp-figma-server/ 目录:
mcp客户端/.env:
PORT=3000
OPENAI_API_KEY=your_openai_api_key_here
MCP_SERVER_PATH=../mcp-figma-server/build/index.js
mcp-figma服务器/.env:
# Add any server-specific environment variables here
🛠️ 发展
自动重新加载功能
两台服务器都支持在开发过程中自动重新加载:
- MCP客户端:手表
src/目录,文件更改时重新启动 - MCP服务器:手表
src/目录,在以下情况下重新启动.ts文件更改 - 智能检测:MCP客户端在以下情况下自动使用开发服务器
NODE_ENV=development
添加新的MCP工具
要向MCP服务器添加新工具,请编辑 mcp-figma-server/src/index.ts:
server.tool(
"your-tool-name",
"Description of what the tool does",
{
param1: z.number().describe("First parameter"),
param2: z.string().describe("Second parameter"),
},
async ({ param1, param2 }) => {
// Your tool logic here
const result = yourFunction(param1, param2);
return {
content: [
{
type: "text",
text: `Result: ${result}`,
},
],
};
},
);
添加新的API端点
要向MCP客户端添加新端点,请编辑 mcp-client/src/routes.ts:
router.post("/your-endpoint", async (req, res) => {
try {
const { param } = req.body;
// Your endpoint logic here
res.json({ success: true, result: "your result" });
} catch (error) {
res.status(500).json({ success: false, error: error.message });
}
});
📦 可用脚本
MCP客户端(mcp-client/)
npm run dev-使用自动重新加载启动开发服务器npm run build-将TypeScript构建为JavaScriptnpm start-启动生产服务器npm run server-直接用tsx启动服务器
MCP服务器(mcp-figma-server/)
npm run dev-使用自动重新加载启动开发服务器npm run build-将TypeScript构建为JavaScriptnpm start-启动生产服务器npm run server-直接用tsx启动服务器
🔍 故障排除
端口3000已在使用中
# Use the utility script
.\kill-port-3000.ps1
# Or manually check and kill
netstat -ano | findstr :3000
taskkill /PID <process_id> /F
MCP连接问题
- 确保两台服务器都在运行
- 检查客户端配置中的MCP服务器路径是否正确
- 验证MCP服务器是否已正确构建(
npm run build)
LLM集成问题
- 确保
OPENAI_API_KEY设置在环境中 - 检查OpenAI API密钥是否有效
- 验证与OpenAI API的网络连接
🏛️ 建筑
MCP客户端服务器
- Express.js 使用TypeScript的web服务器
- 模块化结构 服务和路线分开
- 载入 使用nodemon进行开发
- CORS已启用 用于跨来源请求
- 基于环境的配置
MCP服务器
- 模型上下文协议 服务器实现
- TypeScript 使用Zod模式验证
- 标准运输 用于客户端通信
- 载入 使用nodemon进行开发
- 可扩展工具系统
LLM集成
- OpenAI GPT-3.5涡轮增压 整合
- 自动工具调用 -LLM可以在需要时使用MCP工具
- 模式转换 -MCP工具模式转换为OpenAI函数格式
- 对话流程 -维护工具调用的正确消息历史记录
📄 许可证
该项目根据ISC许可证获得许可。
🤝 贡献
- 分叉存储库
- 创建要素分支
- 进行更改
- 彻底测试
- 提交拉取请求
📞 支持
对于问题和疑问:
- 检查故障排除部分
- 查看两个服务器窗口中的日志
- 确保安装了所有依赖项
- 验证环境变量是否设置正确
