Skip to main content
This guide teaches you three approaches to adding tools to your site, starting with the simplest method and advancing to more powerful patterns. By the end, you’ll understand which installation method fits your project.

​
Prerequisites

Before you begin, ensure you have:
  • Modern browser: Chrome, Edge, or Brave (latest version)
  • MCP-B Extension installed from Chrome Web Store
  • Node.js 18+ (for NPM installation) or basic HTML knowledge (for script tag method)
  • Package manager: npm, pnpm, or yarn (optional for NPM method)

​
Installation

​
Building Interactive Apps with MCP-UI + WebMCP

Want to build interactive apps that AI agents can control? Use create-webmcp-app: 
npx create-webmcp-app
cd your-project
pnpm dev
This scaffolds a complete system:
  • MCP Server (Cloudflare Workers) - Exposes tools to AI
  • Embedded App (React or Vanilla) - Runs in iframe, registers tools
  • Bidirectional Communication - AI controls your app, your app notifies AI
See the Building MCP-UI Apps guide for the complete walkthrough.

​
Real-World Example

Wrap your existing application logic as tools:
  • React
  • Vanilla JS
import { useWebMCP } from '@mcp-b/react-webmcp';
import { z } from 'zod';

function ProductPage() {
  useWebMCP({
    name: "add_to_cart",
    description: "Add item to shopping cart",
    inputSchema: {
      productId: z.string(),
      quantity: z.number().min(1)
    },
    handler: async ({ productId, quantity }) => {
      await fetch('/api/cart/add', {
        method: 'POST',
        credentials: 'same-origin',
        body: JSON.stringify({ productId, quantity })
      });
      return { success: true, quantity };
    }
  });

  return <div>Product Page</div>;
}

​
Testing

  1. Run dev server: pnpm dev
  2. Open in Chrome with MCP-B extension
  3. Click extension icon → Tools tab
  4. Test tools via chat or inspector

​
Examples

webmcp.sh

Production-ready React app with database, navigation, and graph tools

Vanilla TypeScript

Todo app with dynamic tool registration

Script Tag

Zero-config setup with no build tools

More Examples

Vue, Nuxt, React Flow, and community examples

​
Best Practices

For 99% of use cases, use navigator.modelContext.registerTool(). It’s simple, automatic, and handles cleanup for you.
const registration = navigator.modelContext.registerTool({
  name: 'my_tool',
  description: 'What my tool does',
  inputSchema: { /* ... */ },
  async execute(args) { /* ... */ }
});
React users should use the useWebMCP() hook - it handles registration, cleanup, and Zod validation automatically:
useWebMCP({
  name: 'my_tool',
  description: 'What it does',
  inputSchema: { amount: z.number() },
  handler: async ({ amount }) => { /* ... */ }
});
  • Only expose tools users can already access via your UI
  • Validate all inputs with schemas
  • Use credentials: 'same-origin' for API calls
  • Tools inherit the user’s authentication and permissions
  • Use descriptive names: add_to_cart, search_products, update_profile
  • Wrap existing functions - don’t duplicate logic
  • Provide visual feedback when tools execute
  • Return clear success/error messages
Only use provideContext() for defining base application-level tools. Most developers should stick with registerTool().See Advanced Patterns for details.

​
Next Steps

Core Concepts

Understand WebMCP architecture

Examples

Complete working examples and patterns

React Hooks

@mcp-b/react-webmcp package documentation

Security Guide

Security best practices

NPM Packages

All available packages and APIs

Advanced Patterns

Chrome extensions, transports, and more