🎨 人工智能绘图猜测器-MCP应用程序
一个交互式绘图游戏，你在其中绘制一些东西，克劳德（或任何支持MCP的AI）试图实时猜测你在画什么！
该项目展示了 MCP应用程序扩展 (1865年9月)，展示：
- 从MCP服务器提供的交互式HTML UI
- UI和主机之间的双向通信
- 使用React实时绘制画布
- 主题感知样式（亮/暗模式）
- 模型上下文更新
特性
- 🖌️ 画布：流畅的手绘，支持触摸和鼠标
- 🎨 调色板：草图有多种颜色可供选择
- 🤖 人工智能猜测：让人工智能分析你的图纸并猜测它是什么
- 🔄 撤消/清除：轻松修复错误或重新开始
- 🌓 主题支持：自动适应主机的亮/暗主题
- ✨ 实时更新：绘制时模型上下文会更新
入门指南
安装
npm install建筑
# Build both the React app and MCP server
npm run build
# Or build individually
npm run build:app # Build React app
npm run build:server # Build MCP server发展
# Watch mode for server (rebuilds on changes)
npm run watch
# In another terminal, rebuild app when needed
npm run build:app测试应用程序
选项1：使用克劳德桌面
将此配置添加到您的Claude Desktop配置文件中：
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json 视窗: %APPDATA%\Claude\claude_desktop_config.json
{
"mcpServers": {
"drawing-guesser": {
"command": "node",
"args": ["/absolute/path/to/mcp-apps/dist/server/index.js"]
}
}
}然后重新启动Claude Desktop并尝试：
- “我们来玩绘画游戏吧！”
- “启动AI绘图猜测器”
- “我想画点东西让你猜”
选项2：使用MCP检查器
调试和开发：
# Install MCP Inspector globally
npm install -g @modelcontextprotocol/inspector
# Run with the inspector
npx @modelcontextprotocol/inspector node dist/server/index.js选项3：使用基本主机（来自ext应用程序仓库）
克隆 ext应用程序 存储库：
git clone https://github.com/modelcontextprotocol/ext-apps.git
cd ext-apps
npm install
npm start然后打开 http://localhost:8080 并添加您的服务器。
运作原理
建筑
┌─────────────────────┐
│ MCP Host (AI) │
│ (Claude, etc) │
└──────────┬──────────┘
│ MCP Protocol
│ (JSON-RPC)
┌──────────▼──────────┐
│ MCP Server │
│ (Node.js) │
│ - Tools │
│ - UI Resources │
└──────────┬──────────┘
│ HTML + postMessage
│
┌──────────▼──────────┐
│ React App │
│ (Sandboxed) │
│ - Canvas │
│ - MCP Client SDK │
└─────────────────────┘关键组件
MCP服务器 (服务器/index.ts)
- 寄存器
ui://drawing-guesser/canvasUI资源 - 提供
analyze_drawingAI分析工具 - 提供
get_hint绘图建议工具 - 提供构建的React应用程序HTML
React应用程序 (src/绘图游戏.tsx)
- 用途
useApp()钩子从@modelcontextprotocol/ext-apps/react - 带指针事件的画布绘图（触摸+鼠标）
- 呼叫
app.callServerTool()分析图纸 - 使用图形状态更新模型上下文
- 处理主机的主题更改
通信流
- 用户抽奖 → 画布在本地更新
- 取消公告 →
app.updateModelContext()通知AI绘图进度 - 用户点击“让AI猜” →
app.callServerTool('analyze_drawing', {...}) - 服务器进程 → 返回带有置信度分数的猜测
- UI显示结果 → 用户确认或保留图纸
- 正确的猜测 →
app.sendMessage()继续对话
项目结构
mcp-apps/
├── server/
│ └── index.ts # MCP server implementation
├── src/
│ ├── DrawingGame.tsx # Main React component
│ ├── main.tsx # React entry point
│ └── styles.css # Theme-aware styles
├── dist/
│ ├── app/
│ │ └── index.html # Built React app (single file)
│ └── server/
│ └── index.js # Compiled server
├── index.html # Vite entry point
├── vite.config.ts # Vite bundler config
├── tsconfig.json # TypeScript config (app)
├── tsconfig.server.json # TypeScript config (server)
└── package.json使用的技术
扩展应用程序
添加Real Vision API
替换模拟分析 server/index.ts:
import OpenAI from 'openai';
async function analyzeDrawing(imageData: string) {
const openai = new OpenAI();
const response = await openai.chat.completions.create({
model: 'gpt-4o',
messages: [{
role: 'user',
content: [
{ type: 'text', text: 'What is this drawing? Give me 5 guesses with confidence scores.' },
{ type: 'image_url', image_url: { url: imageData } }
]
}]
});
// Parse and return guesses
}添加更多功能
- 多人游戏：多个用户一起绘图
- 时间限制：速写挑战
- 分类：选择要绘制的内容
- 难度等级：简单对象vs复杂对象
- 绘图历史：保存和重放图形
- 评分系统：跟踪正确的猜测
自定义用户界面
编辑 src/styles.css 更改：
- 颜色和主题
- 画布大小
- 按钮样式
- 布局和间距
故障排除
构建失败
# Clean and reinstall
rm -rf node_modules dist
npm install
npm run build服务器未启动
- 检查构建是否已完成：
dist/server/index.js存在 - 检查节点版本：
node --version（需要v18+） - 查找错误：
node dist/server/index.js --stdio
UI未加载
- 验证HTML是否存在：
dist/app/index.html - 检查浏览器控制台是否有错误
- 确保CSP允许所需的资源
绘图不起作用
- 检查指针事件是否启用
- 验证画布大小是否正确
- 在不同浏览器/设备上进行测试
资源
许可证
麻省理工学院
贡献
欢迎投稿！请随意：
- 报告错误
- 建议功能
- 提交拉取请求
- 分享您的图纸！ 🎨
______________________________________________________________________
建于❤️ 使用MCP应用程序扩展