@tanstack/ai-react 0.23.0 → 0.24.0

package/dist/esm/index.d.ts

@@ -4,6 +4,8 @@ export { useByok } from './use-byok.js';
 export { useRealtimeChat } from './use-realtime-chat.js';
 export { useMcpAppBridge } from './use-mcp-app-bridge.js';
 export type { UseMcpAppBridgeOptions } from './use-mcp-app-bridge.js';
+export { useWebMCPTools } from './use-web-mcp-tools.js';
+export type { UseWebMCPToolsOptions } from './use-web-mcp-tools.js';
 export type { DeepPartial, UseChatOptions, UseChatReturn, UIMessage, ChatRequestBody, QueuedMessage, SendMessageOptions, WhenBusy, QueueConfig, QueueStrategy, QueueOption, } from './types.js';
 export type { UseRealtimeChatOptions, UseRealtimeChatReturn, } from './realtime-types.js';
 export { useGeneration } from './use-generation.js';

package/dist/esm/index.js

@@ -3,6 +3,7 @@ import { createChatHook } from "./create-chat-hook.js";
 import { useByok } from "./use-byok.js";
 import { useRealtimeChat } from "./use-realtime-chat.js";
 import { useMcpAppBridge } from "./use-mcp-app-bridge.js";
+import { useWebMCPTools } from "./use-web-mcp-tools.js";
 import { useGeneration } from "./use-generation.js";
 import { useGenerateImage } from "./use-generate-image.js";
 import { useGenerateAudio } from "./use-generate-audio.js";
@@ -12,4 +13,4 @@ import { useSummarize } from "./use-summarize.js";
 import { useGenerateVideo } from "./use-generate-video.js";
 import { useAudioRecorder } from "./use-audio-recorder.js";
 import { StorageUnavailableError, createChatClientOptions, createMcpAppBridge, fetchHttpStream, fetchServerSentEvents, indexedDBPersistence, localStoragePersistence, rpcStream, sessionStoragePersistence, stream, webSocket, xhrHttpStream, xhrServerSentEvents } from "@tanstack/ai-client";
-export { StorageUnavailableError, createChatClientOptions, createChatHook, createMcpAppBridge, fetchHttpStream, fetchServerSentEvents, indexedDBPersistence, localStoragePersistence, rpcStream, sessionStoragePersistence, stream, useAudioRecorder, useByok, useChat, useGenerateAudio, useGenerateImage, useGenerateSpeech, useGenerateVideo, useGeneration, useMcpAppBridge, useRealtimeChat, useSummarize, useTranscription, webSocket, xhrHttpStream, xhrServerSentEvents };
+export { StorageUnavailableError, createChatClientOptions, createChatHook, createMcpAppBridge, fetchHttpStream, fetchServerSentEvents, indexedDBPersistence, localStoragePersistence, rpcStream, sessionStoragePersistence, stream, useAudioRecorder, useByok, useChat, useGenerateAudio, useGenerateImage, useGenerateSpeech, useGenerateVideo, useGeneration, useMcpAppBridge, useRealtimeChat, useSummarize, useTranscription, useWebMCPTools, webSocket, xhrHttpStream, xhrServerSentEvents };

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

@@ -0,0 +1,27 @@
+import { AnyClientTool, InferredClientContext, RegisterWebMCPToolsOptions } from '@tanstack/ai-client';
+/** Options for the React {@link useWebMCPTools} lifecycle hook. */
+export type UseWebMCPToolsOptions<TTools extends ReadonlyArray<AnyClientTool>, TContext = InferredClientContext<TTools>> = Omit<RegisterWebMCPToolsOptions<TTools, TContext>, 'signal'> & {
+    /** Receives an asynchronous registration failure. */
+    onError?: (error: unknown) => void;
+};
+type UseWebMCPToolsArguments<TTools extends ReadonlyArray<AnyClientTool>, TContext> = RegisterWebMCPToolsOptions<TTools, TContext> extends {
+    context: unknown;
+} ? [options: UseWebMCPToolsOptions<TTools, TContext>] : [options?: UseWebMCPToolsOptions<TTools, TContext>];
+/**
+ * Registers client tools with WebMCP for the lifetime of a React component.
+ *
+ * The hook replaces the registration when `tools` or `options` changes.
+ * Unsupported browsers and server rendering do not register tools.
+ *
+ * @param tools - The executable client tools to expose through WebMCP.
+ * @param options - Runtime context, per-tool options, and an error callback.
+ *
+ * @example
+ * ```tsx
+ * useWebMCPTools([searchProducts], {
+ *   toolOptions: { searchProducts: { title: 'Search products' } },
+ * })
+ * ```
+ */
+export declare function useWebMCPTools<const TTools extends ReadonlyArray<AnyClientTool>, TContext = InferredClientContext<TTools>>(tools: TTools, ...[options]: UseWebMCPToolsArguments<TTools, TContext>): void;
+export {};

