Quick Start

Installation

npm install @page-mcp/core
# optional shared types
npm install @page-mcp/protocol
# optional browser adapter
npm install @page-mcp/webmcp-adapter
# optional UI/framework packages
npm install @page-mcp/chat @page-mcp/react @page-mcp/vue3 @page-mcp/vue2

Minimal Vanilla Flow

import { EventBus, PageMcpClient, PageMcpHost } from '@page-mcp/core';
import { installWebMcpPolyfill } from '@page-mcp/webmcp-adapter';

const bus = new EventBus();
const host = new PageMcpHost({ name: 'my-app', version: '1.0.0', bus });

host.registerTool({
  name: 'search_products',
  description: 'Search products by keyword',
  inputSchema: {
    type: 'object',
    properties: { keyword: { type: 'string' } },
    required: ['keyword']
  },
  execute: async (input) => [{ keyword: String(input.keyword ?? '') }]
});

host.start();
installWebMcpPolyfill(host);

const client = new PageMcpClient({ bus });
await client.connect();

const tools = await client.toolsList();
const result = await client.toolsCall('search_products', { keyword: 'headphones' });

Practical Notes

• Keep one shared EventBus in the same page context.
• Start the host before connecting the client.
• installWebMcpPolyfill() comes from @page-mcp/webmcp-adapter, not @page-mcp/core.
• Use resources, prompts, and Extensions.createSkillsClient(client) when you need richer capability discovery.
• The browser extension can discover tools, resources, prompts, and remote skills exposed through the Page MCP flow.