WebMCP Demo — oRPC Task Manager
Next.jsoRPCWebMCPTypeScriptZodshadcn/ui
Demo app showcasing how a Next.js app with oRPC backend can expose API routes as WebMCP tools, letting AI agents call them directly from the browser.
WebMCP is an emerging W3C Community Group specification that brings AI tool integration directly into the browser. This demo app shows how a Next.js application with an oRPC backend can expose its API routes as WebMCP tools — letting AI agents call them natively from within Chrome.
The project includes a reusable bridge package (orpc-webmcp) that automatically registers backend procedures as browser-accessible tools, with zero manual configuration per endpoint.
Key Features
- Generic oRPC-to-WebMCP Bridge: Automatic tool registration — add an oRPC route and it becomes an AI-callable tool with no extra config
- Type-Safe End-to-End: oRPC + Zod schemas provide full type safety from browser to server
- Chrome Native Integration: Works with the
navigator.modelContextAPI in Chrome Canary (146+) - Task Manager Demo: Full CRUD operations showcasing the bridge in action
How It Works
1. Define oRPC Procedures
Write type-safe backend procedures with oRPC and Zod schemas — standard API development, nothing WebMCP-specific.
2. Bridge Registers Tools
The orpc-webmcp bridge automatically discovers all procedures and registers them as WebMCP tools via navigator.modelContext.
3. AI Agents Call Tools
Any AI agent running in the browser (like Chrome's built-in AI) can discover and call your API endpoints as tools.
4. Type-Safe Execution
Tool calls are validated against Zod schemas, executed server-side via oRPC, and results returned to the agent — fully type-safe.
Try It Now
WebMCP works today in Chrome Canary with the built-in Gemini Nano model. Here's how to try it:
- Install Chrome Canary — download from google.com/chrome/canary
- Enable the WebMCP flag — navigate to
chrome://flags/#web-mcpand set it to Enabled - Clone and run the demo —
git clone https://github.com/Mark-Life/webMCP-example && cd webMCP-example && bun install && bun dev - Open
http://localhost:3000in Chrome Canary — the app automatically registers its tools vianavigator.modelContext - Use the built-in AI — Chrome's Gemini Nano can now discover and call the task manager's API endpoints as tools directly in the browser
No polyfills needed — the app uses the native navigator.modelContext API (Chrome 146+).
Exposed Tools
The demo task manager exposes five tools to AI agents:
- tasks.list — Query all tasks with optional status filtering
- tasks.get — Fetch individual task details by ID
- tasks.create — Create new tasks with title, description, and status
- tasks.update — Modify task properties (title, description, status)
- tasks.delete — Remove tasks by ID
Architecture
Monorepo Structure
apps/web/— Next.js application with UI, server actions, and oRPC route handlerpackages/orpc-webmcp/— Reusable bridge package with core logic and React hooks
The Bridge Package
The orpc-webmcp package is the core innovation — a generic adapter that:
- Introspects oRPC router definitions at runtime
- Converts Zod schemas to JSON Schema for tool descriptions
- Registers each procedure as a WebMCP tool via
navigator.modelContext - Handles tool invocation, validation, and response marshalling
This means any oRPC application can become WebMCP-compatible by adding a single hook.
Technology Stack
Frontend
- Next.js 16 — App Router with React Server Components
- React 19 — Latest React with concurrent features
- Tailwind CSS 4 — Utility-first styling
- shadcn/ui — Accessible UI components
Backend & API
- oRPC — Type-safe RPC framework for end-to-end type safety
- Zod — Runtime schema validation and type inference
Infrastructure
- Turborepo — Monorepo build orchestration
- Bun — Package manager and runtime
Open Source
WebMCP Demo is an open-source project. It serves as both a reference implementation for the WebMCP specification and a starting point for building browser-native AI integrations.