@mcp-web/react 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-web/react",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "MCP Web integration for React state management",
   "type": "module",
   "main": "dist/index.js",
@@ -13,9 +13,9 @@
   },
   "dependencies": {
     "zod": "~4.1.12",
-    "@mcp-web/decompose-zod-schema": "0.1.0",
-    "@mcp-web/types": "0.1.0",
-    "@mcp-web/core": "0.1.0"
+    "@mcp-web/decompose-zod-schema": "0.1.2",
+    "@mcp-web/types": "0.1.2",
+    "@mcp-web/core": "0.1.2"
   },
   "devDependencies": {
     "@types/react": "^18.3.0",
@@ -24,6 +24,11 @@
   "peerDependencies": {
     "react": ">=17.0.0"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/flekschas/mcp-web",
+    "directory": "packages/integrations/react"
+  },
   "scripts": {
     "build": "tsc",
     "clean": "rm -rf dist"

package/dist/use-apps.d.ts

@@ -1,63 +0,0 @@
-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 { useApps } from '@mcp-web/react';
- * import { statisticsApp } from './apps';
- *
- * function App() {
- *   useApps(statisticsApp);
- *   return <div>...</div>;
- * }
- * ```
- *
- * @example Multiple apps
- * ```tsx
- * function App() {
- *   useApps(statisticsApp, chartApp, dashboardApp);
- *   return <div>...</div>;
- * }
- * ```
- *
- * @example Conditional app registration
- * ```tsx
- * function Analytics() {
- *   // This app only exists while Analytics is mounted
- *   useApps(analyticsApp);
- *   return <div>Analytics enabled</div>;
- * }
- * ```
- *
- * @param apps - Apps to register (variadic or array)
- */
-export declare function useApps(...apps: (RegisterableApp | RegisterableApp[])[]): void;
-export declare function useApps(mcpWeb: MCPWeb, ...apps: (RegisterableApp | RegisterableApp[])[]): void;
-//# sourceMappingURL=use-apps.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"use-apps.d.ts","sourceRoot":"","sources":["../src/use-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,OAAO,CAAC,GAAG,IAAI,EAAE,CAAC,eAAe,GAAG,eAAe,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC;AAEhF,wBAAgB,OAAO,CACrB,MAAM,EAAE,MAAM,EACd,GAAG,IAAI,EAAE,CAAC,eAAe,GAAG,eAAe,EAAE,CAAC,EAAE,GAC/C,IAAI,CAAC"}

package/dist/use-apps.js

@@ -1,58 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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-tools.d.ts

@@ -1,78 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,64 +0,0 @@
-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

package/dist/use-tools.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-tools.js","sourceRoot":"","sources":["../src/use-tools.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAyFlD,MAAM,UAAU,QAAQ,CACtB,QAAwD,EACxD,GAAG,IAA+C;IAElD,sDAAsD;IACtD,MAAM,gBAAgB,GAAG,CAAC,KAAc,EAAmB,EAAE,CAC3D,OAAO,KAAK,KAAK,QAAQ;QACzB,KAAK,KAAK,IAAI;QACd,SAAS,IAAI,KAAK;QAClB,eAAe,IAAI,KAAK;QACxB,OAAQ,KAAgB,CAAC,OAAO,KAAK,UAAU,CAAC;IAElD,IAAI,UAA8B,CAAC;IACnC,IAAI,eAAmC,CAAC;IAExC,IAAI,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC/B,UAAU,GAAG,QAAQ,CAAC;QACtB,eAAe,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;IAChC,CAAC;SAAM,CAAC;QACN,UAAU,GAAG,SAAS,CAAC;QACvB,eAAe,GAAG,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC;IAC/C,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,uFAAuF,CACxF,CAAC;IACJ,CAAC;IAED,6CAA6C;IAC7C,MAAM,QAAQ,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC;IACzC,QAAQ,CAAC,OAAO,GAAG,eAAe,CAAC;IAEnC,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,IAAI,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACpC,IAAI,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC;gBACxB,uBAAuB;gBACvB,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;gBAClB,UAAU,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;YAC9D,CAAC;iBAAM,IAAI,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC;gBACrC,6BAA6B;gBAC7B,MAAM,CAAC,EAAE,AAAD,EAAG,OAAO,CAAC,GAAG,GAAG,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;gBAC9C,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC3B,CAAC;iBAAM,CAAC;gBACN,8BAA8B;gBAC9B,kHAAkH;gBAClH,GAAG,CAAC,OAAO,CAAC,IAAW,CAAC,CAAC;gBACzB,UAAU,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YACnD,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,4EAA4E;IAC5E,wEAAwE;IACxE,mCAAmC;AACrC,CAAC"}