WebMCP Documentation

This page demonstrates live WebMCP resources that register themselves with the browser and can be read by AI agents in real-time. Resources expose data that AI models can access asynchronously.

These resources 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 read these resources directly.

Resource Registration

Understanding resource registration

Live Tools

Interactive tool demonstrations

Live Prompts

Interactive prompt demonstrations

WebMCP Status

Check if the WebMCP polyfill is loaded and ready:

What are Resources?

Resources in MCP are data endpoints that AI agents can read. Unlike tools (which execute actions) or prompts (which generate messages), resources provide access to dynamic or static content like configuration, files, or API data.

Feature	Description
Purpose	Expose readable data to AI agents
URI	Unique identifier (static or template)
MIME Type	Content type hint (application/json, text/plain, etc.)
Output	Array of content objects with text or binary data

App Settings Resource

Demonstrates: Static resource with fixed URI This resource shows the fundamentals of registerResource() - a static resource with a fixed URI that returns configuration data. The resource content updates dynamically based on the current settings.

Try it with your AI assistant: Ask Claude to “read the app-settings resource” and watch it retrieve the current configuration!

// Register a static resource with fixed URI
navigator.modelContext.registerResource({
  uri: 'config://app-settings',
  name: 'App Settings',
  description: 'Current application configuration',
  mimeType: 'application/json',
  async read() {
    return {
      contents: [{
        uri: 'config://app-settings',
        text: JSON.stringify({
          theme: 'dark',
          language: 'en',
          notifications: true,
        }, null, 2),
        mimeType: 'application/json',
      }],
    };
  },
});

File Reader Resource

Demonstrates: Resource template with URI parameters This resource shows advanced usage with URI templates - the {path} placeholder allows AI agents to read different files by specifying the path parameter. Templates enable flexible, parameterized data access.

Try it with your AI assistant: Ask Claude to “read the file readme.txt” and watch it access the virtual filesystem!

// Register a resource with URI template
navigator.modelContext.registerResource({
  uri: 'file://{path}',  // {path} is extracted from the request
  name: 'Virtual File',
  description: 'Read files from the virtual filesystem',
  mimeType: 'text/plain',
  async read(uri, params) {
    // params.path contains the extracted path
    const path = params?.path || 'unknown';

    // Fetch file content (from filesystem, API, etc.)
    const content = await fetchFileContent(path);

    return {
      contents: [{
        uri: uri.href,
        text: content,
        mimeType: 'text/plain',
      }],
    };
  },
});

Resource API Reference

`registerResource(descriptor)`

Registers a new resource with the browser.

interface ResourceDescriptor {
  uri: string;              // Static URI or template with {params}
  name: string;             // Human-readable name
  description?: string;     // Description for AI agents
  mimeType?: string;        // Content type hint
  read: (uri: URL, params?: Record<string, string>) => Promise<{
    contents: ResourceContents[];
  }>;
}

interface ResourceContents {
  uri: string;              // The resolved URI
  text?: string;            // Text content
  blob?: string;            // Base64 binary content
  mimeType?: string;        // Content type
}

`listResources()`

Returns all registered static resources.

const resources = navigator.modelContext.listResources();
// [{ uri: 'config://app-settings', name: 'App Settings', ... }]

`listResourceTemplates()`

Returns all registered resource templates.

const templates = navigator.modelContext.listResourceTemplates();
// [{ uriTemplate: 'file://{path}', name: 'Virtual File', ... }]

The readResource() method is called by AI agents through the MCP protocol, not directly from your application code. When an AI agent calls readResource('config://app-settings'), your registered read() handler is invoked and the result is returned to the agent.

Static vs Template Resources

Static Resources
Template Resources

Static resources have fixed URIs and provide single data endpoints.

// Fixed URI - always returns the same logical resource
registerResource({
  uri: 'config://app-settings',
  // ...
});

// Read with exact URI
readResource('config://app-settings');

Use cases:

Application configuration
User preferences
System status
Single data endpoints

Template resources use URI parameters to access dynamic data.

// Template with {param} placeholders
registerResource({
  uri: 'file://{path}',
  // params.path available in read()
});

// Read with resolved URI
readResource('file://readme.txt');  // path = "readme.txt"
readResource('file://config.json'); // path = "config.json"

Use cases:

File systems
Database records
API endpoints
Any parameterized data

Best Practices

Choose meaningful URIs

Use descriptive URI schemes that indicate the data type: config://, file://, user://, api://. This helps AI agents understand what they’re accessing.

Specify MIME types

Always provide mimeType to help AI agents parse content correctly. Use standard MIME types like application/json or text/plain.

Handle errors gracefully

Return helpful error messages in the content when resources can’t be read. Include context about what went wrong.

Use templates for collections

When exposing multiple similar items (files, users, records), use URI templates instead of registering each item separately.

Keep content focused

Return only the relevant data. Avoid dumping entire databases - let AI agents request specific resources as needed.

URI Scheme Examples

Scheme	Example	Use Case
`config://`	`config://app-settings`	Application configuration
`file://`	`file://{path}`	Virtual filesystem
`user://`	`user://{id}/profile`	User data
`api://`	`api://weather/{city}`	External API data
`db://`	`db://products/{sku}`	Database records
`session://`	`session://current`	Session state

Concepts: Resources

Deep dive into resource architecture and patterns

Live Tool Examples

Interactive tool demonstrations

Live Prompt Examples

Interactive prompt demonstrations

Best Practices

Guidelines for effective WebMCP usage

Start Here

Live WebMCP Resource Examples

Resource Registration

Live Tools

Live Prompts

WebMCP Status

What are Resources?

App Settings Resource

File Reader Resource

Resource API Reference

`registerResource(descriptor)`

`listResources()`

`listResourceTemplates()`

Static vs Template Resources

Best Practices

URI Scheme Examples

Concepts: Resources

Live Tool Examples

Live Prompt Examples

Best Practices

Resource Registration

Live Tools

Live Prompts

​WebMCP Status

​What are Resources?

​App Settings Resource

​File Reader Resource

​Resource API Reference

​registerResource(descriptor)

​listResources()

​listResourceTemplates()

​Static vs Template Resources

​Best Practices

​URI Scheme Examples

​Related Documentation

Concepts: Resources

Live Tool Examples

Live Prompt Examples

Best Practices

WebMCP Status

What are Resources?

App Settings Resource

File Reader Resource

Resource API Reference

`registerResource(descriptor)`

`listResources()`

`listResourceTemplates()`

Static vs Template Resources

Best Practices

URI Scheme Examples

Related Documentation