@tanstack/ai-preact 0.14.4 → 0.16.0

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

@@ -0,0 +1,294 @@
+import { defaultChatUIContexts } from "./create-ui-contexts.js";
+import { createContext, memo, useContext } from "preact/compat";
+import { Fragment, jsx } from "preact/jsx-runtime";
+import { automaticPartsForMessage, collectInlineToolNames, resolveInterruptComponent, selectChatUI, selectMessageUI } from "@tanstack/ai-client/ui";
+//#region src/chat-ui/create-ui.tsx
+function createWarnOnce() {
+	const seen = /* @__PURE__ */ new Set();
+	return (key, message) => {
+		if (process.env.NODE_ENV === "production") return;
+		if (seen.has(key)) return;
+		seen.add(key);
+		console.warn(message);
+	};
+}
+function readMessages(chat) {
+	return chat.messages;
+}
+function readInterrupts(chat) {
+	return chat.interrupts ?? [];
+}
+function queueItemEqual(prev, next) {
+	return prev.item.id === next.item.id && prev.item.createdAt === next.item.createdAt && prev.item.content === next.item.content && prev.cancelQueued === next.cancelQueued;
+}
+function selectedPartPropsEqual(prev, next) {
+	if (prev.selected.key !== next.selected.key) return false;
+	if (prev.selected.part !== next.selected.part) return false;
+	if (prev.selected.key === "toolCall" && next.selected.key === "toolCall") return prev.selected.result === next.selected.result && prev.selected.interrupt === next.selected.interrupt;
+	if (prev.selected.key === "toolResult" && next.selected.key === "toolResult") return prev.selected.matched === next.selected.matched;
+	return true;
+}
+function isSelectedPart(value) {
+	return "key" in value && "part" in value;
+}
+function bindMap(map, bind) {
+	const out = {};
+	for (const [key, component] of Object.entries(map ?? {})) if (component) out[key] = bind(component);
+	return out;
+}
+/**
+* Bind chat options and UI widgets once at module scope. This matches Form
+* `createFormHook` and Table `createTableHook`: widgets register here, mix
+* onto Part / Interrupt / the UI kit, and automatic dispatch still walks the
+* message list.
+*
+* `chatOptions` is type-only at runtime. Pass optional `chatContext`,
+* `partContext`, and `interruptContext` from {@link createChatHookContexts}
+* when widgets live in other files or when nested chats need isolation.
+*/
+function createChatUI(options, config) {
+	const { context: contextOption, components, partsComponents: parts, toolsComponents: tools, interruptsComponents: interrupts } = config;
+	const { layout: Layout, message: MessageComponent, input: InputComponent, queue: QueueItemComponent } = components;
+	const { chatContext: chatContextOption, partContext: partContextOption, interruptContext: interruptContextOption } = contextOption ?? {};
+	const warn = createWarnOnce();
+	const ChatContext = chatContextOption ?? defaultChatUIContexts.chatContext;
+	const PartContext = partContextOption ?? defaultChatUIContexts.partContext;
+	const InterruptContext = interruptContextOption ?? defaultChatUIContexts.interruptContext;
+	const inlineToolNames = collectInlineToolNames(interrupts?.tools, Object.keys(tools ?? {}));
+	function useChatContext() {
+		const chat = useContext(ChatContext);
+		if (!chat) throw new Error("`useChatContext` must be used within `UI.Provider` or `UI.Chat`.");
+		return chat;
+	}
+	function usePartContext() {
+		const selected = useContext(PartContext);
+		if (!selected) throw new Error("`usePartContext` must be used within `UI.Part` or an automatic part.");
+		return selected;
+	}
+	function useInterruptContext() {
+		const interrupt = useContext(InterruptContext);
+		if (!interrupt) throw new Error("`useInterruptContext` must be used within `UI.Interrupt`.");
+		return interrupt;
+	}
+	function bindPart(Component) {
+		return function BoundPart() {
+			const selected = usePartContext();
+			return /* @__PURE__ */ jsx(Component, { part: selected.part });
+		};
+	}
+	function bindTool(Component) {
+		return function BoundTool() {
+			const selected = usePartContext();
+			if (selected.key !== "toolCall") return null;
+			return /* @__PURE__ */ jsx(Component, {
+				part: selected.part,
+				result: selected.result,
+				interrupt: selected.interrupt
+			});
+		};
+	}
+	function bindInterrupt(Component) {
+		return function BoundInterrupt() {
+			const interrupt = useInterruptContext();
+			return /* @__PURE__ */ jsx(Component, { interrupt });
+		};
+	}
+	const partMixins = bindMap(parts, bindPart);
+	const toolMixins = bindMap(tools, bindTool);
+	const interruptMixins = {
+		...bindMap(interrupts?.generic, bindInterrupt),
+		...bindMap(interrupts?.tools, bindInterrupt)
+	};
+	function mixPart(selected) {
+		return Object.assign({}, selected, partMixins, toolMixins, { Render: BoundRender });
+	}
+	function mixInterrupt(interrupt) {
+		return Object.assign({}, interrupt, interruptMixins, { Render: BoundInterruptRender });
+	}
+	function Provider({ chat, children }) {
+		return /* @__PURE__ */ jsx(ChatContext.Provider, {
+			value: chat,
+			children
+		});
+	}
+	function MissingInput() {
+		warn("input", "[tanstack-ai-ui] Rendered <Input /> but no `input` component is registered.");
+		return null;
+	}
+	const LayoutSlots = {
+		Messages,
+		Interrupts,
+		Queue,
+		Input: InputComponent ?? MissingInput
+	};
+	function Chat({ chat }) {
+		return /* @__PURE__ */ jsx(Provider, {
+			chat,
+			children: /* @__PURE__ */ jsx(Layout, { ...LayoutSlots })
+		});
+	}
+	function Queue() {
+		const chat = useChatContext();
+		if (!QueueItemComponent) return null;
+		const items = chat.queue;
+		return /* @__PURE__ */ jsx(Fragment, { children: items.map((item) => /* @__PURE__ */ jsx(QueueItemView, {
+			cancelQueued: chat.cancelQueued,
+			item
+		}, item.id)) });
+	}
+	const QueueItemView = memo(function QueueItemView({ item, cancelQueued }) {
+		if (!QueueItemComponent) return null;
+		return /* @__PURE__ */ jsx(QueueItemComponent, { item: {
+			...item,
+			cancelQueued: () => {
+				cancelQueued(item.id);
+			}
+		} });
+	}, queueItemEqual);
+	function Messages({ children } = {}) {
+		const chat = useChatContext();
+		const messages = readMessages(chat);
+		const interrupts = readInterrupts(chat);
+		if (children) return /* @__PURE__ */ jsx(Fragment, { children: children(messages) });
+		return /* @__PURE__ */ jsx(Fragment, { children: messages.map((message) => /* @__PURE__ */ jsx(MessageView, {
+			inlineToolNames,
+			interrupts,
+			message
+		}, message.id)) });
+	}
+	const MessageRenderContext = createContext(null);
+	function Parts() {
+		const scope = useContext(MessageRenderContext);
+		if (!scope) throw new Error("`Parts` must be rendered by a `message` component.");
+		return /* @__PURE__ */ jsx(AutomaticParts, {
+			inlineToolNames: scope.inlineToolNames,
+			interrupts: scope.interrupts,
+			message: scope.message
+		});
+	}
+	const MessageView = memo(function MessageView({ message, interrupts, inlineToolNames: names, children }) {
+		const selected = selectMessageUI(message, {
+			interrupts,
+			inlineToolNames: names
+		});
+		if (children) return /* @__PURE__ */ jsx(Fragment, { children: children(selected.parts) });
+		return /* @__PURE__ */ jsx(MessageRenderContext.Provider, {
+			value: {
+				message,
+				interrupts,
+				inlineToolNames: names
+			},
+			children: /* @__PURE__ */ jsx(MessageComponent, {
+				message,
+				Parts
+			})
+		});
+	});
+	function Message({ message, children }) {
+		const chat = useChatContext();
+		return /* @__PURE__ */ jsx(MessageView, {
+			children,
+			inlineToolNames,
+			interrupts: readInterrupts(chat),
+			message
+		});
+	}
+	const AutomaticParts = memo(function AutomaticParts({ message, interrupts, inlineToolNames: names }) {
+		const selected = selectMessageUI(message, {
+			interrupts,
+			inlineToolNames: names
+		});
+		return /* @__PURE__ */ jsx(Fragment, { children: automaticPartsForMessage(selected).map((part, index) => /* @__PURE__ */ jsx(SelectedPartView, { selected: part }, `${message.id}-${index}`)) });
+	});
+	const SelectedPartInner = memo(function SelectedPartInner({ selected }) {
+		if (selected.key === "toolCall") {
+			const name = selected.part.name;
+			const Tool = tools?.[name];
+			if (!Tool) {
+				warn(`tool:${name}`, `[tanstack-ai-ui] Missing tools.${name} component`);
+				return null;
+			}
+			return /* @__PURE__ */ jsx(Tool, {
+				part: selected.part,
+				result: selected.result,
+				interrupt: selected.interrupt
+			});
+		}
+		const PartComponent = parts[selected.key] ?? parts.fallback;
+		if (!PartComponent) {
+			warn(`part:${selected.key}`, `[tanstack-ai-ui] Missing parts.${selected.key} component`);
+			return null;
+		}
+		return /* @__PURE__ */ jsx(PartComponent, { part: selected.part });
+	}, selectedPartPropsEqual);
+	const SelectedPartView = memo(function SelectedPartView({ selected }) {
+		return /* @__PURE__ */ jsx(PartContext.Provider, {
+			value: selected,
+			children: /* @__PURE__ */ jsx(SelectedPartInner, { selected })
+		});
+	});
+	function BoundRender() {
+		const selected = usePartContext();
+		return /* @__PURE__ */ jsx(SelectedPartInner, { selected });
+	}
+	function Part({ part, children }) {
+		const chat = useChatContext();
+		const selected = isSelectedPart(part) ? part : selectMessageUI({
+			id: "part",
+			role: "assistant",
+			parts: [part]
+		}, {
+			interrupts: readInterrupts(chat),
+			inlineToolNames: []
+		}).parts[0];
+		if (!selected) return null;
+		return /* @__PURE__ */ jsx(PartContext.Provider, {
+			value: selected,
+			children: children ? children(mixPart(selected)) : /* @__PURE__ */ jsx(SelectedPartInner, { selected })
+		});
+	}
+	function Interrupts({ children } = {}) {
+		const chat = useChatContext();
+		const selected = selectChatUI({
+			messages: readMessages(chat),
+			interrupts: readInterrupts(chat),
+			inlineToolNames
+		});
+		if (children) return /* @__PURE__ */ jsx(Fragment, { children: children(selected.interrupts) });
+		return /* @__PURE__ */ jsx(Fragment, { children: selected.interrupts.map((interrupt) => /* @__PURE__ */ jsx(Interrupt, { interrupt }, interrupt.id)) });
+	}
+	const InterruptInner = memo(function InterruptInner({ interrupt }) {
+		const Component = resolveInterruptComponent(interrupt, interrupts);
+		if (!Component) {
+			warn(`interrupt:${interrupt.id}`, `[tanstack-ai-ui] Missing interrupt component for ${interrupt.kind}`);
+			return null;
+		}
+		return /* @__PURE__ */ jsx(Component, { interrupt });
+	});
+	function BoundInterruptRender() {
+		const interrupt = useInterruptContext();
+		return /* @__PURE__ */ jsx(InterruptInner, { interrupt });
+	}
+	const Interrupt = memo(function Interrupt({ interrupt, children }) {
+		return /* @__PURE__ */ jsx(InterruptContext.Provider, {
+			value: interrupt,
+			children: children ? children(mixInterrupt(interrupt)) : /* @__PURE__ */ jsx(InterruptInner, { interrupt })
+		});
+	});
+	return {
+		Chat,
+		Provider,
+		Messages,
+		Message,
+		Part,
+		Interrupts,
+		Interrupt,
+		Queue,
+		useChatContext,
+		Input: InputComponent
+	};
+}
+//#endregion
+export { createChatUI };
+
+//# sourceMappingURL=create-ui.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"create-ui.js","names":[],"sources":["../../../src/chat-ui/create-ui.tsx"],"sourcesContent":["import { createContext, memo, useContext } from 'preact/compat'\nimport type { ComponentChildren } from 'preact'\nimport type { ComponentProps, ComponentType, Context } from 'preact/compat'\nimport {\n  automaticPartsForMessage,\n  collectInlineToolNames,\n  resolveInterruptComponent,\n  selectChatUI,\n  selectMessageUI,\n} from '@tanstack/ai-client/ui'\nimport type {\n  ChatUIData,\n  ChatUIHasNamedInterrupts,\n  ChatUIHasNamedTools,\n  ChatUIInterrupt,\n  ChatUIInterruptName,\n  ChatUIInterruptOf,\n  ChatUIInterruptsOf,\n  ChatUIMessages,\n  ChatUINamedInterruptId,\n  ChatUIPartKey,\n  ChatUIPartOf,\n  ChatUISelectedPart,\n  ChatUISelectedPartOf,\n  ChatUIToolApproval,\n  ChatUIToolName,\n  ChatUIToolsOf,\n} from '@tanstack/ai-client/ui'\nimport type {\n  MessagePart,\n  QueuedMessage,\n  ToolCallPart,\n  ToolResultPart,\n  UIMessage,\n} from '@tanstack/ai-client'\nimport type { UseChatReturn } from '../types'\nimport { defaultChatUIContexts } from './create-ui-contexts'\nimport type { ChatUIContexts } from './create-ui-contexts'\n\nexport type ChatUIHost<TOptions = unknown> = UseChatReturn<\n  ChatUIToolsOf<TOptions>,\n  ChatUIInterruptsOf<TOptions>\n>\n\nexport type ChatUIQueueItem = QueuedMessage & {\n  cancelQueued: () => void\n}\n\nexport type LayoutProps<\n  TOptions,\n  TInput extends ComponentType<any> | undefined = ComponentType<\n    InputProps<TOptions>\n  >,\n> = {\n  Messages: ComponentType\n  Interrupts: ComponentType\n  Queue: ComponentType\n  readonly __ui?: TOptions\n} & (TInput extends ComponentType<any> ? { Input: ComponentType } : {})\n\nexport type MessageProps<TOptions> = {\n  message: UIMessage<ChatUIToolsOf<TOptions>, ChatUIData<TOptions>>\n  Parts: ComponentType\n}\n\nexport type InputProps<TOptions> = {\n  readonly __ui?: TOptions\n}\n\nexport type QueueProps<TOptions> = {\n  item: ChatUIQueueItem\n  readonly __ui?: TOptions\n}\n\nexport type PartProps<TOptions, TKey extends ChatUIPartKey = ChatUIPartKey> = {\n  part: ChatUIPartOf<TOptions, TKey>\n}\n\nexport type ToolProps<\n  TOptions,\n  TName extends ChatUIToolName<TOptions> = ChatUIToolName<TOptions>,\n> = {\n  part: Extract<ToolCallPart<ChatUIToolsOf<TOptions>>, { name: TName }>\n  result?: ToolResultPart\n  interrupt?: ChatUIToolApproval<TOptions, TName>\n}\n\nexport type InterruptProps<\n  TOptions,\n  TName extends ChatUIInterruptName<TOptions> = never,\n> = {\n  interrupt: ChatUIInterruptOf<TOptions, TName>\n  readonly __ui?: TOptions\n}\n\ntype GenericInterruptComponents<TOptions> =\n  ChatUIHasNamedInterrupts<TOptions> extends true\n    ? {\n        [K in ChatUINamedInterruptId<TOptions>]: ComponentType<\n          InterruptProps<TOptions, K & ChatUIInterruptName<TOptions>>\n        >\n      } & {\n        fallback?: ComponentType<InterruptProps<TOptions>>\n      }\n    : {\n        fallback?: ComponentType<InterruptProps<TOptions>>\n      }\n\ntype ToolApprovalMap<TOptions> = {\n  [K in ChatUIToolName<TOptions>]?: ComponentType<\n    InterruptProps<TOptions, K & ChatUIInterruptName<TOptions>>\n  >\n}\n\n/** The chrome around the message list: `layout`, `message`, and `input`. */\nexport type ChatUIChromeComponents<\n  TOptions,\n  TInput extends ComponentType<InputProps<TOptions>> | undefined =\n    ComponentType<InputProps<TOptions>>,\n> = {\n  layout: ComponentType<LayoutProps<TOptions, TInput>>\n  message: ComponentType<MessageProps<TOptions>>\n  input?: TInput\n  queue?: ComponentType<QueueProps<TOptions>>\n}\n\nexport type ChatUIPartsComponents<TOptions> = {\n  [K in ChatUIPartKey]?: ComponentType<PartProps<TOptions, K>>\n} & {\n  fallback?: ComponentType<PartProps<TOptions>>\n}\n\nexport type ChatUIInterruptsComponents<TOptions> = {\n  tools?: ToolApprovalMap<TOptions>\n  generic: GenericInterruptComponents<TOptions>\n}\n\nexport type ChatUIComponents<\n  TOptions,\n  TInput extends ComponentType<InputProps<TOptions>> | undefined =\n    ComponentType<InputProps<TOptions>>,\n> = {\n  components: ChatUIChromeComponents<TOptions, TInput>\n  partsComponents: ChatUIPartsComponents<TOptions>\n} & (ChatUIHasNamedTools<TOptions> extends true\n  ? {\n      toolsComponents: {\n        [K in ChatUIToolName<TOptions>]: ComponentType<ToolProps<TOptions, K>>\n      }\n    }\n  : {\n      toolsComponents?: {\n        [K in ChatUIToolName<TOptions>]?: ComponentType<ToolProps<TOptions, K>>\n      }\n    }) &\n  (ChatUIHasNamedInterrupts<TOptions> extends true\n    ? { interruptsComponents: ChatUIInterruptsComponents<TOptions> }\n    : {\n        interruptsComponents?: {\n          tools?: ToolApprovalMap<TOptions>\n          generic?: GenericInterruptComponents<TOptions>\n        }\n      })\n\n/** Scoped contexts, for widgets in other files or nested chat trees. */\nexport type ChatUIContextConfig = {\n  chatContext?: ChatUIContexts['chatContext']\n  partContext?: ChatUIContexts['partContext']\n  interruptContext?: ChatUIContexts['interruptContext']\n}\n\nexport type ChatUIFactoryConfig<\n  TOptions,\n  TInput extends ComponentType<InputProps<TOptions>> | undefined =\n    ComponentType<InputProps<TOptions>>,\n> = ChatUIComponents<TOptions, TInput> & {\n  context?: ChatUIContextConfig\n}\n\ntype BoundWidget = ComponentType<Record<string, never>>\n\ntype PartMixins<TOptions> = {\n  [K in ChatUIPartKey]?: BoundWidget\n} & {\n  [K in ChatUIToolName<TOptions>]: BoundWidget\n} & {\n  Render: BoundWidget\n}\n\ntype InterruptMixins<TOptions> = {\n  [K in ChatUINamedInterruptId<TOptions>]: BoundWidget\n} & {\n  [K in ChatUIToolName<TOptions>]?: BoundWidget\n} & {\n  fallback?: BoundWidget\n  Render: BoundWidget\n}\n\nfunction createWarnOnce() {\n  const seen = new Set<string>()\n  return (key: string, message: string) => {\n    if (process.env.NODE_ENV === 'production') return\n    if (seen.has(key)) return\n    seen.add(key)\n    console.warn(message)\n  }\n}\n\nfunction readMessages<TOptions>(chat: ChatUIHost<TOptions>) {\n  return chat.messages as ChatUIMessages<TOptions>\n}\n\nfunction readInterrupts<TOptions>(chat: ChatUIHost<TOptions>) {\n  return chat.interrupts ?? []\n}\n\nfunction queueItemEqual(\n  prev: { item: QueuedMessage; cancelQueued: (id: string) => void },\n  next: { item: QueuedMessage; cancelQueued: (id: string) => void },\n) {\n  return (\n    prev.item.id === next.item.id &&\n    prev.item.createdAt === next.item.createdAt &&\n    prev.item.content === next.item.content &&\n    prev.cancelQueued === next.cancelQueued\n  )\n}\n\nfunction selectedPartPropsEqual(\n  prev: { selected: ChatUISelectedPart },\n  next: { selected: ChatUISelectedPart },\n) {\n  if (prev.selected.key !== next.selected.key) return false\n  if (prev.selected.part !== next.selected.part) return false\n  if (prev.selected.key === 'toolCall' && next.selected.key === 'toolCall') {\n    return (\n      prev.selected.result === next.selected.result &&\n      prev.selected.interrupt === next.selected.interrupt\n    )\n  }\n  if (\n    prev.selected.key === 'toolResult' &&\n    next.selected.key === 'toolResult'\n  ) {\n    return prev.selected.matched === next.selected.matched\n  }\n  return true\n}\n\nfunction isSelectedPart(\n  value: MessagePart | ChatUISelectedPart,\n): value is ChatUISelectedPart {\n  return 'key' in value && 'part' in value\n}\n\nfunction bindMap(\n  map: Record<string, ComponentType<any> | undefined> | undefined,\n  bind: (component: ComponentType<any>) => BoundWidget,\n) {\n  const out: Record<string, BoundWidget> = {}\n  for (const [key, component] of Object.entries(map ?? {})) {\n    if (component) out[key] = bind(component)\n  }\n  return out\n}\n\n/**\n * Bind chat options and UI widgets once at module scope. This matches Form\n * `createFormHook` and Table `createTableHook`: widgets register here, mix\n * onto Part / Interrupt / the UI kit, and automatic dispatch still walks the\n * message list.\n *\n * `chatOptions` is type-only at runtime. Pass optional `chatContext`,\n * `partContext`, and `interruptContext` from {@link createChatHookContexts}\n * when widgets live in other files or when nested chats need isolation.\n */\nexport function createChatUI<\n  const TOptions,\n  TInput extends ComponentType<any> | undefined =\n    | ComponentType<InputProps<NoInfer<TOptions>>>\n    | undefined,\n>(options: TOptions, config: ChatUIFactoryConfig<NoInfer<TOptions>, TInput>) {\n  void options\n  const {\n    context: contextOption,\n    components,\n    partsComponents: parts,\n    toolsComponents: tools,\n    interruptsComponents: interrupts,\n  } = config as ChatUIFactoryConfig<TOptions, TInput> & {\n    toolsComponents?: Record<string, ComponentType<any> | undefined>\n    interruptsComponents?: {\n      tools?: Record<string, ComponentType<any> | undefined>\n      generic?: Record<string, ComponentType<any> | undefined>\n    }\n  }\n  const {\n    layout: Layout,\n    message: MessageComponent,\n    input: InputComponent,\n    queue: QueueItemComponent,\n  } = components\n  const {\n    chatContext: chatContextOption,\n    partContext: partContextOption,\n    interruptContext: interruptContextOption,\n  } = contextOption ?? {}\n  const warn = createWarnOnce()\n  const ChatContext = (chatContextOption ??\n    defaultChatUIContexts.chatContext) as Context<ChatUIHost<TOptions> | null>\n  const PartContext = (partContextOption ??\n    defaultChatUIContexts.partContext) as Context<ChatUISelectedPart | null>\n  const InterruptContext = (interruptContextOption ??\n    defaultChatUIContexts.interruptContext) as Context<ChatUIInterrupt | null>\n  const inlineToolNames = collectInlineToolNames(\n    interrupts?.tools as Record<string, unknown> | undefined,\n    Object.keys(tools ?? {}),\n  )\n\n  function useChatContext() {\n    const chat = useContext(ChatContext)\n    if (!chat) {\n      throw new Error(\n        '`useChatContext` must be used within `UI.Provider` or `UI.Chat`.',\n      )\n    }\n    return chat\n  }\n\n  function usePartContext<TKey extends ChatUIPartKey = ChatUIPartKey>() {\n    const selected = useContext(PartContext)\n    if (!selected) {\n      throw new Error(\n        '`usePartContext` must be used within `UI.Part` or an automatic part.',\n      )\n    }\n    return selected as ChatUISelectedPartOf<TOptions, TKey>\n  }\n\n  function useInterruptContext<\n    TName extends ChatUIInterruptName<TOptions> = ChatUIInterruptName<TOptions>,\n  >() {\n    const interrupt = useContext(InterruptContext)\n    if (!interrupt) {\n      throw new Error(\n        '`useInterruptContext` must be used within `UI.Interrupt`.',\n      )\n    }\n    return interrupt as ChatUIInterruptOf<TOptions, TName>\n  }\n\n  function bindPart(Component: ComponentType<PartProps<TOptions>>) {\n    return function BoundPart() {\n      const selected = usePartContext()\n      return <Component part={selected.part as PartProps<TOptions>['part']} />\n    }\n  }\n\n  function bindTool(Component: ComponentType<ToolProps<TOptions>>) {\n    return function BoundTool() {\n      const selected = usePartContext()\n      if (selected.key !== 'toolCall') return null\n      return (\n        <Component\n          part={selected.part as ToolProps<TOptions>['part']}\n          result={selected.result}\n          interrupt={selected.interrupt as ToolProps<TOptions>['interrupt']}\n        />\n      )\n    }\n  }\n\n  function bindInterrupt(Component: ComponentType<InterruptProps<TOptions>>) {\n    return function BoundInterrupt() {\n      const interrupt = useInterruptContext()\n      return (\n        <Component\n          interrupt={interrupt as InterruptProps<TOptions>['interrupt']}\n        />\n      )\n    }\n  }\n\n  const partMixins = bindMap(\n    parts as Record<string, ComponentType<any> | undefined>,\n    bindPart,\n  )\n  const toolMixins = bindMap(\n    tools as Record<string, ComponentType<any> | undefined>,\n    bindTool,\n  )\n  const interruptMixins = {\n    ...bindMap(\n      interrupts?.generic as\n        | Record<string, ComponentType<any> | undefined>\n        | undefined,\n      bindInterrupt,\n    ),\n    ...bindMap(\n      interrupts?.tools as\n        | Record<string, ComponentType<any> | undefined>\n        | undefined,\n      bindInterrupt,\n    ),\n  }\n\n  function mixPart(selected: ChatUISelectedPart) {\n    return Object.assign({}, selected, partMixins, toolMixins, {\n      Render: BoundRender,\n    }) as ChatUISelectedPart & PartMixins<TOptions>\n  }\n\n  function mixInterrupt(interrupt: ChatUIInterrupt) {\n    return Object.assign({}, interrupt, interruptMixins, {\n      Render: BoundInterruptRender,\n    }) as ChatUIInterrupt & InterruptMixins<TOptions>\n  }\n\n  function Provider({\n    chat,\n    children,\n  }: {\n    chat: ChatUIHost<TOptions>\n    children?: ComponentChildren\n  }) {\n    return <ChatContext.Provider value={chat}>{children}</ChatContext.Provider>\n  }\n\n  // Backstop for when the conditional `Input` type cannot be inferred (see the\n  // `input` note in docs/ui/react.md). The type hides `Input` when no `input`\n  // is registered, but inference degrades on some config shapes, so always\n  // supply a component: warn once rather than crash on an undefined element.\n  function MissingInput() {\n    warn(\n      'input',\n      '[tanstack-ai-ui] Rendered <Input /> but no `input` component is registered.',\n    )\n    return null\n  }\n\n  // `Messages`, `Interrupts`, `Queue` and `InputComponent` are declared once\n  // per factory, so these props are stable for the lifetime of the kit.\n  const LayoutSlots = {\n    Messages: Messages as ComponentType,\n    Interrupts: Interrupts as ComponentType,\n    Queue: Queue as ComponentType,\n    Input: (InputComponent ?? MissingInput) as ComponentType,\n  }\n\n  function Chat({ chat }: { chat: ChatUIHost<TOptions> }) {\n    return (\n      <Provider chat={chat}>\n        <Layout {...(LayoutSlots as ComponentProps<ComponentType<any>>)} />\n      </Provider>\n    )\n  }\n\n  function Queue() {\n    const chat = useChatContext()\n    if (!QueueItemComponent) return null\n    const items = chat.queue\n    return (\n      <>\n        {items.map((item: QueuedMessage) => (\n          <QueueItemView\n            key={item.id}\n            cancelQueued={chat.cancelQueued}\n            item={item}\n          />\n        ))}\n      </>\n    )\n  }\n\n  const QueueItemView = memo(function QueueItemView({\n    item,\n    cancelQueued,\n  }: {\n    item: QueuedMessage\n    cancelQueued: (id: string) => void\n  }) {\n    if (!QueueItemComponent) return null\n    return (\n      <QueueItemComponent\n        item={{\n          ...item,\n          cancelQueued: () => {\n            cancelQueued(item.id)\n          },\n        }}\n      />\n    )\n  }, queueItemEqual)\n\n  function Messages({\n    children,\n  }: {\n    children?: (messages: ChatUIMessages<TOptions>) => ComponentChildren\n  } = {}) {\n    const chat = useChatContext()\n    const messages = readMessages(chat) as ChatUIMessages<TOptions>\n    const interrupts = readInterrupts(chat)\n    if (children) return <>{children(messages)}</>\n    return (\n      <>\n        {messages.map((message: ChatUIMessages<TOptions>[number]) => (\n          <MessageView\n            key={message.id}\n            inlineToolNames={inlineToolNames}\n            interrupts={interrupts}\n            message={message}\n          />\n        ))}\n      </>\n    )\n  }\n\n  // Scoped to one message render. `Parts` reads it instead of closing over the\n  // message, which is what keeps its identity constant across re-renders — a\n  // fresh component per render would remount every part on each stream chunk.\n  type MessageRenderValue = {\n    message: ChatUIMessages<TOptions>[number]\n    interrupts: ReadonlyArray<ChatUIInterrupt>\n    inlineToolNames: ReadonlyArray<string>\n  }\n  const MessageRenderContext = createContext<MessageRenderValue | null>(null)\n\n  function Parts() {\n    const scope = useContext(MessageRenderContext)\n    if (!scope) {\n      throw new Error('`Parts` must be rendered by a `message` component.')\n    }\n    return (\n      <AutomaticParts\n        inlineToolNames={scope.inlineToolNames}\n        interrupts={scope.interrupts}\n        message={scope.message}\n      />\n    )\n  }\n\n  const MessageView = memo(function MessageView({\n    message,\n    interrupts,\n    inlineToolNames: names,\n    children,\n  }: {\n    message: ChatUIMessages<TOptions>[number]\n    interrupts: ReadonlyArray<ChatUIInterrupt>\n    inlineToolNames: ReadonlyArray<string>\n    children?: (parts: Array<ChatUISelectedPart>) => ComponentChildren\n  }) {\n    const selected = selectMessageUI(message, {\n      interrupts,\n      inlineToolNames: names,\n    })\n    if (children) return <>{children(selected.parts)}</>\n    return (\n      <MessageRenderContext.Provider\n        value={{ message, interrupts, inlineToolNames: names }}\n      >\n        <MessageComponent message={message} Parts={Parts} />\n      </MessageRenderContext.Provider>\n    )\n  })\n\n  function Message({\n    message,\n    children,\n  }: {\n    message: ChatUIMessages<TOptions>[number]\n    children?: (parts: Array<ChatUISelectedPart>) => ComponentChildren\n  }) {\n    const chat = useChatContext()\n    return (\n      <MessageView\n        children={children}\n        inlineToolNames={inlineToolNames}\n        interrupts={readInterrupts(chat)}\n        message={message}\n      />\n    )\n  }\n\n  const AutomaticParts = memo(function AutomaticParts({\n    message,\n    interrupts,\n    inlineToolNames: names,\n  }: {\n    message: ChatUIMessages<TOptions>[number]\n    interrupts: ReadonlyArray<ChatUIInterrupt>\n    inlineToolNames: ReadonlyArray<string>\n  }) {\n    const selected = selectMessageUI(message, {\n      interrupts,\n      inlineToolNames: names,\n    })\n    return (\n      <>\n        {automaticPartsForMessage(selected).map((part, index) => (\n          <SelectedPartView key={`${message.id}-${index}`} selected={part} />\n        ))}\n      </>\n    )\n  })\n\n  const SelectedPartInner = memo(function SelectedPartInner({\n    selected,\n  }: {\n    selected: ChatUISelectedPart\n  }) {\n    if (selected.key === 'toolCall') {\n      const name = selected.part.name\n      const Tool = tools?.[name as ChatUIToolName<TOptions>] as\n        | ComponentType<ToolProps<TOptions>>\n        | undefined\n      if (!Tool) {\n        warn(`tool:${name}`, `[tanstack-ai-ui] Missing tools.${name} component`)\n        return null\n      }\n      return (\n        <Tool\n          part={selected.part as ToolProps<TOptions>['part']}\n          result={selected.result}\n          interrupt={selected.interrupt as ToolProps<TOptions>['interrupt']}\n        />\n      )\n    }\n\n    const PartComponent = (parts[selected.key] ?? parts.fallback) as\n      | ComponentType<PartProps<TOptions>>\n      | undefined\n    if (!PartComponent) {\n      warn(\n        `part:${selected.key}`,\n        `[tanstack-ai-ui] Missing parts.${selected.key} component`,\n      )\n      return null\n    }\n    return <PartComponent part={selected.part as PartProps<TOptions>['part']} />\n  }, selectedPartPropsEqual)\n\n  const SelectedPartView = memo(function SelectedPartView({\n    selected,\n  }: {\n    selected: ChatUISelectedPart\n  }) {\n    return (\n      <PartContext.Provider value={selected}>\n        <SelectedPartInner selected={selected} />\n      </PartContext.Provider>\n    )\n  })\n\n  function BoundRender() {\n    const selected = usePartContext()\n    return <SelectedPartInner selected={selected} />\n  }\n\n  function Part({\n    part,\n    children,\n  }: {\n    part: MessagePart | ChatUISelectedPart\n    children?: (\n      mixed: ChatUISelectedPart & PartMixins<TOptions>,\n    ) => ComponentChildren\n  }) {\n    const chat = useChatContext()\n    const selected = isSelectedPart(part)\n      ? part\n      : selectMessageUI(\n          { id: 'part', role: 'assistant', parts: [part] },\n          { interrupts: readInterrupts(chat), inlineToolNames: [] },\n        ).parts[0]\n    if (!selected) return null\n    return (\n      <PartContext.Provider value={selected}>\n        {children ? (\n          children(mixPart(selected))\n        ) : (\n          <SelectedPartInner selected={selected} />\n        )}\n      </PartContext.Provider>\n    )\n  }\n\n  function Interrupts({\n    children,\n  }: {\n    children?: (interrupts: ReadonlyArray<ChatUIInterrupt>) => ComponentChildren\n  } = {}) {\n    const chat = useChatContext()\n    const selected = selectChatUI({\n      messages: readMessages(chat),\n      interrupts: readInterrupts(chat),\n      inlineToolNames,\n    })\n    if (children) return <>{children(selected.interrupts)}</>\n    return (\n      <>\n        {selected.interrupts.map((interrupt) => (\n          <Interrupt key={interrupt.id} interrupt={interrupt} />\n        ))}\n      </>\n    )\n  }\n\n  const InterruptInner = memo(function InterruptInner({\n    interrupt,\n  }: {\n    interrupt: ChatUIInterrupt\n  }) {\n    const Component = resolveInterruptComponent(interrupt, interrupts) as\n      | ComponentType<InterruptProps<TOptions>>\n      | undefined\n    if (!Component) {\n      warn(\n        `interrupt:${interrupt.id}`,\n        `[tanstack-ai-ui] Missing interrupt component for ${interrupt.kind}`,\n      )\n      return null\n    }\n    return <Component interrupt={interrupt} />\n  })\n\n  function BoundInterruptRender() {\n    const interrupt = useInterruptContext()\n    return <InterruptInner interrupt={interrupt} />\n  }\n\n  const Interrupt = memo(function Interrupt({\n    interrupt,\n    children,\n  }: {\n    interrupt: ChatUIInterrupt\n    children?: (\n      mixed: ChatUIInterrupt & InterruptMixins<TOptions>,\n    ) => ComponentChildren\n  }) {\n    return (\n      <InterruptContext.Provider value={interrupt}>\n        {children ? (\n          children(mixInterrupt(interrupt))\n        ) : (\n          <InterruptInner interrupt={interrupt} />\n        )}\n      </InterruptContext.Provider>\n    )\n  })\n\n  return {\n    Chat,\n    Provider,\n    Messages,\n    Message,\n    Part,\n    Interrupts,\n    Interrupt,\n    Queue,\n    useChatContext,\n    Input: InputComponent,\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,22 @@
+import { AnyClientTool, InterruptDefinition } from '@tanstack/ai/client';
+import { InferredClientContext } from '@tanstack/ai-client';
+import { UseChatOptions } from './types.js';
+type ChatHookOverrides<TTools extends ReadonlyArray<AnyClientTool>, TContext, TInterrupts extends ReadonlyArray<InterruptDefinition<any, any, any, any>>> = {
+    threadId?: string;
+    live?: boolean;
+    forwardedProps?: Record<string, any>;
+    body?: Record<string, any>;
+    initialMessages?: UseChatOptions<TTools, 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.
+ */
+export declare function createChatHook<const TTools extends ReadonlyArray<AnyClientTool> = any, TContext = InferredClientContext<TTools>, const TInterrupts extends ReadonlyArray<InterruptDefinition<any, any, any, any>> = readonly []>(options: UseChatOptions<TTools, TContext, TInterrupts>): {
+    useChat: (overrides?: ChatHookOverrides<TTools, TContext, TInterrupts>) => import('./types.js').UseChatReturn<TTools, TInterrupts>;
+};
+export {};

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

@@ -0,0 +1,24 @@
+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.
+*/
+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 { AnyClientTool, InterruptDefinition } 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  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    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 */\nexport function createChatHook<\n  const TTools extends ReadonlyArray<AnyClientTool> = any,\n  TContext = InferredClientContext<TTools>,\n  const TInterrupts extends ReadonlyArray<\n    InterruptDefinition<any, any, any, any>\n  > = readonly [],\n>(options: UseChatOptions<TTools, TContext, TInterrupts>) {\n  function useChat(\n    overrides?: ChatHookOverrides<TTools, TContext, TInterrupts>,\n  ) {\n    if (!overrides) {\n      return useUnboundChat(options)\n    }\n    return useUnboundChat({ ...options, ...overrides })\n  }\n\n  return { useChat }\n}\n"],"mappings":";;;;;;;;;;AA6BA,SAAgB,eAMd,SAAwD;CACxD,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,6 +1,9 @@
 export { useChat } from './use-chat.js';
+export { createChatHook } from './create-chat-hook.js';
 export { useByok } from './use-byok.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 { UseChatOptions, UseChatReturn, UIMessage, ChatRequestBody, QueuedMessage, SendMessageOptions, WhenBusy, QueueConfig, QueueStrategy, QueueOption, } from './types.js';
 export { fetchServerSentEvents, localStoragePersistence, sessionStoragePersistence, indexedDBPersistence, StorageUnavailableError, type ChatClientPersistence, type ChatPersistedState, type ChatPersistenceOption, type ChatStorageAdapter, type WebStoragePersistenceOptions, type IndexedDBPersistenceOptions, fetchHttpStream, xhrServerSentEvents, xhrHttpStream, stream, rpcStream, createChatClientOptions, createMcpAppBridge, type McpAppBridge, type CreateMcpAppBridgeOptions, type ConnectionAdapter, type ConnectConnectionAdapter, type SubscribeConnectionAdapter, type RunAgentInputContext, type FetchConnectionOptions, type XhrConnectionOptions, type InferChatMessages, } from '@tanstack/ai-client';

package/dist/esm/index.js

@@ -1,5 +1,7 @@
 import { useChat } from "./use-chat.js";
+import { createChatHook } from "./create-chat-hook.js";
 import { useByok } from "./use-byok.js";
 import { useMcpAppBridge } from "./use-mcp-app-bridge.js";
+import { useWebMCPTools } from "./use-web-mcp-tools.js";
 import { StorageUnavailableError, createChatClientOptions, createMcpAppBridge, fetchHttpStream, fetchServerSentEvents, indexedDBPersistence, localStoragePersistence, rpcStream, sessionStoragePersistence, stream, xhrHttpStream, xhrServerSentEvents } from "@tanstack/ai-client";
-export { StorageUnavailableError, createChatClientOptions, createMcpAppBridge, fetchHttpStream, fetchServerSentEvents, indexedDBPersistence, localStoragePersistence, rpcStream, sessionStoragePersistence, stream, useByok, useChat, useMcpAppBridge, xhrHttpStream, xhrServerSentEvents };
+export { StorageUnavailableError, createChatClientOptions, createChatHook, createMcpAppBridge, fetchHttpStream, fetchServerSentEvents, indexedDBPersistence, localStoragePersistence, rpcStream, sessionStoragePersistence, stream, useByok, useChat, useMcpAppBridge, useWebMCPTools, xhrHttpStream, xhrServerSentEvents };

package/dist/esm/ui.d.ts

@@ -0,0 +1,3 @@
+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';

package/dist/esm/ui.js

@@ -0,0 +1,4 @@
+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";
+export { createChatHook, createChatHookContexts, createChatUI };

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

@@ -0,0 +1,27 @@
+import { AnyClientTool, InferredClientContext, RegisterWebMCPToolsOptions } from '@tanstack/ai-client';
+/** Options for the Preact {@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 Preact 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 "preact/hooks";
+//#region src/use-web-mcp-tools.ts
+/**
+* Registers client tools with WebMCP for the lifetime of a Preact 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 'preact/hooks'\nimport { registerWebMCPTools } from '@tanstack/ai-client'\nimport type {\n  AnyClientTool,\n  InferredClientContext,\n  RegisterWebMCPToolsOptions,\n} from '@tanstack/ai-client'\n\n/** Options for the Preact {@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 Preact 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-preact",
-  "version": "0.14.4",
+  "version": "0.16.0",
   "description": "Preact hooks for TanStack AI streaming chat and typed messages.",
   "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": [
@@ -46,7 +50,7 @@
     "tool-calling"
   ],
   "dependencies": {
-    "@tanstack/ai-client": "^0.29.2"
+    "@tanstack/ai-client": "^0.31.0"
   },
   "devDependencies": {
     "@mcp-ui/client": "^7.1.1",
@@ -55,12 +59,12 @@
     "jsdom": "^27.4.0",
     "preact": "^10.26.9",
     "vite": "^8.2.1",
-    "@tanstack/ai": "0.52.0"
+    "@tanstack/ai": "0.53.0"
   },
   "peerDependencies": {
     "@mcp-ui/client": "^7",
     "preact": ">=10.11.0",
-    "@tanstack/ai": "^0.52.0"
+    "@tanstack/ai": "^0.53.0"
   },
   "peerDependenciesMeta": {
     "@mcp-ui/client": {