> ## Documentation Index
> Fetch the complete documentation index at: https://mcp-b-sync-npm-packages-docs-bf03420.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Examples

> Explore production-ready WebMCP implementations including React apps, vanilla JavaScript examples, and MCP-UI integrations for various frameworks and use cases.

## Featured Example: WebMCP.sh

**[webmcp.sh](https://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
</Card>

**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

<Info>
  Additional examples available in the [WebMCP Examples Repository](https://github.com/WebMCP-org/examples)
</Info>

## MCP-UI + WebMCP Examples

**[MCP-UI-WebMCP Repository](https://github.com/WebMCP-org/mcp-ui-webmcp)** demonstrates bidirectional integration between AI assistants and embedded web applications.

<CardGroup cols={2}>
  <Card title="TicTacToe with AI" icon="grid" href="https://beattheclankers.com">
    Interactive game where AI plays using dynamically registered WebMCP tools
  </Card>

  <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>

  <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>

  <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
  </Card>
</CardGroup>

**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:**

```bash theme={null}
npx create-webmcp-app
cd your-project
pnpm dev
```

See the [Building MCP-UI Apps guide](/building-mcp-ui-apps) for complete documentation and the [MCP-UI Architecture](/concepts/mcp-ui-integration) for architecture details.

## Additional Examples

<CardGroup cols={2}>
  <Card title="Vanilla TypeScript" icon="js" href="https://github.com/WebMCP-org/examples/tree/main/vanilla">
    Simple todo app demonstrating core concepts with navigator.modelContext
  </Card>

  <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
  </Card>
</CardGroup>

## 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

<CardGroup cols={2}>
  <Card title="Vue.js" icon="vuejs" href="https://github.com/bestian/vue-MCP-B-demo">
    Vue 3 composition API integration by Besian
  </Card>

  <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
  </Card>
</CardGroup>

## 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

```bash theme={null}
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

<Steps>
  <Step title="Choose your approach">
    `@mcp-b/global` for vanilla sites, `@mcp-b/react-webmcp` for React
  </Step>

  <Step title="Wrap existing functionality">
    Expose your app's existing actions as tools - don't duplicate logic
  </Step>

  <Step title="Add validation">
    Use Zod schemas (React) or JSON Schema (vanilla)
  </Step>

  <Step title="Test with extension">
    Use MCP-B extension to validate tools work correctly
  </Step>
</Steps>

## Need Help?

<CardGroup>
  <Card title="Discord Community" icon="discord" href="https://discord.gg/ZnHG4csJRB">
    Get help from the community
  </Card>

  <Card title="GitHub Issues" icon="github" href="https://github.com/WebMCP-org/npm-packages/issues">
    Report bugs or request features
  </Card>
</CardGroup>