@mcp-web/react 0.1.0

package/dist/use-apps.js

@@ -0,0 +1,58 @@
+import { isCreatedApp } from '@mcp-web/types';
+import { useContext, useEffect, useRef } from 'react';
+import { MCPWebContext } from './mcp-web-context';
+export function useApps(firstArg, ...rest) {
+    // Determine if first arg is MCPWeb instance or an app
+    const isMCPWebInstance = (value) => typeof value === 'object' &&
+        value !== null &&
+        'addApp' in value &&
+        'removeApp' in value &&
+        typeof value.addApp === 'function';
+    let mcpWebProp;
+    let appsToRegister;
+    if (isMCPWebInstance(firstArg)) {
+        mcpWebProp = firstArg;
+        appsToRegister = rest.flat();
+    }
+    else {
+        mcpWebProp = undefined;
+        appsToRegister = [firstArg, ...rest].flat();
+    }
+    // Try to get from context if not provided
+    const context = useContext(MCPWebContext);
+    const mcpWeb = mcpWebProp ?? context?.mcpWeb;
+    if (!mcpWeb) {
+        throw new Error('useApps requires either mcpWeb as first argument or MCPWebProvider in component tree');
+    }
+    // Keep a stable reference to the apps array
+    const appsRef = useRef(appsToRegister);
+    appsRef.current = appsToRegister;
+    // Keep a stable reference to mcpWeb
+    const mcpWebRef = useRef(mcpWeb);
+    mcpWebRef.current = mcpWeb;
+    useEffect(() => {
+        const cleanupFns = [];
+        const mcp = mcpWebRef.current;
+        for (const app of appsRef.current) {
+            if (isCreatedApp(app)) {
+                // Register CreatedApp
+                mcp.addApp(app);
+                cleanupFns.push(() => mcp.removeApp(app.definition.name));
+            }
+            else {
+                // Register raw AppDefinition
+                mcp.addApp(app);
+                cleanupFns.push(() => mcp.removeApp(app.name));
+            }
+        }
+        return () => {
+            for (const cleanup of cleanupFns) {
+                cleanup();
+            }
+        };
+    }, []);
+    // Note: Empty deps because we use refs - apps are registered once on mount
+    // and cleaned up on unmount. If you need to re-register on app change,
+    // use a key prop on the component.
+}
+//# sourceMappingURL=use-apps.js.map

package/dist/use-apps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-apps.js","sourceRoot":"","sources":["../src/use-apps.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAoElD,MAAM,UAAU,OAAO,CACrB,QAAsD,EACtD,GAAG,IAA6C;IAEhD,sDAAsD;IACtD,MAAM,gBAAgB,GAAG,CAAC,KAAc,EAAmB,EAAE,CAC3D,OAAO,KAAK,KAAK,QAAQ;QACzB,KAAK,KAAK,IAAI;QACd,QAAQ,IAAI,KAAK;QACjB,WAAW,IAAI,KAAK;QACpB,OAAQ,KAAgB,CAAC,MAAM,KAAK,UAAU,CAAC;IAEjD,IAAI,UAA8B,CAAC;IACnC,IAAI,cAAiC,CAAC;IAEtC,IAAI,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC/B,UAAU,GAAG,QAAQ,CAAC;QACtB,cAAc,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;IAC/B,CAAC;SAAM,CAAC;QACN,UAAU,GAAG,SAAS,CAAC;QACvB,cAAc,GAAG,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC;IAC9C,CAAC;IAED,0CAA0C;IAC1C,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAC1C,MAAM,MAAM,GAAG,UAAU,IAAI,OAAO,EAAE,MAAM,CAAC;IAE7C,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,MAAM,IAAI,KAAK,CACb,sFAAsF,CACvF,CAAC;IACJ,CAAC;IAED,4CAA4C;IAC5C,MAAM,OAAO,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IACvC,OAAO,CAAC,OAAO,GAAG,cAAc,CAAC;IAEjC,oCAAoC;IACpC,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IACjC,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC;IAE3B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAmB,EAAE,CAAC;QACtC,MAAM,GAAG,GAAG,SAAS,CAAC,OAAO,CAAC;QAE9B,KAAK,MAAM,GAAG,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;YAClC,IAAI,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;gBACtB,sBAAsB;gBACtB,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBAChB,UAAU,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;YAC5D,CAAC;iBAAM,CAAC;gBACN,6BAA6B;gBAC7B,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBAChB,UAAU,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;YACjD,CAAC;QACH,CAAC;QAED,OAAO,GAAG,EAAE;YACV,KAAK,MAAM,OAAO,IAAI,UAAU,EAAE,CAAC;gBACjC,OAAO,EAAE,CAAC;YACZ,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,2EAA2E;IAC3E,uEAAuE;IACvE,mCAAmC;AACrC,CAAC"}

