MCP Demo Night

MCP夜间演示：MCP与Codemode

基于Cloudflare Workers构建的两种与API交互的AI代理方法的并排比较。

现场演示： https://fluma-demo.rita.workers.dev

概述

此演示比较了AI代理的两种不同范式：

MCP代理（传统）

AI模型直接调用MCP工具。每个工具调用都是模型决定进行的单独函数调用。

User: "Create an event for tomorrow"
    ↓
AI Model → calls create_event tool → gets result → responds to user

代码模式代理（代码优先）

人工智能模型生成JavaScript代码，调用类型化的API。代码在沙盒环境中执行。

User: "Create an event for tomorrow"
    ↓
AI Model → generates JS code → code executes in sandbox → responds to user

建筑

┌─────────────────────────────────────────────────────────────┐
│                     demo-agent                               │
│  ┌─────────────────┐         ┌─────────────────┐           │
│  │   MCP Agent     │         │  Codemode Agent │           │
│  │                 │         │                 │           │
│  │ Calls MCP tools │         │ Generates code  │           │
│  │ directly        │         │ executed in     │           │
│  │                 │         │ dynamic workers │           │
│  └────────┬────────┘         └────────┬────────┘           │
│           │                           │                     │
│           └───────────┬───────────────┘                     │
│                       │                                     │
│                       ▼                                     │
│            ┌─────────────────┐                              │
│            │  Fluma MCP      │                              │
│            │  (Shared DO)    │                              │
│            │                 │                              │
│            │  SQLite DB for  │                              │
│            │  events, RSVPs  │                              │
│            └─────────────────┘                              │
└─────────────────────────────────────────────────────────────┘

项目结构

mcp-night-demo/
├── fluma/              # MCP server for event management
│   └── src/
│       ├── index.ts    # MCP tools and server setup
│       └── db/         # SQLite schema
│
├── demo-agent/         # Comparison UI and agents
│   ├── src/
│   │   ├── mcp-agent.ts      # Traditional MCP approach
│   │   ├── codemode-agent.ts # Code generation approach
│   │   └── tools.ts          # MCP tool definitions
│   └── public/
│       └── index.html        # Side-by-side UI
│
└── README.md

快速开始

先决条件

• Node.js 18+
• Cloudflare帐户
• 牧马人CLI(npm install -g wrangler)

地方发展

1. 克隆并安装：

   git clone https://github.com/YOUR_USERNAME/mcp-night-demo.git
   cd mcp-night-demo

   # Install dependencies for both projects
   cd fluma && npm install && cd ..
   cd demo-agent && npm install && cd ..

1. 设置环境变量：

   # In demo-agent/.dev.vars
   CF_ACCOUNT_ID=your_account_id
   CF_GATEWAY_ID=your_gateway_id
   CF_AIG_TOKEN=your_ai_gateway_token
   FLUMA_MCP_URL=http://localhost:8788/sse

1. 启动服务器：

   # Terminal 1 - Fluma MCP server
   cd fluma && npm run dev

   # Terminal 2 - Demo agent
   cd demo-agent && npm run dev

1. 打开演示：

访问 http://localhost:8787

部署

# Deploy Fluma
cd fluma && npm run deploy

# Set secrets for demo-agent
cd demo-agent
wrangler secret put CF_ACCOUNT_ID
wrangler secret put CF_GATEWAY_ID
wrangler secret put CF_AIG_TOKEN

# Deploy demo-agent
npm run deploy

技术栈

• 运行时间： Cloudflare Workers+持久对象
• 人工智能： Claude通过Cloudflare AI网关（AI SDK v5）
• MCP： 具有HTTP流传输的模型上下文协议
• 代码执行： Cloudflare动态工作加载程序
• 数据库： SQLite（通过持久对象）
• 框架： 代理 用于聊天基础设施

运作原理

MCP代理

1. 接收用户消息
2. Claude决定调用哪个MCP工具
3. 工具针对Fluma API执行
4. 克劳德总结了结果

代码模式代理

1. 接收用户消息
2. Claude生成Types/JavaScript代码
3. 代码在沙盒动态worker中执行
4. 工人呼叫Fluma的MCP API
5. Claude总结执行结果

两个代理共享相同的Fluma后端，因此一个代理创建的事件对另一个代理可见。

许可证

麻省理工学院