oRPC-to-WebMCP Bridge
Next.jsoRPCWebMCPTypeScriptZodshadcn/ui
Bridge package that turns any oRPC backend into browser-native AI tools via the WebMCP spec — zero per-endpoint config. Next.js, TypeScript, Zod.
WebMCP is a W3C Community Group spec that moves AI tool integration into the browser. This demo exposes a Next.js + oRPC backend's API routes as WebMCP tools, so AI agents call them natively inside Chrome.
The orpc-webmcp bridge package registers backend procedures as browser-accessible tools automatically — no per-endpoint config.
Key Features
- Generic oRPC-to-WebMCP bridge: add an oRPC route, get an AI-callable tool — no extra config
- Type-safe end-to-end: oRPC + Zod schemas carry types from browser to server
- Chrome-native: runs on the
navigator.modelContextAPI in Chrome Canary (146+) - Task manager demo: full CRUD showing the bridge in action
How It Works
1. Define oRPC Procedures
Write type-safe procedures with oRPC and Zod. Standard API work, nothing WebMCP-specific.
2. Bridge Registers Tools
The orpc-webmcp bridge discovers every procedure and registers it as a WebMCP tool via navigator.modelContext.
3. AI Agents Call Tools
Any in-browser AI agent — like Chrome's built-in AI — discovers and calls your API endpoints as tools.
4. Type-Safe Execution
Calls validate against Zod schemas, execute server-side via oRPC, and return results to the agent. Fully type-safe.
Try It Now
WebMCP runs today in Chrome Canary on the built-in Gemini Nano model. Five steps:
- Install Chrome Canary — from google.com/chrome/canary
- Enable the flag — set
chrome://flags/#web-mcpto Enabled - Clone and run —
git clone https://github.com/Mark-Life/webMCP-example && cd webMCP-example && bun install && bun dev - Open
http://localhost:3000in Canary — the app registers its tools vianavigator.modelContext - Use the built-in AI — Gemini Nano discovers and calls the task manager's endpoints as tools
No polyfills. Native navigator.modelContext API, Chrome 146+.
Exposed Tools
The demo task manager exposes five tools:
- tasks.list — query all tasks, optional status filter
- tasks.get — fetch one task by ID
- tasks.create — create a task with title, description, status
- tasks.update — change title, description, or status
- tasks.delete — remove a task by ID
Architecture
Monorepo Structure
apps/web/— Next.js app: UI, server actions, oRPC route handlerpackages/orpc-webmcp/— the bridge package: core logic and React hooks
The Bridge Package
orpc-webmcp is the core: 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 invocation, validation, and response marshalling
Any oRPC app becomes WebMCP-compatible with a single hook.
Technology Stack
Frontend
- Next.js 16 — App Router, React Server Components
- React 19 — concurrent features
- Tailwind CSS 4 — utility-first styling
- shadcn/ui — accessible components
Backend & API
- oRPC — type-safe RPC framework, end-to-end
- Zod — runtime validation and type inference
Infrastructure
- Turborepo — monorepo build orchestration
- Bun — package manager and runtime
Open Source
Open source. Both a reference implementation of the WebMCP spec and a starting point for browser-native AI integrations.