@tanstack/ai-solid 0.19.4 → 0.21.0

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

@@ -0,0 +1,39 @@
+import { UseChatOptions, UseChatReturn } from "./types.js";
+import { InferredClientContext } from "@tanstack/ai-client";
+import { AnyClientTool as AnyClientTool$1, InterruptDefinition, SchemaInput } from "@tanstack/ai";
+
+//#region src/create-chat-hook.d.ts
+type ChatHookOverrides<TTools extends ReadonlyArray<AnyClientTool$1>, 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` primitive
+ * 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 primitive at the call site if you already import `useChat` from
+ * `@tanstack/ai-solid`: `const { useChat: useAppChat } = createChatHook(chatOptions)`.
+ *
+ * @example
+ * ```tsx
+ * const { useChat } = createChatHook(chatOptions)
+ *
+ * function Support() {
+ *   const chat = useChat({ threadId: 'support-1' })
+ *   return <UI.Chat chat={chat} components={components} />
+ * }
+ * ```
+ */
+declare function createChatHook<const TTools extends ReadonlyArray<AnyClientTool$1> = 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>) => UseChatReturn<TTools, TSchema, TInterrupts>;
+};
+//#endregion
+export { createChatHook };
+//# sourceMappingURL=create-chat-hook.d.ts.map

package/dist/create-chat-hook.js

@@ -0,0 +1,38 @@
+import { useChat } from "./use-chat.js";
+
+//#region src/create-chat-hook.ts
+/**
+* Bind chat options once at module scope. The returned `useChat` primitive
+* 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 primitive at the call site if you already import `useChat` from
+* `@tanstack/ai-solid`: `const { useChat: useAppChat } = createChatHook(chatOptions)`.
+*
+* @example
+* ```tsx
+* const { useChat } = createChatHook(chatOptions)
+*
+* function Support() {
+*   const chat = useChat({ threadId: 'support-1' })
+*   return <UI.Chat chat={chat} components={components} />
+* }
+* ```
+*/
+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/create-chat-hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-chat-hook.js","names":["useChat","useUnboundChat"],"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'\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` primitive\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 primitive at the call site if you already import `useChat` from\n * `@tanstack/ai-solid`: `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} components={components} />\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,SAASA,UACP,WACA;AACA,MAAI,CAAC,UACH,QAAOC,QAAe,QAAQ;AAEhC,SAAOA,QAAe;GAAE,GAAG;GAAS,GAAG;GAAW,CAAC;;AAGrD,QAAO,EAAE,oBAAS"}

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 import { ChatRequestBody, DeepPartial, QueueConfig, QueueOption, QueueStrategy, QueuedMessage, SendMessageOptions, UIMessage, UseChatOptions, UseChatReturn, WhenBusy } from "./types.js";
 import { useChat } from "./use-chat.js";
+import { createChatHook } from "./create-chat-hook.js";
 import { useByok } from "./use-byok.js";
+import { UseWebMCPToolsOptions, useWebMCPTools } from "./use-web-mcp-tools.js";
 import { UseGenerationOptions, UseGenerationReturn, useGeneration } from "./use-generation.js";
 import { UseGenerateImageOptions, UseGenerateImageReturn, useGenerateImage } from "./use-generate-image.js";
 import { UseGenerateAudioOptions, UseGenerateAudioReturn, useGenerateAudio } from "./use-generate-audio.js";
@@ -10,4 +12,4 @@ import { UseSummarizeOptions, UseSummarizeReturn, useSummarize } from "./use-sum
 import { UseGenerateVideoOptions, UseGenerateVideoReturn, useGenerateVideo } from "./use-generate-video.js";
 import { UseAudioRecorderOptions, UseAudioRecorderReturn, useAudioRecorder } from "./use-audio-recorder.js";
 import { AudioGenerateInput, ChatClientPersistence, ChatPersistedState, ChatPersistenceOption, ChatStorageAdapter, ConnectConnectionAdapter, ConnectionAdapter, FetchConnectionOptions, GenerationClientState, ImageGenerateInput, IndexedDBPersistenceOptions, InferChatMessages, RunAgentInputContext, SpeechGenerateInput, StorageUnavailableError, SubscribeConnectionAdapter, SummarizeGenerateInput, TranscriptionGenerateInput, VideoGenerateInput, VideoGenerateResult, VideoStatusInfo, WebSocketConnectionOptions, WebStoragePersistenceOptions, XhrConnectionOptions, createChatClientOptions, fetchHttpStream, fetchServerSentEvents, indexedDBPersistence, localStoragePersistence, rpcStream, sessionStoragePersistence, stream, webSocket, xhrHttpStream, xhrServerSentEvents } from "@tanstack/ai-client";
-export { type AudioGenerateInput, type ChatClientPersistence, type ChatPersistedState, type ChatPersistenceOption, type ChatRequestBody, type ChatStorageAdapter, type ConnectConnectionAdapter, type ConnectionAdapter, type DeepPartial, type FetchConnectionOptions, type GenerationClientState, type ImageGenerateInput, type IndexedDBPersistenceOptions, type InferChatMessages, type QueueConfig, type QueueOption, type QueueStrategy, type QueuedMessage, type RunAgentInputContext, type SendMessageOptions, type SpeechGenerateInput, StorageUnavailableError, type SubscribeConnectionAdapter, type SummarizeGenerateInput, type TranscriptionGenerateInput, type UIMessage, type UseAudioRecorderOptions, type UseAudioRecorderReturn, type UseChatOptions, type UseChatReturn, type UseGenerateAudioOptions, type UseGenerateAudioReturn, type UseGenerateImageOptions, type UseGenerateImageReturn, type UseGenerateSpeechOptions, type UseGenerateSpeechReturn, type UseGenerateVideoOptions, type UseGenerateVideoReturn, type UseGenerationOptions, type UseGenerationReturn, type UseSummarizeOptions, type UseSummarizeReturn, type UseTranscriptionOptions, type UseTranscriptionReturn, type VideoGenerateInput, type VideoGenerateResult, type VideoStatusInfo, type WebSocketConnectionOptions, type WebStoragePersistenceOptions, type WhenBusy, type XhrConnectionOptions, createChatClientOptions, fetchHttpStream, fetchServerSentEvents, indexedDBPersistence, localStoragePersistence, rpcStream, sessionStoragePersistence, stream, useAudioRecorder, useByok, useChat, useGenerateAudio, useGenerateImage, useGenerateSpeech, useGenerateVideo, useGeneration, useSummarize, useTranscription, webSocket, xhrHttpStream, xhrServerSentEvents };
+export { type AudioGenerateInput, type ChatClientPersistence, type ChatPersistedState, type ChatPersistenceOption, type ChatRequestBody, type ChatStorageAdapter, type ConnectConnectionAdapter, type ConnectionAdapter, type DeepPartial, type FetchConnectionOptions, type GenerationClientState, type ImageGenerateInput, type IndexedDBPersistenceOptions, type InferChatMessages, type QueueConfig, type QueueOption, type QueueStrategy, type QueuedMessage, type RunAgentInputContext, type SendMessageOptions, type SpeechGenerateInput, StorageUnavailableError, type SubscribeConnectionAdapter, type SummarizeGenerateInput, type TranscriptionGenerateInput, type UIMessage, type UseAudioRecorderOptions, type UseAudioRecorderReturn, type UseChatOptions, type UseChatReturn, type UseGenerateAudioOptions, type UseGenerateAudioReturn, type UseGenerateImageOptions, type UseGenerateImageReturn, type UseGenerateSpeechOptions, type UseGenerateSpeechReturn, type UseGenerateVideoOptions, type UseGenerateVideoReturn, type UseGenerationOptions, type UseGenerationReturn, type UseSummarizeOptions, type UseSummarizeReturn, type UseTranscriptionOptions, type UseTranscriptionReturn, type UseWebMCPToolsOptions, type VideoGenerateInput, type VideoGenerateResult, type VideoStatusInfo, type WebSocketConnectionOptions, type WebStoragePersistenceOptions, type WhenBusy, type XhrConnectionOptions, createChatClientOptions, createChatHook, fetchHttpStream, fetchServerSentEvents, indexedDBPersistence, localStoragePersistence, rpcStream, sessionStoragePersistence, stream, useAudioRecorder, useByok, useChat, useGenerateAudio, useGenerateImage, useGenerateSpeech, useGenerateVideo, useGeneration, useSummarize, useTranscription, useWebMCPTools, webSocket, xhrHttpStream, xhrServerSentEvents };

package/dist/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 { 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";
@@ -10,4 +12,4 @@ import { useGenerateVideo } from "./use-generate-video.js";
 import { useAudioRecorder } from "./use-audio-recorder.js";
 import { StorageUnavailableError, createChatClientOptions, fetchHttpStream, fetchServerSentEvents, indexedDBPersistence, localStoragePersistence, rpcStream, sessionStoragePersistence, stream, webSocket, xhrHttpStream, xhrServerSentEvents } from "@tanstack/ai-client";
 
-export { StorageUnavailableError, createChatClientOptions, fetchHttpStream, fetchServerSentEvents, indexedDBPersistence, localStoragePersistence, rpcStream, sessionStoragePersistence, stream, useAudioRecorder, useByok, useChat, useGenerateAudio, useGenerateImage, useGenerateSpeech, useGenerateVideo, useGeneration, useSummarize, useTranscription, webSocket, xhrHttpStream, xhrServerSentEvents };
+export { StorageUnavailableError, createChatClientOptions, createChatHook, fetchHttpStream, fetchServerSentEvents, indexedDBPersistence, localStoragePersistence, rpcStream, sessionStoragePersistence, stream, useAudioRecorder, useByok, useChat, useGenerateAudio, useGenerateImage, useGenerateSpeech, useGenerateVideo, useGeneration, useSummarize, useTranscription, useWebMCPTools, webSocket, xhrHttpStream, xhrServerSentEvents };

package/dist/types.d.ts

@@ -1,6 +1,6 @@
 import { Accessor } from "solid-js";
 import { AIDevtoolsDisplayOptions, BoundInterrupts, ChatClientOptions, ChatClientState, ChatInterruptState, ChatRequestBody, ChatResumeState, ClientContextOptionFromTools, ConnectionStatus, DistributedOmit, InferredClientContext, MultimodalContent, QueueConfig, QueueOption, QueueStrategy, QueuedMessage, ResolvableChatInterrupt, SendMessageOptions, UIMessage, WhenBusy } from "@tanstack/ai-client";
-import { AnyClientTool, InferSchemaType, InterruptDefinition, ModelMessage, RunAgentResumeItem, SchemaInput } from "@tanstack/ai";
+import { AnyClientTool as AnyClientTool$1, InferSchemaType, InterruptDefinition, ModelMessage, RunAgentResumeItem, SchemaInput } from "@tanstack/ai";
 
 //#region src/types.d.ts
 
@@ -31,7 +31,7 @@ type DeepPartial<T> = T extends ReadonlyArray<infer U> ? Array<DeepPartial<U>> :
  * Note: Connection and body changes will recreate the ChatClient instance.
  * To update these options, remount the component or use a key prop.
  */
-type UseChatOptions<TTools extends ReadonlyArray<AnyClientTool> = any, TSchema extends SchemaInput | undefined = undefined, TContext = InferredClientContext<TTools>, TInterrupts extends ReadonlyArray<InterruptDefinition<any, any, any, any>> = readonly []> = DistributedOmit<ChatClientOptions<TTools, TContext, TInterrupts>, 'onMessagesChange' | 'onLoadingChange' | 'onErrorChange' | 'onStatusChange' | 'onSubscriptionChange' | 'onConnectionStatusChange' | 'onSessionGeneratingChange' | 'onQueueChange' | 'onResumeStateChange' | 'onRunIdChange' | 'context' | 'devtools'> & {
+type UseChatOptions<TTools extends ReadonlyArray<AnyClientTool$1> = any, TSchema extends SchemaInput | undefined = undefined, TContext = InferredClientContext<TTools>, TInterrupts extends ReadonlyArray<InterruptDefinition<any, any, any, any>> = readonly []> = DistributedOmit<ChatClientOptions<TTools, TContext, TInterrupts>, 'onMessagesChange' | 'onLoadingChange' | 'onErrorChange' | 'onStatusChange' | 'onSubscriptionChange' | 'onConnectionStatusChange' | 'onSessionGeneratingChange' | 'onQueueChange' | 'onResumeStateChange' | 'onRunIdChange' | 'context' | 'devtools'> & {
   /** Display options for TanStack AI Devtools. */
   devtools?: AIDevtoolsDisplayOptions;
   live?: boolean;
@@ -45,7 +45,7 @@ type UseChatOptions<TTools extends ReadonlyArray<AnyClientTool> = any, TSchema e
  * Discriminated return shape: when `outputSchema` is supplied, the hook adds
  * typed `partial` / `final` accessors; otherwise the return is unchanged.
  */
-type UseChatReturn<TTools extends ReadonlyArray<AnyClientTool> = any, TSchema extends SchemaInput | undefined = undefined, TInterrupts extends ReadonlyArray<InterruptDefinition<any, any, any, any>> = readonly []> = BaseUseChatReturn<TTools, TSchema extends SchemaInput ? InferSchemaType<TSchema> : unknown, TInterrupts> & (TSchema extends SchemaInput ? {
+type UseChatReturn<TTools extends ReadonlyArray<AnyClientTool$1> = any, TSchema extends SchemaInput | undefined = undefined, TInterrupts extends ReadonlyArray<InterruptDefinition<any, any, any, any>> = readonly []> = BaseUseChatReturn<TTools, TSchema extends SchemaInput ? InferSchemaType<TSchema> : unknown, TInterrupts> & (TSchema extends SchemaInput ? {
   /**
    * Live progressively-parsed structured output. Derived from the
    * latest assistant message's structured-output part.
@@ -57,7 +57,7 @@ type UseChatReturn<TTools extends ReadonlyArray<AnyClientTool> = any, TSchema ex
    */
   final: Accessor<InferSchemaType<TSchema> | null>;
 } : Record<never, never>);
-interface BaseUseChatReturn<TTools extends ReadonlyArray<AnyClientTool> = any, TData = unknown, TInterrupts extends ReadonlyArray<InterruptDefinition<any, any, any, any>> = readonly []> {
+interface BaseUseChatReturn<TTools extends ReadonlyArray<AnyClientTool$1> = any, TData = unknown, TInterrupts extends ReadonlyArray<InterruptDefinition<any, any, any, any>> = readonly []> {
   /**
    * Current messages in the conversation. When `outputSchema` is supplied,
    * `messages()[i].parts.find(p => p.type === 'structured-output')` is typed

package/dist/use-chat.d.ts

@@ -1,9 +1,9 @@
 import { UseChatOptions, UseChatReturn } from "./types.js";
 import { InferredClientContext } from "@tanstack/ai-client";
-import { AnyClientTool, InterruptDefinition, SchemaInput } from "@tanstack/ai";
+import { AnyClientTool as AnyClientTool$1, InterruptDefinition, SchemaInput } from "@tanstack/ai";
 
 //#region src/use-chat.d.ts
-declare function useChat<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>): UseChatReturn<TTools, TSchema, TInterrupts>;
+declare function useChat<const TTools extends ReadonlyArray<AnyClientTool$1> = 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>): UseChatReturn<TTools, TSchema, TInterrupts>;
 //#endregion
 export { useChat };
 //# sourceMappingURL=use-chat.d.ts.map

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

@@ -0,0 +1,26 @@
+import { AnyClientTool, InferredClientContext, RegisterWebMCPToolsOptions } from "@tanstack/ai-client";
+
+//#region src/use-web-mcp-tools.d.ts
+/** Options for {@link useWebMCPTools}. */
+type UseWebMCPToolsOptions<TTools extends ReadonlyArray<AnyClientTool>, TContext = InferredClientContext<TTools>> = Omit<RegisterWebMCPToolsOptions<TTools, TContext>, 'signal'> & {
+  /** Receives an asynchronous registration error. */
+  onError?: (error: unknown) => void;
+};
+type UseWebMCPToolsArguments<TTools extends ReadonlyArray<AnyClientTool>, TContext> = {} extends UseWebMCPToolsOptions<TTools, TContext> ? [options?: UseWebMCPToolsOptions<TTools, TContext>] : [options: UseWebMCPToolsOptions<TTools, TContext>];
+/**
+ * Registers executable client tools with WebMCP for the current Solid owner.
+ *
+ * The owner cleanup removes every tool registered by this call.
+ *
+ * @param tools - The executable client tools to expose through WebMCP.
+ * @param options - Runtime context, per-tool options, and error handling.
+ *
+ * @example
+ * ```ts
+ * useWebMCPTools([searchProducts])
+ * ```
+ */
+declare function useWebMCPTools<const TTools extends ReadonlyArray<AnyClientTool>, TContext = InferredClientContext<TTools>>(tools: TTools, ...[options]: UseWebMCPToolsArguments<TTools, TContext>): void;
+//#endregion
+export { UseWebMCPToolsOptions, useWebMCPTools };
+//# sourceMappingURL=use-web-mcp-tools.d.ts.map

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

@@ -0,0 +1,31 @@
+import { onCleanup } from "solid-js";
+import { registerWebMCPTools } from "@tanstack/ai-client";
+
+//#region src/use-web-mcp-tools.ts
+/**
+* Registers executable client tools with WebMCP for the current Solid owner.
+*
+* The owner cleanup removes every tool registered by this call.
+*
+* @param tools - The executable client tools to expose through WebMCP.
+* @param options - Runtime context, per-tool options, and error handling.
+*
+* @example
+* ```ts
+* useWebMCPTools([searchProducts])
+* ```
+*/
+function useWebMCPTools(tools, ...[options]) {
+	const controller = new AbortController();
+	registerWebMCPTools(tools, {
+		...options,
+		signal: controller.signal
+	}).catch((error) => {
+		if (!controller.signal.aborted) options?.onError?.(error);
+	});
+	onCleanup(() => controller.abort());
+}
+
+//#endregion
+export { useWebMCPTools };
+//# sourceMappingURL=use-web-mcp-tools.js.map

package/dist/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 { onCleanup } from 'solid-js'\nimport { registerWebMCPTools } from '@tanstack/ai-client'\nimport type {\n  AnyClientTool,\n  InferredClientContext,\n  RegisterWebMCPToolsOptions,\n} from '@tanstack/ai-client'\n\n/** Options for {@link useWebMCPTools}. */\nexport type UseWebMCPToolsOptions<\n  TTools extends ReadonlyArray<AnyClientTool>,\n  TContext = InferredClientContext<TTools>,\n> = Omit<RegisterWebMCPToolsOptions<TTools, TContext>, 'signal'> & {\n  /** Receives an asynchronous registration error. */\n  onError?: (error: unknown) => void\n}\n\ntype UseWebMCPToolsArguments<\n  TTools extends ReadonlyArray<AnyClientTool>,\n  TContext,\n> =\n  {} extends UseWebMCPToolsOptions<TTools, TContext>\n    ? [options?: UseWebMCPToolsOptions<TTools, TContext>]\n    : [options: UseWebMCPToolsOptions<TTools, TContext>]\n\n/**\n * Registers executable client tools with WebMCP for the current Solid owner.\n *\n * The owner cleanup removes every tool registered by this call.\n *\n * @param tools - The executable client tools to expose through WebMCP.\n * @param options - Runtime context, per-tool options, and error handling.\n *\n * @example\n * ```ts\n * useWebMCPTools([searchProducts])\n * ```\n */\nexport function useWebMCPTools<\n  const TTools extends ReadonlyArray<AnyClientTool>,\n  TContext = InferredClientContext<TTools>,\n>(tools: TTools, ...[options]: UseWebMCPToolsArguments<TTools, TContext>) {\n  const controller = new AbortController()\n\n  void registerWebMCPTools(tools, {\n    ...options,\n    signal: controller.signal,\n  }).catch((error) => {\n    if (!controller.signal.aborted) {\n      options?.onError?.(error)\n    }\n  })\n\n  onCleanup(() => controller.abort())\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAsCA,SAAgB,eAGd,OAAe,GAAG,CAAC,UAAqD;CACxE,MAAM,aAAa,IAAI,iBAAiB;AAExC,CAAK,oBAAoB,OAAO;EAC9B,GAAG;EACH,QAAQ,WAAW;EACpB,CAAC,CAAC,OAAO,UAAU;AAClB,MAAI,CAAC,WAAW,OAAO,QACrB,UAAS,UAAU,MAAM;GAE3B;AAEF,iBAAgB,WAAW,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/ai-solid",
-  "version": "0.19.4",
+  "version": "0.21.0",
   "description": "Solid hooks for TanStack AI streaming chat, structured outputs, and media generation.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -24,6 +24,11 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
+    },
+    "./ui": {
+      "solid": "./src/ui.ts",
+      "types": "./src/ui.ts",
+      "import": "./src/ui.ts"
     }
   },
   "files": [
@@ -45,11 +50,16 @@
     "media-generation"
   ],
   "dependencies": {
-    "@tanstack/ai-client": "^0.29.2"
+    "rehype-highlight": "^7.0.2",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^4.0.1",
+    "solid-markdown": "^2.1.0",
+    "@tanstack/ai-client": "^0.31.0"
   },
   "peerDependencies": {
     "solid-js": ">=1.9.10",
-    "@tanstack/ai": "^0.52.0"
+    "@tanstack/ai": "^0.53.0"
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10",
@@ -60,8 +70,10 @@
     "solid-js": "^1.9.10",
     "tsdown": "^0.17.0-beta.6",
     "typescript": "5.9.3",
+    "vite": "^8.2.1",
+    "vite-plugin-solid": "^2.11.14",
     "vitest": "^4.1.10",
-    "@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,168 @@
+import { createSignal } from 'solid-js'
+import { useChatContext } from './chat'
+import type { JSX } from 'solid-js'
+
+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 callback for the input element */
+  ref: (el: HTMLInputElement | HTMLTextAreaElement) => void
+}
+
+/** @deprecated Use `createChatUI()` and an application-owned input component. Deprecated in 0.8.0. Removed in 1.0.0. */
+export interface ChatInputProps {
+  /** Render prop for full control */
+  children?: (props: ChatInputRenderProps) => JSX.Element
+  /** CSS class name */
+  class?: 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.8.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} onInput={(e) => onChange(e.target.value)} />
+ *       <button onClick={onSubmit} disabled={isLoading}>Send</button>
+ *     </div>
+ *   )}
+ * </Chat.Input>
+ * ```
+ */
+export function ChatInput(props: ChatInputProps) {
+  const { sendMessage, isLoading } = useChatContext()
+  const [value, setValue] = createSignal('')
+
+  const disabled = () => props.disabled || isLoading()
+
+  const handleSubmit = () => {
+    if (!value().trim() || disabled()) return
+    void sendMessage(value())
+    setValue('')
+  }
+
+  const renderProps = (): ChatInputRenderProps => ({
+    value: value(),
+    onChange: setValue,
+    onSubmit: handleSubmit,
+    isLoading: isLoading(),
+    disabled: disabled(),
+
+    ref: () => {},
+  })
+
+  // Render prop pattern
+  if (props.children) {
+    return <>{props.children(renderProps())}</>
+  }
+
+  // Default implementation
+  return (
+    <div
+      class={props.class}
+      data-chat-input
+      style={{
+        display: 'flex',
+        gap: '0.75rem',
+        'align-items': 'center',
+        width: '100%',
+      }}
+    >
+      <input
+        type="text"
+        value={value()}
+        onInput={(e) => setValue(e.currentTarget.value)}
+        onKeyDown={(e) => {
+          if ((props.submitOnEnter ?? true) && e.key === 'Enter') {
+            e.preventDefault()
+            handleSubmit()
+          }
+        }}
+        placeholder={props.placeholder ?? 'Type a message...'}
+        disabled={disabled()}
+        data-chat-textarea
+        style={{
+          flex: 1,
+          padding: '0.75rem 1rem',
+          'font-size': '0.875rem',
+          border: '1px solid rgba(255, 255, 255, 0.1)',
+          'border-radius': '0.75rem',
+          'background-color': 'rgba(31, 41, 55, 0.5)',
+          color: 'white',
+          outline: 'none',
+          transition: 'all 0.2s',
+        }}
+        onFocus={(e) => {
+          e.currentTarget.style.borderColor = 'rgba(249, 115, 22, 0.4)'
+          e.currentTarget.style.boxShadow = '0 0 0 2px rgba(249, 115, 22, 0.2)'
+        }}
+        onBlur={(e) => {
+          e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.1)'
+          e.currentTarget.style.boxShadow = 'none'
+        }}
+      />
+      <button
+        onClick={handleSubmit}
+        disabled={disabled() || !value().trim()}
+        data-chat-submit
+        style={{
+          padding: '0.75rem 1.5rem',
+          'font-size': '0.875rem',
+          'font-weight': 500,
+          color: 'white',
+          'background-color':
+            disabled() || !value().trim()
+              ? 'rgba(107, 114, 128, 0.5)'
+              : 'rgb(249, 115, 22)',
+          border: 'none',
+          'border-radius': '0.75rem',
+          cursor: disabled() || !value().trim() ? 'not-allowed' : 'pointer',
+          transition: 'all 0.2s',
+          'white-space': 'nowrap',
+        }}
+        onMouseEnter={(e) => {
+          if (!disabled() && value().trim()) {
+            e.currentTarget.style.backgroundColor = 'rgb(234, 88, 12)'
+          }
+        }}
+        onMouseLeave={(e) => {
+          if (!disabled() && value().trim()) {
+            e.currentTarget.style.backgroundColor = 'rgb(249, 115, 22)'
+          }
+        }}
+      >
+        {isLoading() ? 'Sending...' : 'Send'}
+      </button>
+    </div>
+  )
+}