Skip to content

examples.mdx

Latest commit

 

History

History
197 lines (157 loc) · 5.72 KB

examples.mdx

File metadata and controls

197 lines (157 loc) · 5.72 KB
Raw
title Examples
description Explore production-ready WebMCP implementations including React apps, vanilla JavaScript examples, and MCP-UI integrations for various frameworks and use cases.
icon code

Featured Example: WebMCP.sh

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

<Card title="webmcp.sh - MCP Playground" icon="play" href="https://github.com/WebMCP-org/webmcp-sh"

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](https://github.com/WebMCP-org/examples)

MCP-UI + WebMCP Examples

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

Interactive game where AI plays using dynamically registered WebMCP tools

<Card title="Chat UI Demo" icon="message" href="https://mcp-ui.mcp-b.ai"

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

<Card title="create-webmcp-app" icon="rocket" href="https://github.com/WebMCP-org/mcp-ui-webmcp/tree/main/apps/create-webmcp-app"

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

<Card title="Vanilla Template" icon="js" href="https://github.com/WebMCP-org/mcp-ui-webmcp/tree/main/templates/vanilla"

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

Simple todo app demonstrating core concepts with navigator.modelContext

<Card title="React Task Manager" icon="react" href="https://github.com/WebMCP-org/examples/tree/main/react"

Task management app demonstrating React integration via useWebMCP() hook

Quick Reference

Script Tag Integration

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

Vanilla TypeScript

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

React Hooks

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

Community Examples

Vue 3 composition API integration by Besian

<Card title="Nuxt 3" icon="nuxt" href="https://github.com/mikechao/nuxt3-mcp-b-demo"

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  # or react
pnpm install --ignore-workspace
pnpm dev

Open in Chrome with the MCP-B extension to test tools via the extension popup.

Building Your Own

`@mcp-b/global` for vanilla sites, `@mcp-b/react-webmcp` for React Expose your app's existing actions as tools - don't duplicate logic Use Zod schemas (React) or JSON Schema (vanilla) Use MCP-B extension to validate tools work correctly

Need Help?

Get help from the community

<Card title="GitHub Issues" icon="github" href="https://github.com/WebMCP-org/npm-packages/issues"

Report bugs or request features