WebMCP Documentation

This page demonstrates live WebMCP prompts that register themselves with the browser and can be retrieved by AI agents in real-time. Prompts are reusable message templates that help standardize AI interactions.

These prompts are live and ready! The WebMCP polyfill is included with this documentation site. Install the MCP-B browser extension to enable AI agents (like Claude) to discover and use these prompts directly.

Prompt Registration

Understanding prompt registration

Live Tools

Interactive tool demonstrations

Live Resources

Interactive resource demonstrations

WebMCP Status

Check if the WebMCP polyfill is loaded and ready:

What are Prompts?

Prompts in MCP are reusable message templates that AI agents can retrieve and use. Unlike tools (which execute actions) or resources (which read data), prompts generate structured messages that guide AI interactions.

Feature	Description
Purpose	Generate pre-formatted messages for AI
Arguments	Optional schema-validated parameters
Output	Array of role-based messages (user/assistant)
Use Case	Standardized AI conversation starters

Greeting Prompt

Demonstrates: Basic prompt registration without arguments This prompt shows the fundamentals of registerPrompt() - a simple prompt that returns a greeting message. Perfect for initializing conversations with AI agents.

Try it with your AI assistant: Ask Claude to “use the greeting prompt” and watch it retrieve the pre-formatted message!

// Register a simple prompt without arguments
navigator.modelContext.registerPrompt({
  name: 'greeting',
  description: 'A friendly greeting prompt that welcomes users',
  async get() {
    return {
      messages: [
        {
          role: 'user',
          content: {
            type: 'text',
            text: 'Hello! How can you help me today?'
          },
        },
      ],
    };
  },
});

Code Review Prompt

Demonstrates: Prompt with validated arguments schema This prompt shows advanced usage with argsSchema - it accepts code and language parameters to generate a customized code review request. The schema validation ensures correct argument types.

Try it with your AI assistant: Ask Claude to “get the code-review prompt for my React component” and watch it generate a formatted review request!

// Register a prompt with arguments schema
navigator.modelContext.registerPrompt({
  name: 'code-review',
  description: 'Generate a code review request with syntax-highlighted code',
  argsSchema: {
    type: 'object',
    properties: {
      code: {
        type: 'string',
        description: 'The code to review'
      },
      language: {
        type: 'string',
        description: 'Programming language',
        default: 'javascript'
      },
    },
    required: ['code'],
  },
  async get(args) {
    const code = args.code;
    const language = args.language || 'unknown';

    return {
      messages: [
        {
          role: 'user',
          content: {
            type: 'text',
            text: `Please review this ${language} code:\n\n\`\`\`${language}\n${code}\n\`\`\``,
          },
        },
      ],
    };
  },
});

Prompt API Reference

`registerPrompt(descriptor)`

Registers a new prompt with the browser.

interface PromptDescriptor {
  name: string;                    // Unique prompt name
  description?: string;            // Human-readable description
  argsSchema?: InputSchema;        // Optional JSON Schema for arguments
  get: (args: object) => Promise<{ messages: PromptMessage[] }>;
}

interface PromptMessage {
  role: 'user' | 'assistant';
  content: { type: 'text'; text: string };
}

`listPrompts()`

Returns all registered prompts (called by AI agents via MCP protocol).

const prompts = navigator.modelContext.listPrompts();
// [{ name: 'greeting', description: '...' }, ...]

The getPrompt() method is called by AI agents through the MCP protocol, not directly from your application code. When an AI agent calls getPrompt('greeting'), your registered get() handler is invoked and the result is returned to the agent.

Best Practices

Use descriptive names

Choose prompt names that clearly indicate their purpose. Use kebab-case for multi-word names (e.g., code-review, bug-report).

Provide helpful descriptions

Write descriptions that help AI agents understand when to use the prompt and what it generates.

Validate arguments with schemas

Use argsSchema to ensure AI agents provide the correct argument types. Include descriptions for each property.

Keep messages focused

Generate concise, focused messages. Avoid overly complex prompts that try to do too much.

Use appropriate roles

Use user role for requests and assistant role for context or examples the AI should follow.

Concepts: Prompts

Deep dive into prompt architecture and patterns

Live Tool Examples

Interactive tool demonstrations

Live Resource Examples

Interactive resource demonstrations

Best Practices

Guidelines for effective WebMCP usage

Start Here

Live WebMCP Prompt Examples

Prompt Registration

Live Tools

Live Resources

WebMCP Status

What are Prompts?

Greeting Prompt

Code Review Prompt

Prompt API Reference

`registerPrompt(descriptor)`

`listPrompts()`

Best Practices

Concepts: Prompts

Live Tool Examples

Live Resource Examples

Best Practices

Prompt Registration

Live Tools

Live Resources

​WebMCP Status

​What are Prompts?

​Greeting Prompt

​Code Review Prompt

​Prompt API Reference

​registerPrompt(descriptor)

​listPrompts()

​Best Practices

​Related Documentation

Concepts: Prompts

Live Tool Examples

Live Resource Examples

Best Practices

WebMCP Status

What are Prompts?

Greeting Prompt

Code Review Prompt

Prompt API Reference

`registerPrompt(descriptor)`

`listPrompts()`

Best Practices

Related Documentation