Frontend Tool Calling

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

function ShoppingCart() {
  // Register a tool
  useWebMCP({
    name: 'add_to_cart',
    description: 'Add a product to the shopping cart',
    inputSchema: {
      productId: z.string(),
      quantity: z.number().min(1)
    },
    handler: async (input) => {
      // Add to cart logic
      const cart = await addToCart(input.productId, input.quantity);

      return {
        message: `Added ${input.quantity}x product ${input.productId} to cart`,
        cart
      };
    }
  });

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

import { McpClientProvider, useMcpClient } from '@mcp-b/react-webmcp';
import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { TabClientTransport } from '@mcp-b/transports';

// Create client and transport
const client = new Client({
  name: 'MyAIAssistant',
  version: '1.0.0'
});

const transport = new TabClientTransport('mcp', {
  clientInstanceId: 'my-ai-assistant'
});

// Wrap your app with the provider
function App() {
  return (
    <McpClientProvider client={client} transport={transport}>
      <AIAssistant />
    </McpClientProvider>
  );
}

// Use the client in your components
function AIAssistant() {
  const { client, tools, isConnected, isLoading } = useMcpClient();

  if (isLoading) return <div>Connecting...</div>;
  if (!isConnected) return <div>Not connected</div>;

  return (
    <div>
      <p>Available tools: {tools.length}</p>
      <ul>
        {tools.map(tool => (
          <li key={tool.name}>{tool.name} - {tool.description}</li>
        ))}
      </ul>
    </div>
  );
}

import { useEffect, useState } from 'react';
import { McpClientProvider, useMcpClient, useWebMCP } from '@mcp-b/react-webmcp';
import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { TabClientTransport } from '@mcp-b/transports';
import { tool, useAssistantRuntime } from '@assistant-ui/react';
import { z } from 'zod';

// Create client and transport outside component
const client = new Client({
  name: 'MyAssistant',
  version: '1.0.0'
});

const transport = new TabClientTransport('mcp', {
  clientInstanceId: 'my-assistant'
});

// Main app with provider
export function App() {
  return (
    <McpClientProvider client={client} transport={transport}>
      <MyAIAssistant />
    </McpClientProvider>
  );
}

// Tool provider component
function ToolProvider() {
  const [counter, setCounter] = useState(0);

  // Register a tool using useWebMCP hook
  useWebMCP({
    name: 'get_user_info',
    description: 'Get current user information',
    inputSchema: {},
    handler: async () => {
      const user = getCurrentUser(); // Your app logic
      return { user };
    }
  });

  // Register a counter tool
  useWebMCP({
    name: 'increment_counter',
    description: 'Increment the counter',
    inputSchema: {
      amount: z.number().min(1).default(1)
    },
    handler: async (input) => {
      setCounter(prev => prev + input.amount);
      return { counter: counter + input.amount };
    }
  });

  return null; // This component just registers tools
}

// AI Assistant component
function MyAIAssistant() {
  const { client, tools, isConnected, isLoading } = useMcpClient();
  const runtime = useAssistantRuntime();

  // Register MCP tools with Assistant-UI runtime
  useEffect(() => {
    if (!isConnected || tools.length === 0) return;

    const assistantTools = tools.map(mcpTool =>
      tool({
        type: 'frontend',
        description: mcpTool.description,
        parameters: mcpTool.inputSchema,
        execute: async (args) => {
          const result = await client.callTool({
            name: mcpTool.name,
            arguments: args
          });

          return result.content
            .filter(c => c.type === 'text')
            .map(c => c.text)
            .join('\n');
        }
      })
    );

    const unregister = runtime.registerModelContextProvider({
      getModelContext: () => ({
        tools: Object.fromEntries(
          tools.map((t, i) => [t.name, assistantTools[i]])
        )
      })
    });

    return () => unregister();
  }, [client, tools, isConnected, runtime]);

  if (isLoading) return <div>Connecting to WebMCP...</div>;
  if (!isConnected) return <div>Not connected</div>;

  return (
    <div>
      <ToolProvider />
      <p>Available tools: {tools.length}</p>
      {/* Your AI chat UI here */}
    </div>
  );
}

AI Runtime → MCP Client → WebMCP → Tool Function → Result

// Register a new tool
const registration = navigator.modelContext.registerTool({
  name: 'new_feature',
  description: 'A new feature',
  inputSchema: { type: 'object', properties: {} },
  async execute() {
    return { content: [{ type: 'text', text: 'Done!' }] };
  }
});

// Tool is immediately available to the AI

// Later, remove it
registration.unregister();