package/dist/use-connected-mcp-web.d.ts

@@ -0,0 +1,14 @@
+import type { MCPWeb } from "@mcp-web/core";
+import type { MCPWebContextValue } from "./mcp-web-context";
+/**
+ * Internal hook for managing MCPWeb connection lifecycle.
+ * Connects on mount and disconnects on unmount.
+ * Returns reactive connection state for triggering re-renders.
+ *
+ * Handles React StrictMode's double-mount behavior by using a ref to track
+ * whether we should actually disconnect on cleanup.
+ *
+ * @internal
+ */
+export declare function useConnectedMCPWeb(mcpInstance: MCPWeb): MCPWebContextValue;
+//# sourceMappingURL=use-connected-mcp-web.d.ts.map

package/dist/use-connected-mcp-web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-connected-mcp-web.d.ts","sourceRoot":"","sources":["../src/use-connected-mcp-web.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,MAAM,GAAG,kBAAkB,CAkC1E"}

package/dist/use-connected-mcp-web.js

@@ -0,0 +1,44 @@
+import { useEffect, useRef, useState } from "react";
+/**
+ * Internal hook for managing MCPWeb connection lifecycle.
+ * Connects on mount and disconnects on unmount.
+ * Returns reactive connection state for triggering re-renders.
+ *
+ * Handles React StrictMode's double-mount behavior by using a ref to track
+ * whether we should actually disconnect on cleanup.
+ *
+ * @internal
+ */
+export function useConnectedMCPWeb(mcpInstance) {
+    const [isConnected, setIsConnected] = useState(mcpInstance.connected);
+    // Track if the effect has been cleaned up to handle StrictMode double-mount
+    const cleanedUpRef = useRef(false);
+    useEffect(() => {
+        // Reset the cleanup flag on mount
+        cleanedUpRef.current = false;
+        if (!mcpInstance.connected) {
+            mcpInstance.connect().then(() => {
+                // Only update state if we haven't been cleaned up
+                if (!cleanedUpRef.current) {
+                    setIsConnected(true);
+                }
+            });
+        }
+        else {
+            setIsConnected(true);
+        }
+        return () => {
+            cleanedUpRef.current = true;
+            // Use setTimeout to defer disconnect, allowing StrictMode's remount to cancel it
+            // If the component remounts (StrictMode), the new effect will run before this timeout
+            setTimeout(() => {
+                // Only disconnect if we're still in a cleaned-up state (no remount happened)
+                if (cleanedUpRef.current) {
+                    mcpInstance.disconnect();
+                }
+            }, 0);
+        };
+    }, [mcpInstance]);
+    return { mcpWeb: mcpInstance, isConnected };
+}
+//# sourceMappingURL=use-connected-mcp-web.js.map

package/dist/use-connected-mcp-web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-connected-mcp-web.js","sourceRoot":"","sources":["../src/use-connected-mcp-web.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGpD;;;;;;;;;GASG;AACH,MAAM,UAAU,kBAAkB,CAAC,WAAmB;IACpD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IACtE,4EAA4E;IAC5E,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEnC,SAAS,CAAC,GAAG,EAAE;QACb,kCAAkC;QAClC,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;QAE7B,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,CAAC;YAC3B,WAAW,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE;gBAC9B,kDAAkD;gBAClD,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC;oBAC1B,cAAc,CAAC,IAAI,CAAC,CAAC;gBACvB,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,cAAc,CAAC,IAAI,CAAC,CAAC;QACvB,CAAC;QAED,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;YAC5B,iFAAiF;YACjF,sFAAsF;YACtF,UAAU,CAAC,GAAG,EAAE;gBACd,6EAA6E;gBAC7E,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;oBACzB,WAAW,CAAC,UAAU,EAAE,CAAC;gBAC3B,CAAC;YACH,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC;AAC9C,CAAC"}

