Demo MCP Frontend MCP

MCP演示2-电子支付查看器

与电子应用程序集成的MCP服务器，可自动打开付款结账页面。

特性

• 🚀 自动打开结账：当你要求克劳德“为一瓶可乐支付2英镑”时，它会生成付款并在Electron应用程序中自动打开
• 🪟 本机窗口：Electron窗口为支付提供原生应用体验
• 🔐 安全：使用TrulyYou密钥身份验证进行支付
• 🏦 银行一体化：通过VRP授权连接您的银行账户

安装

cd /Users/roryspies/Development/truly-new/demos/mcp-demo-2/mcp-electron
npm install

配置

添加到您的Claude桌面配置(~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "mcp-demo-2-payment": {
      "command": "npm",
      "args": [
        "--silent",
        "run",
        "mcp",
        "--prefix",
        "/Users/roryspies/Development/truly-new/demos/mcp-demo-2/mcp-electron"
      ],
      "env": {
        "APP_SERVER_URL": "http://localhost:3022",
        "APP_FRONTEND_URL": "http://localhost:3021"
      }
    }
  }
}

重要：确保您的后端服务器正在运行：

• app-server 在端口3022上
• app-frontend 在端口3021上

添加配置后重新启动Claude Desktop。

用法

配置后，您可以使用Claude进行付款：

示例1：简单付款

User: pay 2 quid for a bottle of coke
Claude: [Generates payment and opens Electron window automatically]

示例2：自定义金额

User: create a payment for £25.50 for coffee subscription
Claude: [Opens payment viewer with the details]

示例3：打开现有的结账URL

User: open this checkout: http://localhost:3021/checkout?paymentId=...
Claude: [Opens the URL in the payment viewer]

可用工具

1. make_payment

生成付款请求并在Electron付款查看器中自动打开。

参数：

• amount （数字，必填）：付款金额（英镑）
• currency （字符串，可选）：货币代码（默认值：“GBP”）
• description （字符串，必填）：付款说明

2. open_checkout

在付款查看器窗口中打开结账URL。

参数：

• url （字符串，必填）：要打开的签出URL

3. focus_payment_window

将支付查看器窗口置于前面。

建筑

┌─────────────┐
│   Claude    │
│   Desktop   │
└──────┬──────┘
       │ (MCP Protocol)
       │
┌──────▼──────────────────────────┐
│  MCP Server (index.js)          │
│  ├─ mcp-server.js               │
│  │  └─ Handles payment tools    │
│  └─ electron-main.js             │
│     └─ Manages Electron window  │
└──────┬──────────────────────────┘
       │
       │ Opens URL
       │
┌──────▼──────────────────────────┐
│  Electron BrowserWindow         │
│  └─ Loads checkout page         │
│     └─ http://localhost:3021/   │
│        checkout?paymentId=...   │
└─────────────────────────────────┘

发展

在没有MCP的情况下直接测试Electron应用程序：

npm run dev

运行完整的MCP服务器+Electron：

npm run mcp

运作原理

1. 用户询问Claude：“花2英镑买一瓶可乐”
2. 克劳德打电话来 make_payment 具有解析参数的工具
3. MCP服务器 向发送请求 app-server 在 /api/mcp/generate-payment
4. APP服务器 创建付款并返回结账URL
5. MCP服务器 电话 operations.openCheckout.tool(url)
6. 电子 在BrowserWindow中打开签出URL
7. 用户 使用密钥进行身份验证，并在本机窗口中完成支付

故障排除

电子窗打不开

• 检查Claude Desktop是否有权启动应用程序
• 试着跑步 npm run dev 直接测试Electron应用程序
• 检查Claude Desktop日志是否有错误

“无法连接到应用服务器”

• 确保 app-server 正在端口3022上运行
• 检查 APP_SERVER_URL Claude配置中的环境变量

付款页面未加载

• 确保 app-frontend 正在端口3021上运行
• 在浏览器控制台中检查CORS问题
• 验证签出URL是否正确

许可证

麻省理工学院