@mcp-b/react-webmcp 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 mcp-b contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,478 @@
+# @mcp-b/react-webmcp
+
+Complete React hooks for the Model Context Protocol - register tools via `navigator.modelContext` and consume tools from MCP servers.
+
+## Features
+
+### Provider Hooks (Registering Tools)
+- **Type-Safe**: Full TypeScript support with Zod schema validation
+- **State-Aware**: Track execution state (loading, success, error) for UI feedback
+- **React-Native**: Designed for React's lifecycle, including StrictMode compatibility
+- **Developer-Friendly**: Intuitive API with comprehensive examples
+
+### Client Hooks (Consuming Tools)
+- **MCP Client Provider**: Connect to MCP servers and consume their tools
+- **Real-time Updates**: Listen for tool list changes via MCP notifications
+- **Connection Management**: Automatic connection handling with reconnect support
+- **Type-Safe Tool Calls**: Full TypeScript support for client operations
+
+## Installation
+
+```bash
+pnpm add @mcp-b/react-webmcp zod
+```
+
+For client functionality, you'll also need:
+```bash
+pnpm add @mcp-b/transports @modelcontextprotocol/sdk
+```
+
+## Prerequisites
+
+**For Provider Hooks:** Requires the global `navigator.modelContext` API. Install `@mcp-b/global` or use a browser that implements the Web Model Context API.
+
+**For Client Hooks:** Requires an MCP server to connect to (e.g., one created with `@mcp-b/global` or the Model Context Protocol SDK).
+
+---
+
+# Part 1: Provider API (Registering Tools)
+
+Use these hooks to expose tools from your React app that AI agents can discover and call.
+
+## Quick Start - Provider
+
+### Basic Tool Registration
+
+```tsx
+import { useWebMCP } from '@mcp-b/react-webmcp';
+import { z } from 'zod';
+
+function PostsPage() {
+  const likeTool = useWebMCP({
+    name: 'posts_like',
+    description: 'Like a post by ID. Increments the like count.',
+    inputSchema: {
+      postId: z.string().uuid().describe('The post ID to like'),
+    },
+    annotations: {
+      title: 'Like Post',
+      readOnlyHint: false,
+      idempotentHint: true,
+    },
+    handler: async (input) => {
+      await api.posts.like(input.postId);
+      return { success: true, postId: input.postId };
+    },
+    formatOutput: (result) => `Post ${result.postId} liked successfully!`,
+  });
+
+  return (
+    <div>
+      {likeTool.state.isExecuting && <Spinner />}
+      {likeTool.state.error && <ErrorAlert error={likeTool.state.error} />}
+      {/* Your UI */}
+    </div>
+  );
+}
+```
+
+### Context Tool
+
+Expose read-only context to AI:
+
+```tsx
+import { useWebMCPContext } from '@mcp-b/react-webmcp';
+
+function PostDetailPage() {
+  const { postId } = useParams();
+  const { data: post } = useQuery(['post', postId], () => fetchPost(postId));
+
+  useWebMCPContext(
+    'context_current_post',
+    'Get the currently viewed post ID and metadata',
+    () => ({
+      postId,
+      title: post?.title,
+      author: post?.author,
+      tags: post?.tags,
+    })
+  );
+
+  return <div>{/* Post UI */}</div>;
+}
+```
+
+## Provider API Reference
+
+### `useWebMCP`
+
+Main hook for registering MCP tools with full control over behavior and state.
+
+```tsx
+function useWebMCP<
+  TInputSchema extends Record<string, z.ZodTypeAny>,
+  TOutput = string
+>(config: WebMCPConfig<TInputSchema, TOutput>): WebMCPReturn<TOutput>
+```
+
+#### Configuration Options
+
+| Option | Type | Required | Description |
+|--------|------|----------|-------------|
+| `name` | `string` | ✓ | Unique tool identifier (e.g., 'posts_like') |
+| `description` | `string` | ✓ | Human-readable description for AI |
+| `inputSchema` | `Record<string, ZodType>` | - | Input validation using Zod schemas |
+| `outputSchema` | `Record<string, ZodType>` | - | Output validation (optional) |
+| `annotations` | `ToolAnnotations` | - | Metadata hints for the AI |
+| `elicitation` | `ElicitationConfig` | - | User confirmation settings |
+| `handler` | `(input) => Promise<TOutput>` | ✓ | Function that executes the tool |
+| `formatOutput` | `(output) => string` | - | Custom output formatter |
+| `onError` | `(error, input) => void` | - | Error handler callback |
+
+#### Return Value
+
+```tsx
+interface WebMCPReturn<TOutput> {
+  state: {
+    isExecuting: boolean;      // Currently running
+    lastResult: TOutput | null; // Last successful result
+    error: Error | null;        // Last error
+    executionCount: number;     // Total executions
+  };
+  execute: (input: unknown) => Promise<TOutput>; // Manual execution
+  reset: () => void;            // Reset state
+}
+```
+
+### `useWebMCPContext`
+
+Simplified hook for read-only context exposure:
+
+```tsx
+function useWebMCPContext<T>(
+  name: string,
+  description: string,
+  getValue: () => T
+): WebMCPReturn<T>
+```
+
+---
+
+# Part 2: Client API (Consuming Tools)
+
+Use these hooks to connect to MCP servers and call their tools from your React app.
+
+## Quick Start - Client
+
+### Connecting to an MCP Server
+
+```tsx
+import { McpClientProvider, useMcpClient } from '@mcp-b/react-webmcp';
+import { Client } from '@modelcontextprotocol/sdk/client/index.js';
+import { TabClientTransport } from '@mcp-b/transports';
+
+// Create client and transport
+const client = new Client({ name: 'MyApp', version: '1.0.0' });
+const transport = new TabClientTransport('mcp', { clientInstanceId: 'my-app' });
+
+function App() {
+  return (
+    <McpClientProvider client={client} transport={transport}>
+      <ToolConsumer />
+    </McpClientProvider>
+  );
+}
+
+function ToolConsumer() {
+  const { client, tools, isConnected, capabilities } = useMcpClient();
+
+  const handleCallTool = async () => {
+    const result = await client.callTool({
+      name: 'posts_like',
+      arguments: { postId: '123' }
+    });
+    console.log('Result:', result.content[0].text);
+  };
+
+  return (
+    <div>
+      <p>Connected: {isConnected ? 'Yes' : 'No'}</p>
+      <p>Available Tools: {tools.length}</p>
+      <ul>
+        {tools.map(tool => (
+          <li key={tool.name}>{tool.name} - {tool.description}</li>
+        ))}
+      </ul>
+      <button onClick={handleCallTool} disabled={!isConnected}>
+        Call Tool
+      </button>
+    </div>
+  );
+}
+```
+
+### Listening for Tool List Changes
+
+```tsx
+function ToolList() {
+  const { tools, isConnected, capabilities } = useMcpClient();
+
+  // Tools automatically update when server sends notifications
+  // if capabilities.tools.listChanged is true
+
+  return (
+    <div>
+      <h3>Tools ({tools.length})</h3>
+      {capabilities?.tools?.listChanged && (
+        <p>✓ Server supports real-time tool updates</p>
+      )}
+      {tools.map(tool => (
+        <div key={tool.name}>
+          <h4>{tool.name}</h4>
+          <p>{tool.description}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+## Client API Reference
+
+### `McpClientProvider`
+
+Provider component that manages an MCP client connection.
+
+```tsx
+interface McpClientProviderProps {
+  children: ReactNode;
+  client: Client;           // MCP client instance
+  transport: Transport;      // Transport for connection
+  opts?: RequestOptions;     // Optional connection options
+}
+```
+
+#### Example Transports
+
+```tsx
+// Connect to same-page MCP server (via @mcp-b/global)
+import { TabClientTransport } from '@mcp-b/transports';
+const transport = new TabClientTransport('mcp', { clientInstanceId: 'my-app' });
+
+// Connect to Chrome extension MCP server
+import { ExtensionClientTransport } from '@mcp-b/transports';
+const transport = new ExtensionClientTransport({ portName: 'mcp' });
+
+// In-memory connection (for testing)
+import { InMemoryTransport } from '@modelcontextprotocol/sdk/inMemory.js';
+const [clientTransport, serverTransport] = InMemoryTransport.createLinkedPair();
+```
+
+### `useMcpClient`
+
+Hook to access the MCP client context. Must be used within `McpClientProvider`.
+
+```tsx
+interface McpClientContextValue {
+  client: Client;                        // MCP client instance
+  tools: Tool[];                         // Available tools from server
+  resources: Resource[];                 // Available resources
+  isConnected: boolean;                  // Connection status
+  isLoading: boolean;                    // Currently connecting
+  error: Error | null;                   // Connection error
+  capabilities: ServerCapabilities | null; // Server capabilities
+  reconnect: () => Promise<void>;        // Manual reconnection
+}
+```
+
+#### Calling Tools
+
+```tsx
+function MyComponent() {
+  const { client, isConnected } = useMcpClient();
+
+  const callTool = async () => {
+    if (!isConnected) return;
+
+    try {
+      const result = await client.callTool({
+        name: 'my_tool',
+        arguments: { foo: 'bar' }
+      });
+
+      // Extract text from result
+      const text = result.content
+        .filter(c => c.type === 'text')
+        .map(c => c.text)
+        .join('\n');
+
+      console.log(text);
+    } catch (error) {
+      console.error('Tool call failed:', error);
+    }
+  };
+
+  return <button onClick={callTool}>Call Tool</button>;
+}
+```
+
+---
+
+# Complete Example: Both Provider and Client
+
+This example shows a React app that both exposes tools AND consumes tools from an MCP server.
+
+```tsx
+import '@mcp-b/global'; // Provides navigator.modelContext
+import { McpClientProvider, useWebMCP, useMcpClient } from '@mcp-b/react-webmcp';
+import { Client } from '@modelcontextprotocol/sdk/client/index.js';
+import { TabClientTransport } from '@mcp-b/transports';
+import { z } from 'zod';
+
+// Create client to consume tools
+const client = new Client({ name: 'MyApp', version: '1.0.0' });
+const transport = new TabClientTransport('mcp', { clientInstanceId: 'my-app' });
+
+function App() {
+  return (
+    <McpClientProvider client={client} transport={transport}>
+      <ToolProvider />
+      <ToolConsumer />
+    </McpClientProvider>
+  );
+}
+
+// Component that REGISTERS tools
+function ToolProvider() {
+  const [count, setCount] = useState(0);
+
+  // Expose a tool that increments the counter
+  useWebMCP({
+    name: 'increment_counter',
+    description: 'Increment the counter',
+    inputSchema: {
+      amount: z.number().default(1)
+    },
+    handler: async ({ amount }) => {
+      setCount(prev => prev + amount);
+      return { newValue: count + amount };
+    }
+  });
+
+  return <div>Counter: {count}</div>;
+}
+
+// Component that CONSUMES tools
+function ToolConsumer() {
+  const { client, tools, isConnected } = useMcpClient();
+  const [result, setResult] = useState('');
+
+  const callIncrementTool = async () => {
+    const res = await client.callTool({
+      name: 'increment_counter',
+      arguments: { amount: 5 }
+    });
+    setResult(res.content[0].text);
+  };
+
+  return (
+    <div>
+      <p>Available Tools: {tools.map(t => t.name).join(', ')}</p>
+      <button onClick={callIncrementTool} disabled={!isConnected}>
+        Call increment_counter Tool
+      </button>
+      {result && <p>Result: {result}</p>}
+    </div>
+  );
+}
+```
+
+---
+
+# Migration from @mcp-b/mcp-react-hooks
+
+If you're migrating from the deprecated `@mcp-b/mcp-react-hooks` package:
+
+## What Changed
+
+- **Server providers removed**: `McpServerProvider` and `McpMemoryProvider` are gone
+- **Everything in one package**: Both client and provider hooks are now in `@mcp-b/react-webmcp`
+- **Tool registration**: Use `useWebMCP` instead of server providers
+- **Client unchanged**: `McpClientProvider` and `useMcpClient` work the same way
+
+## Migration Guide
+
+### Before (mcp-react-hooks)
+
+```tsx
+import { McpClientProvider, useMcpClient } from '@mcp-b/mcp-react-hooks';
+import { McpServerProvider, useMcpServer } from '@mcp-b/mcp-react-hooks';
+```
+
+### After (react-webmcp)
+
+```tsx
+// Client hooks - same API
+import { McpClientProvider, useMcpClient } from '@mcp-b/react-webmcp';
+
+// For registering tools, use useWebMCP instead of server providers
+import { useWebMCP } from '@mcp-b/react-webmcp';
+```
+
+### Converting Server to Provider
+
+**Before:**
+```tsx
+function MyApp() {
+  const { registerTool } = useMcpServer();
+
+  useEffect(() => {
+    const tool = registerTool('my_tool', { description: '...' }, handler);
+    return () => tool.remove();
+  }, []);
+}
+```
+
+**After:**
+```tsx
+function MyApp() {
+  useWebMCP({
+    name: 'my_tool',
+    description: '...',
+    handler: handler
+  });
+  // Auto-registers and cleans up on unmount
+}
+```
+
+---
+
+# Best Practices
+
+### Tool Naming
+- Use verb-noun format: `posts_like`, `graph_navigate`, `table_filter`
+- Prefix with domain: `posts_`, `comments_`, `graph_`
+- Be specific and descriptive
+
+### Annotations
+- Always set `readOnlyHint` (true for queries, false for mutations)
+- Set `idempotentHint` (true if repeated calls are safe)
+- Set `destructiveHint` for delete/permanent operations
+
+### Error Handling
+- Throw descriptive errors from tool handlers
+- Use `onError` callback for side effects (logging, toasts)
+- Handle connection errors in client components
+
+### Performance
+- Tools automatically prevent duplicate registration in React StrictMode
+- Use `useWebMCPContext` for lightweight read-only data exposure
+- Client automatically manages reconnection and tool list updates
+
+## License
+
+MIT
+
+## Contributing
+
+See the [main repository](https://github.com/WebMCP-org/WebMCP) for contribution guidelines.

package/dist/index.d.ts

@@ -0,0 +1,449 @@
+import { ReactElement, ReactNode } from "react";
+import { z } from "zod";
+import { CallToolResult, Resource, Resource as Resource$1, ServerCapabilities, ServerCapabilities as ServerCapabilities$1, Tool, Tool as Tool$1 } from "@modelcontextprotocol/sdk/types.js";
+import { ToolAnnotations } from "@mcp-b/webmcp-ts-sdk";
+import { ModelContext as ModelContextProtocol, ToolDescriptor } from "@mcp-b/global";
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { RequestOptions } from "@modelcontextprotocol/sdk/shared/protocol.js";
+import { Transport } from "@modelcontextprotocol/sdk/shared/transport.js";
+
+//#region src/types.d.ts
+
+/**
+ * Represents the current execution state of a tool, including loading status,
+ * results, errors, and execution history.
+ *
+ * @template TOutput - The type of data returned by the tool handler
+ * @public
+ */
+interface ToolExecutionState<TOutput = unknown> {
+  /**
+   * Indicates whether the tool is currently executing.
+   * Use this to show loading states in your UI.
+   */
+  isExecuting: boolean;
+  /**
+   * The result from the most recent successful execution.
+   * Will be `null` if the tool hasn't been executed or last execution failed.
+   */
+  lastResult: TOutput | null;
+  /**
+   * The error from the most recent failed execution.
+   * Will be `null` if the tool hasn't been executed or last execution succeeded.
+   */
+  error: Error | null;
+  /**
+   * Total number of times this tool has been executed.
+   * Increments on both successful and failed executions.
+   */
+  executionCount: number;
+}
+/**
+ * Configuration options for the `useWebMCP` hook.
+ * Defines a tool's metadata, schema, handler, and lifecycle callbacks.
+ *
+ * @template TInputSchema - Zod schema object defining input parameters
+ * @template TOutput - The type of data returned by the handler function
+ * @public
+ *
+ * @example
+ * ```typescript
+ * const config: WebMCPConfig = {
+ *   name: 'posts_like',
+ *   description: 'Like a post by its ID',
+ *   inputSchema: {
+ *     postId: z.string().uuid(),
+ *   },
+ *   handler: async ({ postId }) => {
+ *     await api.likePost(postId);
+ *     return { success: true };
+ *   },
+ * };
+ * ```
+ */
+interface WebMCPConfig<TInputSchema extends Record<string, z.ZodTypeAny> = Record<string, never>, TOutput = string> {
+  /**
+   * Unique identifier for the tool (e.g., 'posts_like', 'graph_navigate').
+   * Must follow naming conventions: lowercase with underscores.
+   */
+  name: string;
+  /**
+   * Human-readable description explaining what the tool does.
+   * This description is used by AI assistants to understand when to use the tool.
+   */
+  description: string;
+  /**
+   * Zod schema object defining the input parameters for the tool.
+   * Each key is a parameter name, and the value is a Zod type definition.
+   *
+   * @example
+   * ```typescript
+   * inputSchema: {
+   *   postId: z.string().uuid().describe('The ID of the post to like'),
+   *   userId: z.string().optional(),
+   * }
+   * ```
+   */
+  inputSchema?: TInputSchema;
+  /**
+   * Optional Zod schema object defining the expected output structure.
+   * Used for runtime validation of handler return values.
+   */
+  outputSchema?: Record<string, z.ZodTypeAny>;
+  /**
+   * Optional metadata annotations providing hints about tool behavior.
+   * See {@link ToolAnnotations} for available options.
+   */
+  annotations?: ToolAnnotations;
+  /**
+   * The function that executes when the tool is called.
+   * Can be synchronous or asynchronous.
+   *
+   * @param input - Validated input parameters matching the inputSchema
+   * @returns The result data or a Promise resolving to the result
+   */
+  handler: (input: z.infer<z.ZodObject<TInputSchema>>) => Promise<TOutput> | TOutput;
+  /**
+   * Optional function to format the handler output for the MCP response.
+   * Defaults to JSON.stringify with indentation.
+   *
+   * @param output - The raw output from the handler
+   * @returns Formatted string for the MCP response
+   */
+  formatOutput?: (output: TOutput) => string;
+  /**
+   * Optional callback invoked when the tool execution succeeds.
+   * Useful for triggering side effects like navigation or analytics.
+   *
+   * @param result - The successful result from the handler
+   * @param input - The input that was passed to the handler
+   */
+  onSuccess?: (result: TOutput, input: unknown) => void;
+  /**
+   * Optional callback invoked when the tool execution fails.
+   * Useful for error handling, logging, or showing user notifications.
+   *
+   * @param error - The error that occurred during execution
+   * @param input - The input that was passed to the handler
+   */
+  onError?: (error: Error, input: unknown) => void;
+}
+/**
+ * Return value from the `useWebMCP` hook.
+ * Provides access to execution state and methods for manual tool control.
+ *
+ * @template TOutput - The type of data returned by the tool handler
+ * @public
+ */
+interface WebMCPReturn<TOutput = unknown> {
+  /**
+   * Current execution state including loading status, results, and errors.
+   * See {@link ToolExecutionState} for details.
+   */
+  state: ToolExecutionState<TOutput>;
+  /**
+   * Manually execute the tool with the provided input.
+   * Useful for testing, debugging, or triggering execution from your UI.
+   *
+   * @param input - The input parameters to pass to the tool
+   * @returns Promise resolving to the tool's output
+   * @throws Error if validation fails or handler throws
+   */
+  execute: (input: unknown) => Promise<TOutput>;
+  /**
+   * Reset the execution state to its initial values.
+   * Clears results, errors, and resets the execution count.
+   */
+  reset: () => void;
+}
+//#endregion
+//#region src/useWebMCP.d.ts
+/**
+ * React hook for registering and managing Model Context Protocol (MCP) tools.
+ *
+ * This hook handles the complete lifecycle of an MCP tool:
+ * - Registers the tool with `window.navigator.modelContext`
+ * - Manages execution state (loading, results, errors)
+ * - Validates input using Zod schemas
+ * - Handles tool execution and lifecycle callbacks
+ * - Automatically unregisters on component unmount
+ *
+ * @template TInputSchema - Zod schema object defining input parameter types
+ * @template TOutput - Type of data returned by the handler function
+ *
+ * @param config - Configuration object for the tool
+ * @returns Object containing execution state and control methods
+ *
+ * @public
+ *
+ * @example
+ * Basic tool registration:
+ * ```tsx
+ * function PostActions() {
+ *   const likeTool = useWebMCP({
+ *     name: 'posts_like',
+ *     description: 'Like a post by ID',
+ *     inputSchema: {
+ *       postId: z.string().uuid().describe('The ID of the post to like'),
+ *     },
+ *     handler: async ({ postId }) => {
+ *       await api.posts.like(postId);
+ *       return { success: true, postId };
+ *     },
+ *   });
+ *
+ *   if (likeTool.state.isExecuting) {
+ *     return <Spinner />;
+ *   }
+ *
+ *   return <div>Post actions ready</div>;
+ * }
+ * ```
+ *
+ * @example
+ * Tool with annotations and callbacks:
+ * ```tsx
+ * const deleteTool = useWebMCP({
+ *   name: 'posts_delete',
+ *   description: 'Delete a post permanently',
+ *   inputSchema: {
+ *     postId: z.string().uuid(),
+ *   },
+ *   annotations: {
+ *     destructiveHint: true,
+ *     idempotentHint: false,
+ *   },
+ *   handler: async ({ postId }) => {
+ *     await api.posts.delete(postId);
+ *     return { deleted: true };
+ *   },
+ *   onSuccess: () => {
+ *     navigate('/posts');
+ *     toast.success('Post deleted');
+ *   },
+ *   onError: (error) => {
+ *     toast.error(`Failed to delete: ${error.message}`);
+ *   },
+ * });
+ * ```
+ */
+declare function useWebMCP<TInputSchema extends Record<string, z.ZodTypeAny> = Record<string, never>, TOutput = string>(config: WebMCPConfig<TInputSchema, TOutput>): WebMCPReturn<TOutput>;
+//#endregion
+//#region src/useWebMCPContext.d.ts
+/**
+ * Convenience hook for exposing read-only context data to AI assistants.
+ *
+ * This is a simplified wrapper around {@link useWebMCP} specifically designed for
+ * context tools that expose data without performing actions. The hook automatically
+ * configures appropriate annotations (read-only, idempotent) and handles value
+ * serialization.
+ *
+ * @template T - The type of context data to expose
+ *
+ * @param name - Unique identifier for the context tool (e.g., 'context_current_post')
+ * @param description - Human-readable description of the context for AI assistants
+ * @param getValue - Function that returns the current context value
+ * @returns Tool execution state and control methods
+ *
+ * @public
+ *
+ * @example
+ * Expose current post context:
+ * ```tsx
+ * function PostDetailPage() {
+ *   const { postId } = useParams();
+ *   const { data: post } = useQuery(['post', postId], () => fetchPost(postId));
+ *
+ *   useWebMCPContext(
+ *     'context_current_post',
+ *     'Get the currently viewed post ID and metadata',
+ *     () => ({
+ *       postId,
+ *       title: post?.title,
+ *       author: post?.author,
+ *       tags: post?.tags,
+ *       createdAt: post?.createdAt,
+ *     })
+ *   );
+ *
+ *   return <PostContent post={post} />;
+ * }
+ * ```
+ *
+ * @example
+ * Expose user session context:
+ * ```tsx
+ * function AppRoot() {
+ *   const { user, isAuthenticated } = useAuth();
+ *
+ *   useWebMCPContext(
+ *     'context_user_session',
+ *     'Get the current user session information',
+ *     () => ({
+ *       isAuthenticated,
+ *       userId: user?.id,
+ *       email: user?.email,
+ *       permissions: user?.permissions,
+ *     })
+ *   );
+ *
+ *   return <App />;
+ * }
+ * ```
+ */
+declare function useWebMCPContext<T>(name: string, description: string, getValue: () => T): WebMCPReturn<T>;
+//#endregion
+//#region src/client/McpClientProvider.d.ts
+/**
+ * Context value provided by McpClientProvider.
+ *
+ * @internal
+ */
+interface McpClientContextValue {
+  client: Client;
+  tools: Tool$1[];
+  resources: Resource$1[];
+  isConnected: boolean;
+  isLoading: boolean;
+  error: Error | null;
+  capabilities: ServerCapabilities$1 | null;
+  reconnect: () => Promise<void>;
+}
+/**
+ * Props for the McpClientProvider component.
+ *
+ * @public
+ */
+interface McpClientProviderProps {
+  /**
+   * React children to render within the provider.
+   */
+  children: ReactNode;
+  /**
+   * MCP Client instance to use for communication.
+   */
+  client: Client;
+  /**
+   * Transport instance for the client to connect through.
+   */
+  transport: Transport;
+  /**
+   * Optional request options for the connection.
+   */
+  opts?: RequestOptions;
+}
+/**
+ * Provider component that manages an MCP client connection and exposes
+ * tools, resources, and connection state to child components.
+ *
+ * This provider handles:
+ * - Establishing and maintaining the MCP client connection
+ * - Fetching available tools and resources from the server
+ * - Listening for server notifications about tool/resource changes
+ * - Managing connection state and errors
+ * - Automatic cleanup on unmount
+ *
+ * @param props - Component props
+ * @returns Provider component wrapping children
+ *
+ * @public
+ *
+ * @example
+ * Connect to an MCP server via tab transport:
+ * ```tsx
+ * import { Client } from '@modelcontextprotocol/sdk/client/index.js';
+ * import { TabClientTransport } from '@mcp-b/transports';
+ * import { McpClientProvider } from '@mcp-b/react-webmcp';
+ *
+ * const client = new Client(
+ *   { name: 'my-app', version: '1.0.0' },
+ *   { capabilities: {} }
+ * );
+ *
+ * const transport = new TabClientTransport('mcp', {
+ *   clientInstanceId: 'my-app-instance',
+ * });
+ *
+ * function App() {
+ *   return (
+ *     <McpClientProvider client={client} transport={transport}>
+ *       <MyAppContent />
+ *     </McpClientProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Access tools from child components:
+ * ```tsx
+ * function MyAppContent() {
+ *   const { tools, isConnected, isLoading } = useMcpClient();
+ *
+ *   if (isLoading) {
+ *     return <div>Connecting to MCP server...</div>;
+ *   }
+ *
+ *   if (!isConnected) {
+ *     return <div>Failed to connect to MCP server</div>;
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <h2>Available Tools:</h2>
+ *       <ul>
+ *         {tools.map(tool => (
+ *           <li key={tool.name}>{tool.description}</li>
+ *         ))}
+ *       </ul>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function McpClientProvider({
+  children,
+  client,
+  transport,
+  opts
+}: McpClientProviderProps): ReactElement;
+/**
+ * Hook to access the MCP client context.
+ * Must be used within an {@link McpClientProvider}.
+ *
+ * @returns The MCP client context including client instance, tools, resources, and connection state
+ * @throws Error if used outside of McpClientProvider
+ *
+ * @public
+ *
+ * @example
+ * ```tsx
+ * function ToolsList() {
+ *   const { tools, isConnected, error, reconnect } = useMcpClient();
+ *
+ *   if (error) {
+ *     return (
+ *       <div>
+ *         Error: {error.message}
+ *         <button onClick={reconnect}>Retry</button>
+ *       </div>
+ *     );
+ *   }
+ *
+ *   if (!isConnected) {
+ *     return <div>Not connected</div>;
+ *   }
+ *
+ *   return (
+ *     <ul>
+ *       {tools.map(tool => (
+ *         <li key={tool.name}>{tool.description}</li>
+ *       ))}
+ *     </ul>
+ *   );
+ * }
+ * ```
+ */
+declare function useMcpClient(): McpClientContextValue;
+//#endregion
+export { type CallToolResult, McpClientProvider, type McpClientProviderProps, type ModelContextProtocol, type Resource, type ServerCapabilities, type Tool, type ToolAnnotations, type ToolDescriptor, type ToolExecutionState, type WebMCPConfig, type WebMCPReturn, useMcpClient, useWebMCP, useWebMCPContext };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/types.ts","../src/useWebMCP.ts","../src/useWebMCPContext.ts","../src/client/McpClientProvider.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;AAcA;AAiDiB,UAjDA,kBAiDY,CAAA,UAAA,OAAA,CAAA,CAAA;EACW;;;;EAiCN,WAAA,EAAA,OAAA;EAAjB;;;;EAeI,UAAA,EAvFP,OAuFO,GAAA,IAAA;EAA6C;;;;EAkB3C,KAAA,EAnGd,KAmGc,GAAA,IAAA;EASH;;AAUpB;;EAKS,cAAA,EAAA,MAAA;;;;;;;AClBT;;;;;;;;;;;;;ACvEA;;;;;UFFiB,kCACM,eAAe,CAAA,CAAE,cAAc;;;AG3CvC;;EASN,IAAA,EAAA,MAAA;EACI;;;;EAKa,WAAA,EAAA,MAAA;EAUT;;;;;;AA0FjB;;;;;;EAK4B,WAAA,CAAA,EHlDZ,YGkDY;EAAY;AAgMxC;;;iBH5OiB,eAAe,CAAA,CAAE;;;;;gBAMlB;;;;;;;;mBASG,CAAA,CAAE,MAAM,CAAA,CAAE,UAAU,mBAAmB,QAAQ,WAAW;;;;;;;;0BASnD;;;;;;;;uBASH;;;;;;;;oBASH;;;;;;;;;UAUH;;;;;SAKR,mBAAmB;;;;;;;;;+BAUG,QAAQ;;;;;;;;;;;;;;;;;AAtJvC;AAiDA;;;;;;;;;;;;;;;;;;AAsFA;;;;;;;;;ACbA;;;;;;;;;;;;;ACvEA;;;;;;;;AC5Ce;;;;;;;;AAyBf;;;;AAmBS,iBFuEO,SEvEP,CAAA,qBFwEc,MExEd,CAAA,MAAA,EFwE6B,CAAA,CAAE,UExE/B,CAAA,GFwE6C,MExE7C,CAAA,MAAA,EAAA,KAAA,CAAA,EAAA,UAAA,MAAA,CAAA,CAAA,MAAA,EF0EC,YE1ED,CF0Ec,YE1Ed,EF0E4B,OE1E5B,CAAA,CAAA,EF0EuC,YE1EvC,CF0EoD,OE1EpD,CAAA;;;;;;;;;;;;AHnDT;AAiDA;;;;;;;;;;;;;;;;;;AAsFA;;;;;;;;;ACbA;;;;;;;;;;;;;ACvEA;;;;;;;;AC5Ce;;;AAUF,iBDkCG,gBClCH,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,MAAA,EAAA,WAAA,EAAA,MAAA,EAAA,QAAA,EAAA,GAAA,GDqCK,CCrCL,CAAA,EDsCV,YCtCU,CDsCG,CCtCH,CAAA;;;;;;;;AHjBb,UGcU,qBAAA,CHdyB;EAiDlB,MAAA,EGlCP,MHkCO;EACuB,KAAA,EGlC/B,MHkC+B,EAAA;EAAjB,SAAA,EGjCV,UHiCU,EAAA;EAA+B,WAAA,EAAA,OAAA;EA2BtC,SAAA,EAAA,OAAA;EAMkB,KAAA,EG/DzB,KH+DyB,GAAA,IAAA;EAAjB,YAAA,EG9DD,oBH8DC,GAAA,IAAA;EAMD,SAAA,EAAA,GAAA,GGnEG,OHmEH,CAAA,IAAA,CAAA;;;;;;;AAkBU,UG3ET,sBAAA,CH2ES;EASH;;;EAmBN,QAAA,EGnGL,SHmGiB;EAKD;;;EAUG,MAAA,EG7GrB,MH6GqB;EAAO;;;aGxGzB;EF4EG;;;EACsC,IAAA,CAAA,EExE7C,cFwE6C;;;;;;;;;;ACxEtD;;;;;;;;AC5Ce;;;;;;;;AAyBf;;;;;;AA0FA;;;;;;;;AAqMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBArMgB,iBAAA;;;;;GAKb,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAgMZ,YAAA,CAAA,GAAY"}

package/dist/index.js

@@ -0,0 +1,2 @@
+import{createContext as e,useCallback as t,useContext as n,useEffect as r,useRef as i,useState as a}from"react";import{z as o}from"zod";import{ResourceListChangedNotificationSchema as s,ToolListChangedNotificationSchema as c}from"@modelcontextprotocol/sdk/types.js";import{jsx as l}from"react/jsx-runtime";function u(e){let t={},n=[];for(let[r,i]of Object.entries(e)){let e=i.description||void 0,a=`string`;i instanceof o.ZodNumber?a=`number`:i instanceof o.ZodBoolean?a=`boolean`:i instanceof o.ZodArray?a=`array`:i instanceof o.ZodObject&&(a=`object`),t[r]={type:a,...e&&{description:e}},i.isOptional()||n.push(r)}return{type:`object`,properties:t,...n.length>0&&{required:n}}}function d(e){return typeof e==`string`?e:JSON.stringify(e,null,2)}function f(e){let{name:n,description:s,inputSchema:c,outputSchema:l,annotations:f,handler:p,formatOutput:m=d,onSuccess:h,onError:g}=e,[_,v]=a({isExecuting:!1,lastResult:null,error:null,executionCount:0}),y=i(p),b=i(h),x=i(g),S=i(m);r(()=>{y.current=p},[p]),r(()=>{b.current=h},[h]),r(()=>{x.current=g},[g]),r(()=>{S.current=m},[m]);let C=c?o.object(c):null,w=t(async e=>{v(e=>({...e,isExecuting:!0,error:null}));try{let t=C?C.parse(e):e,n=await y.current(t);return v(e=>({isExecuting:!1,lastResult:n,error:null,executionCount:e.executionCount+1})),b.current&&b.current(n,e),n}catch(t){let n=t instanceof Error?t:Error(String(t));throw v(e=>({...e,isExecuting:!1,error:n})),x.current&&x.current(n,e),n}},[C]),T=t(()=>{v({isExecuting:!1,lastResult:null,error:null,executionCount:0})},[]);return r(()=>{if(typeof window>`u`||!window.navigator?.modelContext){console.warn(`[useWebMCP] window.navigator.modelContext is not available. Tool "${n}" will not be registered.`);return}let e=c?u(c):void 0,t=l?u(l):void 0,r=async(e,t)=>{try{let t=await w(e);return{content:[{type:`text`,text:S.current(t)}]}}catch(e){return{content:[{type:`text`,text:`Error: ${e instanceof Error?e.message:String(e)}`}],isError:!0}}},i=window.navigator.modelContext.registerTool({name:n,description:s,inputSchema:e||{type:`object`,properties:{}},...t&&{outputSchema:t},...f&&{annotations:f},execute:async e=>await r(e,{})});if(console.log(`[useWebMCP] Registered tool: ${n}`),typeof window<`u`){let e=window.navigator.modelContext.listTools(),t=window;t.mcpTools=e.map(e=>e.name)}return()=>{if(i&&(i.unregister(),console.log(`[useWebMCP] Unregistered tool: ${n}`),typeof window<`u`&&window.navigator?.modelContext)){let e=window.navigator.modelContext.listTools(),t=window;t.mcpTools=e.map(e=>e.name)}}},[n,s,c,l,f,w]),{state:_,execute:w,reset:T}}function p(e,t,n){let r=i(n);return r.current=n,f({name:e,description:t,annotations:{title:`Context: ${e}`,readOnlyHint:!0,idempotentHint:!0,destructiveHint:!1,openWorldHint:!1},handler:async()=>r.current(),formatOutput:e=>typeof e==`string`?e:JSON.stringify(e,null,2)})}const m=e(null);function h({children:e,client:n,transport:o,opts:u={}}){let[d,f]=a([]),[p,h]=a([]),[g,_]=a(!1),[v,y]=a(null),[b,x]=a(!1),[S,C]=a(null),w=i(`disconnected`),T=t(async()=>{if(n){if(!n.getServerCapabilities()?.resources){f([]);return}try{f((await n.listResources()).resources)}catch(e){throw console.error(`Error fetching resources:`,e),e}}},[n]),E=t(async()=>{if(n){if(!n.getServerCapabilities()?.tools){h([]);return}try{h((await n.listTools()).tools)}catch(e){throw console.error(`Error fetching tools:`,e),e}}},[n]),D=t(async()=>{if(!n||!o)throw Error(`Client or transport not available`);if(w.current===`disconnected`){w.current=`connecting`,_(!0),y(null);try{await n.connect(o,u);let e=n.getServerCapabilities();x(!0),C(e||null),w.current=`connected`,await Promise.all([T(),E()])}catch(e){let t=e instanceof Error?e:Error(String(e));throw w.current=`disconnected`,y(t),t}finally{_(!1)}}},[n,o,u,T,E]);return r(()=>{if(!b||!n)return;let e=n.getServerCapabilities();return e?.resources?.listChanged&&n.setNotificationHandler(s,()=>{T().catch(console.error)}),e?.tools?.listChanged&&n.setNotificationHandler(c,()=>{E().catch(console.error)}),()=>{e?.resources?.listChanged&&n.removeNotificationHandler(`notifications/resources/list_changed`),e?.tools?.listChanged&&n.removeNotificationHandler(`notifications/tools/list_changed`)}},[n,b,T,E]),r(()=>(D().catch(e=>{console.error(`Failed to connect MCP client:`,e)}),()=>{w.current=`disconnected`,x(!1)}),[n,o]),l(m.Provider,{value:{client:n,tools:p,resources:d,isConnected:b,isLoading:g,error:v,capabilities:S,reconnect:D},children:e})}function g(){let e=n(m);if(!e)throw Error(`useMcpClient must be used within an McpClientProvider`);return e}export{h as McpClientProvider,g as useMcpClient,f as useWebMCP,p as useWebMCPContext};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["properties: Record<string, unknown>","required: string[]"],"sources":["../src/useWebMCP.ts","../src/useWebMCPContext.ts","../src/client/McpClientProvider.tsx"],"sourcesContent":["import type { InputSchema } from '@mcp-b/global';\nimport type { CallToolResult } from '@modelcontextprotocol/sdk/types.js';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { z } from 'zod';\nimport type { ToolExecutionState, WebMCPConfig, WebMCPReturn } from './types.js';\n\n/**\n * Converts a Zod schema object to JSON Schema format for MCP.\n * Handles basic type inference for common Zod types.\n *\n * @internal\n * @param schema - Record of Zod type definitions\n * @returns JSON Schema object with type, properties, and required fields\n */\nfunction zodToJsonSchema(schema: Record<string, z.ZodTypeAny>): {\n  type: string;\n  properties?: Record<string, unknown>;\n  required?: string[];\n} {\n  const properties: Record<string, unknown> = {};\n  const required: string[] = [];\n\n  for (const [key, zodType] of Object.entries(schema)) {\n    const description = (zodType as { description?: string }).description || undefined;\n\n    let type = 'string';\n    if (zodType instanceof z.ZodNumber) {\n      type = 'number';\n    } else if (zodType instanceof z.ZodBoolean) {\n      type = 'boolean';\n    } else if (zodType instanceof z.ZodArray) {\n      type = 'array';\n    } else if (zodType instanceof z.ZodObject) {\n      type = 'object';\n    }\n\n    properties[key] = {\n      type,\n      ...(description && { description }),\n    };\n\n    if (!zodType.isOptional()) {\n      required.push(key);\n    }\n  }\n\n  return {\n    type: 'object',\n    properties,\n    ...(required.length > 0 && { required }),\n  };\n}\n\n/**\n * Default output formatter that converts values to formatted JSON strings.\n *\n * @internal\n * @param output - The value to format\n * @returns Formatted string representation\n */\nfunction defaultFormatOutput(output: unknown): string {\n  if (typeof output === 'string') {\n    return output;\n  }\n  return JSON.stringify(output, null, 2);\n}\n\n/**\n * React hook for registering and managing Model Context Protocol (MCP) tools.\n *\n * This hook handles the complete lifecycle of an MCP tool:\n * - Registers the tool with `window.navigator.modelContext`\n * - Manages execution state (loading, results, errors)\n * - Validates input using Zod schemas\n * - Handles tool execution and lifecycle callbacks\n * - Automatically unregisters on component unmount\n *\n * @template TInputSchema - Zod schema object defining input parameter types\n * @template TOutput - Type of data returned by the handler function\n *\n * @param config - Configuration object for the tool\n * @returns Object containing execution state and control methods\n *\n * @public\n *\n * @example\n * Basic tool registration:\n * ```tsx\n * function PostActions() {\n *   const likeTool = useWebMCP({\n *     name: 'posts_like',\n *     description: 'Like a post by ID',\n *     inputSchema: {\n *       postId: z.string().uuid().describe('The ID of the post to like'),\n *     },\n *     handler: async ({ postId }) => {\n *       await api.posts.like(postId);\n *       return { success: true, postId };\n *     },\n *   });\n *\n *   if (likeTool.state.isExecuting) {\n *     return <Spinner />;\n *   }\n *\n *   return <div>Post actions ready</div>;\n * }\n * ```\n *\n * @example\n * Tool with annotations and callbacks:\n * ```tsx\n * const deleteTool = useWebMCP({\n *   name: 'posts_delete',\n *   description: 'Delete a post permanently',\n *   inputSchema: {\n *     postId: z.string().uuid(),\n *   },\n *   annotations: {\n *     destructiveHint: true,\n *     idempotentHint: false,\n *   },\n *   handler: async ({ postId }) => {\n *     await api.posts.delete(postId);\n *     return { deleted: true };\n *   },\n *   onSuccess: () => {\n *     navigate('/posts');\n *     toast.success('Post deleted');\n *   },\n *   onError: (error) => {\n *     toast.error(`Failed to delete: ${error.message}`);\n *   },\n * });\n * ```\n */\nexport function useWebMCP<\n  TInputSchema extends Record<string, z.ZodTypeAny> = Record<string, never>,\n  TOutput = string,\n>(config: WebMCPConfig<TInputSchema, TOutput>): WebMCPReturn<TOutput> {\n  const {\n    name,\n    description,\n    inputSchema,\n    outputSchema,\n    annotations,\n    handler,\n    formatOutput = defaultFormatOutput,\n    onSuccess,\n    onError,\n  } = config;\n\n  const [state, setState] = useState<ToolExecutionState<TOutput>>({\n    isExecuting: false,\n    lastResult: null,\n    error: null,\n    executionCount: 0,\n  });\n\n  const handlerRef = useRef(handler);\n  const onSuccessRef = useRef(onSuccess);\n  const onErrorRef = useRef(onError);\n  const formatOutputRef = useRef(formatOutput);\n\n  useEffect(() => {\n    handlerRef.current = handler;\n  }, [handler]);\n\n  useEffect(() => {\n    onSuccessRef.current = onSuccess;\n  }, [onSuccess]);\n\n  useEffect(() => {\n    onErrorRef.current = onError;\n  }, [onError]);\n\n  useEffect(() => {\n    formatOutputRef.current = formatOutput;\n  }, [formatOutput]);\n\n  const validator = inputSchema ? z.object(inputSchema) : null;\n\n  /**\n   * Executes the tool handler with input validation and state management.\n   *\n   * @param input - The input parameters to validate and pass to the handler\n   * @returns Promise resolving to the handler's output\n   * @throws Error if validation fails or the handler throws\n   */\n  const execute = useCallback(\n    async (input: unknown): Promise<TOutput> => {\n      setState((prev) => ({\n        ...prev,\n        isExecuting: true,\n        error: null,\n      }));\n\n      try {\n        const validatedInput = validator ? validator.parse(input) : input;\n        const result = await handlerRef.current(validatedInput as never);\n\n        setState((prev) => ({\n          isExecuting: false,\n          lastResult: result,\n          error: null,\n          executionCount: prev.executionCount + 1,\n        }));\n\n        if (onSuccessRef.current) {\n          onSuccessRef.current(result, input);\n        }\n\n        return result;\n      } catch (error) {\n        const err = error instanceof Error ? error : new Error(String(error));\n\n        setState((prev) => ({\n          ...prev,\n          isExecuting: false,\n          error: err,\n        }));\n\n        if (onErrorRef.current) {\n          onErrorRef.current(err, input);\n        }\n\n        throw err;\n      }\n    },\n    [validator]\n  );\n\n  /**\n   * Resets the execution state to initial values.\n   */\n  const reset = useCallback(() => {\n    setState({\n      isExecuting: false,\n      lastResult: null,\n      error: null,\n      executionCount: 0,\n    });\n  }, []);\n\n  useEffect(() => {\n    if (typeof window === 'undefined' || !window.navigator?.modelContext) {\n      console.warn(\n        `[useWebMCP] window.navigator.modelContext is not available. Tool \"${name}\" will not be registered.`\n      );\n      return;\n    }\n\n    const inputJsonSchema = inputSchema ? zodToJsonSchema(inputSchema) : undefined;\n    const outputJsonSchema = outputSchema ? zodToJsonSchema(outputSchema) : undefined;\n\n    const mcpHandler = async (input: unknown, _extra: unknown): Promise<CallToolResult> => {\n      try {\n        const result = await execute(input);\n        const formattedOutput = formatOutputRef.current(result);\n\n        return {\n          content: [\n            {\n              type: 'text',\n              text: formattedOutput,\n            },\n          ],\n        };\n      } catch (error) {\n        const errorMessage = error instanceof Error ? error.message : String(error);\n\n        return {\n          content: [\n            {\n              type: 'text',\n              text: `Error: ${errorMessage}`,\n            },\n          ],\n          isError: true,\n        };\n      }\n    };\n\n    const fallbackInputSchema: InputSchema = {\n      type: 'object',\n      properties: {},\n    };\n\n    const registration = window.navigator.modelContext.registerTool({\n      name,\n      description,\n      inputSchema: (inputJsonSchema || fallbackInputSchema) as InputSchema,\n      ...(outputJsonSchema && { outputSchema: outputJsonSchema as InputSchema }),\n      ...(annotations && { annotations }),\n      execute: async (args: Record<string, unknown>) => {\n        const result = await mcpHandler(args, {});\n        return result;\n      },\n    });\n\n    console.log(`[useWebMCP] Registered tool: ${name}`);\n\n    // Expose registered tools on window for testing\n    if (typeof window !== 'undefined') {\n      const tools = window.navigator.modelContext.listTools();\n      const w = window as unknown as Window & { mcpTools: string[] };\n      w.mcpTools = tools.map((t) => t.name);\n    }\n\n    return () => {\n      if (registration) {\n        registration.unregister();\n        console.log(`[useWebMCP] Unregistered tool: ${name}`);\n\n        // Update window.mcpTools after unregistration\n        if (typeof window !== 'undefined' && window.navigator?.modelContext) {\n          const tools = window.navigator.modelContext.listTools();\n          const w = window as unknown as Window & { mcpTools: string[] };\n          w.mcpTools = tools.map((t) => t.name);\n        }\n      }\n    };\n  }, [name, description, inputSchema, outputSchema, annotations, execute]);\n\n  return {\n    state,\n    execute,\n    reset,\n  };\n}\n","import { useRef } from 'react';\nimport type { WebMCPReturn } from './types.js';\nimport { useWebMCP } from './useWebMCP.js';\n\n/**\n * Convenience hook for exposing read-only context data to AI assistants.\n *\n * This is a simplified wrapper around {@link useWebMCP} specifically designed for\n * context tools that expose data without performing actions. The hook automatically\n * configures appropriate annotations (read-only, idempotent) and handles value\n * serialization.\n *\n * @template T - The type of context data to expose\n *\n * @param name - Unique identifier for the context tool (e.g., 'context_current_post')\n * @param description - Human-readable description of the context for AI assistants\n * @param getValue - Function that returns the current context value\n * @returns Tool execution state and control methods\n *\n * @public\n *\n * @example\n * Expose current post context:\n * ```tsx\n * function PostDetailPage() {\n *   const { postId } = useParams();\n *   const { data: post } = useQuery(['post', postId], () => fetchPost(postId));\n *\n *   useWebMCPContext(\n *     'context_current_post',\n *     'Get the currently viewed post ID and metadata',\n *     () => ({\n *       postId,\n *       title: post?.title,\n *       author: post?.author,\n *       tags: post?.tags,\n *       createdAt: post?.createdAt,\n *     })\n *   );\n *\n *   return <PostContent post={post} />;\n * }\n * ```\n *\n * @example\n * Expose user session context:\n * ```tsx\n * function AppRoot() {\n *   const { user, isAuthenticated } = useAuth();\n *\n *   useWebMCPContext(\n *     'context_user_session',\n *     'Get the current user session information',\n *     () => ({\n *       isAuthenticated,\n *       userId: user?.id,\n *       email: user?.email,\n *       permissions: user?.permissions,\n *     })\n *   );\n *\n *   return <App />;\n * }\n * ```\n */\nexport function useWebMCPContext<T>(\n  name: string,\n  description: string,\n  getValue: () => T\n): WebMCPReturn<T> {\n  const getValueRef = useRef(getValue);\n  getValueRef.current = getValue;\n\n  return useWebMCP<Record<string, never>, T>({\n    name,\n    description,\n    annotations: {\n      title: `Context: ${name}`,\n      readOnlyHint: true,\n      idempotentHint: true,\n      destructiveHint: false,\n      openWorldHint: false,\n    },\n    handler: async () => {\n      return getValueRef.current();\n    },\n    formatOutput: (output) => {\n      if (typeof output === 'string') {\n        return output;\n      }\n      return JSON.stringify(output, null, 2);\n    },\n  });\n}\n","import type { Client } from '@modelcontextprotocol/sdk/client/index.js';\nimport type { RequestOptions } from '@modelcontextprotocol/sdk/shared/protocol.js';\nimport type { Transport } from '@modelcontextprotocol/sdk/shared/transport.js';\nimport type {\n  Tool as McpTool,\n  Resource,\n  ServerCapabilities,\n} from '@modelcontextprotocol/sdk/types.js';\nimport {\n  ResourceListChangedNotificationSchema,\n  ToolListChangedNotificationSchema,\n} from '@modelcontextprotocol/sdk/types.js';\nimport {\n  createContext,\n  type ReactElement,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\n/**\n * Context value provided by McpClientProvider.\n *\n * @internal\n */\ninterface McpClientContextValue {\n  client: Client;\n  tools: McpTool[];\n  resources: Resource[];\n  isConnected: boolean;\n  isLoading: boolean;\n  error: Error | null;\n  capabilities: ServerCapabilities | null;\n  reconnect: () => Promise<void>;\n}\n\nconst McpClientContext = createContext<McpClientContextValue | null>(null);\n\n/**\n * Props for the McpClientProvider component.\n *\n * @public\n */\nexport interface McpClientProviderProps {\n  /**\n   * React children to render within the provider.\n   */\n  children: ReactNode;\n\n  /**\n   * MCP Client instance to use for communication.\n   */\n  client: Client;\n\n  /**\n   * Transport instance for the client to connect through.\n   */\n  transport: Transport;\n\n  /**\n   * Optional request options for the connection.\n   */\n  opts?: RequestOptions;\n}\n\n/**\n * Provider component that manages an MCP client connection and exposes\n * tools, resources, and connection state to child components.\n *\n * This provider handles:\n * - Establishing and maintaining the MCP client connection\n * - Fetching available tools and resources from the server\n * - Listening for server notifications about tool/resource changes\n * - Managing connection state and errors\n * - Automatic cleanup on unmount\n *\n * @param props - Component props\n * @returns Provider component wrapping children\n *\n * @public\n *\n * @example\n * Connect to an MCP server via tab transport:\n * ```tsx\n * import { Client } from '@modelcontextprotocol/sdk/client/index.js';\n * import { TabClientTransport } from '@mcp-b/transports';\n * import { McpClientProvider } from '@mcp-b/react-webmcp';\n *\n * const client = new Client(\n *   { name: 'my-app', version: '1.0.0' },\n *   { capabilities: {} }\n * );\n *\n * const transport = new TabClientTransport('mcp', {\n *   clientInstanceId: 'my-app-instance',\n * });\n *\n * function App() {\n *   return (\n *     <McpClientProvider client={client} transport={transport}>\n *       <MyAppContent />\n *     </McpClientProvider>\n *   );\n * }\n * ```\n *\n * @example\n * Access tools from child components:\n * ```tsx\n * function MyAppContent() {\n *   const { tools, isConnected, isLoading } = useMcpClient();\n *\n *   if (isLoading) {\n *     return <div>Connecting to MCP server...</div>;\n *   }\n *\n *   if (!isConnected) {\n *     return <div>Failed to connect to MCP server</div>;\n *   }\n *\n *   return (\n *     <div>\n *       <h2>Available Tools:</h2>\n *       <ul>\n *         {tools.map(tool => (\n *           <li key={tool.name}>{tool.description}</li>\n *         ))}\n *       </ul>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function McpClientProvider({\n  children,\n  client,\n  transport,\n  opts = {},\n}: McpClientProviderProps): ReactElement {\n  const [resources, setResources] = useState<Resource[]>([]);\n  const [tools, setTools] = useState<McpTool[]>([]);\n  const [isLoading, setIsLoading] = useState<boolean>(false);\n  const [error, setError] = useState<Error | null>(null);\n  const [isConnected, setIsConnected] = useState<boolean>(false);\n  const [capabilities, setCapabilities] = useState<ServerCapabilities | null>(null);\n\n  const connectionStateRef = useRef<'disconnected' | 'connecting' | 'connected'>('disconnected');\n\n  /**\n   * Fetches available resources from the MCP server.\n   * Only fetches if the server supports the resources capability.\n   */\n  const fetchResourcesInternal = useCallback(async () => {\n    if (!client) return;\n\n    const serverCapabilities = client.getServerCapabilities();\n    if (!serverCapabilities?.resources) {\n      setResources([]);\n      return;\n    }\n\n    try {\n      const response = await client.listResources();\n      setResources(response.resources);\n    } catch (e) {\n      console.error('Error fetching resources:', e);\n      throw e;\n    }\n  }, [client]);\n\n  /**\n   * Fetches available tools from the MCP server.\n   * Only fetches if the server supports the tools capability.\n   */\n  const fetchToolsInternal = useCallback(async () => {\n    if (!client) return;\n\n    const serverCapabilities = client.getServerCapabilities();\n    if (!serverCapabilities?.tools) {\n      setTools([]);\n      return;\n    }\n\n    try {\n      const response = await client.listTools();\n      setTools(response.tools);\n    } catch (e) {\n      console.error('Error fetching tools:', e);\n      throw e;\n    }\n  }, [client]);\n\n  /**\n   * Establishes connection to the MCP server.\n   * Safe to call multiple times - will no-op if already connected or connecting.\n   */\n  const reconnect = useCallback(async () => {\n    if (!client || !transport) {\n      throw new Error('Client or transport not available');\n    }\n\n    if (connectionStateRef.current !== 'disconnected') {\n      return;\n    }\n\n    connectionStateRef.current = 'connecting';\n    setIsLoading(true);\n    setError(null);\n\n    try {\n      await client.connect(transport, opts);\n      const caps = client.getServerCapabilities();\n      setIsConnected(true);\n      setCapabilities(caps || null);\n      connectionStateRef.current = 'connected';\n\n      await Promise.all([fetchResourcesInternal(), fetchToolsInternal()]);\n    } catch (e) {\n      const err = e instanceof Error ? e : new Error(String(e));\n      connectionStateRef.current = 'disconnected';\n      setError(err);\n      throw err;\n    } finally {\n      setIsLoading(false);\n    }\n  }, [client, transport, opts, fetchResourcesInternal, fetchToolsInternal]);\n\n  useEffect(() => {\n    if (!isConnected || !client) {\n      return;\n    }\n\n    const serverCapabilities = client.getServerCapabilities();\n\n    const handleResourcesChanged = () => {\n      fetchResourcesInternal().catch(console.error);\n    };\n\n    const handleToolsChanged = () => {\n      fetchToolsInternal().catch(console.error);\n    };\n\n    if (serverCapabilities?.resources?.listChanged) {\n      client.setNotificationHandler(ResourceListChangedNotificationSchema, handleResourcesChanged);\n    }\n\n    if (serverCapabilities?.tools?.listChanged) {\n      client.setNotificationHandler(ToolListChangedNotificationSchema, handleToolsChanged);\n    }\n\n    return () => {\n      if (serverCapabilities?.resources?.listChanged) {\n        client.removeNotificationHandler('notifications/resources/list_changed');\n      }\n\n      if (serverCapabilities?.tools?.listChanged) {\n        client.removeNotificationHandler('notifications/tools/list_changed');\n      }\n    };\n  }, [client, isConnected, fetchResourcesInternal, fetchToolsInternal]);\n\n  useEffect(() => {\n    // Initial connection - reconnect() has its own guard to prevent concurrent connections\n    reconnect().catch((err) => {\n      console.error('Failed to connect MCP client:', err);\n    });\n\n    // Cleanup: mark as disconnected so next mount will reconnect\n    return () => {\n      connectionStateRef.current = 'disconnected';\n      setIsConnected(false);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [client, transport]);\n\n  return (\n    <McpClientContext.Provider\n      value={{\n        client,\n        tools,\n        resources,\n        isConnected,\n        isLoading,\n        error,\n        capabilities,\n        reconnect,\n      }}\n    >\n      {children}\n    </McpClientContext.Provider>\n  );\n}\n\n/**\n * Hook to access the MCP client context.\n * Must be used within an {@link McpClientProvider}.\n *\n * @returns The MCP client context including client instance, tools, resources, and connection state\n * @throws Error if used outside of McpClientProvider\n *\n * @public\n *\n * @example\n * ```tsx\n * function ToolsList() {\n *   const { tools, isConnected, error, reconnect } = useMcpClient();\n *\n *   if (error) {\n *     return (\n *       <div>\n *         Error: {error.message}\n *         <button onClick={reconnect}>Retry</button>\n *       </div>\n *     );\n *   }\n *\n *   if (!isConnected) {\n *     return <div>Not connected</div>;\n *   }\n *\n *   return (\n *     <ul>\n *       {tools.map(tool => (\n *         <li key={tool.name}>{tool.description}</li>\n *       ))}\n *     </ul>\n *   );\n * }\n * ```\n */\nexport function useMcpClient() {\n  const context = useContext(McpClientContext);\n  if (!context) {\n    throw new Error('useMcpClient must be used within an McpClientProvider');\n  }\n  return context;\n}\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@mcp-b/react-webmcp",
+  "version": "0.1.1",
+  "description": "React hooks for Model Context Protocol - register tools via navigator.modelContext and consume tools from MCP servers",
+  "keywords": [
+    "mcp",
+    "model-context-protocol",
+    "react",
+    "hooks",
+    "react-hooks",
+    "browser",
+    "ai",
+    "assistant",
+    "tools",
+    "zod"
+  ],
+  "homepage": "https://github.com/WebMCP-org/WebMCP#readme",
+  "bugs": {
+    "url": "https://github.com/WebMCP-org/WebMCP/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/WebMCP-org/WebMCP.git",
+    "directory": "packages/react-webmcp"
+  },
+  "license": "MIT",
+  "author": "WebMCP Team",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "main": "./dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "1.15.0",
+    "@mcp-b/global": "1.0.14",
+    "@mcp-b/webmcp-ts-sdk": "1.0.1",
+    "@mcp-b/transports": "1.0.3"
+  },
+  "devDependencies": {
+    "@types/node": "^22.15.21",
+    "@types/react": "^19.1.2",
+    "tsdown": "^0.15.10",
+    "typescript": "^5.8.3",
+    "zod": "^3.25.76"
+  },
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "zod": "^3.25.76"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "build:prod": "NODE_ENV=prod tsdown",
+    "check": "biome check --write .",
+    "clean": "rm -rf dist .turbo",
+    "format": "biome format --write .",
+    "lint": "biome lint --write .",
+    "publish:dry": "pnpm publish --access public --dry-run",
+    "publish:npm": "pnpm publish --access public",
+    "typecheck": "tsc --noEmit",
+    "version:major": "pnpm version major --no-git-tag-version",
+    "version:minor": "pnpm version minor --no-git-tag-version",
+    "version:patch": "pnpm version patch --no-git-tag-version"
+  }
+}