package/dist/use-mcp-apps.d.ts

@@ -0,0 +1,63 @@
+import type { MCPWeb } from '@mcp-web/core';
+import type { AppDefinition, CreatedApp } from '@mcp-web/types';
+/**
+ * An app that can be registered with useApps.
+ * Can be a CreatedApp or a raw AppDefinition.
+ */
+export type RegisterableApp = CreatedApp | AppDefinition;
+/**
+ * Hook for registering MCP Apps with automatic cleanup on unmount.
+ *
+ * This is the recommended way to register MCP Apps in React applications.
+ * Apps are registered when the component mounts and automatically
+ * unregistered when the component unmounts.
+ *
+ * MCP Apps are visual UI components that AI can render inline in chat
+ * interfaces like Claude Desktop.
+ *
+ * @example Basic usage with createApp
+ * ```tsx
+ * // apps.ts
+ * import { createApp } from '@mcp-web/app';
+ *
+ * export const statisticsApp = createApp({
+ *   name: 'show_statistics',
+ *   description: 'Display statistics visualization',
+ *   handler: () => ({
+ *     totalTasks: todos.length,
+ *     completedTasks: completedTodos.length,
+ *   }),
+ * });
+ *
+ * // App.tsx
+ * import { useMCPApps } from '@mcp-web/react';
+ * import { statisticsApp } from './apps';
+ *
+ * function App() {
+ *   useMCPApps(statisticsApp);
+ *   return <div>...</div>;
+ * }
+ * ```
+ *
+ * @example Multiple apps
+ * ```tsx
+ * function App() {
+ *   useMCPApps(statisticsApp, chartApp, dashboardApp);
+ *   return <div>...</div>;
+ * }
+ * ```
+ *
+ * @example Conditional app registration
+ * ```tsx
+ * function Analytics() {
+ *   // This app only exists while Analytics is mounted
+ *   useMCPApps(analyticsApp);
+ *   return <div>Analytics enabled</div>;
+ * }
+ * ```
+ *
+ * @param apps - Apps to register (variadic or array)
+ */
+export declare function useMCPApps(...apps: (RegisterableApp | RegisterableApp[])[]): void;
+export declare function useMCPApps(mcpWeb: MCPWeb, ...apps: (RegisterableApp | RegisterableApp[])[]): void;
+//# sourceMappingURL=use-mcp-apps.d.ts.map

package/dist/use-mcp-apps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mcp-apps.d.ts","sourceRoot":"","sources":["../src/use-mcp-apps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAKhE;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,aAAa,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,wBAAgB,UAAU,CACxB,GAAG,IAAI,EAAE,CAAC,eAAe,GAAG,eAAe,EAAE,CAAC,EAAE,GAC/C,IAAI,CAAC;AAER,wBAAgB,UAAU,CACxB,MAAM,EAAE,MAAM,EACd,GAAG,IAAI,EAAE,CAAC,eAAe,GAAG,eAAe,EAAE,CAAC,EAAE,GAC/C,IAAI,CAAC"}

package/dist/use-mcp-apps.js

