oRPC-to-WebMCP Bridge
Next.jsoRPCWebMCPTypeScriptZodshadcn/ui
Generic bridge package that automatically turns any oRPC backend into browser-native AI tools via the WebMCP spec — zero per-endpoint configuration required.
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.