Local Development

pnpm dev
# or
npm run dev

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

function TodoApp() {
  const [todos, setTodos] = useState([]);

  // Tools auto-register when component mounts
  // and auto-cleanup when component unmounts
  useWebMCP({
    name: 'add_todo',
    description: 'Add a new todo item',
    inputSchema: {
      text: z.string().min(1),
      priority: z.enum(['low', 'medium', 'high']).optional()
    },
    handler: async ({ text, priority = 'medium' }) => {
      const newTodo = { id: Date.now(), text, priority, done: false };
      setTodos(prev => [...prev, newTodo]);
      return { success: true, todo: newTodo };
    }
  });

  useWebMCP({
    name: 'list_todos',
    description: 'Get all todos',
    handler: async () => {
      return { todos };
    }
  });

  return <div>{/* Your UI */}</div>;
}

import '@mcp-b/global';

let todos = [];

// Register tools individually
const addTodoRegistration = navigator.modelContext.registerTool({
  name: 'add_todo',
  description: 'Add a new todo item',
  inputSchema: {
    type: 'object',
    properties: {
      text: { type: 'string' },
      priority: { type: 'string', enum: ['low', 'medium', 'high'] }
    },
    required: ['text']
  },
  async execute({ text, priority = 'medium' }) {
    const newTodo = { id: Date.now(), text, priority, done: false };
    todos.push(newTodo);
    updateUI();
    return {
      content: [{
        type: 'text',
        text: JSON.stringify({ success: true, todo: newTodo })
      }]
    };
  }
});

// Unregister when needed
// addTodoRegistration.unregister();

if (module.hot) {
  module.hot.dispose(() => {
    // Clean up registrations
    registration.unregister();
  });
}

// Check if WebMCP is loaded
console.log(window.navigator.modelContext);

// In development, access the bridge
if (window.__mcpBridge) {
  console.log('Registered tools:', window.__mcpBridge.tools);
  console.log('MCP server:', window.__mcpBridge.server);
}

const tool = useWebMCP({
  name: 'my_tool',
  description: 'My tool',
  handler: async () => { /* ... */ }
});

// Access in your component for debugging
console.log(tool.state.isExecuting);
console.log(tool.state.lastResult);
console.log(tool.state.error);

import { describe, it, expect, beforeEach } from 'vitest';

describe('Todo Tools', () => {
  beforeEach(() => {
    // Reset state before each test
    todos = [];
  });

  it('should add a todo', async () => {
    const result = await execute({
      text: 'Test todo',
      priority: 'high'
    });

    expect(result.success).toBe(true);
    expect(result.todo.text).toBe('Test todo');
    expect(todos.length).toBe(1);
  });
});

import { test, expect } from '@playwright/test';

test('MCP tools are registered', async ({ page }) => {
  await page.goto('http://localhost:5173');

  // Wait for WebMCP to load
  await page.waitForFunction(() => 'modelContext' in navigator);

  // Check tools are registered (requires expose)
  const hasTools = await page.evaluate(() => {
    return window.__mcpBridge?.tools?.length > 0;
  });

  expect(hasTools).toBe(true);
});

const isDev = import.meta.env.DEV;

if (isDev) {
  // Development-only tools
  navigator.modelContext.registerTool({
    name: 'debug_state',
    description: 'Get current app state (dev only)',
    async execute() {
      return {
        content: [{ type: 'text', text: JSON.stringify(appState) }]
      };
    }
  });
}