> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mcp-b.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Register prompts and resources

> Use MCP-B extension APIs to register prompts and resources from JavaScript or React.

Prompts and resources are MCP-B extensions rather than `document.modelContext` methods. Install [`@mcp-b/global`](/packages/global/reference), then explicitly narrow `document.modelContext` before using them. For background, see [WebMCP and MCP-B extensions](/explanation/strict-core-vs-mcp-b-extensions).

## Initialize the runtime

```bash title="Install packages" theme={null}
npm install @mcp-b/global @mcp-b/react-webmcp @mcp-b/webmcp-ts-sdk
```

```typescript title="main.ts" theme={null}
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.

<Steps>
  <Step title="Register the prompt">
    ```typescript title="main.ts" theme={null}
    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}!` } }
        ]
      })
    });
    ```
  </Step>

  <Step title="Unregister when done">
    ```typescript title="main.ts" theme={null}
    promptRegistration.unregister();
    ```
  </Step>
</Steps>

### React

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

```tsx title="CodeReviewPrompt.tsx" theme={null}
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.

<Steps>
  <Step title="Register the resource">
    ```typescript title="main.ts" theme={null}
    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) }]
      })
    });
    ```
  </Step>

  <Step title="Unregister when done">
    ```typescript title="main.ts" theme={null}
    resourceRegistration.unregister();
    ```
  </Step>
</Steps>

### React

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

```tsx title="AppSettingsResource.tsx" theme={null}
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>;
}
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.