Skip to main content
WebMCP works with any framework. Use Chrome DevTools MCP for the best development experience, then explore our production-ready examples.

​
Development workflow

Use Chrome DevTools MCP for a powerful AI-driven development loop:
1

Install Chrome DevTools MCP

claude mcp add chrome-devtools npx @mcp-b/chrome-devtools-mcp@latest
2

Start your dev server

pnpm dev
3

Ask your AI to build and test tools

The AI can write tool code, navigate to your page, discover tools via list_webmcp_tools, and test them with call_webmcp_tool - all in a tight feedback loop.
This is TDD for AI - agents build and verify their own tools in real-time.

​
Production examples

Clone any example to get started immediately: 
git clone https://github.com/WebMCP-org/examples.git
cd examples/<framework>
pnpm install && pnpm dev

Vanilla JavaScript

Shopping cart with core WebMCP functionality

React

Task manager with useWebMCP() hook

Svelte

Svelte 5 with runes and actions

Angular

Note-taking app with Angular signals

Rails

Bookmarks manager with Stimulus controllers

Phoenix LiveView

Real-time sync with server-side state

​
The pattern

All frameworks follow the same approach:
  1. Import @mcp-b/global to add navigator.modelContext
  2. Call registerTool() in your mount lifecycle
  3. Call unregister() in your unmount lifecycle
FrameworkMountUnmountExample
ReactuseWebMCP() hookautomaticView
Vue 3onMountedonUnmountedCommunity
Nuxt 3onMounted + import.meta.clientonUnmountedCommunity
SvelteonMountonDestroyView
AngularngOnInitngOnDestroyView
Rails/StimulusconnectdisconnectView
Phoenix LiveViewmounteddestroyedView

​
React users

Use @mcp-b/react-webmcp instead of @mcp-b/global - it handles lifecycle automatically and provides Zod validation.

​
SPAs vs SSR frameworks

Using a plain SPA? If you’re building a client-side-only React, Vue, or Svelte app (without SSR), you don’t need to worry about server/client boundaries. Just register tools in your component lifecycle and you’re good to go.
SSR frameworks like Next.js, Nuxt, TanStack Start, Remix, and SvelteKit require ensuring WebMCP code only runs on the client since navigator doesn’t exist on the server. Each framework has its own pattern for this - see the guides below.

​
Framework-specific guides

​
React

Next.js

SSR-safe patterns with App Router and Client Components

TanStack Start

Client-only patterns with lazy imports

Remix

Client-only patterns with ClientOnly and lazy imports

​
Other frameworks

Vue.js

Composition API patterns and SSR considerations

Nuxt

SSR-safe patterns with import.meta.client

Svelte

Actions, runes, and SvelteKit patterns

Angular

Services, DI, and Angular Universal

Rails

Stimulus controllers and Turbo integration

Phoenix LiveView

Server-side state with real-time sync