Setup & Installation

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>
  );
}

const client = new Client({
  name: 'MyAIAssistant',      // Your application name
  version: '1.0.0',            // Your application version
});

const transport = new TabClientTransport('mcp', {
  clientInstanceId: 'unique-client-id',  // Unique identifier for this client
  timeout: 5000,                          // Optional: request timeout in ms
});

function ConnectionStatus() {
  const { isConnected, isLoading, error, tools } = useMcpClient();

  if (isLoading) {
    return <div>Connecting to WebMCP...</div>;
  }

  if (error) {
    return <div>Connection error: {error.message}</div>;
  }

  if (!isConnected) {
    return <div>Not connected</div>;
  }

  return (
    <div>
      ✅ Connected - {tools.length} tools available
    </div>
  );
}