MCP Chatbot Demo

Natura MCP聊天机器人演示

Cloudflare Worker+Supabase+DeepWiki MCP演示（Natura AI评估1）

包括一个Worker托管的Mock MCP以及DeepWiki和Llama HTTP服务器，因此工具发现始终在演示中工作。

┌────────────────────────┐        ┌──────────────────────────┐
│  React + Vite (Pages)  │ fetch  │   Cloudflare Worker API   │
│  https://ankitb47...   │───────▶│  /api/auth, /api/chat …   │
└────────────────────────┘        └──────────────────────────┘
                                        │  Supabase Auth/Admin (service role)
                                        ▼
                                    profiles table
                                        │
                                        │ JSON-RPC + SSE (handshake/session)
                                        ▼
                              DeepWiki MCP (HTTP & SSE endpoints)

回购布局

mcp-chatbot-demo/
├─ apps/
│  ├─ web/            # React + Vite + TS SPA (HashRouter)
│  └─ worker/         # Cloudflare Worker API (Supabase auth, MCP proxy)
├─ packages/
│  └─ mcp-client/     # Minimal MCP client (HTTP via SSE sessions)
├─ .github/workflows/ # GitHub Actions for Pages & Worker deployment
├─ README.md
├─ .editorconfig
└─ .gitignore

环境配置

基础架构要求：

create table if not exists public.profiles (
  user_id uuid primary key references auth.users(id) on delete cascade,
  username text unique not null
);

地方发展

1. 安装依赖项

   npm install            # install all workspaces

1. 在本地运行Worker

   cd apps/worker
   npm install            # first time only
   # PowerShell
   $env:SUPABASE_URL="https://.supabase.co"
   $env:SUPABASE_SERVICE_ROLE_KEY=""
   $env:JWT_COOKIE_NAME="mcp_demo_session"
   npx wrangler dev --var ALLOWED_ORIGIN=http://localhost:5173

   # macOS/Linux
   SUPABASE_URL="https://.supabase.co" \
   SUPABASE_SERVICE_ROLE_KEY="" \
   JWT_COOKIE_NAME="mcp_demo_session" \
   npx wrangler dev --var ALLOWED_ORIGIN=http://localhost:5173

1. 运行Web应用程序

   cd apps/web
   npm install            # first time only
   echo "VITE_API_BASE=http://127.0.0.1:8787" > .env
   npm run dev

1. 浏览 http://localhost:5173/#/register 创建帐户，然后聊天。

GitHub操作

• deploy-pages.yml （推到 main)：构建 apps/web，注射 VITE_API_BASE，上传到GitHub页面。
• deploy-worker.yml （标签 v*)：安装 apps/worker，运行 wrangler deploy 使用Supabase+JWT环境。
• 机密存储为GitHub Actions Secrets，并通过以下方式写入Cloudflare Worker wrangler-action 秘密；客户包中没有秘密。

工作端点

• GET /api/health -健康检查。
• POST /api/auth/register –创建用户（Supabase管理员+配置文件插入）并发布cookie。
• POST /api/auth/login –用户名/电子邮件+密码→ cookie会话。
• POST /api/auth/logout –清除会话cookie。
• GET /api/me –通过Supabase JWT解析经过身份验证的用户。
• POST /api/mcp/list –通过内部MCP客户端列出工具(packages/mcp-client).
• POST /api/mcp/call –直接工具调用（由以下人员使用 /api/chat 当提供命令时）。
• POST /api/chat –最少的助理回复或工具执行；没有聊天持久性。

MCP客户端(packages/mcp-client)

• 可选握手；服务器跳过时自动回退 initialize.
• 通过HTTP发布JSON-RPC，并对拒绝POST的服务器进行GET重试。
• SSE运输仍处于试验阶段；在可能的情况下尝试HTTP回退。

前端用户体验亮点

• HashRouter与GitHub Pages兼容。
• TanStack查询处理身份验证/会话/有状态API调用。
• Zustand商店保存聊天记录、服务器目录、工具开关。
• 现代聊天布局：侧边栏服务器/工具、标记气泡、打字指示器、工具结果卡。
• 为认证/工具/聊天操作提供反馈。
• 预种子MCP服务器：演示模拟MCP（Worker JSON-RPC）、DeepWiki HTTP和Llama HTTP。

如何进行端到端测试

1. 在上注册用户 /register.
2. 登录并登陆 /chat.
3. 选择“Demo Mock MCP”后，单击 加载工具 → echo/time/http_title出现。
4. 跑 /echo {"text":"hi"} → 期待JSON结果卡。
5. 切换到“DeepWiki HTTP”或“Llama HTTP”并加载工具；如果端点跳过握手，则应出现回退吐司。
6. 发送一条普通消息（无斜线）→ 助手回应模板回复。

已知限制

• 聊天记录仅存在于客户端内存中（设计上没有Supabase存储）。
• MCP HTTP传输依赖于SSE握手（与DeepWiki兼容；必要时可针对其他服务器进行调整）。
• 没有电子邮件确认或密码重置流程。
• 工具执行按请求顺序进行；超过第一个响应的长时间运行的SSE流不会被持久化。

验收检查表

• \[x\] 注册/登录，无需电子邮件确认。
• \[x\] /chat 由经过身份验证的cookie控制(/api/me).
• \[x\] DeepWiki工具列表+工具调用响应可见。
• \[x\] 通过操作构建页面→ https://ankitb47.github.io/mcp-chatbot-demo/.
• \[x\] 通过操作部署Worker→ https://mcp-chatbot-demo-api.jha-ankit230.workers.dev.
• \[x\] CORS仅限于GitHub Pages来源。
• \[x\] 服务器端未存储Supabase会话ID或聊天历史记录。