@tanstack/ai-remix 0.4.3 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/ai-remix",
-  "version": "0.4.3",
+  "version": "0.5.1",
   "description": "Remix 3 bindings for TanStack AI streaming chat, structured outputs, and media generation.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -47,11 +47,11 @@
     "README.md"
   ],
   "dependencies": {
-    "@tanstack/ai-client": "^0.33.2"
+    "@tanstack/ai-client": "^0.35.1"
   },
   "peerDependencies": {
     "remix": "^3.0.0-rc.1",
-    "@tanstack/ai": "^0.58.0"
+    "@tanstack/ai": "^0.61.0"
   },
   "devDependencies": {
     "@types/node": "^24.10.1",
@@ -60,7 +60,7 @@
     "remix": "^3.0.0-rc.1",
     "vite": "^8.2.1",
     "vitest": "^4.1.10",
-    "@tanstack/ai": "0.58.0"
+    "@tanstack/ai": "0.61.0"
   },
   "scripts": {
     "lint:fix": "oxlint src --type-aware --fix",

package/src/create-chat.ts

@@ -245,10 +245,20 @@ export function createChat<
     client.mountDevtools()
   }
 
+  // Remix has no effects, so read `options.tools` before each call that can
+  // start a run. A getter such as `get tools() { return page.tools }` then
+  // sends the current tools.
+  const syncTools = () => {
+    if (options.tools !== undefined) {
+      client.updateOptions({ tools: options.tools })
+    }
+  }
+
   const sendMessage = async (
     content: string | MultimodalContent,
     sendOptions?: SendMessageOptions,
   ) => {
+    syncTools()
     try {
       await client.sendMessage(content, undefined, sendOptions)
     } finally {
@@ -259,6 +269,7 @@ export function createChat<
   const cancelQueued = (id: string) => client.cancelQueued(id)
 
   const append = async (message: ModelMessage | UIMessage<TTools>) => {
+    syncTools()
     try {
       await client.append(message)
     } finally {
@@ -267,6 +278,7 @@ export function createChat<
   }
 
   const reload = async () => {
+    syncTools()
     try {
       await client.reload()
     } finally {
@@ -300,6 +312,7 @@ export function createChat<
     state?: 'output-available' | 'output-error'
     errorText?: string
   }) => {
+    syncTools()
     await client.addToolResult(result)
   }
 
@@ -308,6 +321,7 @@ export function createChat<
     id: string
     approved: boolean
   }) => {
+    syncTools()
     await client.addToolApprovalResponse(response)
     syncResumeState()
   }
@@ -316,6 +330,7 @@ export function createChat<
     resumeItems: Array<RunAgentResumeItem>,
     state?: ChatResumeState,
   ) => {
+    syncTools()
     const result = await client.resumeInterrupts(resumeItems, state)
     syncResumeState()
     return result
@@ -328,6 +343,7 @@ export function createChat<
           interrupt: ResolvableChatInterrupt<TTools, TInterrupts>,
         ) => undefined),
   ) => {
+    syncTools()
     if (typeof resolution === 'boolean') {
       client.resolveInterrupts(resolution)
     } else {
@@ -340,13 +356,17 @@ export function createChat<
   }
 
   const retryInterrupts = () => {
+    syncTools()
     client.retryInterrupts()
   }
 
   const resumeInterruptsUnsafe = (
     resumeItems: Array<RunAgentResumeItem>,
     state?: ChatResumeState,
-  ) => client.resumeInterruptsUnsafe(resumeItems, state)
+  ) => {
+    syncTools()
+    return client.resumeInterruptsUnsafe(resumeItems, state)
+  }
 
   function activeStructuredPart(): StructuredOutputPart | null {
     let lastUserIndex = -1

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

@@ -1,13 +1,14 @@
-import { registerWebMCPTools } from '@tanstack/ai-client'
+import { registerWebMCPTools, subscribeWebMCPTools } from '@tanstack/ai-client'
 import type {
   AnyClientTool,
   InferredClientContext,
   RegisterWebMCPToolsOptions,
+  SubscribeWebMCPToolsOptions,
 } from '@tanstack/ai-client'
 import type { Handle } from 'remix/ui'
 
-/** Options for {@link createWebMCPTools}. */
-export type CreateWebMCPToolsOptions<
+/** Options for {@link createRegisterWebMCPTools}. */
+export type CreateRegisterWebMCPToolsOptions<
   TTools extends ReadonlyArray<AnyClientTool>,
   TContext = InferredClientContext<TTools>,
 > = Omit<RegisterWebMCPToolsOptions<TTools, TContext>, 'signal'> & {
@@ -15,13 +16,19 @@ export type CreateWebMCPToolsOptions<
   onError?: (error: unknown) => void
 }
 
-type CreateWebMCPToolsArguments<
+/** @deprecated Use `CreateRegisterWebMCPToolsOptions`. Removed in 1.0.0. */
+export type CreateWebMCPToolsOptions<
+  TTools extends ReadonlyArray<AnyClientTool>,
+  TContext = InferredClientContext<TTools>,
+> = CreateRegisterWebMCPToolsOptions<TTools, TContext>
+
+type CreateRegisterWebMCPToolsArguments<
   TTools extends ReadonlyArray<AnyClientTool>,
   TContext,
 > =
-  {} extends CreateWebMCPToolsOptions<TTools, TContext>
-    ? [options?: CreateWebMCPToolsOptions<TTools, TContext>]
-    : [options: CreateWebMCPToolsOptions<TTools, TContext>]
+  {} extends CreateRegisterWebMCPToolsOptions<TTools, TContext>
+    ? [options?: CreateRegisterWebMCPToolsOptions<TTools, TContext>]
+    : [options: CreateRegisterWebMCPToolsOptions<TTools, TContext>]
 
 /**
  * Registers executable client tools with WebMCP for a Remix component.
@@ -35,18 +42,18 @@ type CreateWebMCPToolsArguments<
  * @example
  * ```tsx
  * function Products(handle: Handle) {
- *   createWebMCPTools(handle, [searchProducts])
+ *   createRegisterWebMCPTools(handle, [searchProducts])
  *   return () => <ProductList />
  * }
  * ```
  */
-export function createWebMCPTools<
+export function createRegisterWebMCPTools<
   const TTools extends ReadonlyArray<AnyClientTool>,
   TContext = InferredClientContext<TTools>,
 >(
   handle: Pick<Handle, 'signal'>,
   tools: TTools,
-  ...[options]: CreateWebMCPToolsArguments<TTools, TContext>
+  ...[options]: CreateRegisterWebMCPToolsArguments<TTools, TContext>
 ) {
   void registerWebMCPTools(tools, {
     ...options,
@@ -57,3 +64,65 @@ export function createWebMCPTools<
     }
   })
 }
