@mcp-web/react 0.1.0

package/dist/use-tools.js.map

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

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@mcp-web/react",
+  "version": "0.1.0",
+  "description": "MCP Web integration for React state management",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "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"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "typescript": "~5.9.3"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  },
+  "scripts": {
+    "build": "tsc",
+    "clean": "rm -rf dist"
+  }
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export type { MCPWebContextValue } from './mcp-web-context';
+export { MCPWebProvider, type MCPWebProviderProps, type MCPWebProviderPropsWithConfig, type MCPWebProviderPropsWithInstance } from './mcp-web-provider';
+export { useMCPWeb } from './use-mcp-web';
+export { useMCPTools, type RegisterableTool, type UseMCPToolsOptions } from './use-mcp-tools';
+export { useMCPApps, type RegisterableApp } from './use-mcp-apps';

package/src/mcp-web-context.ts

@@ -0,0 +1,18 @@
+import type { MCPWeb } from "@mcp-web/core";
+import { createContext } from "react";
+
+/**
+ * Context value provided by MCPWebProvider.
+ */
+export interface MCPWebContextValue {
+  /** The MCPWeb instance for registering tools and making queries. */
+  mcpWeb: MCPWeb;
+  /** Whether the MCPWeb instance is connected to the bridge server. */
+  isConnected: boolean;
+}
+
+/**
+ * React context for sharing MCPWeb instance across component tree.
+ * @internal Use MCPWebProvider and useMCPWeb instead of accessing directly.
+ */
+export const MCPWebContext = createContext<MCPWebContextValue | null>(null);

package/src/mcp-web-provider.ts

@@ -0,0 +1,87 @@
+import { MCPWeb } from "@mcp-web/core";
+import type { MCPWebConfig } from "@mcp-web/types";
+import React, { type ReactNode, useMemo } from "react";
+import { MCPWebContext } from "./mcp-web-context";
+import { useConnectedMCPWeb } from "./use-connected-mcp-web";
+
+/**
+ * Props for MCPWebProvider when creating a new MCPWeb instance from config.
+ */
+export interface MCPWebProviderPropsWithConfig {
+  /** Child components that can access MCPWeb via useMCPWeb hook. */
+  children: ReactNode;
+  /** Configuration for creating a new MCPWeb instance. */
+  config: MCPWebConfig;
+}
+
+/**
+ * Props for MCPWebProvider when using an existing MCPWeb instance.
+ */
+export interface MCPWebProviderPropsWithInstance {
+  /** Child components that can access MCPWeb via useMCPWeb hook. */
+  children: ReactNode;
+  /** Existing MCPWeb instance to provide to children. */
+  mcpWeb: MCPWeb;
+}
+
+/**
+ * Props for MCPWebProvider component.
+ * Either provide a `config` to create a new instance, or `mcpWeb` to use an existing one.
+ */
+export type MCPWebProviderProps = MCPWebProviderPropsWithConfig | MCPWebProviderPropsWithInstance;
+
+/**
+ * Provider component that shares an MCPWeb instance across the component tree.
+ *
+ * Handles MCPWeb instantiation (if config provided) and connection lifecycle
+ * automatically. All child components can access the MCPWeb instance via the
+ * `useMCPWeb` hook.
+ *
+ * @example With config (creates new instance)
+ * ```tsx
+ * function Root() {
+ *   return (
+ *     <MCPWebProvider config={{
+ *       name: 'My App',
+ *       description: 'My app description',
+ *     }}>
+ *       <App />
+ *     </MCPWebProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example With existing instance
+ * ```tsx
+ * const mcpWeb = new MCPWeb(config);
+ *
+ * function Root() {
+ *   return (
+ *     <MCPWebProvider mcpWeb={mcpWeb}>
+ *       <App />
+ *     </MCPWebProvider>
+ *   );
+ * }
+ * ```
+ */
+export function MCPWebProvider({ children, ...props }: MCPWebProviderProps) {
+  const mcpWeb = 'mcpWeb' in props ? props.mcpWeb : undefined;
+  const config = 'config' in props ? props.config : undefined;
+
+  const mcpInstance = useMemo(() => {
+    if (mcpWeb) {
+      return mcpWeb;
+    }
+    if (config) {
+      return new MCPWeb(config);
+    }
+    throw new Error('MCPWebProvider requires either mcpWeb or config prop');
+  }, [mcpWeb, config]);
+  const mcpState = useConnectedMCPWeb(mcpInstance);
+
+  return React.createElement(
+    MCPWebContext.Provider,
+    { value: mcpState },
+    children
+  );
+}

package/src/use-connected-mcp-web.ts

