WebMCP Documentation

Prompts and resources are MCP-B extension features, not part of the strict WebMCP core. Install @mcp-b/global, then explicitly narrow document.modelContext before using them. For background on this distinction, see Strict core vs MCP-B extensions.

Initialize the runtime

Install packages

npm install @mcp-b/global @mcp-b/react-webmcp @mcp-b/webmcp-ts-sdk

main.ts

import '@mcp-b/global';
import { isBrowserMcpServer } from '@mcp-b/webmcp-ts-sdk';

const modelContext = document.modelContext;
if (!isBrowserMcpServer(modelContext)) {
  throw new Error('MCP-B extensions are unavailable');
}

Register a prompt

A prompt is a reusable message template that AI clients can discover and invoke with arguments.

main.ts

const promptRegistration = modelContext.registerPrompt({
  name: 'greeting',
  description: 'Generate a greeting message',
  argsSchema: {
    type: 'object',
    properties: {
      name: { type: 'string', description: 'Name to greet' }
    },
    required: ['name']
  },
  get: async ({ name }) => ({
    messages: [
      { role: 'user', content: { type: 'text', text: `Hello, ${name}!` } }
    ]
  })
});

Unregister when done

main.ts

promptRegistration.unregister();

React

Use the useWebMCPPrompt hook from @mcp-b/react-webmcp. It handles registration and cleanup on unmount.

CodeReviewPrompt.tsx

import { useWebMCPPrompt } from '@mcp-b/react-webmcp';

function CodeReviewPrompt() {
  const { isRegistered } = useWebMCPPrompt({
    name: 'review_code',
    description: 'Review code for best practices',
    argsSchema: {
      type: 'object',
      properties: {
        code: { type: 'string', description: 'The code to review' },
        language: { type: 'string', description: 'Programming language' },
      },
      required: ['code'],
    } as const,
    get: async ({ code, language }) => ({
      messages: [
        {
          role: 'user',
          content: {
            type: 'text',
            text: `Please review this ${language ?? ''} code:\n\n${code}`,
          },
        },
      ],
    }),
  });

  return <div>Code review prompt {isRegistered ? 'ready' : 'loading'}</div>;
}

Register a resource

A resource exposes readable data (configuration, documents, state) to AI clients.

main.ts

const appConfig = { theme: 'dark', language: 'en' };

const resourceRegistration = modelContext.registerResource({
  uri: 'app://config',
  name: 'App Configuration',
  description: 'Current application configuration',
  mimeType: 'application/json',
  read: async () => ({
    contents: [{ uri: 'app://config', text: JSON.stringify(appConfig) }]
  })
});

Unregister when done

main.ts

resourceRegistration.unregister();

React

Use the useWebMCPResource hook from @mcp-b/react-webmcp.

AppSettingsResource.tsx

import { useWebMCPResource } from '@mcp-b/react-webmcp';

function AppSettingsResource() {
  const { isRegistered } = useWebMCPResource({
    uri: 'config://app-settings',
    name: 'App Settings',
    description: 'Application configuration',
    mimeType: 'application/json',
    read: async (uri) => ({
      contents: [
        {
          uri: uri.href,
          text: JSON.stringify({ theme: 'dark', language: 'en' }),
        },
      ],
    }),
  });

  return <div>Settings resource {isRegistered ? 'ready' : 'loading'}</div>;
}

How-To Guides

Adoption

Frameworks

Connectivity

Register prompts and resources

Initialize the runtime

Register a prompt

React

Register a resource

React

​Initialize the runtime

​Register a prompt

​React

​Register a resource

​React

Initialize the runtime

Register a prompt

React

Register a resource

React