WebMCP演示--oRPC任务管理器
包括通用 oRPC -> WebMCP 桥接包(packages/orpc-webmcp)自动将oRPC过程注册为WebMCP工具。
什么是WebMCP？
W3C社区组草案规范 （微软+谷歌）提出浏览器原生JS API(navigator.modelContext)让网页向人工智能代理公开“工具”。
想想看：MCP只是客户端，在浏览器中，有人在循环。
建筑
┌──────────────────────────────────────────────┐
│ Browser │
│ │
│ ┌──────────────┐ ┌───────────────────┐ │
│ │ AI Agent │◄──►│ navigator │ │
│ │ (Chrome │ │ .modelContext │ │
│ │ Canary API) │ └────────┬──────────┘ │
│ └──────────────┘ │ │
│ execute() calls │
│ │ │
│ ┌─────────▼──────────┐ │
│ │ oRPC client │ │
│ │ (type-safe calls) │ │
│ └─────────┬──────────┘ │
│ │ │
└───────────────────────────────┼──────────────┘
│ HTTP
┌───────────────────────────────┼──────────────┐
│ Next.js Server │ │
│ ┌─────────▼──────────┐ │
│ │ oRPC router │ │
│ │ (procedures) │ │
│ └─────────┬──────────┘ │
│ │ │
│ ┌─────────▼──────────┐ │
│ │ In-memory store │ │
│ └────────────────────┘ │
└──────────────────────────────────────────────┘堆栈
| 图层 | 技术 |
|---|---|
| Monorepo | Turborepo+Bun |
| 前端 | Next.js 16、React 19、Tailwind 4、shadcn/ui |
| 后端API | oRPC |
| 模式 | Zod |
| WebMCP网桥 | packages/orpc-webmcp （含） |
入门指南
先决条件
- 包子 安装
- Chrome浏览器
安装并运行
bun install
bun dev应用程序运行于 http://localhost:3000.
使用WebMCP
Chrome Canary（原生WebMCP）
Chrome 146+发布了原生版的早期预览版 navigator.modelContext API
- 安装 铬金丝雀
- 引导到
chrome://flags/#web-mcp并启用该标志 - 运行应用程序(
bun dev)并打开http://localhost:3000在加那利 - 该应用程序通过本地API注册工具-不需要polyfill
外露工具
该应用程序将这些oRPC过程注册为WebMCP工具：
| 工具 | 类型 | 描述 |
|---|---|---|
tasks.list | query | 列出所有任务，可选状态筛选器 |
tasks.get | query | 按ID获取单个任务 |
tasks.create | mutation | 创建新任务 |
tasks.update | mutation | 更新任务标题/描述/状态 |
tasks.delete | mutation | 删除任务 |
项目结构
apps/web/ # Next.js app
app/
page.tsx # Task list UI
actions/tasks.ts # Server actions wrapping oRPC
rpc/[[...rest]]/route.ts # oRPC API route
lib/
orpc/ # oRPC router, schemas, client, store
webmcp-setup.ts # WebMCP tool registration
components/ # Task UI components
packages/orpc-webmcp/ # Generic oRPC-to-WebMCP bridge
src/
expose.ts # exposeRouter() — core bridge logic
react.ts # React hooks (useWebMCP)
types.ts # Type definitions