MCP Pmapp Base

MCP计数器POC-代码执行架构

概述

这是一个概念验证（POC），展示了 “使用MCP执行代码” 模式，使AI代理能够在服务器上执行JavaScript代码来控制外部应用程序。这种架构可以作为构建交互式、代理控制的应用程序的基础。

这个POC做什么？

该POC实现了 模型上下文协议（MCP）服务器 即：

1. 暴露a run_script AI代理工具（如Claude通过Gemini CLI）
2. 在沙盒环境中执行JavaScript代码
3. 通过WebSocket控制基于web的计数器应用程序
4. 将执行与前端动画同步

MCP计数器POC-代码执行架构

概述

这是一个概念验证（POC），展示了 “使用MCP执行代码” 模式，使AI代理能够在服务器上执行JavaScript代码来控制外部应用程序。这种架构可以作为构建交互式、代理控制的应用程序的基础。

这个POC做什么？

该POC实现了 模型上下文协议（MCP）服务器 即：

1. 暴露a run_script AI代理工具（如Claude通过Gemini CLI）
2. 在沙盒环境中执行JavaScript代码
3. 通过WebSocket控制基于web的计数器应用程序
4. 将执行与前端动画同步

关键功能：代理控制的UI

AI代理可以编写JavaScript代码，直接控制网络浏览器中显示的计数器，并暂停执行，直到动画完成，以确保流畅的用户体验。

建筑

graph TD
    User[User Mobile/Desktop] -->|HTTPS| Vercel[Vercel Frontend]
    Vercel -->|WebSocket| Tunnel[Localtunnel URL]
    Tunnel -->|Tunnel| LocalServer[Local Server :3000]
    LocalServer -->|MCP| Agent[AI Agent (Gemini)]
    LocalServer -->|Sandbox| VM[VM Context]

组件

1. server.js -MCP服务器，配备：

- Express web服务器（端口3000） - 用于实时通信的WebSocket服务器 - MCP服务器暴露 run_script 工具 - 用于安全代码执行的VM沙盒

1. index.html -前端（部署在Vercel上）具有：

- 实时计数器显示 - WebSocket客户端连接到本地隧道URL - 动画系统（每次更新延迟3秒） - 暂停/恢复控件

1. launcher.js -MCP集成启动器

- 生成物 server.js 有正确的环境 - 捕获错误日志以进行调试

“使用MCP执行代码”模式

传统方法（效率低下）

Agent calls: update_count(1)  → Server updates → Frontend shows 1
Agent waits...
Agent calls: update_count(2)  → Server updates → Frontend shows 2
Agent waits...
Agent calls: update_count(3)  → Server updates → Frontend shows 3

问题：多次往返代理商进行简单循环。

代码执行方法（高效）

Agent calls: run_script({
  code: `
    for (let i = 1; i <= 3; i++) {
      await update_count(i);
    }
  `
})

服务器执行整个循环，在每个循环暂停 update_count() 调用，直到前端动画完成。

利益：复杂的逻辑在单个代理轮中运行，减少了令牌使用和延迟。

运作原理

1. 代理生成代码

- Claude（或其他法学硕士）编写JavaScript来完成任务 - 通过发送代码 run_script MCP工具

1. 服务器在沙盒中执行

- 代码在VM上下文中运行，可以访问： - update_count(n)：更新计数器并暂停，直到前端确认 - console.log()：捕获返回给代理的日志 - setTimeout, Promise：用于延迟和异步操作

1. WebSocket同步

- 服务器向前端广播计数更新 - 前端显示动画（3秒延迟） - 前端发送 turn_complete 准备就绪时发出信号 - 服务器恢复脚本执行

1. 代理人收到结果

- 脚本日志和执行状态返回给代理 - 代理可以继续执行下一步操作

设置和使用

1.安装

npm install

2.后端和MCP设置

1. 启动本地后端：

   node server.js

1. 配置Gemini(.gemini/settings.json):

   {
     "mcpServers": {
       "pm-jarvis": {
         "command": "node",
         "args": ["C:\\path\\to\\project\\launcher.js"]
       }
     }
   }

3.移动接入（本地隧道）

要从移动设备访问应用程序，请暴露您的本地后端：

npx localtunnel --port 3000

• 复制URL（例如。， https://example.loca.lt).
• 重要提示： 请先在浏览器中访问此URL，然后输入您的IP作为密码。

4.前端（Vercel）

1. 部署到Vercel：

   vercel deploy --prod

1. 在您的设备上打开Vercel URL。
2. 首选 设置 并输入您的 Localtunnel 网址.

用例作为基础架构

该POC可适用于：

1. 代理控制的仪表板

• 用图表/图形替换计数器
• Agent基于数据分析更新可视化

2. 交互式表单和工作流

• 代理逐步填写表单
• 验证输入并处理错误

3. 实时通知

• 代理处理事件并更新UI
• 用户无需投票即可查看实时状态

4. 游戏控制器

• Agent通过执行移动序列来玩游戏
• UI更新反映游戏状态

5. 物联网设备控制

• 用物联网设备取代WebSocket前端
• 代理向硬件发送控制序列

许可证

麻省理工学院

参考文献

• Anthropic：使用MCP执行代码
• 模型上下文协议文档