Changelog

​

Major Features

​

Prompts & Resources API

• useWebMCPPrompt() - Register prompts that AI assistants can invoke
• useWebMCPResource() - Expose resources with URI template support

import { useWebMCPPrompt, useWebMCPResource } from '@mcp-b/react-webmcp';
import { z } from 'zod';

// Register a prompt
useWebMCPPrompt({
  name: 'summarize',
  description: 'Summarize the current page content',
  argsSchema: {
    format: z.string().describe('Output format'),
  },
  get: async (args) => ({
    messages: [{
      role: 'user',
      content: { type: 'text', text: `Summarize in ${args.format} format` }
    }]
  })
});

// Register a resource
useWebMCPResource({
  uri: 'app://current-user',
  name: 'Current User',
  description: 'Currently logged in user data',
  handler: async () => ({
    contents: [{ uri: 'app://current-user', text: JSON.stringify(userData) }]
  })
});

​

MCP Iframe Custom Element

• Automatic tool namespacing - Iframe tools are automatically prefixed to avoid collisions
• Context propagation - Exposes iframe tools, prompts, and resources to the parent context
• Cross-frame communication - Seamless MCP communication between parent and child frames

<mcp-iframe src="https://example.com/mcp-enabled-app"></mcp-iframe>

​

Sampling & Elicitation Support

• createMessage() - Request the AI to generate a response (sampling)
• elicitInput() - Request user input through the AI interface

import { useMcpClient } from '@mcp-b/react-webmcp';

function MyComponent() {
  const { createMessage, elicitInput } = useMcpClient();

  const handleSampling = async () => {
    const response = await createMessage({
      messages: [{ role: 'user', content: 'Explain this code' }],
      maxTokens: 1000
    });
  };

  const handleElicitation = async () => {
    const input = await elicitInput({
      message: 'Please provide your API key',
      schema: { type: 'string' }
    });
  };
}

​

usewebmcp Package Alias

# Either works
pnpm add @mcp-b/react-webmcp
pnpm add usewebmcp

​

Bug Fixes

• Fixed race condition where tools registered by hooks were missed before notification handlers initialized
• Added re-fetching mechanism to catch tools registered during setup gaps
• Consolidated type imports for consistency across packages

​

Infrastructure

• Updated Biome configuration with overrides for generated files
• Changed react-webmcp test port from 5174 to 8888 to prevent conflicts
• Comprehensive E2E test coverage for prompts, resources, and iframe routing

​

Major Changes

​

Package Renaming

​

API Changes

• Removed useMcpServer() hook - use useWebMCP() instead
• New useWebMCPContext() hook for read-only context
• Automatic registration/cleanup (no manual useEffect needed)
• Built-in Zod support for type-safe schemas

const { registerTool } = useMcpServer();

useEffect(() => {
  const tool = registerTool('my_tool', { description: '...' }, handler);
  return () => tool.remove();
}, []);

useWebMCP({
  name: 'my_tool',
  description: '...',
  handler
});
// Auto-registers and cleans up

​

navigator.modelContext API

• registerTool() is now the recommended approach (returns unregister())
• provideContext() only for base tools (replaces all base tools)
• Two-bucket tool management system introduced

​

New Features

​

@mcp-b/global

• ✨ Two-bucket tool management (base vs dynamic tools)
• ✨ IIFE build for CDN usage (no build step required)
• ✨ Event-based tool call handling
• ✨ Improved TypeScript types

​

@mcp-b/react-webmcp

• ✨ useWebMCP() hook with automatic lifecycle management
• ✨ useWebMCPContext() for read-only tools
• ✨ Execution state tracking (isExecuting, lastResult, error)
• ✨ McpClientProvider and useMcpClient() for consuming tools

​

@mcp-b/transports

• ✨ Enhanced origin validation
• ✨ Keep-alive support for extension transports
• ✨ Server discovery for tab clients
• ✨ Cross-extension communication support

​

@mcp-b/extension-tools

• ✨ 62+ Chrome Extension API wrappers
• ✨ Comprehensive TypeScript definitions
• ✨ Zod-based validation
• ✨ Manifest V3 compatible

​

Migration Guide

# Remove old packages
pnpm remove @mcp-b/mcp-react-hooks

# Install new packages
pnpm add @mcp-b/react-webmcp @mcp-b/global zod

// Before
import { useMcpServer } from '@mcp-b/mcp-react-hooks';

// After
import { useWebMCP } from '@mcp-b/react-webmcp';

// Before
const { registerTool } = useMcpServer();
useEffect(() => {
  const tool = registerTool('my_tool', config, handler);
  return () => tool.remove();
}, []);

// After
useWebMCP({
  name: 'my_tool',
  description: 'Tool description',
  inputSchema: { /* Zod schemas */ },
  handler: async (args) => { /* ... */ }
});

// Before - still works but not recommended
window.navigator.modelContext.provideContext({
  tools: [/* all your tools */]
});

// After - recommended for most tools
const reg = window.navigator.modelContext.registerTool({
  name: 'my_tool',
  description: '...',
  inputSchema: {},
  async execute(args) { /* ... */ }
});

// Clean up when needed
reg.unregister();

​

Bug Fixes

• Fixed tool name collision errors
• Improved error messages for schema validation
• Fixed memory leaks in React StrictMode
• Corrected TypeScript definitions for transport options
• Fixed race condition in extension port connections

​

Performance Improvements

• Reduced bundle size by 30%
• Optimized tool registration performance
• Improved transport message handling
• Better memory management in long-running sessions

​

Version 0.9.5

• Added experimental React hooks package
• Improved documentation
• Bug fixes for transport disconnections

​

Version 0.9.0

• Initial public release
• Basic MCP support for web browsers
• Tab transport implementation
• Extension transport for Chrome extensions