@@ -0,0 +1,58 @@
+import { isCreatedApp } from '@mcp-web/types';
+import { useContext, useEffect, useRef } from 'react';
+import { MCPWebContext } from './mcp-web-context';
+export function useMCPApps(firstArg, ...rest) {
+    // Determine if first arg is MCPWeb instance or an app
+    const isMCPWebInstance = (value) => typeof value === 'object' &&
+        value !== null &&
+        'addApp' in value &&
+        'removeApp' in value &&
+        typeof value.addApp === 'function';
+    let mcpWebProp;
+    let appsToRegister;
+    if (isMCPWebInstance(firstArg)) {
+        mcpWebProp = firstArg;
+        appsToRegister = rest.flat();
+    }
+    else {
+        mcpWebProp = undefined;
+        appsToRegister = [firstArg, ...rest].flat();
+    }
+    // Try to get from context if not provided
+    const context = useContext(MCPWebContext);
+    const mcpWeb = mcpWebProp ?? context?.mcpWeb;
+    if (!mcpWeb) {
+        throw new Error('useApps requires either mcpWeb as first argument or MCPWebProvider in component tree');
+    }
+    // Keep a stable reference to the apps array
+    const appsRef = useRef(appsToRegister);
+    appsRef.current = appsToRegister;
+    // Keep a stable reference to mcpWeb
+    const mcpWebRef = useRef(mcpWeb);
+    mcpWebRef.current = mcpWeb;
+    useEffect(() => {
+        const cleanupFns = [];
+        const mcp = mcpWebRef.current;
+        for (const app of appsRef.current) {
+            if (isCreatedApp(app)) {
+                // Register CreatedApp
+                mcp.addApp(app);
+                cleanupFns.push(() => mcp.removeApp(app.definition.name));
+            }
+            else {
+                // Register raw AppDefinition
+                mcp.addApp(app);
+                cleanupFns.push(() => mcp.removeApp(app.name));
+            }
+        }
+        return () => {
+            for (const cleanup of cleanupFns) {
+                cleanup();
+            }
+        };
+    }, []);
+    // Note: Empty deps because we use refs - apps are registered once on mount
+    // and cleaned up on unmount. If you need to re-register on app change,
+    // use a key prop on the component.
+}
+//# sourceMappingURL=use-mcp-apps.js.map

package/dist/use-mcp-apps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mcp-apps.js","sourceRoot":"","sources":["../src/use-mcp-apps.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAsElD,MAAM,UAAU,UAAU,CACxB,QAAsD,EACtD,GAAG,IAA6C;IAEhD,sDAAsD;IACtD,MAAM,gBAAgB,GAAG,CAAC,KAAc,EAAmB,EAAE,CAC3D,OAAO,KAAK,KAAK,QAAQ;QACzB,KAAK,KAAK,IAAI;QACd,QAAQ,IAAI,KAAK;QACjB,WAAW,IAAI,KAAK;QACpB,OAAQ,KAAgB,CAAC,MAAM,KAAK,UAAU,CAAC;IAEjD,IAAI,UAA8B,CAAC;IACnC,IAAI,cAAiC,CAAC;IAEtC,IAAI,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC/B,UAAU,GAAG,QAAQ,CAAC;QACtB,cAAc,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;IAC/B,CAAC;SAAM,CAAC;QACN,UAAU,GAAG,SAAS,CAAC;QACvB,cAAc,GAAG,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC;IAC9C,CAAC;IAED,0CAA0C;IAC1C,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAC1C,MAAM,MAAM,GAAG,UAAU,IAAI,OAAO,EAAE,MAAM,CAAC;IAE7C,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,MAAM,IAAI,KAAK,CACb,sFAAsF,CACvF,CAAC;IACJ,CAAC;IAED,4CAA4C;IAC5C,MAAM,OAAO,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IACvC,OAAO,CAAC,OAAO,GAAG,cAAc,CAAC;IAEjC,oCAAoC;IACpC,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IACjC,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC;IAE3B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAmB,EAAE,CAAC;QACtC,MAAM,GAAG,GAAG,SAAS,CAAC,OAAO,CAAC;QAE9B,KAAK,MAAM,GAAG,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;YAClC,IAAI,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;gBACtB,sBAAsB;gBACtB,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBAChB,UAAU,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;YAC5D,CAAC;iBAAM,CAAC;gBACN,6BAA6B;gBAC7B,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBAChB,UAAU,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;YACjD,CAAC;QACH,CAAC;QAED,OAAO,GAAG,EAAE;YACV,KAAK,MAAM,OAAO,IAAI,UAAU,EAAE,CAAC;gBACjC,OAAO,EAAE,CAAC;YACZ,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,2EAA2E;IAC3E,uEAAuE;IACvE,mCAAmC;AACrC,CAAC"}

package/dist/use-mcp-tools.d.ts