+
+/**
+ * @deprecated Use `createRegisterWebMCPTools`. Removed in 1.0.0.
+ * @alias
+ */
+export const createWebMCPTools = createRegisterWebMCPTools
+
+/** Options for {@link createPageWebMCPTools}. */
+export type CreatePageWebMCPToolsOptions = Omit<
+  SubscribeWebMCPToolsOptions,
+  'signal'
+>
+
+/**
+ * Reads the WebMCP tools on the page as client tools for `createChat`.
+ *
+ * `tools` starts empty. When the page registers or removes a tool, the
+ * helper updates `tools` and calls `handle.update()`. The Handle signal stops
+ * the updates. Unsupported browsers and server rendering keep an empty array.
+ *
+ * @param handle - The Remix component Handle from setup.
+ * @param options - A filter that skips tools, and an error callback.
+ *
+ * @example
+ * ```tsx
+ * function Chat(handle: Handle) {
+ *   const page = createPageWebMCPTools(handle)
+ *   const chat = createChat(handle, {
+ *     connection,
+ *     get tools() {
+ *       return page.tools
+ *     },
+ *   })
+ *   return () => <Messages chat={chat} />
+ * }
+ * ```
+ */
+export function createPageWebMCPTools(
+  handle: Pick<Handle, 'signal' | 'update'>,
+  options?: CreatePageWebMCPToolsOptions,
+) {
+  let tools: Array<AnyClientTool> = []
+
+  subscribeWebMCPTools(
+    (nextTools) => {
+      tools = nextTools
+      void handle.update()
+    },
+    {
+      signal: handle.signal,
+      filter: (tool) => options?.filter?.(tool) ?? true,
+      onError: (error) => options?.onError?.(error),
+    },
+  )
+
+  return {
+    /** The current page tools. */
+    get tools() {
+      return tools
+    },
+  }
+}

package/src/index.ts

@@ -3,8 +3,16 @@ export { createByok } from './create-byok.ts'
 export { createRealtimeChat } from './create-realtime-chat.ts'
 export { createMcpAppBridge } from './create-mcp-app-bridge.ts'
 export type { CreateMcpAppBridgeOptions } from './create-mcp-app-bridge.ts'
-export { createWebMCPTools } from './create-web-mcp-tools.ts'
-export type { CreateWebMCPToolsOptions } from './create-web-mcp-tools.ts'
+export {
+  createPageWebMCPTools,
+  createRegisterWebMCPTools,
+  createWebMCPTools,
+} from './create-web-mcp-tools.ts'
+export type {
+  CreatePageWebMCPToolsOptions,
+  CreateRegisterWebMCPToolsOptions,
+  CreateWebMCPToolsOptions,
+} from './create-web-mcp-tools.ts'
 export type {
   DeepPartial,
   CreateChatOptions,
@@ -97,6 +105,11 @@ export {
   PartialJSONParser,
   defaultJSONParser,
   registerWebMCPTools,
+  getWebMCPTools,
+  subscribeWebMCPTools,
+  type GetWebMCPToolsOptions,
+  type SubscribeWebMCPToolsOptions,
+  type WebMCPPageTool,
   clientTools,
   webSocket,
   fetchServerSentEvents,