Skip to main content
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.
FeatureDescription
PurposeGenerate pre-formatted messages for AI
ArgumentsOptional schema-validated parameters
OutputArray of role-based messages (user/assistant)
Use CaseStandardized 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

Choose prompt names that clearly indicate their purpose. Use kebab-case for multi-word names (e.g., code-review, bug-report).
Write descriptions that help AI agents understand when to use the prompt and what it generates.
Use argsSchema to ensure AI agents provide the correct argument types. Include descriptions for each property.
Generate concise, focused messages. Avoid overly complex prompts that try to do too much.
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