@tanstack/ai-react 0.22.4 → 0.24.0

package/dist/esm/chat-ui/tool-approval.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+export interface ToolApprovalProps {
+    /** Tool call ID */
+    toolCallId: string;
+    /** Tool name */
+    toolName: string;
+    /** Parsed tool arguments/input */
+    input: any;
+    /** Approval metadata */
+    approval: {
+        id: string;
+        needsApproval: boolean;
+        approved?: boolean;
+    };
+    /** CSS class name */
+    className?: string;
+    /** Custom render prop */
+    children?: (props: ToolApprovalRenderProps) => ReactNode;
+}
+export interface ToolApprovalRenderProps {
+    /** Tool name */
+    toolName: string;
+    /** Parsed input */
+    input: any;
+    /** Approve the tool call */
+    onApprove: () => void;
+    /** Deny the tool call */
+    onDeny: () => void;
+    /** Whether user has responded */
+    hasResponded: boolean;
+    /** User's decision (if responded) */
+    approved?: boolean;
+}
+/**
+ * @deprecated Use `createChatUI()` interrupt components with `chat.interrupts`.
+ * Deprecated in 0.9.0. Removed in 1.0.0.
+ *
+ * Tool approval component - renders approve/deny buttons for tools that need approval
+ *
+ * @example
+ * ```tsx
+ * {part.approval && (
+ *   <ToolApproval
+ *     toolCallId={part.id}
+ *     toolName={part.name}
+ *     input={JSON.parse(part.arguments)}
+ *     approval={part.approval}
+ *   />
+ * )}
+ * ```
+ */
+export declare function ToolApproval({ toolCallId: _, toolName, input, approval, className, children, }: ToolApprovalProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/chat-ui/tool-approval.js

@@ -0,0 +1,83 @@
+import { useChatContext } from "./chat.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/chat-ui/tool-approval.tsx
+/**
+* @deprecated Use `createChatUI()` interrupt components with `chat.interrupts`.
+* Deprecated in 0.9.0. Removed in 1.0.0.
+*
+* Tool approval component - renders approve/deny buttons for tools that need approval
+*
+* @example
+* ```tsx
+* {part.approval && (
+*   <ToolApproval
+*     toolCallId={part.id}
+*     toolName={part.name}
+*     input={JSON.parse(part.arguments)}
+*     approval={part.approval}
+*   />
+* )}
+* ```
+*/
+function ToolApproval({ toolCallId: _, toolName, input, approval, className, children }) {
+	const { addToolApprovalResponse } = useChatContext();
+	const handleApprove = () => {
+		addToolApprovalResponse({
+			id: approval.id,
+			approved: true
+		});
+	};
+	const handleDeny = () => {
+		addToolApprovalResponse({
+			id: approval.id,
+			approved: false
+		});
+	};
+	const hasResponded = approval.approved !== void 0;
+	const renderProps = {
+		toolName,
+		input,
+		onApprove: handleApprove,
+		onDeny: handleDeny,
+		hasResponded,
+		approved: approval.approved
+	};
+	if (children) return /* @__PURE__ */ jsx(Fragment, { children: children(renderProps) });
+	if (hasResponded) return /* @__PURE__ */ jsx("div", {
+		className,
+		"data-tool-approval": true,
+		"data-approval-status": approval.approved ? "approved" : "denied",
+		children: approval.approved ? "✓ Approved" : "✗ Denied"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		"data-tool-approval": true,
+		"data-approval-status": "pending",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				"data-approval-header": true,
+				children: [/* @__PURE__ */ jsx("strong", { children: toolName }), " requires approval"]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"data-approval-input": true,
+				children: /* @__PURE__ */ jsx("pre", { children: JSON.stringify(input, null, 2) })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-approval-actions": true,
+				children: [/* @__PURE__ */ jsx("button", {
+					onClick: handleApprove,
+					"data-approval-approve": true,
+					children: "Approve"
+				}), /* @__PURE__ */ jsx("button", {
+					onClick: handleDeny,
+					"data-approval-deny": true,
+					children: "Deny"
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { ToolApproval };
+
+//# sourceMappingURL=tool-approval.js.map

package/dist/esm/chat-ui/tool-approval.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-approval.js","names":[],"sources":["../../../src/chat-ui/tool-approval.tsx"],"sourcesContent":["import { useChatContext } from './chat'\nimport type { ReactNode } from 'react'\n\nexport interface ToolApprovalProps {\n  /** Tool call ID */\n  toolCallId: string\n  /** Tool name */\n  toolName: string\n  /** Parsed tool arguments/input */\n  input: any\n  /** Approval metadata */\n  approval: {\n    id: string\n    needsApproval: boolean\n    approved?: boolean\n  }\n  /** CSS class name */\n  className?: string\n  /** Custom render prop */\n  children?: (props: ToolApprovalRenderProps) => ReactNode\n}\n\nexport interface ToolApprovalRenderProps {\n  /** Tool name */\n  toolName: string\n  /** Parsed input */\n  input: any\n  /** Approve the tool call */\n  onApprove: () => void\n  /** Deny the tool call */\n  onDeny: () => void\n  /** Whether user has responded */\n  hasResponded: boolean\n  /** User's decision (if responded) */\n  approved?: boolean\n}\n\n/**\n * @deprecated Use `createChatUI()` interrupt components with `chat.interrupts`.\n * Deprecated in 0.9.0. Removed in 1.0.0.\n *\n * Tool approval component - renders approve/deny buttons for tools that need approval\n *\n * @example\n * ```tsx\n * {part.approval && (\n *   <ToolApproval\n *     toolCallId={part.id}\n *     toolName={part.name}\n *     input={JSON.parse(part.arguments)}\n *     approval={part.approval}\n *   />\n * )}\n * ```\n */\nexport function ToolApproval({\n  toolCallId: _,\n  toolName,\n  input,\n  approval,\n  className,\n  children,\n}: ToolApprovalProps) {\n  const { addToolApprovalResponse } = useChatContext()\n\n  const handleApprove = () => {\n    void addToolApprovalResponse({\n      id: approval.id,\n      approved: true,\n    })\n  }\n\n  const handleDeny = () => {\n    void addToolApprovalResponse({\n      id: approval.id,\n      approved: false,\n    })\n  }\n\n  const hasResponded = approval.approved !== undefined\n\n  const renderProps: ToolApprovalRenderProps = {\n    toolName,\n    input,\n    onApprove: handleApprove,\n    onDeny: handleDeny,\n    hasResponded,\n    approved: approval.approved,\n  }\n\n  // Render prop pattern\n  if (children) {\n    return <>{children(renderProps)}</>\n  }\n\n  // Already responded - show decision\n  if (hasResponded) {\n    return (\n      <div\n        className={className}\n        data-tool-approval\n        data-approval-status={approval.approved ? 'approved' : 'denied'}\n      >\n        {approval.approved ? '✓ Approved' : '✗ Denied'}\n      </div>\n    )\n  }\n\n  // Default approval UI\n  return (\n    <div\n      className={className}\n      data-tool-approval\n      data-approval-status=\"pending\"\n    >\n      <div data-approval-header>\n        <strong>{toolName}</strong> requires approval\n      </div>\n      <div data-approval-input>\n        <pre>{JSON.stringify(input, null, 2)}</pre>\n      </div>\n      <div data-approval-actions>\n        <button onClick={handleApprove} data-approval-approve>\n          Approve\n        </button>\n        <button onClick={handleDeny} data-approval-deny>\n          Deny\n        </button>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuDA,SAAgB,aAAa,EAC3B,YAAY,GACZ,UACA,OACA,UACA,WACA,YACoB;CACpB,MAAM,EAAE,4BAA4B,eAAe;CAEnD,MAAM,sBAAsB;EAC1B,wBAA6B;GAC3B,IAAI,SAAS;GACb,UAAU;EACZ,CAAC;CACH;CAEA,MAAM,mBAAmB;EACvB,wBAA6B;GAC3B,IAAI,SAAS;GACb,UAAU;EACZ,CAAC;CACH;CAEA,MAAM,eAAe,SAAS,aAAa,KAAA;CAE3C,MAAM,cAAuC;EAC3C;EACA;EACA,WAAW;EACX,QAAQ;EACR;EACA,UAAU,SAAS;CACrB;CAGA,IAAI,UACF,OAAO,oBAAA,UAAA,EAAA,UAAG,SAAS,WAAW,EAAI,CAAA;CAIpC,IAAI,cACF,OACE,oBAAC,OAAD;EACa;EACX,sBAAA;EACA,wBAAsB,SAAS,WAAW,aAAa;EAEtD,UAAA,SAAS,WAAW,eAAe;CACjC,CAAA;CAKT,OACE,qBAAC,OAAD;EACa;EACX,sBAAA;EACA,wBAAqB;EAHvB,UAAA;GAKE,qBAAC,OAAD;IAAK,wBAAA;IAAL,UAAA,CACE,oBAAC,UAAD,EAAA,UAAS,SAAiB,CAAA,GAAC,oBACxB;;GACL,oBAAC,OAAD;IAAK,uBAAA;IACH,UAAA,oBAAC,OAAD,EAAA,UAAM,KAAK,UAAU,OAAO,MAAM,CAAC,EAAO,CAAA;GACvC,CAAA;GACL,qBAAC,OAAD;IAAK,yBAAA;IAAL,UAAA,CACE,oBAAC,UAAD;KAAQ,SAAS;KAAe,yBAAA;KAAsB,UAAA;IAE9C,CAAA,GACR,oBAAC,UAAD;KAAQ,SAAS;KAAY,sBAAA;KAAmB,UAAA;IAExC,CAAA,CACL;;EACF;;AAET"}

package/dist/esm/chat-ui/tool-result-content.d.ts

@@ -0,0 +1,18 @@
+import { UIMessage } from '../types.js';
+type ToolResultPart = Extract<UIMessage['parts'][number], {
+    type: 'tool-result';
+}>;
+/** `string | Array<ContentPart>` — a tool result's raw content. */
+type ToolResultContent = ToolResultPart['content'];
+/**
+ * Reduce a tool-result part's `content` to a plain string for rendering.
+ *
+ * Tool results carry `string | Array<ContentPart>` (multimodal results are
+ * normalized to an array of content parts upstream). The `ChatMessage`
+ * renderers operate on plain strings, so array content is flattened to the
+ * concatenation of its text parts. Non-text parts (image, audio, video,
+ * document) have no string form here and are skipped — matching the
+ * text-extraction behavior used elsewhere for `string | Array<ContentPart>`.
+ */
+export declare function toolResultContentToString(content: ToolResultContent): string;
+export {};

package/dist/esm/chat-ui/tool-result-content.js

@@ -0,0 +1,19 @@
+//#region src/chat-ui/tool-result-content.ts
+/**
+* Reduce a tool-result part's `content` to a plain string for rendering.
+*
+* Tool results carry `string | Array<ContentPart>` (multimodal results are
+* normalized to an array of content parts upstream). The `ChatMessage`
+* renderers operate on plain strings, so array content is flattened to the
+* concatenation of its text parts. Non-text parts (image, audio, video,
+* document) have no string form here and are skipped — matching the
+* text-extraction behavior used elsewhere for `string | Array<ContentPart>`.
+*/
+function toolResultContentToString(content) {
+	if (typeof content === "string") return content;
+	return content.filter((part) => part.type === "text").map((part) => part.content).join("");
+}
+//#endregion
+export { toolResultContentToString };
+
+//# sourceMappingURL=tool-result-content.js.map

package/dist/esm/chat-ui/tool-result-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-result-content.js","names":[],"sources":["../../../src/chat-ui/tool-result-content.ts"],"sourcesContent":["import type { UIMessage } from '../types'\n\ntype ToolResultPart = Extract<\n  UIMessage['parts'][number],\n  { type: 'tool-result' }\n>\n\n/** `string | Array<ContentPart>` — a tool result's raw content. */\ntype ToolResultContent = ToolResultPart['content']\n\ntype ContentPartItem = Exclude<ToolResultContent, string>[number]\n\n/**\n * Reduce a tool-result part's `content` to a plain string for rendering.\n *\n * Tool results carry `string | Array<ContentPart>` (multimodal results are\n * normalized to an array of content parts upstream). The `ChatMessage`\n * renderers operate on plain strings, so array content is flattened to the\n * concatenation of its text parts. Non-text parts (image, audio, video,\n * document) have no string form here and are skipped — matching the\n * text-extraction behavior used elsewhere for `string | Array<ContentPart>`.\n */\nexport function toolResultContentToString(content: ToolResultContent): string {\n  if (typeof content === 'string') return content\n  return content\n    .filter(\n      (part): part is Extract<ContentPartItem, { type: 'text' }> =>\n        part.type === 'text',\n    )\n    .map((part) => part.content)\n    .join('')\n}\n"],"mappings":";;;;;;;;;;;AAsBA,SAAgB,0BAA0B,SAAoC;CAC5E,IAAI,OAAO,YAAY,UAAU,OAAO;CACxC,OAAO,QACJ,QACE,SACC,KAAK,SAAS,MAClB,CAAC,CACA,KAAK,SAAS,KAAK,OAAO,CAAC,CAC3B,KAAK,EAAE;AACZ"}

package/dist/esm/create-chat-hook.d.ts

@@ -0,0 +1,35 @@
+import { AnyClientTool, InterruptDefinition, SchemaInput } from '@tanstack/ai/client';
+import { InferredClientContext } from '@tanstack/ai-client';
+import { UseChatOptions } from './types.js';
+type ChatHookOverrides<TTools extends ReadonlyArray<AnyClientTool>, TSchema extends SchemaInput | undefined, TContext, TInterrupts extends ReadonlyArray<InterruptDefinition<any, any, any, any>>> = {
+    threadId?: string;
+    live?: boolean;
+    forwardedProps?: Record<string, any>;
+    body?: Record<string, any>;
+    initialMessages?: UseChatOptions<TTools, TSchema, TContext, TInterrupts>['initialMessages'];
+};
+/**
+ * Bind chat options once at module scope. The returned `useChat` hook
+ * creates a chat instance from those options.
+ *
+ * Pass per-call overrides for instance keys such as `threadId`,
+ * `initialMessages`, `live`, and `forwardedProps`. Do not change `tools`,
+ * `interrupts`, or `outputSchema` here. Those stay on the factory options.
+ *
+ * Rename the hook at the call site if you already import `useChat` from
+ * `@tanstack/ai-react`: `const { useChat: useAppChat } = createChatHook(chatOptions)`.
+ *
+ * @example
+ * ```tsx
+ * const { useChat } = createChatHook(chatOptions)
+ *
+ * function Support() {
+ *   const chat = useChat({ threadId: 'support-1' })
+ *   return <UI.Chat chat={chat} />
+ * }
+ * ```
+ */
+export declare function createChatHook<const TTools extends ReadonlyArray<AnyClientTool> = any, TSchema extends SchemaInput | undefined = undefined, TContext = InferredClientContext<TTools>, const TInterrupts extends ReadonlyArray<InterruptDefinition<any, any, any, any>> = readonly []>(options: UseChatOptions<TTools, TSchema, TContext, TInterrupts>): {
+    useChat: (overrides?: ChatHookOverrides<TTools, TSchema, TContext, TInterrupts>) => import('./types.js').UseChatReturn<TTools, TSchema, TInterrupts>;
+};
+export {};

package/dist/esm/create-chat-hook.js

@@ -0,0 +1,37 @@
+import { useChat } from "./use-chat.js";
+//#region src/create-chat-hook.ts
+/**
+* Bind chat options once at module scope. The returned `useChat` hook
+* creates a chat instance from those options.
+*
+* Pass per-call overrides for instance keys such as `threadId`,
+* `initialMessages`, `live`, and `forwardedProps`. Do not change `tools`,
+* `interrupts`, or `outputSchema` here. Those stay on the factory options.
+*
+* Rename the hook at the call site if you already import `useChat` from
+* `@tanstack/ai-react`: `const { useChat: useAppChat } = createChatHook(chatOptions)`.
+*
+* @example
+* ```tsx
+* const { useChat } = createChatHook(chatOptions)
+*
+* function Support() {
+*   const chat = useChat({ threadId: 'support-1' })
+*   return <UI.Chat chat={chat} />
+* }
+* ```
+*/
+function createChatHook(options) {
+	function useChat$1(overrides) {
+		if (!overrides) return useChat(options);
+		return useChat({
+			...options,
+			...overrides
+		});
+	}
+	return { useChat: useChat$1 };
+}
+//#endregion
+export { createChatHook };
+
+//# sourceMappingURL=create-chat-hook.js.map

package/dist/esm/create-chat-hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-chat-hook.js","names":[],"sources":["../../src/create-chat-hook.ts"],"sourcesContent":["import { useChat as useUnboundChat } from './use-chat'\nimport type {\n  AnyClientTool,\n  InterruptDefinition,\n  SchemaInput,\n} from '@tanstack/ai/client'\nimport type { InferredClientContext } from '@tanstack/ai-client'\nimport type { UseChatOptions } from './types'\n\ntype ChatHookOverrides<\n  TTools extends ReadonlyArray<AnyClientTool>,\n  TSchema extends SchemaInput | undefined,\n  TContext,\n  TInterrupts extends ReadonlyArray<InterruptDefinition<any, any, any, any>>,\n> = {\n  threadId?: string\n  live?: boolean\n  forwardedProps?: Record<string, any>\n  body?: Record<string, any>\n  initialMessages?: UseChatOptions<\n    TTools,\n    TSchema,\n    TContext,\n    TInterrupts\n  >['initialMessages']\n}\n\n/**\n * Bind chat options once at module scope. The returned `useChat` hook\n * creates a chat instance from those options.\n *\n * Pass per-call overrides for instance keys such as `threadId`,\n * `initialMessages`, `live`, and `forwardedProps`. Do not change `tools`,\n * `interrupts`, or `outputSchema` here. Those stay on the factory options.\n *\n * Rename the hook at the call site if you already import `useChat` from\n * `@tanstack/ai-react`: `const { useChat: useAppChat } = createChatHook(chatOptions)`.\n *\n * @example\n * ```tsx\n * const { useChat } = createChatHook(chatOptions)\n *\n * function Support() {\n *   const chat = useChat({ threadId: 'support-1' })\n *   return <UI.Chat chat={chat} />\n * }\n * ```\n */\nexport function createChatHook<\n  const TTools extends ReadonlyArray<AnyClientTool> = any,\n  TSchema extends SchemaInput | undefined = undefined,\n  TContext = InferredClientContext<TTools>,\n  const TInterrupts extends ReadonlyArray<\n    InterruptDefinition<any, any, any, any>\n  > = readonly [],\n>(options: UseChatOptions<TTools, TSchema, TContext, TInterrupts>) {\n  function useChat(\n    overrides?: ChatHookOverrides<TTools, TSchema, TContext, TInterrupts>,\n  ) {\n    if (!overrides) {\n      return useUnboundChat(options)\n    }\n    return useUnboundChat({ ...options, ...overrides })\n  }\n\n  return { useChat }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgDA,SAAgB,eAOd,SAAiE;CACjE,SAAS,UACP,WACA;EACA,IAAI,CAAC,WACH,OAAO,QAAe,OAAO;EAE/B,OAAO,QAAe;GAAE,GAAG;GAAS,GAAG;EAAU,CAAC;CACpD;CAEA,OAAO,EAAE,SAAA,UAAQ;AACnB"}

package/dist/esm/index.d.ts

@@ -1,8 +1,11 @@
 export { useChat } from './use-chat.js';
+export { createChatHook } from './create-chat-hook.js';
 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

@@ -1,7 +1,9 @@
 import { useChat } from "./use-chat.js";
+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";
@@ -11,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, 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/ui.d.ts

@@ -0,0 +1,10 @@
+export { createChatUI, type ChatUIComponents, type ChatUIFactoryConfig, type ChatUIHost, type ChatUIQueueItem, type InputProps, type InterruptProps, type LayoutProps, type MessageProps, type PartProps, type QueueProps, type ToolProps, } from './chat-ui/create-ui.js';
+export { createChatHook } from './chat-ui/create-chat-hook.js';
+export { createChatHookContexts, type ChatUIContexts, } from './chat-ui/create-ui-contexts.js';
+export { Chat, useChatContext, type ChatProps } from './chat-ui/chat.js';
+export { ChatMessages, type ChatMessagesProps } from './chat-ui/chat-messages.js';
+export { ChatMessage, type ChatMessageProps, type ToolCallRenderProps, } from './chat-ui/chat-message.js';
+export { ChatInput, type ChatInputProps, type ChatInputRenderProps, } from './chat-ui/chat-input.js';
+export { ToolApproval, type ToolApprovalProps, type ToolApprovalRenderProps, } from './chat-ui/tool-approval.js';
+export { TextPart, type TextPartProps } from './chat-ui/text-part.js';
+export { ThinkingPart, type ThinkingPartProps } from './chat-ui/thinking-part.js';

package/dist/esm/ui.js

@@ -0,0 +1,11 @@
+import { createChatHookContexts } from "./chat-ui/create-ui-contexts.js";
+import { createChatUI } from "./chat-ui/create-ui.js";
+import { createChatHook } from "./chat-ui/create-chat-hook.js";
+import { Chat, useChatContext } from "./chat-ui/chat.js";
+import { ThinkingPart } from "./chat-ui/thinking-part.js";
+import { ChatMessage } from "./chat-ui/chat-message.js";
+import { ChatMessages } from "./chat-ui/chat-messages.js";
+import { ChatInput } from "./chat-ui/chat-input.js";
+import { ToolApproval } from "./chat-ui/tool-approval.js";
+import { TextPart } from "./chat-ui/text-part.js";
+export { Chat, ChatInput, ChatMessage, ChatMessages, TextPart, ThinkingPart, ToolApproval, createChatHook, createChatHookContexts, createChatUI, useChatContext };

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.22.4",
+  "version": "0.24.0",
   "description": "React hooks for TanStack AI streaming chat, realtime voice, structured outputs, and media generation.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -28,6 +28,10 @@
     "./mcp-apps": {
       "types": "./dist/esm/mcp-apps.d.ts",
       "import": "./dist/esm/mcp-apps.js"
+    },
+    "./ui": {
+      "types": "./dist/esm/ui.d.ts",
+      "import": "./dist/esm/ui.js"
     }
   },
   "files": [
@@ -49,17 +53,26 @@
     "media-generation"
   ],
   "dependencies": {
-    "@tanstack/ai-client": "^0.29.2"
+    "react-markdown": "^10.1.0",
+    "rehype-highlight": "^7.0.2",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^4.0.1",
+    "@tanstack/ai-client": "^0.31.0"
   },
   "peerDependencies": {
     "@mcp-ui/client": "^7",
     "@types/react": ">=18.0.0",
     "react": ">=18.0.0",
-    "@tanstack/ai": "^0.52.0"
+    "react-dom": ">=18.0.0",
+    "@tanstack/ai": "^0.53.0"
   },
   "peerDependenciesMeta": {
     "@mcp-ui/client": {
       "optional": true
+    },
+    "react-dom": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -70,8 +83,9 @@
     "@vitest/coverage-v8": "4.1.10",
     "jsdom": "^27.4.0",
     "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "vite": "^8.2.1",
-    "@tanstack/ai": "0.52.0"
+    "@tanstack/ai": "0.53.0"
   },
   "scripts": {
     "clean": "premove ./build ./dist",

package/src/chat-ui/chat-input.tsx

@@ -0,0 +1,177 @@
+import { useRef, useState } from 'react'
+import { useChatContext } from './chat'
+import type { ReactNode, RefObject } from 'react'
+
+export interface ChatInputRenderProps {
+  /** Current input value */
+  value: string
+  /** Set input value */
+  onChange: (value: string) => void
+  /** Submit the message */
+  onSubmit: () => void
+  /** Is the chat currently loading */
+  isLoading: boolean
+  /** Is input disabled */
+  disabled: boolean
+  /** Ref to the input element */
+  inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>
+}
+
+export interface ChatInputProps {
+  /** Render prop for full control */
+  children?: (props: ChatInputRenderProps) => ReactNode
+  /** CSS class name */
+  className?: string
+  /** Placeholder text */
+  placeholder?: string
+  /** Disable input */
+  disabled?: boolean
+  /** Submit on Enter (Shift+Enter for new line) */
+  submitOnEnter?: boolean
+}
+
+/**
+ * @deprecated Use `createChatUI()` and an application-owned input component.
+ * Deprecated in 0.9.0. Removed in 1.0.0.
+ *
+ * Chat input component - handles message input and submission
+ *
+ * Features:
+ * - Auto-growing textarea
+ * - Submit on Enter (Shift+Enter for new line)
+ * - Loading state management
+ * - Full render prop support for custom UIs
+ *
+ * @example
+ * ```tsx
+ * <Chat.Input placeholder="Type your message..." />
+ * ```
+ *
+ * @example Custom UI with render prop
+ * ```tsx
+ * <Chat.Input>
+ *   {({ value, onChange, onSubmit, isLoading }) => (
+ *     <div>
+ *       <textarea value={value} onChange={(e) => onChange(e.target.value)} />
+ *       <button onClick={onSubmit} disabled={isLoading}>Send</button>
+ *     </div>
+ *   )}
+ * </Chat.Input>
+ * ```
+ */
+export function ChatInput({
+  children,
+  className,
+  placeholder = 'Type a message...',
+  disabled: disabledProp,
+  submitOnEnter = true,
+}: ChatInputProps) {
+  const { sendMessage, isLoading } = useChatContext()
+  const [value, setValue] = useState('')
+  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)
+
+  const disabled = disabledProp || isLoading
+
+  const handleSubmit = () => {
+    if (!value.trim() || disabled) return
+    void sendMessage(value)
+    setValue('')
+  }
+
+  const renderProps: ChatInputRenderProps = {
+    value,
+    onChange: setValue,
+    onSubmit: handleSubmit,
+    isLoading,
+    disabled,
+    inputRef,
+  }
+
+  // Render prop pattern
+  if (children) {
+    return <>{children(renderProps)}</>
+  }
+
+  // Default implementation
+  return (
+    <div
+      className={className}
+      data-chat-input
+      style={{
+        display: 'flex',
+        gap: '0.75rem',
+        alignItems: 'center',
+        width: '100%',
+      }}
+    >
+      <input
+        ref={inputRef as React.RefObject<HTMLInputElement>}
+        type="text"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={(e) => {
+          if (submitOnEnter && e.key === 'Enter') {
+            e.preventDefault()
+            handleSubmit()
+          }
+        }}
+        placeholder={placeholder}
+        disabled={disabled}
+        data-chat-textarea
+        style={{
+          flex: 1,
+          padding: '0.75rem 1rem',
+          fontSize: '0.875rem',
+          border: '1px solid rgba(255, 255, 255, 0.1)',
+          borderRadius: '0.75rem',
+          backgroundColor: 'rgba(31, 41, 55, 0.5)',
+          color: 'white',
+          outline: 'none',
+          transition: 'all 0.2s',
+        }}
+        onFocus={(e) => {
+          e.target.style.borderColor = 'rgba(249, 115, 22, 0.4)'
+          e.target.style.boxShadow = '0 0 0 2px rgba(249, 115, 22, 0.2)'
+        }}
+        onBlur={(e) => {
+          e.target.style.borderColor = 'rgba(255, 255, 255, 0.1)'
+          e.target.style.boxShadow = 'none'
+        }}
+      />
+      <button
+        onClick={handleSubmit}
+        disabled={disabled || !value.trim()}
+        data-chat-submit
+        style={{
+          padding: '0.75rem 1.5rem',
+          fontSize: '0.875rem',
+          fontWeight: 500,
+          color: 'white',
+          backgroundColor:
+            disabled || !value.trim()
+              ? 'rgba(107, 114, 128, 0.5)'
+              : 'rgb(249, 115, 22)',
+          border: 'none',
+          borderRadius: '0.75rem',
+          cursor: disabled || !value.trim() ? 'not-allowed' : 'pointer',
+          transition: 'all 0.2s',
+          whiteSpace: 'nowrap',
+        }}
+        onMouseEnter={(e) => {
+          if (!disabled && value.trim()) {
+            ;(e.target as HTMLButtonElement).style.backgroundColor =
+              'rgb(234, 88, 12)'
+          }
+        }}
+        onMouseLeave={(e) => {
+          if (!disabled && value.trim()) {
+            ;(e.target as HTMLButtonElement).style.backgroundColor =
+              'rgb(249, 115, 22)'
+          }
+        }}
+      >
+        {isLoading ? 'Sending...' : 'Send'}
+      </button>
+    </div>
+  )
+}