@tanstack/ai-react 0.28.0 → 0.29.1

package/dist/esm/index.d.ts

@@ -4,8 +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 { usePageWebMCPTools, useRegisterWebMCPTools, useWebMCPTools, } from './use-web-mcp-tools.js';
+export type { UsePageWebMCPToolsOptions, UseRegisterWebMCPToolsOptions, 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';
@@ -24,4 +24,4 @@ export { useGenerateVideo } from './use-generate-video.js';
 export type { UseGenerateVideoOptions, UseGenerateVideoReturn, } from './use-generate-video.js';
 export { useAudioRecorder } from './use-audio-recorder.js';
 export type { UseAudioRecorderOptions, UseAudioRecorderReturn, } from './use-audio-recorder.js';
-export { AudioRecorder, ChatClient, InterruptManager, RealtimeClient, GenerationClient, VideoGenerationClient, GENERATION_EVENTS, reconstructImageResult, reconstructAudioResult, reconstructSpeechResult, reconstructTranscriptionResult, reconstructSummarizeResult, UnsupportedResponseStreamError, createAIDevtoolsGenerationPreview, StreamTruncatedError, DurableStreamIncompleteError, StreamReconnectLimitError, uiMessageToModelMessages, modelMessageToUIMessage, modelMessagesToUIMessages, convertMessagesToModelMessages, normalizeToUIMessage, generateMessageId, StreamProcessor, ImmediateStrategy, PunctuationStrategy, BatchStrategy, WordBoundaryStrategy, CompositeStrategy, parsePartialJSON, PartialJSONParser, defaultJSONParser, registerWebMCPTools, clientTools, fetchServerSentEvents, localStoragePersistence, sessionStoragePersistence, indexedDBPersistence, StorageUnavailableError, type ChatClientPersistence, type ChatPersistedState, type ChatPersistenceOption, type ChatStorageAdapter, type WebStoragePersistenceOptions, type IndexedDBPersistenceOptions, fetchHttpStream, xhrServerSentEvents, xhrHttpStream, stream, rpcStream, webSocket, createChatClientOptions, createMcpAppBridge, type McpAppBridge, type CreateMcpAppBridgeOptions, type ChatFetcher, type ChatFetcherInput, type ChatFetcherOptions, type ConnectionAdapter, type ConnectConnectionAdapter, type SubscribeConnectionAdapter, type RunAgentInputContext, type FetchConnectionOptions, type XhrConnectionOptions, type WebSocketConnectionOptions, type InferChatMessages, type GenericInterrupt, type RegisteredGenericInterrupt, type GenerationClientState, type ImageGenerateInput, type AudioGenerateInput, type SpeechGenerateInput, type TranscriptionGenerateInput, type SummarizeGenerateInput, type VideoGenerateInput, type VideoGenerateResult, type VideoStatusInfo, } from '@tanstack/ai-client';
+export { AudioRecorder, ChatClient, InterruptManager, RealtimeClient, GenerationClient, VideoGenerationClient, GENERATION_EVENTS, reconstructImageResult, reconstructAudioResult, reconstructSpeechResult, reconstructTranscriptionResult, reconstructSummarizeResult, UnsupportedResponseStreamError, createAIDevtoolsGenerationPreview, StreamTruncatedError, DurableStreamIncompleteError, StreamReconnectLimitError, uiMessageToModelMessages, modelMessageToUIMessage, modelMessagesToUIMessages, convertMessagesToModelMessages, normalizeToUIMessage, generateMessageId, StreamProcessor, ImmediateStrategy, PunctuationStrategy, BatchStrategy, WordBoundaryStrategy, CompositeStrategy, parsePartialJSON, PartialJSONParser, defaultJSONParser, registerWebMCPTools, getWebMCPTools, subscribeWebMCPTools, type GetWebMCPToolsOptions, type SubscribeWebMCPToolsOptions, type WebMCPPageTool, clientTools, fetchServerSentEvents, localStoragePersistence, sessionStoragePersistence, indexedDBPersistence, StorageUnavailableError, type ChatClientPersistence, type ChatPersistedState, type ChatPersistenceOption, type ChatStorageAdapter, type WebStoragePersistenceOptions, type IndexedDBPersistenceOptions, fetchHttpStream, xhrServerSentEvents, xhrHttpStream, stream, rpcStream, webSocket, createChatClientOptions, createMcpAppBridge, type McpAppBridge, type CreateMcpAppBridgeOptions, type ChatFetcher, type ChatFetcherInput, type ChatFetcherOptions, type ConnectionAdapter, type ConnectConnectionAdapter, type SubscribeConnectionAdapter, type RunAgentInputContext, type FetchConnectionOptions, type XhrConnectionOptions, type WebSocketConnectionOptions, type InferChatMessages, type GenericInterrupt, type RegisteredGenericInterrupt, type GenerationClientState, type ImageGenerateInput, type AudioGenerateInput, type SpeechGenerateInput, type TranscriptionGenerateInput, type SummarizeGenerateInput, type VideoGenerateInput, type VideoGenerateResult, type VideoStatusInfo, } from '@tanstack/ai-client';

package/dist/esm/index.js

@@ -3,7 +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 { usePageWebMCPTools, useRegisterWebMCPTools, 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,5 +12,5 @@ import { useTranscription } from "./use-transcription.js";
 import { useSummarize } from "./use-summarize.js";
 import { useGenerateVideo } from "./use-generate-video.js";
 import { useAudioRecorder } from "./use-audio-recorder.js";
-import { AudioRecorder, BatchStrategy, ChatClient, CompositeStrategy, DurableStreamIncompleteError, GENERATION_EVENTS, GenerationClient, ImmediateStrategy, InterruptManager, PartialJSONParser, PunctuationStrategy, RealtimeClient, StorageUnavailableError, StreamProcessor, StreamReconnectLimitError, StreamTruncatedError, UnsupportedResponseStreamError, VideoGenerationClient, WordBoundaryStrategy, clientTools, convertMessagesToModelMessages, createAIDevtoolsGenerationPreview, createChatClientOptions, createMcpAppBridge, defaultJSONParser, fetchHttpStream, fetchServerSentEvents, generateMessageId, indexedDBPersistence, localStoragePersistence, modelMessageToUIMessage, modelMessagesToUIMessages, normalizeToUIMessage, parsePartialJSON, reconstructAudioResult, reconstructImageResult, reconstructSpeechResult, reconstructSummarizeResult, reconstructTranscriptionResult, registerWebMCPTools, rpcStream, sessionStoragePersistence, stream, uiMessageToModelMessages, webSocket, xhrHttpStream, xhrServerSentEvents } from "@tanstack/ai-client";
-export { AudioRecorder, BatchStrategy, ChatClient, CompositeStrategy, DurableStreamIncompleteError, GENERATION_EVENTS, GenerationClient, ImmediateStrategy, InterruptManager, PartialJSONParser, PunctuationStrategy, RealtimeClient, StorageUnavailableError, StreamProcessor, StreamReconnectLimitError, StreamTruncatedError, UnsupportedResponseStreamError, VideoGenerationClient, WordBoundaryStrategy, clientTools, convertMessagesToModelMessages, createAIDevtoolsGenerationPreview, createChatClientOptions, createChatHook, createMcpAppBridge, defaultJSONParser, fetchHttpStream, fetchServerSentEvents, generateMessageId, indexedDBPersistence, localStoragePersistence, modelMessageToUIMessage, modelMessagesToUIMessages, normalizeToUIMessage, parsePartialJSON, reconstructAudioResult, reconstructImageResult, reconstructSpeechResult, reconstructSummarizeResult, reconstructTranscriptionResult, registerWebMCPTools, rpcStream, sessionStoragePersistence, stream, uiMessageToModelMessages, useAudioRecorder, useByok, useChat, useGenerateAudio, useGenerateImage, useGenerateSpeech, useGenerateVideo, useGeneration, useMcpAppBridge, useRealtimeChat, useSummarize, useTranscription, useWebMCPTools, webSocket, xhrHttpStream, xhrServerSentEvents };
+import { AudioRecorder, BatchStrategy, ChatClient, CompositeStrategy, DurableStreamIncompleteError, GENERATION_EVENTS, GenerationClient, ImmediateStrategy, InterruptManager, PartialJSONParser, PunctuationStrategy, RealtimeClient, StorageUnavailableError, StreamProcessor, StreamReconnectLimitError, StreamTruncatedError, UnsupportedResponseStreamError, VideoGenerationClient, WordBoundaryStrategy, clientTools, convertMessagesToModelMessages, createAIDevtoolsGenerationPreview, createChatClientOptions, createMcpAppBridge, defaultJSONParser, fetchHttpStream, fetchServerSentEvents, generateMessageId, getWebMCPTools, indexedDBPersistence, localStoragePersistence, modelMessageToUIMessage, modelMessagesToUIMessages, normalizeToUIMessage, parsePartialJSON, reconstructAudioResult, reconstructImageResult, reconstructSpeechResult, reconstructSummarizeResult, reconstructTranscriptionResult, registerWebMCPTools, rpcStream, sessionStoragePersistence, stream, subscribeWebMCPTools, uiMessageToModelMessages, webSocket, xhrHttpStream, xhrServerSentEvents } from "@tanstack/ai-client";
+export { AudioRecorder, BatchStrategy, ChatClient, CompositeStrategy, DurableStreamIncompleteError, GENERATION_EVENTS, GenerationClient, ImmediateStrategy, InterruptManager, PartialJSONParser, PunctuationStrategy, RealtimeClient, StorageUnavailableError, StreamProcessor, StreamReconnectLimitError, StreamTruncatedError, UnsupportedResponseStreamError, VideoGenerationClient, WordBoundaryStrategy, clientTools, convertMessagesToModelMessages, createAIDevtoolsGenerationPreview, createChatClientOptions, createChatHook, createMcpAppBridge, defaultJSONParser, fetchHttpStream, fetchServerSentEvents, generateMessageId, getWebMCPTools, indexedDBPersistence, localStoragePersistence, modelMessageToUIMessage, modelMessagesToUIMessages, normalizeToUIMessage, parsePartialJSON, reconstructAudioResult, reconstructImageResult, reconstructSpeechResult, reconstructSummarizeResult, reconstructTranscriptionResult, registerWebMCPTools, rpcStream, sessionStoragePersistence, stream, subscribeWebMCPTools, uiMessageToModelMessages, useAudioRecorder, useByok, useChat, useGenerateAudio, useGenerateImage, useGenerateSpeech, useGenerateVideo, useGeneration, useMcpAppBridge, usePageWebMCPTools, useRealtimeChat, useRegisterWebMCPTools, useSummarize, useTranscription, useWebMCPTools, webSocket, xhrHttpStream, xhrServerSentEvents };

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

@@ -1,12 +1,14 @@
-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'> & {
+import { AnyClientTool, InferredClientContext, RegisterWebMCPToolsOptions, SubscribeWebMCPToolsOptions } from '@tanstack/ai-client';
+/** Options for the React {@link useRegisterWebMCPTools} lifecycle hook. */
+export type UseRegisterWebMCPToolsOptions<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 {
+/** @deprecated Use `UseRegisterWebMCPToolsOptions`. Removed in 1.0.0. */
+export type UseWebMCPToolsOptions<TTools extends ReadonlyArray<AnyClientTool>, TContext = InferredClientContext<TTools>> = UseRegisterWebMCPToolsOptions<TTools, TContext>;
+type UseRegisterWebMCPToolsArguments<TTools extends ReadonlyArray<AnyClientTool>, TContext> = RegisterWebMCPToolsOptions<TTools, TContext> extends {
     context: unknown;
-} ? [options: UseWebMCPToolsOptions<TTools, TContext>] : [options?: UseWebMCPToolsOptions<TTools, TContext>];
+} ? [options: UseRegisterWebMCPToolsOptions<TTools, TContext>] : [options?: UseRegisterWebMCPToolsOptions<TTools, TContext>];
 /**
  * Registers client tools with WebMCP for the lifetime of a React component.
  *
@@ -18,10 +20,35 @@ type UseWebMCPToolsArguments<TTools extends ReadonlyArray<AnyClientTool>, TConte
  *
  * @example
  * ```tsx
- * useWebMCPTools([searchProducts], {
+ * useRegisterWebMCPTools([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 declare function useRegisterWebMCPTools<const TTools extends ReadonlyArray<AnyClientTool>, TContext = InferredClientContext<TTools>>(tools: TTools, ...[options]: UseRegisterWebMCPToolsArguments<TTools, TContext>): void;
+/**
+ * @deprecated Use `useRegisterWebMCPTools`. Removed in 1.0.0.
+ * @alias
+ */
+export declare const useWebMCPTools: typeof useRegisterWebMCPTools;
+/** Options for {@link usePageWebMCPTools}. */
+export type UsePageWebMCPToolsOptions = Omit<SubscribeWebMCPToolsOptions, 'signal'>;
+/**
+ * Returns the WebMCP tools on the page as client tools for `useChat`.
+ *
+ * The list starts empty and updates when the page registers or removes a
+ * tool. The hook reads the latest `filter` and `onError` on each update.
+ * Unsupported browsers and server rendering return an empty array.
+ *
+ * @param options - A filter that skips tools, and an error callback.
+ *
+ * @example
+ * ```tsx
+ * const pageTools = usePageWebMCPTools({
+ *   filter: (tool) => tool.origin === location.origin,
+ * })
+ * const chat = useChat({ connection, tools: pageTools })
+ * ```
+ */
+export declare function usePageWebMCPTools(options?: UsePageWebMCPToolsOptions): Array<AnyClientTool>;
 export {};

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

@@ -1,5 +1,5 @@
-import { registerWebMCPTools } from "@tanstack/ai-client";
-import { useEffect } from "react";
+import { registerWebMCPTools, subscribeWebMCPTools } from "@tanstack/ai-client";
+import { useEffect, useRef, useState } from "react";
 //#region src/use-web-mcp-tools.ts
 /**
 * Registers client tools with WebMCP for the lifetime of a React component.
@@ -12,12 +12,12 @@ import { useEffect } from "react";
 *
 * @example
 * ```tsx
-* useWebMCPTools([searchProducts], {
+* useRegisterWebMCPTools([searchProducts], {
 *   toolOptions: { searchProducts: { title: 'Search products' } },
 * })
 * ```
 */
-function useWebMCPTools(tools, ...[options]) {
+function useRegisterWebMCPTools(tools, ...[options]) {
 	useEffect(() => {
 		const controller = new AbortController();
 		const { onError, ...registrationOptions } = options ?? {};
@@ -30,7 +30,44 @@ function useWebMCPTools(tools, ...[options]) {
 		return () => controller.abort();
 	}, [tools, options]);
 }
+/**
+* @deprecated Use `useRegisterWebMCPTools`. Removed in 1.0.0.
+* @alias
+*/
+var useWebMCPTools = useRegisterWebMCPTools;
+/**
+* Returns the WebMCP tools on the page as client tools for `useChat`.
+*
+* The list starts empty and updates when the page registers or removes a
+* tool. The hook reads the latest `filter` and `onError` on each update.
+* Unsupported browsers and server rendering return an empty array.
+*
+* @param options - A filter that skips tools, and an error callback.
+*
+* @example
+* ```tsx
+* const pageTools = usePageWebMCPTools({
+*   filter: (tool) => tool.origin === location.origin,
+* })
+* const chat = useChat({ connection, tools: pageTools })
+* ```
+*/
+function usePageWebMCPTools(options) {
+	const [tools, setTools] = useState([]);
+	const optionsRef = useRef(options);
+	optionsRef.current = options;
+	useEffect(() => {
+		const controller = new AbortController();
+		subscribeWebMCPTools(setTools, {
+			signal: controller.signal,
+			filter: (tool) => optionsRef.current?.filter?.(tool) ?? true,
+			onError: (error) => optionsRef.current?.onError?.(error)
+		});
+		return () => controller.abort();
+	}, []);
+	return tools;
+}
 //#endregion
-export { useWebMCPTools };
+export { usePageWebMCPTools, useRegisterWebMCPTools, useWebMCPTools };
 
 //# sourceMappingURL=use-web-mcp-tools.js.map

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

@@ -1 +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"}
+{"version":3,"file":"use-web-mcp-tools.js","names":[],"sources":["../../src/use-web-mcp-tools.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { registerWebMCPTools, subscribeWebMCPTools } from '@tanstack/ai-client'\nimport type {\n  AnyClientTool,\n  InferredClientContext,\n  RegisterWebMCPToolsOptions,\n  SubscribeWebMCPToolsOptions,\n} from '@tanstack/ai-client'\n\n/** Options for the React {@link useRegisterWebMCPTools} lifecycle hook. */\nexport type UseRegisterWebMCPToolsOptions<\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\n/** @deprecated Use `UseRegisterWebMCPToolsOptions`. Removed in 1.0.0. */\nexport type UseWebMCPToolsOptions<\n  TTools extends ReadonlyArray<AnyClientTool>,\n  TContext = InferredClientContext<TTools>,\n> = UseRegisterWebMCPToolsOptions<TTools, TContext>\n\ntype UseRegisterWebMCPToolsArguments<\n  TTools extends ReadonlyArray<AnyClientTool>,\n  TContext,\n> =\n  RegisterWebMCPToolsOptions<TTools, TContext> extends { context: unknown }\n    ? [options: UseRegisterWebMCPToolsOptions<TTools, TContext>]\n    : [options?: UseRegisterWebMCPToolsOptions<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 * useRegisterWebMCPTools([searchProducts], {\n *   toolOptions: { searchProducts: { title: 'Search products' } },\n * })\n * ```\n */\nexport function useRegisterWebMCPTools<\n  const TTools extends ReadonlyArray<AnyClientTool>,\n  TContext = InferredClientContext<TTools>,\n>(\n  tools: TTools,\n  ...[options]: UseRegisterWebMCPToolsArguments<TTools, TContext>\n) {\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\n/**\n * @deprecated Use `useRegisterWebMCPTools`. Removed in 1.0.0.\n * @alias\n */\nexport const useWebMCPTools = useRegisterWebMCPTools\n\n/** Options for {@link usePageWebMCPTools}. */\nexport type UsePageWebMCPToolsOptions = Omit<\n  SubscribeWebMCPToolsOptions,\n  'signal'\n>\n\n/**\n * Returns the WebMCP tools on the page as client tools for `useChat`.\n *\n * The list starts empty and updates when the page registers or removes a\n * tool. The hook reads the latest `filter` and `onError` on each update.\n * Unsupported browsers and server rendering return an empty array.\n *\n * @param options - A filter that skips tools, and an error callback.\n *\n * @example\n * ```tsx\n * const pageTools = usePageWebMCPTools({\n *   filter: (tool) => tool.origin === location.origin,\n * })\n * const chat = useChat({ connection, tools: pageTools })\n * ```\n */\nexport function usePageWebMCPTools(\n  options?: UsePageWebMCPToolsOptions,\n): Array<AnyClientTool> {\n  const [tools, setTools] = useState<Array<AnyClientTool>>([])\n  const optionsRef = useRef(options)\n  optionsRef.current = options\n\n  useEffect(() => {\n    const controller = new AbortController()\n    subscribeWebMCPTools(setTools, {\n      signal: controller.signal,\n      filter: (tool) => optionsRef.current?.filter?.(tool) ?? true,\n      onError: (error) => optionsRef.current?.onError?.(error),\n    })\n    return () => controller.abort()\n  }, [])\n\n  return tools\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgDA,SAAgB,uBAId,OACA,GAAG,CAAC,UACJ;CACA,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;;;;;AAMA,IAAa,iBAAiB;;;;;;;;;;;;;;;;;;AAyB9B,SAAgB,mBACd,SACsB;CACtB,MAAM,CAAC,OAAO,YAAY,SAA+B,CAAC,CAAC;CAC3D,MAAM,aAAa,OAAO,OAAO;CACjC,WAAW,UAAU;CAErB,gBAAgB;EACd,MAAM,aAAa,IAAI,gBAAgB;EACvC,qBAAqB,UAAU;GAC7B,QAAQ,WAAW;GACnB,SAAS,SAAS,WAAW,SAAS,SAAS,IAAI,KAAK;GACxD,UAAU,UAAU,WAAW,SAAS,UAAU,KAAK;EACzD,CAAC;EACD,aAAa,WAAW,MAAM;CAChC,GAAG,CAAC,CAAC;CAEL,OAAO;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/ai-react",
-  "version": "0.28.0",
+  "version": "0.29.1",
   "description": "React hooks for TanStack AI streaming chat, realtime voice, structured outputs, and media generation.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -58,14 +58,14 @@
   ],
   "dependencies": {
     "@tanstack/markdown": "^0.0.13",
-    "@tanstack/ai-client": "^0.34.0"
+    "@tanstack/ai-client": "^0.35.1"
   },
   "peerDependencies": {
     "@mcp-ui/client": "^7",
     "@types/react": ">=18.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
-    "@tanstack/ai": "^0.59.0"
+    "@tanstack/ai": "^0.61.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.59.0"
+    "@tanstack/ai": "0.61.0"
   },
   "scripts": {
     "clean": "premove ./build ./dist",

package/src/index.ts

@@ -4,8 +4,16 @@ 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 {
+  usePageWebMCPTools,
+  useRegisterWebMCPTools,
+  useWebMCPTools,
+} from './use-web-mcp-tools'
+export type {
+  UsePageWebMCPToolsOptions,
+  UseRegisterWebMCPToolsOptions,
+  UseWebMCPToolsOptions,
+} from './use-web-mcp-tools'
 export type {
   DeepPartial,
   UseChatOptions,
@@ -105,6 +113,11 @@ export {
   PartialJSONParser,
   defaultJSONParser,
   registerWebMCPTools,
+  getWebMCPTools,
+  subscribeWebMCPTools,
+  type GetWebMCPToolsOptions,
+  type SubscribeWebMCPToolsOptions,
+  type WebMCPPageTool,
   clientTools,
   fetchServerSentEvents,
   localStoragePersistence,

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

@@ -1,13 +1,14 @@
-import { useEffect } from 'react'
-import { registerWebMCPTools } from '@tanstack/ai-client'
+import { useEffect, useRef, useState } from 'react'
+import { registerWebMCPTools, subscribeWebMCPTools } from '@tanstack/ai-client'
 import type {
   AnyClientTool,
   InferredClientContext,
   RegisterWebMCPToolsOptions,
+  SubscribeWebMCPToolsOptions,
 } from '@tanstack/ai-client'
 
-/** Options for the React {@link useWebMCPTools} lifecycle hook. */
-export type UseWebMCPToolsOptions<
+/** Options for the React {@link useRegisterWebMCPTools} lifecycle hook. */
+export type UseRegisterWebMCPToolsOptions<
   TTools extends ReadonlyArray<AnyClientTool>,
   TContext = InferredClientContext<TTools>,
 > = Omit<RegisterWebMCPToolsOptions<TTools, TContext>, 'signal'> & {
@@ -15,13 +16,19 @@ export type UseWebMCPToolsOptions<
   onError?: (error: unknown) => void
 }
 
-type UseWebMCPToolsArguments<
+/** @deprecated Use `UseRegisterWebMCPToolsOptions`. Removed in 1.0.0. */
+export type UseWebMCPToolsOptions<
+  TTools extends ReadonlyArray<AnyClientTool>,
+  TContext = InferredClientContext<TTools>,
+> = UseRegisterWebMCPToolsOptions<TTools, TContext>
+
+type UseRegisterWebMCPToolsArguments<
   TTools extends ReadonlyArray<AnyClientTool>,
   TContext,
 > =
   RegisterWebMCPToolsOptions<TTools, TContext> extends { context: unknown }
-    ? [options: UseWebMCPToolsOptions<TTools, TContext>]
-    : [options?: UseWebMCPToolsOptions<TTools, TContext>]
+    ? [options: UseRegisterWebMCPToolsOptions<TTools, TContext>]
+    : [options?: UseRegisterWebMCPToolsOptions<TTools, TContext>]
 
 /**
  * Registers client tools with WebMCP for the lifetime of a React component.
@@ -34,15 +41,18 @@ type UseWebMCPToolsArguments<
  *
  * @example
  * ```tsx
- * useWebMCPTools([searchProducts], {
+ * useRegisterWebMCPTools([searchProducts], {
  *   toolOptions: { searchProducts: { title: 'Search products' } },
  * })
  * ```
  */
-export function useWebMCPTools<
+export function useRegisterWebMCPTools<
   const TTools extends ReadonlyArray<AnyClientTool>,
   TContext = InferredClientContext<TTools>,
->(tools: TTools, ...[options]: UseWebMCPToolsArguments<TTools, TContext>) {
+>(
+  tools: TTools,
+  ...[options]: UseRegisterWebMCPToolsArguments<TTools, TContext>
+) {
   useEffect(() => {
     const controller = new AbortController()
     const { onError, ...registrationOptions } = options ?? {}
@@ -57,3 +67,52 @@ export function useWebMCPTools<
     return () => controller.abort()
   }, [tools, options])
 }
+
+/**
+ * @deprecated Use `useRegisterWebMCPTools`. Removed in 1.0.0.
+ * @alias
+ */
+export const useWebMCPTools = useRegisterWebMCPTools
+
+/** Options for {@link usePageWebMCPTools}. */
+export type UsePageWebMCPToolsOptions = Omit<
+  SubscribeWebMCPToolsOptions,
+  'signal'
+>
+
+/**
+ * Returns the WebMCP tools on the page as client tools for `useChat`.
+ *
+ * The list starts empty and updates when the page registers or removes a
+ * tool. The hook reads the latest `filter` and `onError` on each update.
+ * Unsupported browsers and server rendering return an empty array.
+ *
+ * @param options - A filter that skips tools, and an error callback.
+ *
+ * @example
+ * ```tsx
+ * const pageTools = usePageWebMCPTools({
+ *   filter: (tool) => tool.origin === location.origin,
+ * })
+ * const chat = useChat({ connection, tools: pageTools })
+ * ```
+ */
+export function usePageWebMCPTools(
+  options?: UsePageWebMCPToolsOptions,
+): Array<AnyClientTool> {
+  const [tools, setTools] = useState<Array<AnyClientTool>>([])
+  const optionsRef = useRef(options)
+  optionsRef.current = options
+
+  useEffect(() => {
+    const controller = new AbortController()
+    subscribeWebMCPTools(setTools, {
+      signal: controller.signal,
+      filter: (tool) => optionsRef.current?.filter?.(tool) ?? true,
+      onError: (error) => optionsRef.current?.onError?.(error),
+    })
+    return () => controller.abort()
+  }, [])
+
+  return tools
+}