@@ -0,0 +1,99 @@
+import type { CreatedStateTools, CreatedTool, MCPWeb, ToolRegistrationError } from '@mcp-web/core';
+import type { ToolDefinition } from '@mcp-web/types';
+/**
+ * A tool that can be registered with useMCPTools.
+ * Can be a CreatedTool, CreatedStateTools, or a raw ToolDefinition.
+ */
+export type RegisterableTool = CreatedTool | CreatedStateTools<any> | ToolDefinition;
+/**
+ * Options for the useMCPTools hook.
+ */
+export interface UseMCPToolsOptions {
+    /** Called if the bridge rejects any tool registration (e.g., schema conflict with a sibling session). */
+    onRegistrationError?: (error: ToolRegistrationError) => void;
+}
+/**
+ * Hook for registering MCP tools with automatic cleanup on unmount.
+ *
+ * This is the recommended way to register tools in React applications.
+ * Tools are registered when the component mounts and automatically
+ * unregistered when the component unmounts.
+ *
+ * @example Basic usage with created tools
+ * ```tsx
+ * // tools.ts
+ * import { createTool, createStateTools } from '@mcp-web/core';
+ *
+ * export const timeTool = createTool({
+ *   name: 'get_time',
+ *   description: 'Get current time',
+ *   handler: () => new Date().toISOString(),
+ * });
+ *
+ * export const todoTools = createStateTools({
+ *   name: 'todos',
+ *   description: 'Todo list',
+ *   get: () => store.get(todosAtom),
+ *   set: (value) => store.set(todosAtom, value),
+ *   schema: TodosSchema,
+ *   expand: true,
+ * });
+ *
+ * // App.tsx
+ * import { useMCPTools } from '@mcp-web/react';
+ * import { timeTool, todoTools } from './tools';
+ *
+ * function App() {
+ *   useMCPTools(timeTool, todoTools);
+ *   return <div>...</div>;
+ * }
+ * ```
+ *
+ * @example With registration error handling
+ * ```tsx
+ * function App() {
+ *   useMCPTools(myTool, {
+ *     onRegistrationError: (error) => {
+ *       console.error(`Tool ${error.toolName} rejected: ${error.message}`);
+ *     },
+ *   });
+ *   return <div>...</div>;
+ * }
+ * ```
+ *
+ * @example Conditional tool registration
+ * ```tsx
+ * function AdminPanel() {
+ *   // These tools only exist while AdminPanel is mounted
+ *   useMCPTools(adminTools);
+ *   return <div>Admin controls</div>;
+ * }
+ *
+ * function App() {
+ *   const [isAdmin, setIsAdmin] = useState(false);
+ *   return (
+ *     <div>
+ *       {isAdmin && <AdminPanel />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example With array of tools
+ * ```tsx
+ * const allTools = [todoTools, projectTools, settingsTools];
+ *
+ * function App() {
+ *   useMCPTools(allTools);
+ *   // or: useMCPTools(...allTools);
+ *   return <div>...</div>;
+ * }
+ * ```
+ *
+ * @param tools - Tools to register (variadic or array), optionally followed by an options object
+ */
+export declare function useMCPTools(...tools: (RegisterableTool | RegisterableTool[])[]): void;
+export declare function useMCPTools(mcpWeb: MCPWeb, ...tools: (RegisterableTool | RegisterableTool[])[]): void;
+export declare function useMCPTools(...args: [...(RegisterableTool | RegisterableTool[])[], UseMCPToolsOptions]): void;
+export declare function useMCPTools(mcpWeb: MCPWeb, ...args: [...(RegisterableTool | RegisterableTool[])[], UseMCPToolsOptions]): void;
+//# sourceMappingURL=use-mcp-tools.d.ts.map

package/dist/use-mcp-tools.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mcp-tools.d.ts","sourceRoot":"","sources":["../src/use-mcp-tools.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAEnG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAIrD;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GACxB,WAAW,GAEX,iBAAiB,CAAC,GAAG,CAAC,GACtB,cAAc,CAAC;AAEnB;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,yGAAyG;IACzG,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAC9D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AACH,wBAAgB,WAAW,CACzB,GAAG,KAAK,EAAE,CAAC,gBAAgB,GAAG,gBAAgB,EAAE,CAAC,EAAE,GAClD,IAAI,CAAC;AAER,wBAAgB,WAAW,CACzB,MAAM,EAAE,MAAM,EACd,GAAG,KAAK,EAAE,CAAC,gBAAgB,GAAG,gBAAgB,EAAE,CAAC,EAAE,GAClD,IAAI,CAAC;AAER,wBAAgB,WAAW,CACzB,GAAG,IAAI,EAAE,CAAC,GAAG,CAAC,gBAAgB,GAAG,gBAAgB,EAAE,CAAC,EAAE,EAAE,kBAAkB,CAAC,GAC1E,IAAI,CAAC;AAER,wBAAgB,WAAW,CACzB,MAAM,EAAE,MAAM,EACd,GAAG,IAAI,EAAE,CAAC,GAAG,CAAC,gBAAgB,GAAG,gBAAgB,EAAE,CAAC,EAAE,EAAE,kBAAkB,CAAC,GAC1E,IAAI,CAAC"}

