MCP计数器POC-代码执行架构
概述
这是一个概念验证（POC），展示了 “使用MCP执行代码” 模式，使AI代理能够在服务器上执行JavaScript代码来控制外部应用程序。这种架构可以作为构建交互式、代理控制的应用程序的基础。
这个POC做什么？
该POC实现了 模型上下文协议（MCP）服务器 即：
- 暴露a
run_scriptAI代理工具（如Claude通过Gemini CLI） - 在沙盒环境中执行JavaScript代码
- 通过WebSocket控制基于web的计数器应用程序
- 将执行与前端动画同步
MCP计数器POC-代码执行架构
概述
这是一个概念验证（POC），展示了 “使用MCP执行代码” 模式，使AI代理能够在服务器上执行JavaScript代码来控制外部应用程序。这种架构可以作为构建交互式、代理控制的应用程序的基础。
这个POC做什么？
该POC实现了 模型上下文协议（MCP）服务器 即：
- 暴露a
run_scriptAI代理工具（如Claude通过Gemini CLI） - 在沙盒环境中执行JavaScript代码
- 通过WebSocket控制基于web的计数器应用程序
- 将执行与前端动画同步
关键功能：代理控制的UI
AI代理可以编写JavaScript代码，直接控制网络浏览器中显示的计数器，并暂停执行，直到动画完成，以确保流畅的用户体验。
建筑```mermaid
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
问题：多次往返代理商进行简单循环。
代码执行方法（高效）```javascript
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.安装```bash
npm install
2.后端和MCP设置
- 启动本地后端：```bash
node server.js
1. 配置Gemini(`.gemini/settings.json`):```json
{
"mcpServers": {
"pm-jarvis": {
"command": "node",
"args": ["C:\\path\\to\\project\\launcher.js"]
}
}
}
3.移动接入（本地隧道）
要从移动设备访问应用程序，请暴露您的本地后端：```bash
npx localtunnel --port 3000
- 复制URL（例如。， `https://example.loca.lt`).
- **重要提示：** 请先在浏览器中访问此URL，然后输入您的IP作为密码。
### 4.前端（Vercel）
1. 部署到Vercel：```bash
vercel deploy --prod
- 在您的设备上打开Vercel URL。
- 首选 设置 并输入您的 Localtunnel 网址.
用例作为基础架构
该POC可适用于：
1. 代理控制的仪表板
- 用图表/图形替换计数器
- Agent基于数据分析更新可视化
2. 交互式表单和工作流
- 代理逐步填写表单
- 验证输入并处理错误
3. 实时通知
- 代理处理事件并更新UI
- 用户无需投票即可查看实时状态
4. 游戏控制器
- Agent通过执行移动序列来玩游戏
- UI更新反映游戏状态
5. 物联网设备控制
- 用物联网设备取代WebSocket前端
- 代理向硬件发送控制序列
许可证
麻省理工学院
参考文献
- Anthropic：使用MCP执行代码
- 模型上下文协议文档
