Wrap Existing UI Logic

Tools are thin wrappers around your existing functions. The navigator.modelContext.registerTool API makes this simple.

The Pattern

import '@mcp-b/global';

navigator.modelContext.registerTool({
  name: 'change_background',
  description: 'Change the page background color',
  inputSchema: {
    type: 'object',
    properties: {
      color: { type: 'string', description: 'CSS color value' },
    },
    required: ['color'],
  },
  execute: async ({ color }) => {
    document.body.style.backgroundColor = color;
    return {
      content: [{ type: 'text', text: `Background changed to ${color}` }],
    };
  },
});

JSON Schema Basics

The inputSchema follows JSON Schema:

inputSchema: {
  type: 'object',
  properties: {
    name: { type: 'string', description: 'User name' },
    count: { type: 'number', description: 'Item count' },
    enabled: { type: 'boolean', description: 'Whether enabled' },
  },
  required: ['name'], // Required parameters
}

Execute Return Format

The execute function must return an object with a content array:

return {
  content: [{ type: 'text', text: 'Success message' }],
};

Try it

Create a tool that wraps a background color changer. Ask the agent: “Make the background light blue”

Dark Mode

Form Filling

Files

Preparing Environment

npm install
npm run dev