AI导哈

AI代理API交互对比工具

一个比较两种AI代理与API交互方法的工具，基于Cloudflare Workers构建，适用于开发者评估不同AI代理范式。

  • by rita3ko
  • TypeScript
  • 本地部署
  • 5 星标
  • 更新于
在 GitHub 查看 rita3ko/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 ..

  2. 设置环境变量：

    # 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

  3. 启动服务器：

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

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

  4. 打开演示： 访问 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后端，因此一个代理创建的事件对另一个代理可见。

许可证

麻省理工学院

相关 MCP