package/dist/use-mcp-tools.js

@@ -0,0 +1,90 @@
+import { isCreatedStateTools, isCreatedTool } from '@mcp-web/core';
+import { useContext, useEffect, useRef } from 'react';
+import { MCPWebContext } from './mcp-web-context';
+// biome-ignore lint/suspicious/noExplicitAny: Implementation signature must be broad to support all overloads
+export function useMCPTools(...allRawArgs) {
+    const firstArg = allRawArgs[0];
+    const rest = allRawArgs.slice(1);
+    // Determine if first arg is MCPWeb instance or a tool
+    const isMCPWebInstance = (value) => typeof value === 'object' &&
+        value !== null &&
+        'addTool' in value &&
+        'addStateTools' in value &&
+        typeof value.addTool === 'function';
+    const isOptions = (value) => typeof value === 'object' &&
+        value !== null &&
+        !Array.isArray(value) &&
+        !isMCPWebInstance(value) &&
+        !isCreatedTool(value) &&
+        !isCreatedStateTools(value) &&
+        !('handler' in value) &&
+        'onRegistrationError' in value;
+    let mcpWebProp;
+    let toolsToRegister;
+    let options;
+    // Extract options from the last argument if present
+    const allArgs = [firstArg, ...rest];
+    const lastArg = allArgs[allArgs.length - 1];
+    if (isOptions(lastArg)) {
+        options = lastArg;
+        allArgs.pop();
+    }
+    if (isMCPWebInstance(allArgs[0])) {
+        mcpWebProp = allArgs[0];
+        toolsToRegister = allArgs.slice(1).flat();
+    }
+    else {
+        mcpWebProp = undefined;
+        toolsToRegister = allArgs.flat();
+    }
+    // Try to get from context if not provided
+    const context = useContext(MCPWebContext);
+    const mcpWeb = mcpWebProp ?? context?.mcpWeb;
+    if (!mcpWeb) {
+        throw new Error('useMCPTools requires either mcpWeb as first argument or MCPWebProvider in component tree');
+    }
+    // Keep a stable reference to the tools array
+    const toolsRef = useRef(toolsToRegister);
+    toolsRef.current = toolsToRegister;
+    // Keep a stable reference to mcpWeb
+    const mcpWebRef = useRef(mcpWeb);
+    mcpWebRef.current = mcpWeb;
+    // Keep a stable reference to options
+    const optionsRef = useRef(options);
+    optionsRef.current = options;
+    useEffect(() => {
+        const cleanupFns = [];
+        const mcp = mcpWebRef.current;
+        const opts = optionsRef.current;
+        const addToolOptions = opts?.onRegistrationError
+            ? { onRegistrationError: opts.onRegistrationError }
+            : undefined;
+        for (const tool of toolsRef.current) {
+            if (isCreatedTool(tool)) {
+                // Register CreatedTool
+                mcp.addTool(tool, addToolOptions);
+                cleanupFns.push(() => mcp.removeTool(tool.definition.name));
+            }
+            else if (isCreatedStateTools(tool)) {
+                // Register CreatedStateTools
+                const [, , cleanup] = mcp.addStateTools(tool);
+                cleanupFns.push(cleanup);
+            }
+            else {
+                // Register raw ToolDefinition
+                // biome-ignore lint/suspicious/noExplicitAny: Internal addTool accepts ToolDefinition, but overloads are stricter
+                mcp.addTool(tool, addToolOptions);
+                cleanupFns.push(() => mcp.removeTool(tool.name));
+            }
+        }
+        return () => {
+            for (const cleanup of cleanupFns) {
+                cleanup();
+            }
+        };
+    }, []);
+    // Note: Empty deps because we use refs - tools are registered once on mount
+    // and cleaned up on unmount. If you need to re-register on tool change,
+    // use a key prop on the component.
+}
+//# sourceMappingURL=use-mcp-tools.js.map

