Wrap Existing UI Logic

Tools are thin wrappers around your existing functions. The useWebMCP hook makes this seamless in React.

The Pattern

import { useWebMCP } from '@mcp-b/react-webmcp';
import { z } from 'zod';

function useBackgroundTool() {
  useWebMCP({
    name: 'change_background',
    description: 'Change the page background color',
    inputSchema: {
      color: z.string().describe('CSS color value'),
    },
    handler: async ({ color }) => {
      document.body.style.backgroundColor = color;
      return { success: true, message: `Background changed to ${color}` };
    },
  });
}

Why Zod?

Zod provides:

Type inference — Your handler params are typed automatically
Validation — Invalid inputs are rejected before reaching your handler
Descriptions — .describe() adds context for the AI

Schema Examples

// String with description
z.string().describe('The user name')

// Number with constraints
z.number().min(0).max(100).describe('Percentage value')

// Enum for limited choices
z.enum(['small', 'medium', 'large']).describe('Size option')

// Optional fields
z.string().optional().describe('Optional note')

Try it

Create a hook that wraps a background color changer. Add the hook to your App component. Ask the agent: “Make the background light blue”

Dark Mode

Form Filling

Files

Preparing Environment

npm install
npm run dev