package/dist/esm/use-web-mcp-tools.js

@@ -0,0 +1,36 @@
+import { registerWebMCPTools } from "@tanstack/ai-client";
+import { useEffect } from "react";
+//#region src/use-web-mcp-tools.ts
+/**
+* Registers client tools with WebMCP for the lifetime of a React component.
+*
+* The hook replaces the registration when `tools` or `options` changes.
+* Unsupported browsers and server rendering do not register tools.
+*
+* @param tools - The executable client tools to expose through WebMCP.
+* @param options - Runtime context, per-tool options, and an error callback.
+*
+* @example
+* ```tsx
+* useWebMCPTools([searchProducts], {
+*   toolOptions: { searchProducts: { title: 'Search products' } },
+* })
+* ```
+*/
+function useWebMCPTools(tools, ...[options]) {
+	useEffect(() => {
+		const controller = new AbortController();
+		const { onError, ...registrationOptions } = options ?? {};
+		registerWebMCPTools(tools, {
+			...registrationOptions,
+			signal: controller.signal
+		}).catch((error) => {
+			if (!controller.signal.aborted) onError?.(error);
+		});
+		return () => controller.abort();
+	}, [tools, options]);
+}
+//#endregion
+export { useWebMCPTools };
+
+//# sourceMappingURL=use-web-mcp-tools.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-web-mcp-tools.js","names":[],"sources":["../../src/use-web-mcp-tools.ts"],"sourcesContent":["import { useEffect } from 'react'\nimport { registerWebMCPTools } from '@tanstack/ai-client'\nimport type {\n  AnyClientTool,\n  InferredClientContext,\n  RegisterWebMCPToolsOptions,\n} from '@tanstack/ai-client'\n\n/** Options for the React {@link useWebMCPTools} lifecycle hook. */\nexport type UseWebMCPToolsOptions<\n  TTools extends ReadonlyArray<AnyClientTool>,\n  TContext = InferredClientContext<TTools>,\n> = Omit<RegisterWebMCPToolsOptions<TTools, TContext>, 'signal'> & {\n  /** Receives an asynchronous registration failure. */\n  onError?: (error: unknown) => void\n}\n\ntype UseWebMCPToolsArguments<\n  TTools extends ReadonlyArray<AnyClientTool>,\n  TContext,\n> =\n  RegisterWebMCPToolsOptions<TTools, TContext> extends { context: unknown }\n    ? [options: UseWebMCPToolsOptions<TTools, TContext>]\n    : [options?: UseWebMCPToolsOptions<TTools, TContext>]\n\n/**\n * Registers client tools with WebMCP for the lifetime of a React component.\n *\n * The hook replaces the registration when `tools` or `options` changes.\n * Unsupported browsers and server rendering do not register tools.\n *\n * @param tools - The executable client tools to expose through WebMCP.\n * @param options - Runtime context, per-tool options, and an error callback.\n *\n * @example\n * ```tsx\n * useWebMCPTools([searchProducts], {\n *   toolOptions: { searchProducts: { title: 'Search products' } },\n * })\n * ```\n */\nexport function useWebMCPTools<\n  const TTools extends ReadonlyArray<AnyClientTool>,\n  TContext = InferredClientContext<TTools>,\n>(tools: TTools, ...[options]: UseWebMCPToolsArguments<TTools, TContext>) {\n  useEffect(() => {\n    const controller = new AbortController()\n    const { onError, ...registrationOptions } = options ?? {}\n\n    registerWebMCPTools(tools, {\n      ...registrationOptions,\n      signal: controller.signal,\n    }).catch((error) => {\n      if (!controller.signal.aborted) onError?.(error)\n    })\n\n    return () => controller.abort()\n  }, [tools, options])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAyCA,SAAgB,eAGd,OAAe,GAAG,CAAC,UAAqD;CACxE,gBAAgB;EACd,MAAM,aAAa,IAAI,gBAAgB;EACvC,MAAM,EAAE,SAAS,GAAG,wBAAwB,WAAW,CAAC;EAExD,oBAAoB,OAAO;GACzB,GAAG;GACH,QAAQ,WAAW;EACrB,CAAC,CAAC,CAAC,OAAO,UAAU;GAClB,IAAI,CAAC,WAAW,OAAO,SAAS,UAAU,KAAK;EACjD,CAAC;EAED,aAAa,WAAW,MAAM;CAChC,GAAG,CAAC,OAAO,OAAO,CAAC;AACrB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/ai-react",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "React hooks for TanStack AI streaming chat, realtime voice, structured outputs, and media generation.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -58,14 +58,14 @@
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1",
-    "@tanstack/ai-client": "^0.30.0"
+    "@tanstack/ai-client": "^0.31.0"
   },
   "peerDependencies": {
     "@mcp-ui/client": "^7",
     "@types/react": ">=18.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
-    "@tanstack/ai": "^0.52.1"
+    "@tanstack/ai": "^0.53.0"
   },
   "peerDependenciesMeta": {
     "@mcp-ui/client": {
@@ -85,7 +85,7 @@
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "vite": "^8.2.1",
-    "@tanstack/ai": "0.52.1"
+    "@tanstack/ai": "0.53.0"
   },
   "scripts": {
     "clean": "premove ./build ./dist",

package/src/index.ts

@@ -4,6 +4,8 @@ export { useByok } from './use-byok'
 export { useRealtimeChat } from './use-realtime-chat'
 export { useMcpAppBridge } from './use-mcp-app-bridge'
 export type { UseMcpAppBridgeOptions } from './use-mcp-app-bridge'
+export { useWebMCPTools } from './use-web-mcp-tools'
+export type { UseWebMCPToolsOptions } from './use-web-mcp-tools'
 export type {
   DeepPartial,
   UseChatOptions,

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

@@ -0,0 +1,59 @@
+import { useEffect } from 'react'
+import { registerWebMCPTools } from '@tanstack/ai-client'
+import type {
+  AnyClientTool,
+  InferredClientContext,
+  RegisterWebMCPToolsOptions,
+} from '@tanstack/ai-client'
+
+/** Options for the React {@link useWebMCPTools} lifecycle hook. */
+export type UseWebMCPToolsOptions<
+  TTools extends ReadonlyArray<AnyClientTool>,
+  TContext = InferredClientContext<TTools>,
+> = Omit<RegisterWebMCPToolsOptions<TTools, TContext>, 'signal'> & {
+  /** Receives an asynchronous registration failure. */
+  onError?: (error: unknown) => void
+}
+
+type UseWebMCPToolsArguments<
+  TTools extends ReadonlyArray<AnyClientTool>,
+  TContext,
+> =
+  RegisterWebMCPToolsOptions<TTools, TContext> extends { context: unknown }
+    ? [options: UseWebMCPToolsOptions<TTools, TContext>]
+    : [options?: UseWebMCPToolsOptions<TTools, TContext>]
+
+/**
+ * Registers client tools with WebMCP for the lifetime of a React component.
+ *
+ * The hook replaces the registration when `tools` or `options` changes.
+ * Unsupported browsers and server rendering do not register tools.
+ *
+ * @param tools - The executable client tools to expose through WebMCP.
+ * @param options - Runtime context, per-tool options, and an error callback.
+ *
+ * @example
+ * ```tsx
+ * useWebMCPTools([searchProducts], {
+ *   toolOptions: { searchProducts: { title: 'Search products' } },
+ * })
+ * ```
+ */
+export function useWebMCPTools<
+  const TTools extends ReadonlyArray<AnyClientTool>,
+  TContext = InferredClientContext<TTools>,
+>(tools: TTools, ...[options]: UseWebMCPToolsArguments<TTools, TContext>) {
+  useEffect(() => {
+    const controller = new AbortController()
+    const { onError, ...registrationOptions } = options ?? {}
+
+    registerWebMCPTools(tools, {
+      ...registrationOptions,
+      signal: controller.signal,
+    }).catch((error) => {
+      if (!controller.signal.aborted) onError?.(error)
+    })
+
+    return () => controller.abort()
+  }, [tools, options])
+}