Model Context Protocolfor the Browser

npm install @mcp-b/transports @modelcontextprotocol/sdk

import { TabServerTransport } from '@mcp-b/transports';
import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
import { z } from 'zod';

const server = new McpServer({
  name: 'invoice-system',
  version: '1.0.0'
});

server.tool('createInvoice', 'Create a new invoice', {
  customerEmail: z.string().email(),
  items: z.array(z.object({
    description: z.string(),
    amount: z.number()
  }))
}, async ({ customerEmail, items }) => {
  // This is just a normal fetch to your existing API
  const response = await yourPreAuthorizedApiClient('/api/invoices', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ customerEmail, items })
  });

  if (!response.ok) {
    throw new Error(`Failed to create invoice: ${response.statusText}`);
  }
  // You get full control over what the model get's to know about the response
  return { content: [{ type: 'text', text: JSON.stringify(await response.json())  }] };
});

const transport = new TabServerTransport();
// This server is now callable by the mcp-b chrome extension
await server.connect(transport);