MCP Apps Todo

MCP应用程序Todo

MCP应用程序（旧SEP-1865）的Todo应用程序。可以从Claude Desktop和Claude Code等MCP客户端操作Todo对话中显示交互式用户界面的特征。

\[！警告\] 这是个人学习和练习的资料库。未实施任何安全措施，包括认证和授权。不适合在生产环境中使用。

什么是MCP Apps

通常的MCP工具只有文本的输入输出，但是使用MCP Apps的话 在工具运行时在对话中嵌入丰富的用户界面中所述修改相应参数的值。

在这个应用程序中，如果请求Claude“让我看Todo”，除了文本应答之外，还会显示可操作的Todo列表UI。您可以直接在用户界面上添加、完成和删除Todo，并立即将结果反映到服务器上。

技术栈

层/技术 |---------|------| 前端（React19+TanStack Start+Tailwind CSS） ｜MCP服务器｜ @modelcontextprotocol/sdk + @modelcontextprotocol/ext-apps | 在MCP中的UI（构建并嵌入到单个HTML中） 数据库+1（SQLite）+Drizzle ORM \[主机\]

体系结构

┌──────────────┐      ┌───────────────────────────┐      ┌──────────┐
│ Claude       │◄────►│  Cloudflare Workers        │      │          │
│ Desktop/Code │ MCP  │  ┌──────────┐ ┌─────────┐ │      │ D1       │
│              │      │  │MCP Server│ │ Web UI  │ │◄────►│ Database │
└──────────────┘      │  └──────────┘ └─────────┘ │      │          │
                      └───────────────────────────┘      └──────────┘
                           ▲
┌──────────────┐           │
│ ブラウザ      │◄──────────┘
│ (Web UI)     │   HTTP
└──────────────┘

• /mcp -可流HTTP
• / --Web用户界面（SSR）

MCP工具

工具｜说明｜ |--------|------| | list_todos 获取Todo列表 | add_todo 添加Todo | update_todo 更新Todo | complete_todo ｜完成/未完成的切换｜ | delete_todo 删除Todo

所有工具都有MCP Apps的UI元数据，对应的客户端将显示交互式UI。

安装，安装

前提条件

• 包子
• 牧马人CLI （Cloudflare员工）

本地开发

# 依存関係のインストール
bun install

# ローカル DB にマイグレーション適用
bunx wrangler d1 migrations apply mcp-todo-db --local

# 開発サーバー起動 (http://localhost:3000)
bun run dev

用MCP检验器测试

npx @modelcontextprotocol/inspector http://localhost:3000/mcp

部署

# Cloudflare D1 データベースを作成 (初回のみ)
bunx wrangler d1 create mcp-todo-db

# wrangler.jsonc の database_id を作成した DB の ID に更新

# 本番 DB にマイグレーション適用
bunx wrangler d1 migrations apply mcp-todo-db --remote

# ビルド & デプロイ
bun run deploy

连接到Claude客户端

将部署后的MCP端点URL https:///mcp 对较大场景进行渲染期间已观察到该故障。 例：https://mcp-apps-todo.starry-night.dev/mcp

克劳德桌面

claude_desktop_config.json 添加到：

{
  "mcpServers": {
    "todo": {
      "type": "streamable-http",
      "url": "https:///mcp"
    }
  }
}

克劳德代码（CLI）

claude mcp add todo --transport http https:///mcp

VS Code（Claude扩张机能）

.vscode/settings.json 添加到：

{
  "claude-code.mcpServers": {
    "todo": {
      "type": "streamable-http",
      "url": "https:///mcp"
    }
  }
}

用法示例

在与Claude的对话中：

• “让我看看stella的Todo。”
• “在stella的Todo上追加‘买牛奶’”
• “完成‘买牛奶’”

在支持MCP Apps的客户端上，工具运行时会显示UI，也可以从中直接操作。

许可证

麻省理工学院