package/dist/use-mcp-tools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mcp-tools.js","sourceRoot":"","sources":["../src/use-mcp-tools.ts"],"names":[],"mappings":"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"}

package/dist/use-mcp-web.d.ts

@@ -0,0 +1,18 @@
+import { type MCPWebContextValue } from "./mcp-web-context";
+/**
+ * Hook for accessing MCPWeb instance from context.
+ * Must be used within MCPWebProvider.
+ *
+ * @returns Object containing the MCPWeb instance and connection state
+ * @throws Error if used outside of MCPWebProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { mcpWeb, isConnected } = useMCPWeb();
+ *   // Use mcpWeb...
+ * }
+ * ```
+ */
+export declare function useMCPWeb(): MCPWebContextValue;
+//# sourceMappingURL=use-mcp-web.d.ts.map

package/dist/use-mcp-web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mcp-web.d.ts","sourceRoot":"","sources":["../src/use-mcp-web.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE3E;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,IAAI,kBAAkB,CAM9C"}

package/dist/use-mcp-web.js

@@ -0,0 +1,25 @@
+import { useContext } from "react";
+import { MCPWebContext } from "./mcp-web-context";
+/**
+ * Hook for accessing MCPWeb instance from context.
+ * Must be used within MCPWebProvider.
+ *
+ * @returns Object containing the MCPWeb instance and connection state
+ * @throws Error if used outside of MCPWebProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { mcpWeb, isConnected } = useMCPWeb();
+ *   // Use mcpWeb...
+ * }
+ * ```
+ */
+export function useMCPWeb() {
+    const context = useContext(MCPWebContext);
+    if (!context) {
+        throw new Error('useMCPWeb must be used within MCPWebProvider');
+    }
+    return context;
+}
+//# sourceMappingURL=use-mcp-web.js.map

package/dist/use-mcp-web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mcp-web.js","sourceRoot":"","sources":["../src/use-mcp-web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,aAAa,EAA2B,MAAM,mBAAmB,CAAC;AAE3E;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,SAAS;IACvB,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAC1C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAC;IAClE,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/dist/use-tools.d.ts

@@ -0,0 +1,78 @@
+import type { CreatedStateTools, CreatedTool, MCPWeb } from '@mcp-web/core';
+import type { ToolDefinition } from '@mcp-web/types';
+/**
+ * A tool that can be registered with useTools.
+ * Can be a CreatedTool, CreatedStateTools, or a raw ToolDefinition.
+ */
+export type RegisterableTool = CreatedTool | CreatedStateTools<any> | ToolDefinition;
+/**
+ * Hook for registering pre-created tools with automatic cleanup on unmount.
+ *
+ * This is the recommended way to register tools in React applications.
+ * Tools are registered when the component mounts and automatically
+ * unregistered when the component unmounts.
+ *
+ * @example Basic usage with created tools
+ * ```tsx
+ * // tools.ts
+ * import { createTool, createStateTools } from '@mcp-web/core';
+ *
+ * export const timeTool = createTool({
+ *   name: 'get_time',
+ *   description: 'Get current time',
+ *   handler: () => new Date().toISOString(),
+ * });
+ *
+ * export const todoTools = createStateTools({
+ *   name: 'todos',
+ *   description: 'Todo list',
+ *   get: () => store.get(todosAtom),
+ *   set: (value) => store.set(todosAtom, value),
+ *   schema: TodosSchema,
+ *   expand: true,
+ * });
+ *
+ * // App.tsx
+ * import { useTools } from '@mcp-web/react';
+ * import { timeTool, todoTools } from './tools';
+ *
+ * function App() {
+ *   useTools(timeTool, todoTools);
+ *   return <div>...</div>;
+ * }
+ * ```
+ *
+ * @example Conditional tool registration
+ * ```tsx
+ * function AdminPanel() {
+ *   // These tools only exist while AdminPanel is mounted
+ *   useTools(adminTools);
+ *   return <div>Admin controls</div>;
+ * }
+ *
+ * function App() {
+ *   const [isAdmin, setIsAdmin] = useState(false);
+ *   return (
+ *     <div>
+ *       {isAdmin && <AdminPanel />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example With array of tools
+ * ```tsx
+ * const allTools = [todoTools, projectTools, settingsTools];
+ *
+ * function App() {
+ *   useTools(allTools);
+ *   // or: useTools(...allTools);
+ *   return <div>...</div>;
+ * }
+ * ```
+ *
+ * @param tools - Tools to register (variadic or array)
+ */
+export declare function useTools(...tools: (RegisterableTool | RegisterableTool[])[]): void;
+export declare function useTools(mcpWeb: MCPWeb, ...tools: (RegisterableTool | RegisterableTool[])[]): void;
+//# sourceMappingURL=use-tools.d.ts.map

