usewebmcp 0.2.3-beta.0 → 0.3.0

package/README.md

@@ -0,0 +1,252 @@
+# usewebmcp
+
+Standalone React hooks for strict core WebMCP tool registration via `navigator.modelContext`.
+
+`usewebmcp` is intentionally separate from `@mcp-b/react-webmcp`:
+
+- Use `usewebmcp` for strict core WebMCP workflows.
+- Use `@mcp-b/react-webmcp` for full MCP-B runtime features (resources, prompts, client/provider flows, etc.).
+
+## Package Selection
+
+| Package | Use When |
+| --- | --- |
+| `usewebmcp` | React hooks for strict core `navigator.modelContext` tools |
+| `@mcp-b/react-webmcp` | React hooks for full MCP-B runtime surface |
+| `@mcp-b/webmcp-polyfill` | You need a strict core runtime polyfill |
+| `@mcp-b/global` | You need full MCP-B runtime (core + extensions) |
+
+## Install
+
+```bash
+pnpm add usewebmcp react
+# or
+npm install usewebmcp react
+```
+
+Optional (only if you want Standard Schema authoring like Zod v4 input schemas):
+
+```bash
+pnpm add zod
+```
+
+## Runtime Prerequisite
+
+`usewebmcp` expects `window.navigator.modelContext` to exist.
+
+You can provide it via:
+
+- Browser-native WebMCP implementation, or
+- `@mcp-b/webmcp-polyfill`, or
+- `@mcp-b/global`
+
+If `navigator.modelContext` is missing, the hook logs a warning and skips registration.
+
+## Quick Start
+
+```tsx
+import { initializeWebMCPPolyfill } from '@mcp-b/webmcp-polyfill';
+import { useWebMCP } from 'usewebmcp';
+
+initializeWebMCPPolyfill();
+
+const COUNTER_INPUT_SCHEMA = {
+  type: 'object',
+  properties: {},
+} as const;
+
+const COUNTER_OUTPUT_SCHEMA = {
+  type: 'object',
+  properties: {
+    count: { type: 'integer' },
+  },
+  required: ['count'],
+  additionalProperties: false,
+} as const;
+
+export function CounterTool() {
+  const counterTool = useWebMCP({
+    name: 'counter_get',
+    description: 'Get current count',
+    inputSchema: COUNTER_INPUT_SCHEMA,
+    outputSchema: COUNTER_OUTPUT_SCHEMA,
+    handler: async () => ({ count: 42 }),
+  });
+
+  return (
+    <div>
+      <p>Executions: {counterTool.state.executionCount}</p>
+      <p>Last count: {counterTool.state.lastResult?.count ?? 'none'}</p>
+      {counterTool.state.error && <p>Error: {counterTool.state.error.message}</p>}
+    </div>
+  );
+}
+```
+
+## How `useWebMCP` Works
+
+- Registers a tool on mount with `navigator.modelContext.registerTool(...)`.
+- Unregisters on unmount with `navigator.modelContext.unregisterTool(name)`.
+- Exposes local execution state:
+  - `state.isExecuting`
+  - `state.lastResult`
+  - `state.error`
+  - `state.executionCount`
+- Returns `execute(input)` for manual in-app invocation and `reset()` for state reset.
+
+`handler` can be synchronous or asynchronous.
+
+## Type Inference
+
+### Input inference
+
+`inputSchema` supports:
+
+- JSON Schema literals (`as const`) via `InferArgsFromInputSchema`
+- Standard Schema v1 input typing (for example Zod v4 / Valibot / ArkType) via `~standard.types.input`
+
+```tsx
+const INPUT_SCHEMA = {
+  type: 'object',
+  properties: {
+    query: { type: 'string' },
+    limit: { type: 'integer' },
+  },
+  required: ['query'],
+  additionalProperties: false,
+} as const;
+
+useWebMCP({
+  name: 'search',
+  description: 'Search docs',
+  inputSchema: INPUT_SCHEMA,
+  handler(input) {
+    // input is inferred as { query: string; limit?: number }
+    return { total: 1 };
+  },
+});
+```
+
+### Output inference
+
+When `outputSchema` is provided as a literal JSON object schema:
+
+- `handler` return type is inferred from `outputSchema`
+- `state.lastResult` is inferred to the same type
+- MCP response includes `structuredContent`
+
+```tsx
+const OUTPUT_SCHEMA = {
+  type: 'object',
+  properties: {
+    total: { type: 'integer' },
+  },
+  required: ['total'],
+  additionalProperties: false,
+} as const;
+
+const tool = useWebMCP({
+  name: 'count_items',
+  description: 'Count items',
+  outputSchema: OUTPUT_SCHEMA,
+  handler: () => ({ total: 3 }),
+});
+
+// tool.state.lastResult is inferred as { total: number } | null
+```
+
+## Manual `execute(...)` Calls
+
+You can call the returned `execute(...)` function directly from your component.
+
+```tsx
+function SearchToolPanel() {
+  const searchTool = useWebMCP({
+    name: 'search_local',
+    description: 'Run local search',
+    inputSchema: {
+      type: 'object',
+      properties: { query: { type: 'string' } },
+      required: ['query'],
+      additionalProperties: false,
+    } as const,
+    handler: async ({ query }) => ({ query, total: query.length }),
+  });
+
+  return (
+    <button
+      onClick={async () => {
+        await searchTool.execute({ query: 'webmcp' });
+      }}
+    >
+      Run Search
+    </button>
+  );
+}
+```
+
+## Output Schema Contract
+
+If `outputSchema` is defined, the handler must return a JSON-serializable object result.
+
+Returning a non-object value (`string`, `null`, array, etc.) causes an error response from the registered MCP tool.
+
+## Re-Registration and Performance
+
+The tool re-registers when any of these change:
+
+- `name`
+- `description`
+- `inputSchema` reference
+- `outputSchema` reference
+- `annotations` reference
+- values in `deps`
+
+The hook avoids re-registration when only callback references change:
+
+- `handler`
+- `onSuccess`
+- `onError`
+- `formatOutput`
+
+Latest callback versions are still used at execution time.
+
+Recommendation:
+
+- Define schemas/annotations outside render or memoize them.
+- Keep `deps` primitive when possible.
+
+## API
+
+### `useWebMCP(config, deps?)`
+
+`config` fields:
+
+- `name: string`
+- `description: string`
+- `inputSchema?`
+- `outputSchema?`
+- `annotations?`
+- `handler(input)`
+- `formatOutput?(output)` (deprecated)
+- `onSuccess?(result, input)`
+- `onError?(error, input)`
+
+Return value:
+
+- `state`
+- `execute(input)`
+- `reset()`
+
+`execute(input)` is a local direct call to your handler for in-app control/testing.
+Tool calls coming from MCP clients still go through `navigator.modelContext`.
+
+## Important Notes
+
+- This is a client-side hook package (`'use client'`).
+- `formatOutput` is deprecated; prefer `outputSchema` + structured output.
+- When handler output is not a string, default text content is pretty-printed JSON.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -1 +1,354 @@
-export * from "@mcp-b/react-webmcp";
+import { DependencyList } from "react";
+import { ToolInputSchema } from "@mcp-b/webmcp-polyfill";
+import { InferArgsFromInputSchema, InferJsonSchema, InputSchema, JsonSchemaObject, ToolAnnotations } from "@mcp-b/webmcp-types";
+
+//#region src/types.d.ts
+
+/**
+ * Infers handler input type from either a Standard Schema or JSON Schema.
+ *
+ * - **Standard Schema** (Zod v4, Valibot, ArkType): extracts `~standard.types.input`
+ * - **JSON Schema** (`as const`): uses `InferArgsFromInputSchema` for structural inference
+ * - **Fallback**: `Record<string, unknown>`
+ *
+ * @template T - The input schema type
+ * @internal
+ */
+type InferToolInput<T> = T extends {
+  readonly '~standard': {
+    readonly types?: infer Types;
+  };
+} ? Types extends {
+  readonly input: infer I;
+} ? I : Record<string, unknown> : T extends InputSchema ? InferArgsFromInputSchema<T> : Record<string, unknown>;
+/**
+ * Utility type to infer the output type from a JSON Schema object.
+ *
+ * When `TOutputSchema` is a literal `JsonSchemaObject`, this resolves to
+ * `InferJsonSchema<TOutputSchema>`. When it's `undefined`,
+ * it falls back to the provided `TFallback` type.
+ *
+ * @template TOutputSchema - JSON Schema object for output inference
+ * @template TFallback - Fallback type when no schema is provided
+ * @internal
+ */
+type InferOutput<TOutputSchema extends JsonSchemaObject | undefined = undefined, TFallback = unknown> = TOutputSchema extends JsonSchemaObject ? InferJsonSchema<TOutputSchema> : TFallback;
+/**
+ * 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 successful executions only.
+   */
+  executionCount: number;
+}
+/**
+ * Configuration options for the `useWebMCP` hook.
+ *
+ * Defines a tool's metadata, schema, handler, and lifecycle callbacks.
+ * Uses JSON Schema for type inference via `as const`.
+ *
+ * @template TInputSchema - JSON Schema defining input parameters
+ * @template TOutputSchema - JSON Schema object defining output structure (enables structuredContent)
+ *
+ * @public
+ *
+ * @example Basic tool without output schema:
+ * ```typescript
+ * const config: WebMCPConfig = {
+ *   name: 'posts_like',
+ *   description: 'Like a post by its ID',
+ *   inputSchema: {
+ *     type: 'object',
+ *     properties: { postId: { type: 'string' } },
+ *     required: ['postId'],
+ *   } as const,
+ *   handler: async ({ postId }) => {
+ *     await api.likePost(postId);
+ *     return { success: true };
+ *   },
+ * };
+ * ```
+ *
+ * @example Tool with output schema (enables MCP structuredContent):
+ * ```typescript
+ * useWebMCP({
+ *   name: 'posts_like',
+ *   description: 'Like a post and return updated like count',
+ *   inputSchema: {
+ *     type: 'object',
+ *     properties: { postId: { type: 'string' } },
+ *     required: ['postId'],
+ *   } as const,
+ *   outputSchema: {
+ *     type: 'object',
+ *     properties: {
+ *       likes: { type: 'number', description: 'Updated like count' },
+ *       likedAt: { type: 'string', description: 'ISO timestamp of the like' },
+ *     },
+ *   } as const,
+ *   handler: async ({ postId }) => {
+ *     const result = await api.likePost(postId);
+ *     return { likes: result.likes, likedAt: new Date().toISOString() };
+ *   },
+ * });
+ * ```
+ */
+interface WebMCPConfig<TInputSchema extends ToolInputSchema = InputSchema, TOutputSchema extends JsonSchemaObject | undefined = undefined> {
+  /**
+   * 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;
+  /**
+   * Schema defining the input parameters for the tool.
+   * Accepts JSON Schema (with `as const`) or any Standard Schema v1
+   * library (Zod v4, Valibot, ArkType, etc.).
+   *
+   * @example JSON Schema
+   * ```typescript
+   * inputSchema: {
+   *   type: 'object',
+   *   properties: {
+   *     postId: { type: 'string', description: 'The ID of the post to like' },
+   *   },
+   *   required: ['postId'],
+   * } as const
+   * ```
+   *
+   * @example Standard Schema (Zod v4)
+   * ```typescript
+   * inputSchema: z.object({ postId: z.string() })
+   * ```
+   */
+  inputSchema?: TInputSchema;
+  /**
+   * **Recommended:** JSON Schema object defining the expected output structure.
+   *
+   * When provided, this enables three key features:
+   * 1. **Type Safety**: The handler's return type is inferred from this schema
+   * 2. **MCP structuredContent**: The MCP response includes `structuredContent`
+   *    containing the typed output per the MCP specification
+   * 3. **AI Understanding**: AI models can better understand and use the tool's output
+   *
+   * @see {@link https://spec.modelcontextprotocol.io/specification/server/tools/#output-schemas}
+   *
+   * @example
+   * ```typescript
+   * outputSchema: {
+   *   type: 'object',
+   *   properties: {
+   *     counter: { type: 'number', description: 'The current counter value' },
+   *     timestamp: { type: 'string', description: 'ISO timestamp' },
+   *   },
+   * } as const
+   * ```
+   */
+  outputSchema?: TOutputSchema;
+  /**
+   * 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.
+   *
+   * When `outputSchema` is provided, the return type is inferred from the schema.
+   * Otherwise, any return type is allowed.
+   *
+   * @param input - Validated input parameters matching the inputSchema
+   * @returns The result data or a Promise resolving to the result
+   */
+  handler: (input: InferToolInput<TInputSchema>) => Promise<InferOutput<TOutputSchema>> | InferOutput<TOutputSchema>;
+  /**
+   * Custom formatter for the MCP text response.
+   *
+   * @deprecated Use `outputSchema` instead. The `outputSchema` provides type-safe
+   * structured output via MCP's `structuredContent`, which is the recommended
+   * approach for tool outputs. This property will be removed in a future version.
+   *
+   * @param output - The raw output from the handler
+   * @returns Formatted string for the MCP response content
+   */
+  formatOutput?: (output: InferOutput<TOutputSchema>) => 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: InferOutput<TOutputSchema>, 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 TOutputSchema - JSON Schema object defining output structure
+ * @public
+ */
+interface WebMCPReturn<TOutputSchema extends JsonSchemaObject | undefined = undefined> {
+  /**
+   * Current execution state including loading status, results, and errors.
+   * See {@link ToolExecutionState} for details.
+   */
+  state: ToolExecutionState<InferOutput<TOutputSchema>>;
+  /**
+   * 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<InferOutput<TOutputSchema>>;
+  /**
+   * 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)
+ * - Handles tool execution and lifecycle callbacks
+ * - Automatically unregisters on component unmount
+ * - Returns `structuredContent` when `outputSchema` is defined
+ *
+ * ## Output Schema (Recommended)
+ *
+ * Always define an `outputSchema` for your tools. This provides:
+ * - **Type Safety**: Handler return type is inferred from the schema
+ * - **MCP structuredContent**: AI models receive structured, typed data
+ * - **Better AI Understanding**: Models can reason about your tool's output format
+ *
+ * ```tsx
+ * useWebMCP({
+ *   name: 'get_user',
+ *   description: 'Get user by ID',
+ *   inputSchema: {
+ *     type: 'object',
+ *     properties: { userId: { type: 'string' } },
+ *     required: ['userId'],
+ *   } as const,
+ *   outputSchema: {
+ *     type: 'object',
+ *     properties: {
+ *       id: { type: 'string' },
+ *       name: { type: 'string' },
+ *       email: { type: 'string' },
+ *     },
+ *   } as const,
+ *   handler: async ({ userId }) => {
+ *     const user = await fetchUser(userId);
+ *     return { id: user.id, name: user.name, email: user.email };
+ *   },
+ * });
+ * ```
+ *
+ * ## Re-render Optimization
+ *
+ * This hook is optimized to minimize unnecessary tool re-registrations:
+ *
+ * - **Ref-based callbacks**: `handler`, `onSuccess`, `onError`, and `formatOutput`
+ *   are stored in refs, so changing these functions won't trigger re-registration.
+ *
+ * **IMPORTANT**: If `inputSchema`, `outputSchema`, or `annotations` are defined inline
+ * or change on every render, the tool will re-register unnecessarily. To avoid this,
+ * define them outside your component with `as const`:
+ *
+ * ```tsx
+ * // Good: Static schema defined outside component
+ * const OUTPUT_SCHEMA = {
+ *   type: 'object',
+ *   properties: { count: { type: 'number' } },
+ * } as const;
+ *
+ * // Bad: Inline schema (creates new object every render)
+ * useWebMCP({
+ *   outputSchema: { type: 'object', properties: { count: { type: 'number' } } } as const,
+ * });
+ * ```
+ *
+ * @template TInputSchema - JSON Schema defining input parameter types (use `as const` for inference)
+ * @template TOutputSchema - JSON Schema object defining output structure (enables structuredContent)
+ *
+ * @param config - Configuration object for the tool
+ * @param deps - Optional dependency array that triggers tool re-registration when values change.
+ *
+ * @returns Object containing execution state and control methods
+ *
+ * @public
+ *
+ * @example
+ * Basic tool with outputSchema (recommended):
+ * ```tsx
+ * function PostActions() {
+ *   const likeTool = useWebMCP({
+ *     name: 'posts_like',
+ *     description: 'Like a post by ID',
+ *     inputSchema: {
+ *       type: 'object',
+ *       properties: { postId: { type: 'string', description: 'The post ID' } },
+ *       required: ['postId'],
+ *     } as const,
+ *     outputSchema: {
+ *       type: 'object',
+ *       properties: {
+ *         success: { type: 'boolean' },
+ *         likeCount: { type: 'number' },
+ *       },
+ *     } as const,
+ *     handler: async ({ postId }) => {
+ *       const result = await api.posts.like(postId);
+ *       return { success: true, likeCount: result.likes };
+ *     },
+ *   });
+ *
+ *   return <div>Likes: {likeTool.state.lastResult?.likeCount ?? 0}</div>;
+ * }
+ * ```
+ */
+declare function useWebMCP<TInputSchema extends ToolInputSchema = InputSchema, TOutputSchema extends JsonSchemaObject | undefined = undefined>(config: WebMCPConfig<TInputSchema, TOutputSchema>, deps?: DependencyList): WebMCPReturn<TOutputSchema>;
+//#endregion
+export { type InferOutput, type InferToolInput, type ToolExecutionState, type WebMCPConfig, type WebMCPReturn, useWebMCP };
+//# 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"],"sourcesContent":[],"mappings":";;;;;;;;;AAmBA;;;;;;;AAK+B,KALnB,cAKmB,CAAA,CAAA,CAAA,GALC,CAKD,SAAA;EAAzB,SAAA,WAAA,EAAA;IACA,SAAA,KAAA,CAAA,EAAA,KAAA,MAAA;EAAM,CAAA;AAaZ,CAAA,GAlBI,KAkBQ,SAAW;EACC,SAAA,KAAA,EAAA,KAAA,EAAA;CAEpB,GApBE,CAoBF,GAnBE,MAmBF,CAAA,MAAA,EAAA,OAAA,CAAA,GAlBA,CAkBA,SAlBU,WAkBV,GAjBE,wBAiBF,CAjB2B,CAiB3B,CAAA,GAhBE,MAgBF,CAAA,MAAA,EAAA,OAAA,CAAA;;;;;;AASJ;AA8EA;;;;;AA6DiB,KAvJL,WAuJK,CAAA,sBAtJO,gBAsJP,GAAA,SAAA,GAAA,SAAA,EAAA,YAAA,OAAA,CAAA,GApJb,aAoJa,SApJS,gBAoJT,GApJ4B,eAoJ5B,CApJ4C,aAoJ5C,CAAA,GApJ6D,SAoJ7D;;;;;;;;AAoB4B,UA/J5B,kBA+J4B,CAAA,UAAA,OAAA,CAAA,CAAA;EAYP;;;;EAkBlB,WAAA,EAAA,OAAA;EAAK;AAUzB;;;EAK4B,UAAA,EAjMd,OAiMc,GAAA,IAAA;EAAnB;;;;EAU6B,KAAA,EArM7B,KAqM6B,GAAA,IAAA;;;;ACtGtC;EACuB,cAAA,EAAA,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UDnCN,kCACM,kBAAkB,mCACjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAmCR;;;;;;;;;;;;;;;;;;;;;;;iBAwBC;;;;;gBAMD;;;;;;;;;;;mBAaL,eAAe,kBACnB,QAAQ,YAAY,kBAAkB,YAAY;;;;;;;;;;;0BAY/B,YAAY;;;;;;;;uBASf,YAAY;;;;;;;;oBASf;;;;;;;;;UAUH,mCAAmC;;;;;SAK3C,mBAAmB,YAAY;;;;;;;;;+BAUT,QAAQ,YAAY;;;;;;;;;;AArPnD;;;;;;;;;;;AAmBA;;;;;;;;AAYA;AA8EA;;;;;;;;;;;;;;;;;;;;AAyHA;;;;;;;;;;;;ACvFA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,+BACO,kBAAkB,mCACjB,kDAEd,aAAa,cAAc,uBAC5B,iBACN,aAAa"}

package/dist/index.js

@@ -1 +1,2 @@
-export*from"@mcp-b/react-webmcp";
+"use client";import{useCallback as e,useEffect as t,useLayoutEffect as n,useRef as r,useState as i}from"react";function a(e){return typeof e==`string`?e:JSON.stringify(e,null,2)}const o=new Map;function s(e){if(!e||typeof e!=`object`||Array.isArray(e))return null;try{let t=JSON.parse(JSON.stringify(e));return!t||typeof t!=`object`||Array.isArray(t)?null:t}catch{return null}}const c=typeof window<`u`?n:t;function l(){let e=globalThis.process?.env?.NODE_ENV;return e===void 0?!1:e!==`production`}function u(n,u){let{name:d,description:f,inputSchema:p,outputSchema:m,annotations:h,handler:g,formatOutput:_=a,onSuccess:v,onError:y}=n,[b,x]=i({isExecuting:!1,lastResult:null,error:null,executionCount:0}),S=r(g),C=r(v),w=r(y),T=r(_),E=r(!0),D=r(new Set),O=r({inputSchema:p,outputSchema:m,annotations:h,description:f,deps:u});c(()=>{S.current=g,C.current=v,w.current=y,T.current=_},[g,v,y,_]),t(()=>(E.current=!0,()=>{E.current=!1}),[]),t(()=>{if(!l()){O.current={inputSchema:p,outputSchema:m,annotations:h,description:f,deps:u};return}let e=(e,t)=>{D.current.has(e)||(console.warn(`[useWebMCP] ${t}`),D.current.add(e))},t=O.current;p&&t.inputSchema&&t.inputSchema!==p&&e(`inputSchema`,`Tool "${d}" inputSchema reference changed; memoize or define it outside the component to avoid re-registration.`),m&&t.outputSchema&&t.outputSchema!==m&&e(`outputSchema`,`Tool "${d}" outputSchema reference changed; memoize or define it outside the component to avoid re-registration.`),h&&t.annotations&&t.annotations!==h&&e(`annotations`,`Tool "${d}" annotations reference changed; memoize or define it outside the component to avoid re-registration.`),f!==t.description&&e(`description`,`Tool "${d}" description changed; this re-registers the tool. Memoize the description if it does not need to update.`),u?.some(e=>typeof e==`object`&&!!e||typeof e==`function`)&&e(`deps`,`Tool "${d}" deps contains non-primitive values; prefer primitives or memoize objects/functions to reduce re-registration.`),O.current={inputSchema:p,outputSchema:m,annotations:h,description:f,deps:u}},[h,u,f,p,d,m]);let k=e(async e=>{x(e=>({...e,isExecuting:!0,error:null}));try{let t=await S.current(e);return E.current&&x(e=>({isExecuting:!1,lastResult:t,error:null,executionCount:e.executionCount+1})),C.current&&C.current(t,e),t}catch(t){let n=t instanceof Error?t:Error(String(t));throw E.current&&x(e=>({...e,isExecuting:!1,error:n})),w.current&&w.current(n,e),n}},[]),A=r(k);t(()=>{A.current=k},[k]);let j=e(e=>A.current(e),[]),M=e(()=>{x({isExecuting:!1,lastResult:null,error:null,executionCount:0})},[]);return t(()=>{if(typeof window>`u`||!window.navigator?.modelContext){console.warn(`[useWebMCP] window.navigator.modelContext is not available. Tool "${d}" will not be registered.`);return}let e=async e=>{try{let t=await A.current(e),n={content:[{type:`text`,text:T.current(t)}]};if(m){let e=s(t);if(!e)throw Error(`Tool "${d}" outputSchema requires the handler to return a JSON object result`);n.structuredContent=e}return n}catch(e){return{content:[{type:`text`,text:`Error: ${e instanceof Error?e.message:String(e)}`}],isError:!0}}},t=Symbol(d),n=window.navigator.modelContext;return n.registerTool({name:d,description:f,...p&&{inputSchema:p},...m&&{outputSchema:m},...h&&{annotations:h},execute:e}),o.set(d,t),()=>{if(o.get(d)===t){o.delete(d);try{n.unregisterTool(d)}catch(e){l()&&console.warn(`[useWebMCP] Failed to unregister tool "${d}" during cleanup:`,e)}}}},[d,f,p,m,h,...u??[]]),{state:b,execute:j,reset:M}}export{u as useWebMCP};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["response: CallToolResult"],"sources":["../src/useWebMCP.ts"],"sourcesContent":["import type { ToolInputSchema } from '@mcp-b/webmcp-polyfill';\nimport type {\n  CallToolResult,\n  InputSchema,\n  JsonSchemaObject,\n  ToolDescriptor,\n} from '@mcp-b/webmcp-types';\nimport type { DependencyList } from 'react';\nimport { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport type {\n  InferOutput,\n  InferToolInput,\n  ToolExecutionState,\n  WebMCPConfig,\n  WebMCPReturn,\n} from './types.js';\n\n/**\n * Default output formatter that converts values to formatted JSON strings.\n *\n * String values are returned as-is; all other types are serialized to\n * indented JSON for readability.\n *\n * @internal\n */\nfunction defaultFormatOutput(output: unknown): string {\n  if (typeof output === 'string') {\n    return output;\n  }\n  return JSON.stringify(output, null, 2);\n}\n\nconst TOOL_OWNER_BY_NAME = new Map<string, symbol>();\ntype StructuredContent = Exclude<CallToolResult['structuredContent'], undefined>;\n\nfunction toStructuredContent(value: unknown): StructuredContent | null {\n  if (!value || typeof value !== 'object' || Array.isArray(value)) {\n    return null;\n  }\n\n  try {\n    const normalized = JSON.parse(JSON.stringify(value)) as unknown;\n    if (!normalized || typeof normalized !== 'object' || Array.isArray(normalized)) {\n      return null;\n    }\n    return normalized as StructuredContent;\n  } catch {\n    return null;\n  }\n}\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nfunction isDev(): boolean {\n  const env = (globalThis as { process?: { env?: { NODE_ENV?: string } } }).process?.env?.NODE_ENV;\n  return env !== undefined ? env !== 'production' : false;\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 * - Handles tool execution and lifecycle callbacks\n * - Automatically unregisters on component unmount\n * - Returns `structuredContent` when `outputSchema` is defined\n *\n * ## Output Schema (Recommended)\n *\n * Always define an `outputSchema` for your tools. This provides:\n * - **Type Safety**: Handler return type is inferred from the schema\n * - **MCP structuredContent**: AI models receive structured, typed data\n * - **Better AI Understanding**: Models can reason about your tool's output format\n *\n * ```tsx\n * useWebMCP({\n *   name: 'get_user',\n *   description: 'Get user by ID',\n *   inputSchema: {\n *     type: 'object',\n *     properties: { userId: { type: 'string' } },\n *     required: ['userId'],\n *   } as const,\n *   outputSchema: {\n *     type: 'object',\n *     properties: {\n *       id: { type: 'string' },\n *       name: { type: 'string' },\n *       email: { type: 'string' },\n *     },\n *   } as const,\n *   handler: async ({ userId }) => {\n *     const user = await fetchUser(userId);\n *     return { id: user.id, name: user.name, email: user.email };\n *   },\n * });\n * ```\n *\n * ## Re-render Optimization\n *\n * This hook is optimized to minimize unnecessary tool re-registrations:\n *\n * - **Ref-based callbacks**: `handler`, `onSuccess`, `onError`, and `formatOutput`\n *   are stored in refs, so changing these functions won't trigger re-registration.\n *\n * **IMPORTANT**: If `inputSchema`, `outputSchema`, or `annotations` are defined inline\n * or change on every render, the tool will re-register unnecessarily. To avoid this,\n * define them outside your component with `as const`:\n *\n * ```tsx\n * // Good: Static schema defined outside component\n * const OUTPUT_SCHEMA = {\n *   type: 'object',\n *   properties: { count: { type: 'number' } },\n * } as const;\n *\n * // Bad: Inline schema (creates new object every render)\n * useWebMCP({\n *   outputSchema: { type: 'object', properties: { count: { type: 'number' } } } as const,\n * });\n * ```\n *\n * @template TInputSchema - JSON Schema defining input parameter types (use `as const` for inference)\n * @template TOutputSchema - JSON Schema object defining output structure (enables structuredContent)\n *\n * @param config - Configuration object for the tool\n * @param deps - Optional dependency array that triggers tool re-registration when values change.\n *\n * @returns Object containing execution state and control methods\n *\n * @public\n *\n * @example\n * Basic tool with outputSchema (recommended):\n * ```tsx\n * function PostActions() {\n *   const likeTool = useWebMCP({\n *     name: 'posts_like',\n *     description: 'Like a post by ID',\n *     inputSchema: {\n *       type: 'object',\n *       properties: { postId: { type: 'string', description: 'The post ID' } },\n *       required: ['postId'],\n *     } as const,\n *     outputSchema: {\n *       type: 'object',\n *       properties: {\n *         success: { type: 'boolean' },\n *         likeCount: { type: 'number' },\n *       },\n *     } as const,\n *     handler: async ({ postId }) => {\n *       const result = await api.posts.like(postId);\n *       return { success: true, likeCount: result.likes };\n *     },\n *   });\n *\n *   return <div>Likes: {likeTool.state.lastResult?.likeCount ?? 0}</div>;\n * }\n * ```\n */\nexport function useWebMCP<\n  TInputSchema extends ToolInputSchema = InputSchema,\n  TOutputSchema extends JsonSchemaObject | undefined = undefined,\n>(\n  config: WebMCPConfig<TInputSchema, TOutputSchema>,\n  deps?: DependencyList\n): WebMCPReturn<TOutputSchema> {\n  type TOutput = InferOutput<TOutputSchema>;\n  type TInput = InferToolInput<TInputSchema>;\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  const isMountedRef = useRef(true);\n  const warnedRef = useRef(new Set<string>());\n  const prevConfigRef = useRef({\n    inputSchema,\n    outputSchema,\n    annotations,\n    description,\n    deps,\n  });\n  // Update refs when callbacks change (doesn't trigger re-registration)\n  useIsomorphicLayoutEffect(() => {\n    handlerRef.current = handler;\n    onSuccessRef.current = onSuccess;\n    onErrorRef.current = onError;\n    formatOutputRef.current = formatOutput;\n  }, [handler, onSuccess, onError, formatOutput]);\n\n  // Cleanup: mark component as unmounted\n  useEffect(() => {\n    isMountedRef.current = true;\n    return () => {\n      isMountedRef.current = false;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!isDev()) {\n      prevConfigRef.current = { inputSchema, outputSchema, annotations, description, deps };\n      return;\n    }\n\n    const warnOnce = (key: string, message: string) => {\n      if (warnedRef.current.has(key)) {\n        return;\n      }\n      console.warn(`[useWebMCP] ${message}`);\n      warnedRef.current.add(key);\n    };\n\n    const prev = prevConfigRef.current;\n\n    if (inputSchema && prev.inputSchema && prev.inputSchema !== inputSchema) {\n      warnOnce(\n        'inputSchema',\n        `Tool \"${name}\" inputSchema reference changed; memoize or define it outside the component to avoid re-registration.`\n      );\n    }\n\n    if (outputSchema && prev.outputSchema && prev.outputSchema !== outputSchema) {\n      warnOnce(\n        'outputSchema',\n        `Tool \"${name}\" outputSchema reference changed; memoize or define it outside the component to avoid re-registration.`\n      );\n    }\n\n    if (annotations && prev.annotations && prev.annotations !== annotations) {\n      warnOnce(\n        'annotations',\n        `Tool \"${name}\" annotations reference changed; memoize or define it outside the component to avoid re-registration.`\n      );\n    }\n\n    if (description !== prev.description) {\n      warnOnce(\n        'description',\n        `Tool \"${name}\" description changed; this re-registers the tool. Memoize the description if it does not need to update.`\n      );\n    }\n\n    if (\n      deps?.some(\n        (value) => (typeof value === 'object' && value !== null) || typeof value === 'function'\n      )\n    ) {\n      warnOnce(\n        'deps',\n        `Tool \"${name}\" deps contains non-primitive values; prefer primitives or memoize objects/functions to reduce re-registration.`\n      );\n    }\n\n    prevConfigRef.current = { inputSchema, outputSchema, annotations, description, deps };\n  }, [annotations, deps, description, inputSchema, name, outputSchema]);\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(async (input: unknown): Promise<TOutput> => {\n    setState((prev) => ({\n      ...prev,\n      isExecuting: true,\n      error: null,\n    }));\n\n    try {\n      const result = await handlerRef.current(input as TInput);\n\n      // Only update state if component is still mounted\n      if (isMountedRef.current) {\n        setState((prev) => ({\n          isExecuting: false,\n          lastResult: result,\n          error: null,\n          executionCount: prev.executionCount + 1,\n        }));\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      // Only update state if component is still mounted\n      if (isMountedRef.current) {\n        setState((prev) => ({\n          ...prev,\n          isExecuting: false,\n          error: err,\n        }));\n      }\n\n      if (onErrorRef.current) {\n        onErrorRef.current(err, input);\n      }\n\n      throw err;\n    }\n  }, []);\n  const executeRef = useRef(execute);\n\n  useEffect(() => {\n    executeRef.current = execute;\n  }, [execute]);\n\n  const stableExecute = useCallback(\n    (input: unknown): Promise<TOutput> => executeRef.current(input),\n    []\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    /**\n     * Handles MCP tool execution by running the handler and formatting the response.\n     *\n     * @param input - The input parameters from the MCP client\n     * @returns CallToolResult with text content and optional structuredContent\n     */\n    const mcpHandler = async (input: unknown): Promise<CallToolResult> => {\n      try {\n        const result = await executeRef.current(input);\n        const formattedOutput = formatOutputRef.current(result);\n\n        const response: CallToolResult = {\n          content: [\n            {\n              type: 'text',\n              text: formattedOutput,\n            },\n          ],\n        };\n\n        if (outputSchema) {\n          const structuredContent = toStructuredContent(result);\n          if (!structuredContent) {\n            throw new Error(\n              `Tool \"${name}\" outputSchema requires the handler to return a JSON object result`\n            );\n          }\n          response.structuredContent = structuredContent;\n        }\n\n        return response;\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 ownerToken = Symbol(name);\n    const modelContext = window.navigator.modelContext;\n\n    (modelContext.registerTool as (tool: ToolDescriptor) => void)({\n      name,\n      description,\n      ...(inputSchema && { inputSchema: inputSchema as InputSchema }),\n      ...(outputSchema && { outputSchema: outputSchema as InputSchema }),\n      ...(annotations && { annotations }),\n      execute: mcpHandler,\n    });\n    TOOL_OWNER_BY_NAME.set(name, ownerToken);\n\n    return () => {\n      const currentOwner = TOOL_OWNER_BY_NAME.get(name);\n      if (currentOwner !== ownerToken) {\n        return;\n      }\n\n      TOOL_OWNER_BY_NAME.delete(name);\n      try {\n        modelContext.unregisterTool(name);\n      } catch (error) {\n        if (isDev()) {\n          console.warn(`[useWebMCP] Failed to unregister tool \"${name}\" during cleanup:`, error);\n        }\n      }\n    };\n    // Spread operator in dependencies: Allows users to provide additional dependencies\n    // via the `deps` parameter. While unconventional, this pattern is intentional to support\n    // dynamic dependency injection. The spread is safe because deps is validated and warned\n    // about non-primitive values earlier in this hook.\n  }, [name, description, inputSchema, outputSchema, annotations, ...(deps ?? [])]);\n\n  return {\n    state,\n    execute: stableExecute,\n    reset,\n  };\n}\n"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "usewebmcp",
-  "version": "0.2.3-beta.0",
-  "description": "React hooks for Model Context Protocol - alias for @mcp-b/react-webmcp",
+  "version": "0.3.0",
+  "description": "Standalone React hooks for strict core WebMCP tool registration with navigator.modelContext",
   "keywords": [
     "mcp",
     "model-context-protocol",
@@ -12,16 +12,15 @@
     "ai",
     "assistant",
     "tools",
-    "zod",
     "usewebmcp"
   ],
-  "homepage": "https://github.com/WebMCP-org/WebMCP#readme",
+  "homepage": "https://github.com/WebMCP-org/npm-packages#readme",
   "bugs": {
-    "url": "https://github.com/WebMCP-org/WebMCP/issues"
+    "url": "https://github.com/WebMCP-org/npm-packages/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/WebMCP-org/WebMCP.git",
+    "url": "git+https://github.com/WebMCP-org/npm-packages.git",
     "directory": "packages/usewebmcp"
   },
   "license": "MIT",
@@ -38,17 +37,26 @@
     "dist"
   ],
   "dependencies": {
-    "@mcp-b/react-webmcp": "0.3.0-beta.0"
+    "@mcp-b/webmcp-polyfill": "0.2.0",
+    "@mcp-b/webmcp-types": "0.2.0"
   },
   "devDependencies": {
     "@types/node": "22.17.2",
-    "@types/react": "^19.1.2",
+    "@types/react": "^19.2.9",
+    "@vitest/browser": "^4.0.18",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "playwright": "^1.58.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "tsdown": "^0.15.10",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "vitest": "^4.0.18",
+    "vitest-browser-react": "^2.0.4",
+    "@mcp-b/global": "0.0.0-beta-20260217171247"
   },
   "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "zod": "^3.25.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public",
@@ -63,6 +71,8 @@
     "lint": "biome lint --write .",
     "publish:dry": "pnpm publish --access public --dry-run",
     "publish:npm": "pnpm publish --access public",
-    "typecheck": "tsc --noEmit"
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit && vitest run --typecheck --silent"
   }
 }