Skip to main content
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.
FeatureDescription
PurposeExpose readable data to AI agents
URIUnique identifier (static or template)
MIME TypeContent type hint (application/json, text/plain, etc.)
OutputArray 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 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

​
Best Practices

Use descriptive URI schemes that indicate the data type: config://, file://, user://, api://. This helps AI agents understand what they’re accessing.
Always provide mimeType to help AI agents parse content correctly. Use standard MIME types like application/json or text/plain.
Return helpful error messages in the content when resources can’t be read. Include context about what went wrong.
When exposing multiple similar items (files, users, records), use URI templates instead of registering each item separately.
Return only the relevant data. Avoid dumping entire databases - let AI agents request specific resources as needed.

​
URI Scheme Examples

SchemeExampleUse Case
config://config://app-settingsApplication configuration
file://file://{path}Virtual filesystem
user://user://{id}/profileUser data
api://api://weather/{city}External API data
db://db://products/{sku}Database records
session://session://currentSession 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