Skip to main content
webmcp.sh is a production-ready MCP playground showcasing best practices for WebMCP integration.

webmcp.sh - MCP Playground

Modern React app with comprehensive WebMCP integration, database tools, 3D graph visualization, and real-time MCP server connections
 Why this example stands out:
  • Production-grade React architecture with TypeScript
  • Real-world tool patterns: navigation, database operations, graph manipulation
  • Clean hook abstractions using @mcp-b/react-webmcp
  • Modern stack: React 19, TanStack Router, Drizzle ORM, Tailwind CSS
  • Demonstrates multiple tool types: read-only context, mutations, complex workflows
Key implementations to study:
  • useMCPNavigationTool.ts - App navigation with route context
  • useMCPDatabaseTools.ts - Database CRUD operations
  • useMCPGraphTools.ts - Complex graph manipulation
  • useMCPTool.ts - Base tool pattern with validation and error handling
Additional examples available in the WebMCP Examples Repository

​
MCP-UI + WebMCP Examples

MCP-UI-WebMCP Repository demonstrates bidirectional integration between AI assistants and embedded web applications.

TicTacToe with AI

Interactive game where AI plays using dynamically registered WebMCP tools

Chat UI Demo

Live chat interface showcasing MCP-UI resource rendering and WebMCP integration

create-webmcp-app

Interactive CLI to scaffold MCP-UI + WebMCP apps (Vanilla or React)

Vanilla Template

Pure HTML/CSS/JavaScript template with no build step required
Why MCP-UI + WebMCP?
  • Bidirectional: AI invokes tools that render UIs, which register new tools back to the AI
  • Production-ready: Deployed on Cloudflare Workers with Durable Objects
  • Real-time stats: WebSocket-powered game statistics tracking
  • Multiple patterns: React with hooks + Vanilla JavaScript approaches
Quick start: 
npx create-webmcp-app
cd your-project
pnpm dev
See the Building MCP-UI Apps guide for complete documentation and the MCP-UI Architecture for architecture details.

​
Additional Examples

Vanilla TypeScript

Simple todo app demonstrating core concepts with navigator.modelContext

Script Tag

No build tools required - just add a script tag for W3C API

React Flow Voice Agent

Advanced React app with voice input and visual flow

Login Flow

Authentication and session management with WebMCP

​
Quick Reference

Use useWebMCP() from @mcp-b/react-webmcp for automatic lifecycle management, Zod validation, and execution state tracking.

​
Vanilla TypeScript

Use navigator.modelContext.registerTool() to register individual tools. Perfect for adding WebMCP to existing sites without frameworks.

​
Script Tag Integration

Add @mcp-b/global via unpkg and use registerTool() for zero-config setup - no build tools required.

​
Community Examples

Vue.js

Vue 3 composition API integration by Besian

Nuxt 3

Full-stack Nuxt 3 with SSR support by Mike Chao

​
Common Patterns

Dynamic Tool Registration: Tools in React components auto-register on mount and cleanup on unmount using useWebMCP(). Authentication-Aware Tools: Conditionally expose tools based on user role or session state. Tools respect existing authentication via credentials: 'same-origin'. Visual Feedback: Update UI state in tool handlers to provide real-time feedback for AI actions.

​
Running Examples

git clone https://github.com/WebMCP-org/examples.git
cd examples/vanilla-ts  # or any example
pnpm install --ignore-workspace
pnpm dev
Open in Chrome with the MCP-B extension to test tools via the extension popup.

​
Building Your Own

1

Choose your approach

@mcp-b/global for vanilla sites, @mcp-b/react-webmcp for React
2

Wrap existing functionality

Expose your app’s existing actions as tools - don’t duplicate logic
3

Add validation

Use Zod schemas (React) or JSON Schema (vanilla)
4

Test with extension

Use MCP-B extension to validate tools work correctly

​
Need Help?

Discord Community

Get help from the community

GitHub Issues

Report bugs or request features