混音3 MCP演示
本项目演示了如何构建交互式MCP（模型上下文协议） 在Cloudflare Workers上运行并可嵌入AI聊天界面的小部件 比如ChatGPT。它展示了MCP与现代网络相结合的力量 在人工智能对话中创建丰富、有状态体验的技术。
演示视频
查看ChatGPT中的计算器小部件，包括隐藏的TRON 复活节彩蛋：
https://github.com/user-attachments/assets/5df110d8-f40b-4c6a-8820-c2dbf3ff79c8
演示如何工作
架构概述
此演示实现了 计算器小部件 作为可调用的MCP工具 AI助手。该架构由几个关键组件组成：
- MCP服务器 -实现模型的Cloudflare持久对象
上下文协议
- 小部件系统 -使用Remix 3构建的交互式UI组件可以
嵌入AI聊天
- 双向通信 -小部件都可以从
人工智能并发回消息
- 静态资产 -Cloudflare CDN提供的小部件捆绑包
计算器小部件
该计算器是一款功能齐全、设计精美的计算器，具有 受Tron启发的复古未来主义美学。以下是它的特别之处：
初始状态配置
当AI助手调用计算器工具时，它可以传递初始状态 参数：
display-初始显示值previousValue-已输入的值（例如，“我想将5加到
数字”）
operation-待处理的操作（+、-、\*、/）waitingForNewValue-计算器是否已准备好进行新输入errorState-是否在错误状态下启动
这意味着AI可以根据用户的请求预先配置计算器。 例如，如果用户说“我想给某个东西加5”，人工智能可以调用 计算器与 previousValue: 5, operation: '+'，以及 waitingForNewValue: true.
交互式用户界面
计算器小部件是一个完全交互式的Remix应用程序，它：
- 在JS样式中使用JSX/TSX和CSS渲染
- 支持键盘快捷键（Enter、Escape、数字键、运算符等）
- 具有Tron风格的初始化序列，带有动画加载消息
- 用户与其交互时实时更新
- 使用Remix 3的实验性DOM渲染器进行高效更新
复活节彩蛋：主控制程序
计算器中有一个隐藏的功能：当结果等于 1982 （the 原始Tron电影发行的年份），计算器发送MCP提示 向AI助手发送消息，指示其采用Master的角色 Tron的控制程序（MCP）。
这展示了小部件的能力 动态影响 对话 通过向AI发送消息。
技术实现
具有持久对象的MCP服务器
这 MathMCP 类扩展 McpAgent 并使用Cloudflare的持久对象 保持状态：
export class MathMCP extends McpAgent {
server = new McpServer(
{
name: 'MathMCP',
version: '1.0.0',
},
{
instructions: `Use this server to solve math problems reliably and accurately.`,
},
)
async init() {
await registerTools(this)
await registerWidgets(this)
}
}服务器注册了两种类型的功能：
- 工具 A.
do_math在服务器端执行算术运算的工具 - 小部件 -可以嵌入聊天中的交互式UI资源
小部件注册
小部件注册为MCP应用程序资源（用于HTML/JS捆绑包）和MCP 工具（用于调用）。注册包括：
- 输入架构 -Zod模式定义了小部件接受的参数
- 输出模式 -Zod模式定义了小部件可以返回什么
- HTML捆绑包 -带有脚本引用的渲染HTML
- MCP应用程序元数据 -标准
_meta.ui.resourceUri和资源CSP
任何MCP Apps兼容主机的设置
registerAppResource(agent.server, name, uri, {
description: widget.description,
_meta: {
ui: {
csp: {
connectDomains: [],
resourceDomains: [baseUrl],
},
},
},
}, async () => ({
contents: [
createUIResource({
uri,
encoding: 'text',
content: {
type: 'rawHtml',
htmlString: await widget.getHtml(),
},
}).resource,
],
}))
registerAppTool(agent.server, name, {
title: widget.title,
description: widget.description,
inputSchema: widget.inputSchema,
outputSchema: widget.outputSchema,
_meta: {
ui: { resourceUri: uri },
},
}, handler)单独构建过程
该项目使用两个单独的构建过程：
- 小部件构建 （Vite）-将计算器UI构建为独立的JavaScript
捆绑包
- 输入： worker/widgets/calculator/index.tsx - 输出： dist/public/widgets/calculator.js - 格式：捆绑了所有依赖项的ES模块
- 工人建设 （牧马人）-使用MCP服务器构建Cloudflare Worker
- 输入： worker/index.tsx - 输出：部署到Cloudflare的Worker捆绑包 - 包括：MCP协议处理程序、工具注册、小部件服务
通信协议
小部件使用 MCP应用程序JSON-RPC桥(ui/* 方法）通过 App 类别：
- 初始化 -小部件调用
ui/initialize和App.connect() - 工具输入 -主机发送
ui/notifications/tool-input - 工具调用 -小部件调用
tools/call通过app.callServerTool() - 消息 -小部件发送
ui/message通过app.sendMessage() - 链接 -小部件请求
ui/open-link通过app.openLink()
const app = new App({ name: 'calculator-widget', version: '1.0.0' })
app.ontoolinput = ({ arguments: toolInput }) => {
console.log('toolInput', toolInput)
}
await app.connect()
// Widget sends a prompt to the AI
await app.sendMessage({
role: 'user',
content: [{ type: 'text', text: MCP_PROMPT }],
})用户体验
以下是用户在ChatGPT中与此MCP服务器交互时发生的情况：
- 用户问：“我能得到一个计算器吗？”
- ChatGPT调用
calculator通过MCP工具 - 工具元数据通过以下方式链接到UI资源
_meta.ui.resourceUri - ChatGPT获取
ui://资源，在iframe中呈现小部件，以及
通过发送工具输入 ui/notifications/tool-input
- 小部件加载后，显示Tron风格的初始化序列，然后显示
计算器
- 用户与计算器交互（点击按钮或使用键盘）
- 如果结果为1982，则小部件会向ChatGPT发送一个提示
- ChatGPT采用MCP角色并相应地做出响应
自己跑步
先决条件
- Node.js（v18或更高版本）
- npm或纱线
- Cloudflare帐户（用于部署）
本地开发
- 克隆并安装
npm install- 启动开发服务器
npm run dev这同时运行两个进程：
- 手表模式下的小部件构建（Vite） - 拿着当地耐用物品的工人（牧马人）
- 测试计算器小部件
访问 http://localhost:8787/__dev/widgets 在中查看计算器小部件 隔离。
- 连接到MCP检查器
使用MCP检查器测试MCP服务器：
npm run inspect然后连接到 http://localhost:8787/mcp 在检查员。
部署
- 为生产而建
npm run build- 部署到Cloudflare
npm run deploy- 与ChatGPT一起使用
部署后，您可以通过提供以下内容将此MCP服务器添加到ChatGPT 部署URL+ /mcp 终点。
项目结构
├── worker/
│ ├── index.tsx # Main worker entry point
│ ├── tools.ts # MCP tool definitions (do_math)
│ ├── widgets.tsx # Widget registration system
│ ├── utils.ts # CORS and utility functions
│ └── widgets/
│ ├── utils.ts # Widget communication utilities
│ └── calculator/
│ ├── index.tsx # Calculator UI component
│ ├── calculator.ts # Calculator business logic
│ └── mcp-prompt.ts # The MCP easter egg prompt
├── dist/
│ └── public/
│ └── widgets/
│ └── calculator.js # Built calculator bundle
├── vite.config.widgets.ts # Vite config for widget builds
└── wrangler.jsonc # Cloudflare Workers config关键技术
- Cloudflare员工 -边缘计算
平台
- 耐用物品 -
有状态的协调原语
- 模型上下文协议 -协议
人工智能服务通信
- 混音3 -React框架（实验DOM
渲染器）
环境和配置
这 wrangler.jsonc 配置：
- 持久对象绑定(
MATH_MCP_OBJECT) - 服务小部件捆绑包的资产绑定
- MCP SDK的Node.js兼容性
- 生产监控的可观察性
开发技巧
- 小工具开发：小部件代码的更改将自动热重新加载
- 员工变动：Wrangler将在文件更改时重新启动worker
- 类型安全：运行
npm run typecheck验证TypeScript - 代码检查：运行
npm run lint检查代码样式
学分
此演示展示了尖端的网络技术，包括实验性的Remix 3 功能、MCP小部件和Cloudflare的边缘计算平台。计算器 该设计以其独特的橙色光芒向Tron的美学致敬 复古未来主义风格。