package/dist/use-tools.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tools.d.ts","sourceRoot":"","sources":["../src/use-tools.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAIrD;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GACxB,WAAW,GAEX,iBAAiB,CAAC,GAAG,CAAC,GACtB,cAAc,CAAC;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,wBAAgB,QAAQ,CACtB,GAAG,KAAK,EAAE,CAAC,gBAAgB,GAAG,gBAAgB,EAAE,CAAC,EAAE,GAClD,IAAI,CAAC;AAER,wBAAgB,QAAQ,CACtB,MAAM,EAAE,MAAM,EACd,GAAG,KAAK,EAAE,CAAC,gBAAgB,GAAG,gBAAgB,EAAE,CAAC,EAAE,GAClD,IAAI,CAAC"}

package/dist/use-tools.js

@@ -0,0 +1,64 @@
+import { isCreatedStateTools, isCreatedTool } from '@mcp-web/core';
+import { useContext, useEffect, useRef } from 'react';
+import { MCPWebContext } from './mcp-web-context';
+export function useTools(firstArg, ...rest) {
+    // Determine if first arg is MCPWeb instance or a tool
+    const isMCPWebInstance = (value) => typeof value === 'object' &&
+        value !== null &&
+        'addTool' in value &&
+        'addStateTools' in value &&
+        typeof value.addTool === 'function';
+    let mcpWebProp;
+    let toolsToRegister;
+    if (isMCPWebInstance(firstArg)) {
+        mcpWebProp = firstArg;
+        toolsToRegister = rest.flat();
+    }
+    else {
+        mcpWebProp = undefined;
+        toolsToRegister = [firstArg, ...rest].flat();
+    }
+    // Try to get from context if not provided
+    const context = useContext(MCPWebContext);
+    const mcpWeb = mcpWebProp ?? context?.mcpWeb;
+    if (!mcpWeb) {
+        throw new Error('useTools requires either mcpWeb as first argument or MCPWebProvider in component tree');
+    }
+    // Keep a stable reference to the tools array
+    const toolsRef = useRef(toolsToRegister);
+    toolsRef.current = toolsToRegister;
+    // Keep a stable reference to mcpWeb
+    const mcpWebRef = useRef(mcpWeb);
+    mcpWebRef.current = mcpWeb;
+    useEffect(() => {
+        const cleanupFns = [];
+        const mcp = mcpWebRef.current;
+        for (const tool of toolsRef.current) {
+            if (isCreatedTool(tool)) {
+                // Register CreatedTool
+                mcp.addTool(tool);
+                cleanupFns.push(() => mcp.removeTool(tool.definition.name));
+            }
+            else if (isCreatedStateTools(tool)) {
+                // Register CreatedStateTools
+                const [, , cleanup] = mcp.addStateTools(tool);
+                cleanupFns.push(cleanup);
+            }
+            else {
+                // Register raw ToolDefinition
+                // biome-ignore lint/suspicious/noExplicitAny: Internal addTool accepts ToolDefinition, but overloads are stricter
+                mcp.addTool(tool);
+                cleanupFns.push(() => mcp.removeTool(tool.name));
+            }
+        }
+        return () => {
+            for (const cleanup of cleanupFns) {
+                cleanup();
+            }
+        };
+    }, []);
+    // Note: Empty deps because we use refs - tools are registered once on mount
+    // and cleaned up on unmount. If you need to re-register on tool change,
+    // use a key prop on the component.
+}
+//# sourceMappingURL=use-tools.js.map