@@ -0,0 +1,49 @@
+import type { MCPWeb } from "@mcp-web/core";
+import { useEffect, useRef, useState } from "react";
+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 function useConnectedMCPWeb(mcpInstance: MCPWeb): MCPWebContextValue {
+  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 };
+}

package/src/use-mcp-apps.ts

@@ -0,0 +1,141 @@
+import type { MCPWeb } from '@mcp-web/core';
+import type { AppDefinition, CreatedApp } from '@mcp-web/types';
+import { isCreatedApp } from '@mcp-web/types';
+import { useContext, useEffect, useRef } from 'react';
+import { MCPWebContext } from './mcp-web-context';
+
+/**
+ * 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 function useMCPApps(
+  ...apps: (RegisterableApp | RegisterableApp[])[]
+): void;
+
+export function useMCPApps(
+  mcpWeb: MCPWeb,
+  ...apps: (RegisterableApp | RegisterableApp[])[]
+): void;
+
+export function useMCPApps(
+  firstArg: MCPWeb | RegisterableApp | RegisterableApp[],
+  ...rest: (RegisterableApp | RegisterableApp[])[]
+): void {
+  // Determine if first arg is MCPWeb instance or an app
+  const isMCPWebInstance = (value: unknown): value is MCPWeb =>
+    typeof value === 'object' &&
+    value !== null &&
+    'addApp' in value &&
+    'removeApp' in value &&
+    typeof (value as MCPWeb).addApp === 'function';
+
+  let mcpWebProp: MCPWeb | undefined;
+  let appsToRegister: RegisterableApp[];
+
+  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: (() => void)[] = [];
+    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.
+}

package/src/use-mcp-tools.ts

@@ -0,0 +1,221 @@
+import type { CreatedStateTools, CreatedTool, MCPWeb, ToolRegistrationError } from '@mcp-web/core';
+import { isCreatedStateTools, isCreatedTool } from '@mcp-web/core';
+import type { ToolDefinition } from '@mcp-web/types';
+import { useContext, useEffect, useRef } from 'react';
+import { MCPWebContext } from './mcp-web-context';
+
+/**
+ * A tool that can be registered with useMCPTools.
+ * Can be a CreatedTool, CreatedStateTools, or a raw ToolDefinition.
+ */
+export type RegisterableTool =
+  | CreatedTool
+  // biome-ignore lint/suspicious/noExplicitAny: Need any to handle variance in generic state types
+  | 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 function useMCPTools(
+  ...tools: (RegisterableTool | RegisterableTool[])[]
+): void;
+
+export function useMCPTools(
+  mcpWeb: MCPWeb,
+  ...tools: (RegisterableTool | RegisterableTool[])[]
+): void;
+
+export function useMCPTools(
+  ...args: [...(RegisterableTool | RegisterableTool[])[], UseMCPToolsOptions]
+): void;
+
+export function useMCPTools(
+  mcpWeb: MCPWeb,
+  ...args: [...(RegisterableTool | RegisterableTool[])[], UseMCPToolsOptions]
+): void;
+
+// biome-ignore lint/suspicious/noExplicitAny: Implementation signature must be broad to support all overloads
+export function useMCPTools(...allRawArgs: any[]): void {
+  const firstArg = allRawArgs[0];
+  const rest = allRawArgs.slice(1);
+  // Determine if first arg is MCPWeb instance or a tool
+  const isMCPWebInstance = (value: unknown): value is MCPWeb =>
+    typeof value === 'object' &&
+    value !== null &&
+    'addTool' in value &&
+    'addStateTools' in value &&
+    typeof (value as MCPWeb).addTool === 'function';
+
+  const isOptions = (value: unknown): value is UseMCPToolsOptions =>
+    typeof value === 'object' &&
+    value !== null &&
+    !Array.isArray(value) &&
+    !isMCPWebInstance(value) &&
+    !isCreatedTool(value) &&
+    !isCreatedStateTools(value) &&
+    !('handler' in value) &&
+    'onRegistrationError' in value;
+
+  let mcpWebProp: MCPWeb | undefined;
+  let toolsToRegister: RegisterableTool[];
+  let options: UseMCPToolsOptions | undefined;
+
+  // 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) as (RegisterableTool | RegisterableTool[])[]).flat();
+  } else {
+    mcpWebProp = undefined;
+    toolsToRegister = (allArgs as (RegisterableTool | RegisterableTool[])[]).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: (() => void)[] = [];
+    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 as any, 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.
+}

package/src/use-mcp-web.ts

@@ -0,0 +1,25 @@
+import { useContext } from "react";
+import { MCPWebContext, 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 function useMCPWeb(): MCPWebContextValue {
+  const context = useContext(MCPWebContext);
+  if (!context) {
+    throw new Error('useMCPWeb must be used within MCPWebProvider');
+  }
+  return context;
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["dist", "node_modules"]
+}