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.

​
Framework-specific guides

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