模型上下文协议自动化工具

一个完整的模型上下文协议(MCP)实现,提供API端点的客户端服务器和提供计算工具MCP服务器,支持开发过程中的自动重载,并集成了LLM能力与MCP工具调用。

  • by MUHAMMAD-AZEEM-AZAM
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 muhammad-azeem-azam/mcp-server-client

使用说明

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构建为JavaScript
  • npm start -启动生产服务器
  • npm run server -直接用tsx启动服务器

MCP服务器(mcp-figma-server/)

  • npm run dev -使用自动重新加载启动开发服务器
  • npm run build -将TypeScript构建为JavaScript
  • npm 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连接问题

  1. 确保两台服务器都在运行
  2. 检查客户端配置中的MCP服务器路径是否正确
  3. 验证MCP服务器是否已正确构建(npm run build)

LLM集成问题

  1. 确保 OPENAI_API_KEY 设置在环境中
  2. 检查OpenAI API密钥是否有效
  3. 验证与OpenAI API的网络连接

🏛️ 建筑

MCP客户端服务器

  • Express.js 使用TypeScript的web服务器
  • 模块化结构 服务和路线分开
  • 载入 使用nodemon进行开发
  • CORS已启用 用于跨来源请求
  • 基于环境的配置

MCP服务器

  • 模型上下文协议 服务器实现
  • TypeScript 使用Zod模式验证
  • 标准运输 用于客户端通信
  • 载入 使用nodemon进行开发
  • 可扩展工具系统

LLM集成

  • OpenAI GPT-3.5涡轮增压 整合
  • 自动工具调用 -LLM可以在需要时使用MCP工具
  • 模式转换 -MCP工具模式转换为OpenAI函数格式
  • 对话流程 -维护工具调用的正确消息历史记录

📄 许可证

该项目根据ISC许可证获得许可。

🤝 贡献

  1. 分叉存储库
  2. 创建要素分支
  3. 进行更改
  4. 彻底测试
  5. 提交拉取请求

📞 支持

对于问题和疑问:

  1. 检查故障排除部分
  2. 查看两个服务器窗口中的日志
  3. 确保安装了所有依赖项
  4. 验证环境变量是否设置正确