@assistant-ui/react-ai-sdk 0.11.1 → 0.11.5

package/README.md

@@ -1,3 +1,58 @@
 # `@assistant-ui/react-ai-sdk`
 
 Vercel AI SDK integration for `@assistant-ui/react`.
+
+## Features
+
+- Seamless integration with Vercel AI SDK v5
+- Automatic system message and frontend tools forwarding via `AssistantChatTransport`
+- Support for custom transport configuration
+
+## Usage
+
+### Basic Setup
+
+```typescript
+import { useChatRuntime } from '@assistant-ui/react-ai-sdk';
+import { AssistantRuntimeProvider } from '@assistant-ui/react';
+
+function App() {
+  // By default, uses AssistantChatTransport which forwards system messages and tools
+  const runtime = useChatRuntime();
+  
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      {/* Your assistant UI components */}
+    </AssistantRuntimeProvider>
+  );
+}
+```
+
+### Custom Transport
+
+When you need to customize the transport configuration:
+
+```typescript
+import { DefaultChatTransport } from 'ai';
+import { AssistantChatTransport } from '@assistant-ui/react-ai-sdk';
+import { useChatRuntime } from '@assistant-ui/react-ai-sdk';
+
+// Custom API URL while keeping system/tools forwarding
+const runtime = useChatRuntime({
+  transport: new AssistantChatTransport({
+    api: '/my-custom-api/chat'
+  })
+});
+
+// Or disable system/tools forwarding entirely
+const runtime = useChatRuntime({
+  transport: new DefaultChatTransport()
+});
+```
+
+**Important:** When customizing the API URL, you must explicitly use `AssistantChatTransport` to keep frontend system messages and tools forwarding.
+
+## AssistantChatTransport vs DefaultChatTransport
+
+- **AssistantChatTransport** (default): Automatically forwards system messages and frontend tools from the Assistant UI context to your backend API
+- **DefaultChatTransport**: Standard AI SDK transport without automatic forwarding

package/dist/ui/adapters/aiSDKFormatAdapter.d.ts

@@ -0,0 +1,5 @@
+import { UIMessage } from "ai";
+import { MessageFormatAdapter } from "@assistant-ui/react";
+export type AISDKStorageFormat = Omit<UIMessage, "id">;
+export declare const aiSDKV5FormatAdapter: MessageFormatAdapter<UIMessage, AISDKStorageFormat>;
+//# sourceMappingURL=aiSDKFormatAdapter.d.ts.map

package/dist/ui/adapters/aiSDKFormatAdapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"aiSDKFormatAdapter.d.ts","sourceRoot":"","sources":["../../../src/ui/adapters/aiSDKFormatAdapter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAC/B,OAAO,EACL,oBAAoB,EAGrB,MAAM,qBAAqB,CAAC;AAG7B,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;AAEvD,eAAO,MAAM,oBAAoB,EAAE,oBAAoB,CACrD,SAAS,EACT,kBAAkB,CA6BnB,CAAC"}

package/dist/ui/adapters/aiSDKFormatAdapter.js

@@ -0,0 +1,28 @@
+// src/ui/adapters/aiSDKFormatAdapter.ts
+var aiSDKV5FormatAdapter = {
+  format: "ai-sdk/v5",
+  encode({
+    message: { id, parts, ...message }
+  }) {
+    return {
+      ...message,
+      parts: parts.filter((part) => part.type !== "file")
+    };
+  },
+  decode(stored) {
+    return {
+      parentId: stored.parent_id,
+      message: {
+        id: stored.id,
+        ...stored.content
+      }
+    };
+  },
+  getId(message) {
+    return message.id;
+  }
+};
+export {
+  aiSDKV5FormatAdapter
+};
+//# sourceMappingURL=aiSDKFormatAdapter.js.map

package/dist/ui/adapters/aiSDKFormatAdapter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/adapters/aiSDKFormatAdapter.ts"],"sourcesContent":["import { UIMessage } from \"ai\";\nimport {\n  MessageFormatAdapter,\n  MessageFormatItem,\n  MessageStorageEntry,\n} from \"@assistant-ui/react\";\n\n// Storage format for AI SDK messages - just the UIMessage\nexport type AISDKStorageFormat = Omit<UIMessage, \"id\">;\n\nexport const aiSDKV5FormatAdapter: MessageFormatAdapter<\n  UIMessage,\n  AISDKStorageFormat\n> = {\n  format: \"ai-sdk/v5\",\n\n  encode({\n    message: { id, parts, ...message },\n  }: MessageFormatItem<UIMessage>): AISDKStorageFormat {\n    // Filter out FileContentParts until they are supported\n    return {\n      ...message,\n      parts: parts.filter((part) => part.type !== \"file\"),\n    };\n  },\n\n  decode(\n    stored: MessageStorageEntry<AISDKStorageFormat>,\n  ): MessageFormatItem<UIMessage> {\n    return {\n      parentId: stored.parent_id,\n      message: {\n        id: stored.id,\n        ...stored.content,\n      },\n    };\n  },\n\n  getId(message: UIMessage): string {\n    return message.id;\n  },\n};\n"],"mappings":";AAUO,IAAM,uBAGT;AAAA,EACF,QAAQ;AAAA,EAER,OAAO;AAAA,IACL,SAAS,EAAE,IAAI,OAAO,GAAG,QAAQ;AAAA,EACnC,GAAqD;AAEnD,WAAO;AAAA,MACL,GAAG;AAAA,MACH,OAAO,MAAM,OAAO,CAAC,SAAS,KAAK,SAAS,MAAM;AAAA,IACpD;AAAA,EACF;AAAA,EAEA,OACE,QAC8B;AAC9B,WAAO;AAAA,MACL,UAAU,OAAO;AAAA,MACjB,SAAS;AAAA,QACP,IAAI,OAAO;AAAA,QACX,GAAG,OAAO;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AAAA,EAEA,MAAM,SAA4B;AAChC,WAAO,QAAQ;AAAA,EACjB;AACF;","names":[]}

package/dist/ui/index.d.ts

@@ -1,2 +1,4 @@
 export { useAISDKRuntime } from "./use-chat/useAISDKRuntime";
+export { useChatRuntime } from "./use-chat/useChatRuntime";
+export { AssistantChatTransport } from "./use-chat/AssistantChatTransport";
 //# sourceMappingURL=index.d.ts.map

package/dist/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC"}

package/dist/ui/index.js

@@ -1,6 +1,10 @@
 // src/ui/index.ts
 import { useAISDKRuntime } from "./use-chat/useAISDKRuntime.js";
+import { useChatRuntime } from "./use-chat/useChatRuntime.js";
+import { AssistantChatTransport } from "./use-chat/AssistantChatTransport.js";
 export {
-  useAISDKRuntime
+  AssistantChatTransport,
+  useAISDKRuntime,
+  useChatRuntime
 };
 //# sourceMappingURL=index.js.map

package/dist/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ui/index.ts"],"sourcesContent":["export { useAISDKRuntime } from \"./use-chat/useAISDKRuntime\";\n"],"mappings":";AAAA,SAAS,uBAAuB;","names":[]}
+{"version":3,"sources":["../../src/ui/index.ts"],"sourcesContent":["export { useAISDKRuntime } from \"./use-chat/useAISDKRuntime\";\nexport { useChatRuntime } from \"./use-chat/useChatRuntime\";\nexport { AssistantChatTransport } from \"./use-chat/AssistantChatTransport\";\n"],"mappings":";AAAA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,8BAA8B;","names":[]}

package/dist/ui/use-chat/AssistantChatTransport.d.ts

@@ -0,0 +1,8 @@
+import { AssistantRuntime } from "@assistant-ui/react";
+import { DefaultChatTransport, HttpChatTransportInitOptions, UIMessage } from "ai";
+export declare class AssistantChatTransport<UI_MESSAGE extends UIMessage> extends DefaultChatTransport<UI_MESSAGE> {
+    private runtime;
+    constructor(initOptions?: HttpChatTransportInitOptions<UI_MESSAGE>);
+    setRuntime(runtime: AssistantRuntime): void;
+}
+//# sourceMappingURL=AssistantChatTransport.d.ts.map

package/dist/ui/use-chat/AssistantChatTransport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssistantChatTransport.d.ts","sourceRoot":"","sources":["../../../src/ui/use-chat/AssistantChatTransport.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAQ,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EACL,oBAAoB,EACpB,4BAA4B,EAE5B,SAAS,EACV,MAAM,IAAI,CAAC;AAyBZ,qBAAa,sBAAsB,CACjC,UAAU,SAAS,SAAS,CAC5B,SAAQ,oBAAoB,CAAC,UAAU,CAAC;IACxC,OAAO,CAAC,OAAO,CAA+B;gBAClC,WAAW,CAAC,EAAE,4BAA4B,CAAC,UAAU,CAAC;IA+BlE,UAAU,CAAC,OAAO,EAAE,gBAAgB;CAGrC"}

package/dist/ui/use-chat/AssistantChatTransport.js

@@ -0,0 +1,60 @@
+// src/ui/use-chat/AssistantChatTransport.tsx
+import {
+  DefaultChatTransport
+} from "ai";
+import z from "zod";
+var toAISDKTools = (tools) => {
+  return Object.fromEntries(
+    Object.entries(tools).map(([name, tool]) => [
+      name,
+      {
+        ...tool.description ? { description: tool.description } : void 0,
+        parameters: tool.parameters instanceof z.ZodType ? z.toJSONSchema(tool.parameters) : tool.parameters
+      }
+    ])
+  );
+};
+var getEnabledTools = (tools) => {
+  return Object.fromEntries(
+    Object.entries(tools).filter(
+      ([, tool]) => !tool.disabled && tool.type !== "backend"
+    )
+  );
+};
+var AssistantChatTransport = class extends DefaultChatTransport {
+  runtime;
+  constructor(initOptions) {
+    super({
+      ...initOptions,
+      prepareSendMessagesRequest: async (options) => {
+        const context = this.runtime?.thread.getModelContext();
+        const optionsEx = {
+          ...options,
+          body: {
+            system: context?.system,
+            tools: toAISDKTools(getEnabledTools(context?.tools ?? {})),
+            ...options?.body
+          }
+        };
+        const preparedRequest = await initOptions?.prepareSendMessagesRequest?.(optionsEx);
+        return {
+          ...preparedRequest,
+          body: preparedRequest?.body ?? {
+            ...optionsEx.body,
+            id: options.id,
+            messages: options.messages,
+            trigger: options.trigger,
+            messageId: options.messageId
+          }
+        };
+      }
+    });
+  }
+  setRuntime(runtime) {
+    this.runtime = runtime;
+  }
+};
+export {
+  AssistantChatTransport
+};
+//# sourceMappingURL=AssistantChatTransport.js.map

package/dist/ui/use-chat/AssistantChatTransport.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/use-chat/AssistantChatTransport.tsx"],"sourcesContent":["import { AssistantRuntime, Tool } from \"@assistant-ui/react\";\nimport {\n  DefaultChatTransport,\n  HttpChatTransportInitOptions,\n  JSONSchema7,\n  UIMessage,\n} from \"ai\";\nimport z from \"zod\";\n\nconst toAISDKTools = (tools: Record<string, Tool>) => {\n  return Object.fromEntries(\n    Object.entries(tools).map(([name, tool]) => [\n      name,\n      {\n        ...(tool.description ? { description: tool.description } : undefined),\n        parameters: (tool.parameters instanceof z.ZodType\n          ? z.toJSONSchema(tool.parameters)\n          : tool.parameters) as JSONSchema7,\n      },\n    ]),\n  );\n};\n\nconst getEnabledTools = (tools: Record<string, Tool>) => {\n  return Object.fromEntries(\n    Object.entries(tools).filter(\n      ([, tool]) => !tool.disabled && tool.type !== \"backend\",\n    ),\n  );\n};\n\nexport class AssistantChatTransport<\n  UI_MESSAGE extends UIMessage,\n> extends DefaultChatTransport<UI_MESSAGE> {\n  private runtime: AssistantRuntime | undefined;\n  constructor(initOptions?: HttpChatTransportInitOptions<UI_MESSAGE>) {\n    super({\n      ...initOptions,\n      prepareSendMessagesRequest: async (options) => {\n        const context = this.runtime?.thread.getModelContext();\n\n        const optionsEx = {\n          ...options,\n          body: {\n            system: context?.system,\n            tools: toAISDKTools(getEnabledTools(context?.tools ?? {})),\n            ...options?.body,\n          },\n        };\n        const preparedRequest =\n          await initOptions?.prepareSendMessagesRequest?.(optionsEx);\n\n        return {\n          ...preparedRequest,\n          body: preparedRequest?.body ?? {\n            ...optionsEx.body,\n            id: options.id,\n            messages: options.messages,\n            trigger: options.trigger,\n            messageId: options.messageId,\n          },\n        };\n      },\n    });\n  }\n\n  setRuntime(runtime: AssistantRuntime) {\n    this.runtime = runtime;\n  }\n}\n"],"mappings":";AACA;AAAA,EACE;AAAA,OAIK;AACP,OAAO,OAAO;AAEd,IAAM,eAAe,CAAC,UAAgC;AACpD,SAAO,OAAO;AAAA,IACZ,OAAO,QAAQ,KAAK,EAAE,IAAI,CAAC,CAAC,MAAM,IAAI,MAAM;AAAA,MAC1C;AAAA,MACA;AAAA,QACE,GAAI,KAAK,cAAc,EAAE,aAAa,KAAK,YAAY,IAAI;AAAA,QAC3D,YAAa,KAAK,sBAAsB,EAAE,UACtC,EAAE,aAAa,KAAK,UAAU,IAC9B,KAAK;AAAA,MACX;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAEA,IAAM,kBAAkB,CAAC,UAAgC;AACvD,SAAO,OAAO;AAAA,IACZ,OAAO,QAAQ,KAAK,EAAE;AAAA,MACpB,CAAC,CAAC,EAAE,IAAI,MAAM,CAAC,KAAK,YAAY,KAAK,SAAS;AAAA,IAChD;AAAA,EACF;AACF;AAEO,IAAM,yBAAN,cAEG,qBAAiC;AAAA,EACjC;AAAA,EACR,YAAY,aAAwD;AAClE,UAAM;AAAA,MACJ,GAAG;AAAA,MACH,4BAA4B,OAAO,YAAY;AAC7C,cAAM,UAAU,KAAK,SAAS,OAAO,gBAAgB;AAErD,cAAM,YAAY;AAAA,UAChB,GAAG;AAAA,UACH,MAAM;AAAA,YACJ,QAAQ,SAAS;AAAA,YACjB,OAAO,aAAa,gBAAgB,SAAS,SAAS,CAAC,CAAC,CAAC;AAAA,YACzD,GAAG,SAAS;AAAA,UACd;AAAA,QACF;AACA,cAAM,kBACJ,MAAM,aAAa,6BAA6B,SAAS;AAE3D,eAAO;AAAA,UACL,GAAG;AAAA,UACH,MAAM,iBAAiB,QAAQ;AAAA,YAC7B,GAAG,UAAU;AAAA,YACb,IAAI,QAAQ;AAAA,YACZ,UAAU,QAAQ;AAAA,YAClB,SAAS,QAAQ;AAAA,YACjB,WAAW,QAAQ;AAAA,UACrB;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,WAAW,SAA2B;AACpC,SAAK,UAAU;AAAA,EACjB;AACF;","names":[]}

package/dist/ui/use-chat/useAISDKRuntime.d.ts

@@ -1,7 +1,9 @@
 import type { useChat } from "@ai-sdk/react";
-import { ExternalStoreAdapter } from "@assistant-ui/react";
+import { ExternalStoreAdapter, ThreadHistoryAdapter, AssistantRuntime } from "@assistant-ui/react";
 export type AISDKRuntimeAdapter = {
-    adapters?: NonNullable<ExternalStoreAdapter["adapters"]> | undefined;
+    adapters?: (NonNullable<ExternalStoreAdapter["adapters"]> & {
+        history?: ThreadHistoryAdapter | undefined;
+    }) | undefined;
 };
-export declare const useAISDKRuntime: (chatHelpers: ReturnType<typeof useChat>, adapter?: AISDKRuntimeAdapter) => import("@assistant-ui/react").AssistantRuntime;
+export declare const useAISDKRuntime: (chatHelpers: ReturnType<typeof useChat>, adapter?: AISDKRuntimeAdapter) => AssistantRuntime;
 //# sourceMappingURL=useAISDKRuntime.d.ts.map

package/dist/ui/use-chat/useAISDKRuntime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAISDKRuntime.d.ts","sourceRoot":"","sources":["../../../src/ui/use-chat/useAISDKRuntime.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAM7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAG3D,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,WAAW,CAAC,oBAAoB,CAAC,UAAU,CAAC,CAAC,GAAG,SAAS,CAAC;CACtE,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,aAAa,UAAU,CAAC,OAAO,OAAO,CAAC,EACvC,UAAS,mBAAwB,mDA+ClC,CAAC"}
+{"version":3,"file":"useAISDKRuntime.d.ts","sourceRoot":"","sources":["../../../src/ui/use-chat/useAISDKRuntime.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAEL,oBAAoB,EACpB,oBAAoB,EACpB,gBAAgB,EACjB,MAAM,qBAAqB,CAAC;AAS7B,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EACL,CAAC,WAAW,CAAC,oBAAoB,CAAC,UAAU,CAAC,CAAC,GAAG;QAC/C,OAAO,CAAC,EAAE,oBAAoB,GAAG,SAAS,CAAC;KAC5C,CAAC,GACF,SAAS,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,aAAa,UAAU,CAAC,OAAO,OAAO,CAAC,EACvC,UAAS,mBAAwB,qBAgElC,CAAC"}

package/dist/ui/use-chat/useAISDKRuntime.js

@@ -1,24 +1,42 @@
 "use client";
 
 // src/ui/use-chat/useAISDKRuntime.tsx
-import { useExternalStoreRuntime } from "@assistant-ui/react";
+import {
+  useExternalStoreRuntime
+} from "@assistant-ui/react";
 import { sliceMessagesUntil } from "../utils/sliceMessagesUntil.js";
 import { toCreateMessage } from "../utils/toCreateMessage.js";
 import { vercelAttachmentAdapter } from "../utils/vercelAttachmentAdapter.js";
 import { getVercelAIMessages } from "../getVercelAIMessages.js";
 import { AISDKMessageConverter } from "../utils/convertMessage.js";
+import { aiSDKV5FormatAdapter } from "../adapters/aiSDKFormatAdapter.js";
+import { useExternalHistory } from "./useExternalHistory.js";
 var useAISDKRuntime = (chatHelpers, adapter = {}) => {
   const messages = AISDKMessageConverter.useThreadMessages({
     isRunning: chatHelpers.status === "submitted" || chatHelpers.status == "streaming",
     messages: chatHelpers.messages
   });
+  const isLoading = useExternalHistory(
+    {
+      get current() {
+        return runtime;
+      }
+    },
+    adapter.adapters?.history,
+    AISDKMessageConverter.toThreadMessages,
+    aiSDKV5FormatAdapter,
+    (messages2) => {
+      chatHelpers.setMessages(messages2);
+    }
+  );
   const runtime = useExternalStoreRuntime({
     isRunning: chatHelpers.status === "submitted" || chatHelpers.status === "streaming",
     messages,
     setMessages: (messages2) => chatHelpers.setMessages(messages2.map(getVercelAIMessages).flat()),
     onCancel: async () => chatHelpers.stop(),
     onNew: async (message) => {
-      await chatHelpers.sendMessage(await toCreateMessage(message));
+      const createMessage = await toCreateMessage(message);
+      await chatHelpers.sendMessage(createMessage);
     },
     onEdit: async (message) => {
       const newMessages = sliceMessagesUntil(
@@ -26,7 +44,8 @@ var useAISDKRuntime = (chatHelpers, adapter = {}) => {
         message.parentId
       );
       chatHelpers.setMessages(newMessages);
-      await chatHelpers.sendMessage(await toCreateMessage(message));
+      const createMessage = await toCreateMessage(message);
+      await chatHelpers.sendMessage(createMessage);
     },
     onReload: async (parentId) => {
       const newMessages = sliceMessagesUntil(chatHelpers.messages, parentId);
@@ -43,7 +62,8 @@ var useAISDKRuntime = (chatHelpers, adapter = {}) => {
     adapters: {
       attachments: vercelAttachmentAdapter,
       ...adapter.adapters
-    }
+    },
+    isLoading
   });
   return runtime;
 };

package/dist/ui/use-chat/useAISDKRuntime.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/use-chat/useAISDKRuntime.tsx"],"sourcesContent":["\"use client\";\n\nimport type { useChat } from \"@ai-sdk/react\";\nimport { useExternalStoreRuntime } from \"@assistant-ui/react\";\nimport { sliceMessagesUntil } from \"../utils/sliceMessagesUntil\";\nimport { toCreateMessage } from \"../utils/toCreateMessage\";\nimport { vercelAttachmentAdapter } from \"../utils/vercelAttachmentAdapter\";\nimport { getVercelAIMessages } from \"../getVercelAIMessages\";\nimport { ExternalStoreAdapter } from \"@assistant-ui/react\";\nimport { AISDKMessageConverter } from \"../utils/convertMessage\";\n\nexport type AISDKRuntimeAdapter = {\n  adapters?: NonNullable<ExternalStoreAdapter[\"adapters\"]> | undefined;\n};\n\nexport const useAISDKRuntime = (\n  chatHelpers: ReturnType<typeof useChat>,\n  adapter: AISDKRuntimeAdapter = {},\n) => {\n  const messages = AISDKMessageConverter.useThreadMessages({\n    isRunning:\n      chatHelpers.status === \"submitted\" || chatHelpers.status == \"streaming\",\n    messages: chatHelpers.messages,\n  });\n\n  const runtime = useExternalStoreRuntime({\n    isRunning:\n      chatHelpers.status === \"submitted\" || chatHelpers.status === \"streaming\",\n    messages,\n    setMessages: (messages) =>\n      chatHelpers.setMessages(messages.map(getVercelAIMessages).flat()),\n    onCancel: async () => chatHelpers.stop(),\n    onNew: async (message) => {\n      await chatHelpers.sendMessage(await toCreateMessage(message));\n    },\n    onEdit: async (message) => {\n      const newMessages = sliceMessagesUntil(\n        chatHelpers.messages,\n        message.parentId,\n      );\n      chatHelpers.setMessages(newMessages);\n\n      await chatHelpers.sendMessage(await toCreateMessage(message));\n    },\n    onReload: async (parentId: string | null) => {\n      const newMessages = sliceMessagesUntil(chatHelpers.messages, parentId);\n      chatHelpers.setMessages(newMessages);\n\n      await chatHelpers.regenerate();\n    },\n    onAddToolResult: ({ toolCallId, result }) => {\n      chatHelpers.addToolResult({\n        tool: toolCallId,\n        toolCallId,\n        output: result,\n      });\n    },\n    adapters: {\n      attachments: vercelAttachmentAdapter,\n      ...adapter.adapters,\n    },\n  });\n\n  return runtime;\n};\n"],"mappings":";;;AAGA,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AACxC,SAAS,2BAA2B;AAEpC,SAAS,6BAA6B;AAM/B,IAAM,kBAAkB,CAC7B,aACA,UAA+B,CAAC,MAC7B;AACH,QAAM,WAAW,sBAAsB,kBAAkB;AAAA,IACvD,WACE,YAAY,WAAW,eAAe,YAAY,UAAU;AAAA,IAC9D,UAAU,YAAY;AAAA,EACxB,CAAC;AAED,QAAM,UAAU,wBAAwB;AAAA,IACtC,WACE,YAAY,WAAW,eAAe,YAAY,WAAW;AAAA,IAC/D;AAAA,IACA,aAAa,CAACA,cACZ,YAAY,YAAYA,UAAS,IAAI,mBAAmB,EAAE,KAAK,CAAC;AAAA,IAClE,UAAU,YAAY,YAAY,KAAK;AAAA,IACvC,OAAO,OAAO,YAAY;AACxB,YAAM,YAAY,YAAY,MAAM,gBAAgB,OAAO,CAAC;AAAA,IAC9D;AAAA,IACA,QAAQ,OAAO,YAAY;AACzB,YAAM,cAAc;AAAA,QAClB,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AACA,kBAAY,YAAY,WAAW;AAEnC,YAAM,YAAY,YAAY,MAAM,gBAAgB,OAAO,CAAC;AAAA,IAC9D;AAAA,IACA,UAAU,OAAO,aAA4B;AAC3C,YAAM,cAAc,mBAAmB,YAAY,UAAU,QAAQ;AACrE,kBAAY,YAAY,WAAW;AAEnC,YAAM,YAAY,WAAW;AAAA,IAC/B;AAAA,IACA,iBAAiB,CAAC,EAAE,YAAY,OAAO,MAAM;AAC3C,kBAAY,cAAc;AAAA,QACxB,MAAM;AAAA,QACN;AAAA,QACA,QAAQ;AAAA,MACV,CAAC;AAAA,IACH;AAAA,IACA,UAAU;AAAA,MACR,aAAa;AAAA,MACb,GAAG,QAAQ;AAAA,IACb;AAAA,EACF,CAAC;AAED,SAAO;AACT;","names":["messages"]}
+{"version":3,"sources":["../../../src/ui/use-chat/useAISDKRuntime.tsx"],"sourcesContent":["\"use client\";\n\nimport type { useChat } from \"@ai-sdk/react\";\nimport {\n  useExternalStoreRuntime,\n  ExternalStoreAdapter,\n  ThreadHistoryAdapter,\n  AssistantRuntime,\n} from \"@assistant-ui/react\";\nimport { sliceMessagesUntil } from \"../utils/sliceMessagesUntil\";\nimport { toCreateMessage } from \"../utils/toCreateMessage\";\nimport { vercelAttachmentAdapter } from \"../utils/vercelAttachmentAdapter\";\nimport { getVercelAIMessages } from \"../getVercelAIMessages\";\nimport { AISDKMessageConverter } from \"../utils/convertMessage\";\nimport { aiSDKV5FormatAdapter } from \"../adapters/aiSDKFormatAdapter\";\nimport { useExternalHistory } from \"./useExternalHistory\";\n\nexport type AISDKRuntimeAdapter = {\n  adapters?:\n    | (NonNullable<ExternalStoreAdapter[\"adapters\"]> & {\n        history?: ThreadHistoryAdapter | undefined;\n      })\n    | undefined;\n};\n\nexport const useAISDKRuntime = (\n  chatHelpers: ReturnType<typeof useChat>,\n  adapter: AISDKRuntimeAdapter = {},\n) => {\n  const messages = AISDKMessageConverter.useThreadMessages({\n    isRunning:\n      chatHelpers.status === \"submitted\" || chatHelpers.status == \"streaming\",\n    messages: chatHelpers.messages,\n  });\n\n  const isLoading = useExternalHistory(\n    {\n      get current(): AssistantRuntime {\n        return runtime;\n      },\n    },\n    adapter.adapters?.history,\n    AISDKMessageConverter.toThreadMessages,\n    aiSDKV5FormatAdapter,\n    (messages) => {\n      chatHelpers.setMessages(messages);\n    },\n  );\n\n  const runtime = useExternalStoreRuntime({\n    isRunning:\n      chatHelpers.status === \"submitted\" || chatHelpers.status === \"streaming\",\n    messages,\n    setMessages: (messages) =>\n      chatHelpers.setMessages(messages.map(getVercelAIMessages).flat()),\n    onCancel: async () => chatHelpers.stop(),\n    onNew: async (message) => {\n      const createMessage = await toCreateMessage(message);\n      await chatHelpers.sendMessage(createMessage);\n    },\n    onEdit: async (message) => {\n      const newMessages = sliceMessagesUntil(\n        chatHelpers.messages,\n        message.parentId,\n      );\n      chatHelpers.setMessages(newMessages);\n\n      const createMessage = await toCreateMessage(message);\n      await chatHelpers.sendMessage(createMessage);\n    },\n    onReload: async (parentId: string | null) => {\n      const newMessages = sliceMessagesUntil(chatHelpers.messages, parentId);\n      chatHelpers.setMessages(newMessages);\n\n      await chatHelpers.regenerate();\n    },\n    onAddToolResult: ({ toolCallId, result }) => {\n      chatHelpers.addToolResult({\n        tool: toolCallId,\n        toolCallId,\n        output: result,\n      });\n    },\n    adapters: {\n      attachments: vercelAttachmentAdapter,\n      ...adapter.adapters,\n    },\n    isLoading,\n  });\n\n  return runtime;\n};\n"],"mappings":";;;AAGA;AAAA,EACE;AAAA,OAIK;AACP,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AACxC,SAAS,2BAA2B;AACpC,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AACrC,SAAS,0BAA0B;AAU5B,IAAM,kBAAkB,CAC7B,aACA,UAA+B,CAAC,MAC7B;AACH,QAAM,WAAW,sBAAsB,kBAAkB;AAAA,IACvD,WACE,YAAY,WAAW,eAAe,YAAY,UAAU;AAAA,IAC9D,UAAU,YAAY;AAAA,EACxB,CAAC;AAED,QAAM,YAAY;AAAA,IAChB;AAAA,MACE,IAAI,UAA4B;AAC9B,eAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,QAAQ,UAAU;AAAA,IAClB,sBAAsB;AAAA,IACtB;AAAA,IACA,CAACA,cAAa;AACZ,kBAAY,YAAYA,SAAQ;AAAA,IAClC;AAAA,EACF;AAEA,QAAM,UAAU,wBAAwB;AAAA,IACtC,WACE,YAAY,WAAW,eAAe,YAAY,WAAW;AAAA,IAC/D;AAAA,IACA,aAAa,CAACA,cACZ,YAAY,YAAYA,UAAS,IAAI,mBAAmB,EAAE,KAAK,CAAC;AAAA,IAClE,UAAU,YAAY,YAAY,KAAK;AAAA,IACvC,OAAO,OAAO,YAAY;AACxB,YAAM,gBAAgB,MAAM,gBAAgB,OAAO;AACnD,YAAM,YAAY,YAAY,aAAa;AAAA,IAC7C;AAAA,IACA,QAAQ,OAAO,YAAY;AACzB,YAAM,cAAc;AAAA,QAClB,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AACA,kBAAY,YAAY,WAAW;AAEnC,YAAM,gBAAgB,MAAM,gBAAgB,OAAO;AACnD,YAAM,YAAY,YAAY,aAAa;AAAA,IAC7C;AAAA,IACA,UAAU,OAAO,aAA4B;AAC3C,YAAM,cAAc,mBAAmB,YAAY,UAAU,QAAQ;AACrE,kBAAY,YAAY,WAAW;AAEnC,YAAM,YAAY,WAAW;AAAA,IAC/B;AAAA,IACA,iBAAiB,CAAC,EAAE,YAAY,OAAO,MAAM;AAC3C,kBAAY,cAAc;AAAA,QACxB,MAAM;AAAA,QACN;AAAA,QACA,QAAQ;AAAA,MACV,CAAC;AAAA,IACH;AAAA,IACA,UAAU;AAAA,MACR,aAAa;AAAA,MACb,GAAG,QAAQ;AAAA,IACb;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AACT;","names":["messages"]}

package/dist/ui/use-chat/useChatRuntime.d.ts

@@ -0,0 +1,12 @@
+import { type UIMessage } from "@ai-sdk/react";
+import type { AssistantCloud } from "assistant-cloud";
+import { AssistantRuntime } from "@assistant-ui/react";
+import { type AISDKRuntimeAdapter } from "./useAISDKRuntime";
+import { ChatInit } from "ai";
+export type UseChatRuntimeOptions<UI_MESSAGE extends UIMessage = UIMessage> = ChatInit<UI_MESSAGE> & {
+    cloud?: AssistantCloud | undefined;
+    adapters?: AISDKRuntimeAdapter["adapters"] | undefined;
+};
+export declare const useChatThreadRuntime: <UI_MESSAGE extends UIMessage = UIMessage>(options?: UseChatRuntimeOptions<UI_MESSAGE>) => AssistantRuntime;
+export declare const useChatRuntime: <UI_MESSAGE extends UIMessage = UIMessage>({ cloud, ...options }?: UseChatRuntimeOptions<UI_MESSAGE>) => AssistantRuntime;
+//# sourceMappingURL=useChatRuntime.d.ts.map

package/dist/ui/use-chat/useChatRuntime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChatRuntime.d.ts","sourceRoot":"","sources":["../../../src/ui/use-chat/useChatRuntime.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EACL,gBAAgB,EAIjB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAmB,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC9E,OAAO,EAAE,QAAQ,EAAE,MAAM,IAAI,CAAC;AAG9B,MAAM,MAAM,qBAAqB,CAAC,UAAU,SAAS,SAAS,GAAG,SAAS,IACxE,QAAQ,CAAC,UAAU,CAAC,GAAG;IACrB,KAAK,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;IACnC,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC;CACxD,CAAC;AAEJ,eAAO,MAAM,oBAAoB,GAAI,UAAU,SAAS,SAAS,GAAG,SAAS,EAC3E,UAAU,qBAAqB,CAAC,UAAU,CAAC,KAC1C,gBA2BF,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,UAAU,SAAS,SAAS,GAAG,SAAS,EAAE,wBAGtE,qBAAqB,CAAC,UAAU,CAAM,KAAG,gBAQ3C,CAAC"}

package/dist/ui/use-chat/useChatRuntime.js

@@ -0,0 +1,51 @@
+"use client";
+
+// src/ui/use-chat/useChatRuntime.tsx
+import { useChat } from "@ai-sdk/react";
+import {
+  unstable_useCloudThreadListAdapter,
+  unstable_useRemoteThreadListRuntime,
+  useRuntimeAdapters
+} from "@assistant-ui/react";
+import { useAISDKRuntime } from "./useAISDKRuntime.js";
+import { AssistantChatTransport } from "./AssistantChatTransport.js";
+var useChatThreadRuntime = (options) => {
+  const {
+    adapters,
+    transport: transportOptions,
+    ...chatOptions
+  } = options ?? {};
+  const transport = transportOptions ?? new AssistantChatTransport();
+  const contextAdapters = useRuntimeAdapters();
+  const chat = useChat({
+    ...chatOptions,
+    transport
+  });
+  const runtime = useAISDKRuntime(chat, {
+    adapters: {
+      ...contextAdapters,
+      ...adapters
+    }
+  });
+  if (transport instanceof AssistantChatTransport) {
+    transport.setRuntime(runtime);
+  }
+  return runtime;
+};
+var useChatRuntime = ({
+  cloud,
+  ...options
+} = {}) => {
+  const cloudAdapter = unstable_useCloudThreadListAdapter({ cloud });
+  return unstable_useRemoteThreadListRuntime({
+    runtimeHook: function RuntimeHook() {
+      return useChatThreadRuntime(options);
+    },
+    adapter: cloudAdapter
+  });
+};
+export {
+  useChatRuntime,
+  useChatThreadRuntime
+};
+//# sourceMappingURL=useChatRuntime.js.map

package/dist/ui/use-chat/useChatRuntime.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/use-chat/useChatRuntime.tsx"],"sourcesContent":["\"use client\";\n\nimport { useChat, type UIMessage } from \"@ai-sdk/react\";\nimport type { AssistantCloud } from \"assistant-cloud\";\nimport {\n  AssistantRuntime,\n  unstable_useCloudThreadListAdapter,\n  unstable_useRemoteThreadListRuntime,\n  useRuntimeAdapters,\n} from \"@assistant-ui/react\";\nimport { useAISDKRuntime, type AISDKRuntimeAdapter } from \"./useAISDKRuntime\";\nimport { ChatInit } from \"ai\";\nimport { AssistantChatTransport } from \"./AssistantChatTransport\";\n\nexport type UseChatRuntimeOptions<UI_MESSAGE extends UIMessage = UIMessage> =\n  ChatInit<UI_MESSAGE> & {\n    cloud?: AssistantCloud | undefined;\n    adapters?: AISDKRuntimeAdapter[\"adapters\"] | undefined;\n  };\n\nexport const useChatThreadRuntime = <UI_MESSAGE extends UIMessage = UIMessage>(\n  options?: UseChatRuntimeOptions<UI_MESSAGE>,\n): AssistantRuntime => {\n  const {\n    adapters,\n    transport: transportOptions,\n    ...chatOptions\n  } = options ?? {};\n  const transport = transportOptions ?? new AssistantChatTransport();\n\n  // Get adapters from context (including history adapter from cloud)\n  const contextAdapters = useRuntimeAdapters();\n\n  const chat = useChat({\n    ...chatOptions,\n    transport,\n  });\n\n  const runtime = useAISDKRuntime(chat as any, {\n    adapters: {\n      ...contextAdapters,\n      ...adapters,\n    },\n  });\n  if (transport instanceof AssistantChatTransport) {\n    transport.setRuntime(runtime);\n  }\n\n  return runtime;\n};\n\nexport const useChatRuntime = <UI_MESSAGE extends UIMessage = UIMessage>({\n  cloud,\n  ...options\n}: UseChatRuntimeOptions<UI_MESSAGE> = {}): AssistantRuntime => {\n  const cloudAdapter = unstable_useCloudThreadListAdapter({ cloud });\n  return unstable_useRemoteThreadListRuntime({\n    runtimeHook: function RuntimeHook() {\n      return useChatThreadRuntime(options);\n    },\n    adapter: cloudAdapter,\n  });\n};\n"],"mappings":";;;AAEA,SAAS,eAA+B;AAExC;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAiD;AAE1D,SAAS,8BAA8B;AAQhC,IAAM,uBAAuB,CAClC,YACqB;AACrB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,GAAG;AAAA,EACL,IAAI,WAAW,CAAC;AAChB,QAAM,YAAY,oBAAoB,IAAI,uBAAuB;AAGjE,QAAM,kBAAkB,mBAAmB;AAE3C,QAAM,OAAO,QAAQ;AAAA,IACnB,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AAED,QAAM,UAAU,gBAAgB,MAAa;AAAA,IAC3C,UAAU;AAAA,MACR,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,EACF,CAAC;AACD,MAAI,qBAAqB,wBAAwB;AAC/C,cAAU,WAAW,OAAO;AAAA,EAC9B;AAEA,SAAO;AACT;AAEO,IAAM,iBAAiB,CAA2C;AAAA,EACvE;AAAA,EACA,GAAG;AACL,IAAuC,CAAC,MAAwB;AAC9D,QAAM,eAAe,mCAAmC,EAAE,MAAM,CAAC;AACjE,SAAO,oCAAoC;AAAA,IACzC,aAAa,SAAS,cAAc;AAClC,aAAO,qBAAqB,OAAO;AAAA,IACrC;AAAA,IACA,SAAS;AAAA,EACX,CAAC;AACH;","names":[]}

package/dist/ui/use-chat/useExternalHistory.d.ts

@@ -0,0 +1,5 @@
+import { AssistantRuntime, ThreadHistoryAdapter, ThreadMessage, MessageFormatAdapter, MessageFormatRepository, ExportedMessageRepository } from "@assistant-ui/react";
+import { RefObject } from "react";
+export declare const toExportedMessageRepository: <TMessage>(toThreadMessages: (messages: TMessage[]) => ThreadMessage[], messages: MessageFormatRepository<TMessage>) => ExportedMessageRepository;
+export declare const useExternalHistory: <TMessage>(runtimeRef: RefObject<AssistantRuntime>, historyAdapter: ThreadHistoryAdapter | undefined, toThreadMessages: (messages: TMessage[]) => ThreadMessage[], storageFormatAdapter: MessageFormatAdapter<TMessage, any>, onSetMessages: (messages: TMessage[]) => void) => boolean;
+//# sourceMappingURL=useExternalHistory.d.ts.map

package/dist/ui/use-chat/useExternalHistory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExternalHistory.d.ts","sourceRoot":"","sources":["../../../src/ui/use-chat/useExternalHistory.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,aAAa,EACb,oBAAoB,EAEpB,uBAAuB,EACvB,yBAAyB,EAE1B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAA+B,SAAS,EAAE,MAAM,OAAO,CAAC;AAI/D,eAAO,MAAM,2BAA2B,GAAI,QAAQ,EAClD,kBAAkB,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,EAC3D,UAAU,uBAAuB,CAAC,QAAQ,CAAC,KAC1C,yBAWF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,QAAQ,EACzC,YAAY,SAAS,CAAC,gBAAgB,CAAC,EACvC,gBAAgB,oBAAoB,GAAG,SAAS,EAChD,kBAAkB,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,EAC3D,sBAAsB,oBAAoB,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzD,eAAe,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,IAAI,YA4E9C,CAAC"}

package/dist/ui/use-chat/useExternalHistory.js

@@ -0,0 +1,84 @@
+"use client";
+
+// src/ui/use-chat/useExternalHistory.tsx
+import {
+  getExternalStoreMessages,
+  INTERNAL
+} from "@assistant-ui/react";
+import { useRef, useEffect, useState } from "react";
+var { MessageRepository } = INTERNAL;
+var toExportedMessageRepository = (toThreadMessages, messages) => {
+  return {
+    headId: messages.headId,
+    messages: messages.messages.map((m) => {
+      const message = toThreadMessages([m.message])[0];
+      return {
+        ...m,
+        message
+      };
+    })
+  };
+};
+var useExternalHistory = (runtimeRef, historyAdapter, toThreadMessages, storageFormatAdapter, onSetMessages) => {
+  const loadedRef = useRef(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const historyIds = useRef(/* @__PURE__ */ new Set());
+  const onSetMessagesRef = useRef(onSetMessages);
+  useEffect(() => {
+    onSetMessagesRef.current = onSetMessages;
+  });
+  useEffect(() => {
+    if (!historyAdapter || loadedRef.current) return;
+    const loadHistory = async () => {
+      setIsLoading(true);
+      try {
+        const repo = await historyAdapter.withFormat?.(storageFormatAdapter).load();
+        if (repo && repo.messages.length > 0) {
+          const converted = toExportedMessageRepository(toThreadMessages, repo);
+          runtimeRef.current.thread.import(converted);
+          const tempRepo = new MessageRepository();
+          tempRepo.import(converted);
+          const messages = tempRepo.getMessages();
+          onSetMessagesRef.current(
+            messages.map(getExternalStoreMessages).flat()
+          );
+          historyIds.current = new Set(
+            converted.messages.map((m) => m.message.id)
+          );
+        }
+      } catch (error) {
+        console.error("Failed to load message history:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    if (!loadedRef.current) {
+      loadedRef.current = true;
+      loadHistory();
+    }
+  }, [historyAdapter, storageFormatAdapter, toThreadMessages]);
+  useEffect(() => {
+    return runtimeRef.current.thread.subscribe(async () => {
+      const { messages, isRunning } = runtimeRef.current.thread.getState();
+      if (isRunning) return;
+      for (let i = 0; i < messages.length; i++) {
+        const message = messages[i];
+        if (message.status === void 0 || message.status.type === "complete" || message.status.type === "incomplete") {
+          if (historyIds.current.has(message.id)) return;
+          historyIds.current.add(message.id);
+          const parentId = i > 0 ? messages[i - 1].id : null;
+          await historyAdapter?.withFormat?.(storageFormatAdapter).append({
+            parentId,
+            message: getExternalStoreMessages(message)[0]
+          });
+        }
+      }
+    });
+  }, []);
+  return isLoading;
+};
+export {
+  toExportedMessageRepository,
+  useExternalHistory
+};
+//# sourceMappingURL=useExternalHistory.js.map

package/dist/ui/use-chat/useExternalHistory.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/use-chat/useExternalHistory.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  AssistantRuntime,\n  ThreadHistoryAdapter,\n  ThreadMessage,\n  MessageFormatAdapter,\n  getExternalStoreMessages,\n  MessageFormatRepository,\n  ExportedMessageRepository,\n  INTERNAL,\n} from \"@assistant-ui/react\";\nimport { useRef, useEffect, useState, RefObject } from \"react\";\n\nconst { MessageRepository } = INTERNAL;\n\nexport const toExportedMessageRepository = <TMessage,>(\n  toThreadMessages: (messages: TMessage[]) => ThreadMessage[],\n  messages: MessageFormatRepository<TMessage>,\n): ExportedMessageRepository => {\n  return {\n    headId: messages.headId!,\n    messages: messages.messages.map((m) => {\n      const message = toThreadMessages([m.message])[0]!;\n      return {\n        ...m,\n        message,\n      };\n    }),\n  };\n};\n\nexport const useExternalHistory = <TMessage,>(\n  runtimeRef: RefObject<AssistantRuntime>,\n  historyAdapter: ThreadHistoryAdapter | undefined,\n  toThreadMessages: (messages: TMessage[]) => ThreadMessage[],\n  storageFormatAdapter: MessageFormatAdapter<TMessage, any>,\n  onSetMessages: (messages: TMessage[]) => void,\n) => {\n  const loadedRef = useRef(false);\n  const [isLoading, setIsLoading] = useState(true);\n  const historyIds = useRef(new Set<string>());\n\n  const onSetMessagesRef = useRef(onSetMessages);\n  useEffect(() => {\n    onSetMessagesRef.current = onSetMessages;\n  });\n\n  // Load messages from history adapter on mount\n  useEffect(() => {\n    if (!historyAdapter || loadedRef.current) return;\n\n    const loadHistory = async () => {\n      setIsLoading(true);\n      try {\n        const repo = await historyAdapter\n          .withFormat?.(storageFormatAdapter)\n          .load();\n        if (repo && repo.messages.length > 0) {\n          const converted = toExportedMessageRepository(toThreadMessages, repo);\n          runtimeRef.current.thread.import(converted);\n\n          const tempRepo = new MessageRepository();\n          tempRepo.import(converted);\n          const messages = tempRepo.getMessages();\n\n          onSetMessagesRef.current(\n            messages.map(getExternalStoreMessages<TMessage>).flat(),\n          );\n\n          historyIds.current = new Set(\n            converted.messages.map((m) => m.message.id),\n          );\n        }\n      } catch (error) {\n        console.error(\"Failed to load message history:\", error);\n      } finally {\n        setIsLoading(false);\n      }\n    };\n\n    if (!loadedRef.current) {\n      loadedRef.current = true;\n      loadHistory();\n    }\n  }, [historyAdapter, storageFormatAdapter, toThreadMessages]);\n\n  useEffect(() => {\n    return runtimeRef.current.thread.subscribe(async () => {\n      const { messages, isRunning } = runtimeRef.current.thread.getState();\n      if (isRunning) return;\n\n      for (let i = 0; i < messages.length; i++) {\n        const message = messages[i]!;\n        if (\n          message.status === undefined ||\n          message.status.type === \"complete\" ||\n          message.status.type === \"incomplete\"\n        ) {\n          if (historyIds.current.has(message.id)) return;\n          historyIds.current.add(message.id);\n\n          const parentId = i > 0 ? messages[i - 1]!.id : null;\n          await historyAdapter?.withFormat?.(storageFormatAdapter).append({\n            parentId,\n            message: getExternalStoreMessages<TMessage>(message)[0]!,\n          });\n        }\n      }\n    });\n  }, []);\n\n  return isLoading;\n};\n"],"mappings":";;;AAEA;AAAA,EAKE;AAAA,EAGA;AAAA,OACK;AACP,SAAS,QAAQ,WAAW,gBAA2B;AAEvD,IAAM,EAAE,kBAAkB,IAAI;AAEvB,IAAM,8BAA8B,CACzC,kBACA,aAC8B;AAC9B,SAAO;AAAA,IACL,QAAQ,SAAS;AAAA,IACjB,UAAU,SAAS,SAAS,IAAI,CAAC,MAAM;AACrC,YAAM,UAAU,iBAAiB,CAAC,EAAE,OAAO,CAAC,EAAE,CAAC;AAC/C,aAAO;AAAA,QACL,GAAG;AAAA,QACH;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAEO,IAAM,qBAAqB,CAChC,YACA,gBACA,kBACA,sBACA,kBACG;AACH,QAAM,YAAY,OAAO,KAAK;AAC9B,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,IAAI;AAC/C,QAAM,aAAa,OAAO,oBAAI,IAAY,CAAC;AAE3C,QAAM,mBAAmB,OAAO,aAAa;AAC7C,YAAU,MAAM;AACd,qBAAiB,UAAU;AAAA,EAC7B,CAAC;AAGD,YAAU,MAAM;AACd,QAAI,CAAC,kBAAkB,UAAU,QAAS;AAE1C,UAAM,cAAc,YAAY;AAC9B,mBAAa,IAAI;AACjB,UAAI;AACF,cAAM,OAAO,MAAM,eAChB,aAAa,oBAAoB,EACjC,KAAK;AACR,YAAI,QAAQ,KAAK,SAAS,SAAS,GAAG;AACpC,gBAAM,YAAY,4BAA4B,kBAAkB,IAAI;AACpE,qBAAW,QAAQ,OAAO,OAAO,SAAS;AAE1C,gBAAM,WAAW,IAAI,kBAAkB;AACvC,mBAAS,OAAO,SAAS;AACzB,gBAAM,WAAW,SAAS,YAAY;AAEtC,2BAAiB;AAAA,YACf,SAAS,IAAI,wBAAkC,EAAE,KAAK;AAAA,UACxD;AAEA,qBAAW,UAAU,IAAI;AAAA,YACvB,UAAU,SAAS,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE;AAAA,UAC5C;AAAA,QACF;AAAA,MACF,SAAS,OAAO;AACd,gBAAQ,MAAM,mCAAmC,KAAK;AAAA,MACxD,UAAE;AACA,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAEA,QAAI,CAAC,UAAU,SAAS;AACtB,gBAAU,UAAU;AACpB,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,gBAAgB,sBAAsB,gBAAgB,CAAC;AAE3D,YAAU,MAAM;AACd,WAAO,WAAW,QAAQ,OAAO,UAAU,YAAY;AACrD,YAAM,EAAE,UAAU,UAAU,IAAI,WAAW,QAAQ,OAAO,SAAS;AACnE,UAAI,UAAW;AAEf,eAAS,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;AACxC,cAAM,UAAU,SAAS,CAAC;AAC1B,YACE,QAAQ,WAAW,UACnB,QAAQ,OAAO,SAAS,cACxB,QAAQ,OAAO,SAAS,cACxB;AACA,cAAI,WAAW,QAAQ,IAAI,QAAQ,EAAE,EAAG;AACxC,qBAAW,QAAQ,IAAI,QAAQ,EAAE;AAEjC,gBAAM,WAAW,IAAI,IAAI,SAAS,IAAI,CAAC,EAAG,KAAK;AAC/C,gBAAM,gBAAgB,aAAa,oBAAoB,EAAE,OAAO;AAAA,YAC9D;AAAA,YACA,SAAS,yBAAmC,OAAO,EAAE,CAAC;AAAA,UACxD,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;","names":[]}

package/dist/ui/utils/toCreateMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toCreateMessage.d.ts","sourceRoot":"","sources":["../../../src/ui/utils/toCreateMessage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EACL,eAAe,EAGf,SAAS,EAGV,MAAM,IAAI,CAAC;AAEZ,eAAO,MAAM,eAAe,GAC1B,SAAS,aAAa,KACrB,OAAO,CAAC,eAAe,CAAC,SAAS,CAAC,CA8CpC,CAAC"}
+{"version":3,"file":"toCreateMessage.d.ts","sourceRoot":"","sources":["../../../src/ui/utils/toCreateMessage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EACL,eAAe,EAIf,SAAS,EAGV,MAAM,IAAI,CAAC;AAEZ,eAAO,MAAM,eAAe,GAC1B,SAAS,aAAa,KACrB,OAAO,CAAC,eAAe,CAAC,SAAS,CAAC,CA+CpC,CAAC"}

package/dist/ui/utils/toCreateMessage.js

@@ -1,4 +1,7 @@
 // src/ui/utils/toCreateMessage.ts
+import {
+  generateId
+} from "ai";
 var toCreateMessage = async (message) => {
   const textParts = message.content.filter((part) => part.type === "text").map((t) => t.text).join("\n\n");
   const parts = [
@@ -29,6 +32,7 @@ var toCreateMessage = async (message) => {
   );
   parts.push(...attachmentParts);
   return {
+    id: generateId(),
     role: message.role,
     parts
   };

package/dist/ui/utils/toCreateMessage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/utils/toCreateMessage.ts"],"sourcesContent":["import { AppendMessage } from \"@assistant-ui/react\";\nimport {\n  CreateUIMessage,\n  FileUIPart,\n  UIDataTypes,\n  UIMessage,\n  UIMessagePart,\n  UITools,\n} from \"ai\";\n\nexport const toCreateMessage = async (\n  message: AppendMessage,\n): Promise<CreateUIMessage<UIMessage>> => {\n  const textParts = message.content\n    .filter((part) => part.type === \"text\")\n    .map((t) => t.text)\n    .join(\"\\n\\n\");\n\n  const parts: UIMessagePart<UIDataTypes, UITools>[] = [\n    {\n      type: \"text\",\n      text: textParts,\n    },\n  ];\n\n  // Add image parts\n  const imageParts = message.content\n    .filter((part) => part.type === \"image\")\n    .map(\n      (part) =>\n        ({\n          type: \"file\",\n          mediaType: \"image/png\", // Default to PNG, could be made more dynamic\n          url: part.image,\n        }) satisfies FileUIPart,\n    );\n\n  parts.push(...imageParts);\n\n  // Add attachment parts\n  const attachmentParts = await Promise.all(\n    (message.attachments ?? []).map(async (m) => {\n      if (m.file == null) throw new Error(\"Attachment did not contain a file\");\n      return {\n        type: \"file\",\n        mediaType: m.file.type,\n        filename: m.file.name,\n        url: await getFileDataURL(m.file),\n      } satisfies FileUIPart;\n    }),\n  );\n\n  parts.push(...attachmentParts);\n\n  return {\n    role: message.role,\n    parts,\n  };\n};\n\nconst getFileDataURL = (file: File) =>\n  new Promise<string>((resolve, reject) => {\n    const reader = new FileReader();\n\n    reader.onload = () => resolve(reader.result as string);\n    reader.onerror = (error) => reject(error);\n\n    reader.readAsDataURL(file);\n  });\n"],"mappings":";AAUO,IAAM,kBAAkB,OAC7B,YACwC;AACxC,QAAM,YAAY,QAAQ,QACvB,OAAO,CAAC,SAAS,KAAK,SAAS,MAAM,EACrC,IAAI,CAAC,MAAM,EAAE,IAAI,EACjB,KAAK,MAAM;AAEd,QAAM,QAA+C;AAAA,IACnD;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,EACF;AAGA,QAAM,aAAa,QAAQ,QACxB,OAAO,CAAC,SAAS,KAAK,SAAS,OAAO,EACtC;AAAA,IACC,CAAC,UACE;AAAA,MACC,MAAM;AAAA,MACN,WAAW;AAAA;AAAA,MACX,KAAK,KAAK;AAAA,IACZ;AAAA,EACJ;AAEF,QAAM,KAAK,GAAG,UAAU;AAGxB,QAAM,kBAAkB,MAAM,QAAQ;AAAA,KACnC,QAAQ,eAAe,CAAC,GAAG,IAAI,OAAO,MAAM;AAC3C,UAAI,EAAE,QAAQ,KAAM,OAAM,IAAI,MAAM,mCAAmC;AACvE,aAAO;AAAA,QACL,MAAM;AAAA,QACN,WAAW,EAAE,KAAK;AAAA,QAClB,UAAU,EAAE,KAAK;AAAA,QACjB,KAAK,MAAM,eAAe,EAAE,IAAI;AAAA,MAClC;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,KAAK,GAAG,eAAe;AAE7B,SAAO;AAAA,IACL,MAAM,QAAQ;AAAA,IACd;AAAA,EACF;AACF;AAEA,IAAM,iBAAiB,CAAC,SACtB,IAAI,QAAgB,CAAC,SAAS,WAAW;AACvC,QAAM,SAAS,IAAI,WAAW;AAE9B,SAAO,SAAS,MAAM,QAAQ,OAAO,MAAgB;AACrD,SAAO,UAAU,CAAC,UAAU,OAAO,KAAK;AAExC,SAAO,cAAc,IAAI;AAC3B,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/ui/utils/toCreateMessage.ts"],"sourcesContent":["import { AppendMessage } from \"@assistant-ui/react\";\nimport {\n  CreateUIMessage,\n  FileUIPart,\n  generateId,\n  UIDataTypes,\n  UIMessage,\n  UIMessagePart,\n  UITools,\n} from \"ai\";\n\nexport const toCreateMessage = async (\n  message: AppendMessage,\n): Promise<CreateUIMessage<UIMessage>> => {\n  const textParts = message.content\n    .filter((part) => part.type === \"text\")\n    .map((t) => t.text)\n    .join(\"\\n\\n\");\n\n  const parts: UIMessagePart<UIDataTypes, UITools>[] = [\n    {\n      type: \"text\",\n      text: textParts,\n    },\n  ];\n\n  // Add image parts\n  const imageParts = message.content\n    .filter((part) => part.type === \"image\")\n    .map(\n      (part) =>\n        ({\n          type: \"file\",\n          mediaType: \"image/png\", // Default to PNG, could be made more dynamic\n          url: part.image,\n        }) satisfies FileUIPart,\n    );\n\n  parts.push(...imageParts);\n\n  // Add attachment parts\n  const attachmentParts = await Promise.all(\n    (message.attachments ?? []).map(async (m) => {\n      if (m.file == null) throw new Error(\"Attachment did not contain a file\");\n      return {\n        type: \"file\",\n        mediaType: m.file.type,\n        filename: m.file.name,\n        url: await getFileDataURL(m.file),\n      } satisfies FileUIPart;\n    }),\n  );\n\n  parts.push(...attachmentParts);\n\n  return {\n    id: generateId(),\n    role: message.role,\n    parts,\n  };\n};\n\nconst getFileDataURL = (file: File) =>\n  new Promise<string>((resolve, reject) => {\n    const reader = new FileReader();\n\n    reader.onload = () => resolve(reader.result as string);\n    reader.onerror = (error) => reject(error);\n\n    reader.readAsDataURL(file);\n  });\n"],"mappings":";AACA;AAAA,EAGE;AAAA,OAKK;AAEA,IAAM,kBAAkB,OAC7B,YACwC;AACxC,QAAM,YAAY,QAAQ,QACvB,OAAO,CAAC,SAAS,KAAK,SAAS,MAAM,EACrC,IAAI,CAAC,MAAM,EAAE,IAAI,EACjB,KAAK,MAAM;AAEd,QAAM,QAA+C;AAAA,IACnD;AAAA,MACE,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,EACF;AAGA,QAAM,aAAa,QAAQ,QACxB,OAAO,CAAC,SAAS,KAAK,SAAS,OAAO,EACtC;AAAA,IACC,CAAC,UACE;AAAA,MACC,MAAM;AAAA,MACN,WAAW;AAAA;AAAA,MACX,KAAK,KAAK;AAAA,IACZ;AAAA,EACJ;AAEF,QAAM,KAAK,GAAG,UAAU;AAGxB,QAAM,kBAAkB,MAAM,QAAQ;AAAA,KACnC,QAAQ,eAAe,CAAC,GAAG,IAAI,OAAO,MAAM;AAC3C,UAAI,EAAE,QAAQ,KAAM,OAAM,IAAI,MAAM,mCAAmC;AACvE,aAAO;AAAA,QACL,MAAM;AAAA,QACN,WAAW,EAAE,KAAK;AAAA,QAClB,UAAU,EAAE,KAAK;AAAA,QACjB,KAAK,MAAM,eAAe,EAAE,IAAI;AAAA,MAClC;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,KAAK,GAAG,eAAe;AAE7B,SAAO;AAAA,IACL,IAAI,WAAW;AAAA,IACf,MAAM,QAAQ;AAAA,IACd;AAAA,EACF;AACF;AAEA,IAAM,iBAAiB,CAAC,SACtB,IAAI,QAAgB,CAAC,SAAS,WAAW;AACvC,QAAM,SAAS,IAAI,WAAW;AAE9B,SAAO,SAAS,MAAM,QAAQ,OAAO,MAAgB;AACrD,SAAO,UAAU,CAAC,UAAU,OAAO,KAAK;AAExC,SAAO,cAAc,IAAI;AAC3B,CAAC;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react-ai-sdk",
-  "version": "0.11.1",
+  "version": "0.11.5",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -29,13 +29,17 @@
     "zustand": "^5.0.7"
   },
   "peerDependencies": {
-    "@assistant-ui/react": "^0.10.36",
+    "@assistant-ui/react": "^0.10.39",
     "@types/react": "*",
+    "assistant-cloud": "*",
     "react": "^18 || ^19 || ^19.0.0-rc"
   },
   "peerDependenciesMeta": {
     "@types/react": {
       "optional": true
+    },
+    "assistant-cloud": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -45,8 +49,8 @@
     "eslint-config-next": "15.4.5",
     "react": "19.1.1",
     "tsx": "^4.20.3",
-    "@assistant-ui/x-buildutils": "0.0.1",
-    "@assistant-ui/react": "0.10.36"
+    "@assistant-ui/react": "0.10.39",
+    "@assistant-ui/x-buildutils": "0.0.1"
   },
   "publishConfig": {
     "access": "public",

package/src/ui/adapters/aiSDKFormatAdapter.ts

@@ -0,0 +1,42 @@
+import { UIMessage } from "ai";
+import {
+  MessageFormatAdapter,
+  MessageFormatItem,
+  MessageStorageEntry,
+} from "@assistant-ui/react";
+
+// Storage format for AI SDK messages - just the UIMessage
+export type AISDKStorageFormat = Omit<UIMessage, "id">;
+
+export const aiSDKV5FormatAdapter: MessageFormatAdapter<
+  UIMessage,
+  AISDKStorageFormat
+> = {
+  format: "ai-sdk/v5",
+
+  encode({
+    message: { id, parts, ...message },
+  }: MessageFormatItem<UIMessage>): AISDKStorageFormat {
+    // Filter out FileContentParts until they are supported
+    return {
+      ...message,
+      parts: parts.filter((part) => part.type !== "file"),
+    };
+  },
+
+  decode(
+    stored: MessageStorageEntry<AISDKStorageFormat>,
+  ): MessageFormatItem<UIMessage> {
+    return {
+      parentId: stored.parent_id,
+      message: {
+        id: stored.id,
+        ...stored.content,
+      },
+    };
+  },
+
+  getId(message: UIMessage): string {
+    return message.id;
+  },
+};

package/src/ui/index.ts

@@ -1 +1,3 @@
 export { useAISDKRuntime } from "./use-chat/useAISDKRuntime";
+export { useChatRuntime } from "./use-chat/useChatRuntime";
+export { AssistantChatTransport } from "./use-chat/AssistantChatTransport";

package/src/ui/use-chat/AssistantChatTransport.tsx

@@ -0,0 +1,70 @@
+import { AssistantRuntime, Tool } from "@assistant-ui/react";
+import {
+  DefaultChatTransport,
+  HttpChatTransportInitOptions,
+  JSONSchema7,
+  UIMessage,
+} from "ai";
+import z from "zod";
+
+const toAISDKTools = (tools: Record<string, Tool>) => {
+  return Object.fromEntries(
+    Object.entries(tools).map(([name, tool]) => [
+      name,
+      {
+        ...(tool.description ? { description: tool.description } : undefined),
+        parameters: (tool.parameters instanceof z.ZodType
+          ? z.toJSONSchema(tool.parameters)
+          : tool.parameters) as JSONSchema7,
+      },
+    ]),
+  );
+};
+
+const getEnabledTools = (tools: Record<string, Tool>) => {
+  return Object.fromEntries(
+    Object.entries(tools).filter(
+      ([, tool]) => !tool.disabled && tool.type !== "backend",
+    ),
+  );
+};
+
+export class AssistantChatTransport<
+  UI_MESSAGE extends UIMessage,
+> extends DefaultChatTransport<UI_MESSAGE> {
+  private runtime: AssistantRuntime | undefined;
+  constructor(initOptions?: HttpChatTransportInitOptions<UI_MESSAGE>) {
+    super({
+      ...initOptions,
+      prepareSendMessagesRequest: async (options) => {
+        const context = this.runtime?.thread.getModelContext();
+
+        const optionsEx = {
+          ...options,
+          body: {
+            system: context?.system,
+            tools: toAISDKTools(getEnabledTools(context?.tools ?? {})),
+            ...options?.body,
+          },
+        };
+        const preparedRequest =
+          await initOptions?.prepareSendMessagesRequest?.(optionsEx);
+
+        return {
+          ...preparedRequest,
+          body: preparedRequest?.body ?? {
+            ...optionsEx.body,
+            id: options.id,
+            messages: options.messages,
+            trigger: options.trigger,
+            messageId: options.messageId,
+          },
+        };
+      },
+    });
+  }
+
+  setRuntime(runtime: AssistantRuntime) {
+    this.runtime = runtime;
+  }
+}

package/src/ui/use-chat/useAISDKRuntime.tsx

@@ -1,16 +1,26 @@
 "use client";
 
 import type { useChat } from "@ai-sdk/react";
-import { useExternalStoreRuntime } from "@assistant-ui/react";
+import {
+  useExternalStoreRuntime,
+  ExternalStoreAdapter,
+  ThreadHistoryAdapter,
+  AssistantRuntime,
+} from "@assistant-ui/react";
 import { sliceMessagesUntil } from "../utils/sliceMessagesUntil";
 import { toCreateMessage } from "../utils/toCreateMessage";
 import { vercelAttachmentAdapter } from "../utils/vercelAttachmentAdapter";
 import { getVercelAIMessages } from "../getVercelAIMessages";
-import { ExternalStoreAdapter } from "@assistant-ui/react";
 import { AISDKMessageConverter } from "../utils/convertMessage";
+import { aiSDKV5FormatAdapter } from "../adapters/aiSDKFormatAdapter";
+import { useExternalHistory } from "./useExternalHistory";
 
 export type AISDKRuntimeAdapter = {
-  adapters?: NonNullable<ExternalStoreAdapter["adapters"]> | undefined;
+  adapters?:
+    | (NonNullable<ExternalStoreAdapter["adapters"]> & {
+        history?: ThreadHistoryAdapter | undefined;
+      })
+    | undefined;
 };
 
 export const useAISDKRuntime = (
@@ -23,6 +33,20 @@ export const useAISDKRuntime = (
     messages: chatHelpers.messages,
   });
 
+  const isLoading = useExternalHistory(
+    {
+      get current(): AssistantRuntime {
+        return runtime;
+      },
+    },
+    adapter.adapters?.history,
+    AISDKMessageConverter.toThreadMessages,
+    aiSDKV5FormatAdapter,
+    (messages) => {
+      chatHelpers.setMessages(messages);
+    },
+  );
+
   const runtime = useExternalStoreRuntime({
     isRunning:
       chatHelpers.status === "submitted" || chatHelpers.status === "streaming",
@@ -31,7 +55,8 @@ export const useAISDKRuntime = (
       chatHelpers.setMessages(messages.map(getVercelAIMessages).flat()),
     onCancel: async () => chatHelpers.stop(),
     onNew: async (message) => {
-      await chatHelpers.sendMessage(await toCreateMessage(message));
+      const createMessage = await toCreateMessage(message);
+      await chatHelpers.sendMessage(createMessage);
     },
     onEdit: async (message) => {
       const newMessages = sliceMessagesUntil(
@@ -40,7 +65,8 @@ export const useAISDKRuntime = (
       );
       chatHelpers.setMessages(newMessages);
 
-      await chatHelpers.sendMessage(await toCreateMessage(message));
+      const createMessage = await toCreateMessage(message);
+      await chatHelpers.sendMessage(createMessage);
     },
     onReload: async (parentId: string | null) => {
       const newMessages = sliceMessagesUntil(chatHelpers.messages, parentId);
@@ -59,6 +85,7 @@ export const useAISDKRuntime = (
       attachments: vercelAttachmentAdapter,
       ...adapter.adapters,
     },
+    isLoading,
   });
 
   return runtime;

package/src/ui/use-chat/useChatRuntime.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useChat, type UIMessage } from "@ai-sdk/react";
+import type { AssistantCloud } from "assistant-cloud";
+import {
+  AssistantRuntime,
+  unstable_useCloudThreadListAdapter,
+  unstable_useRemoteThreadListRuntime,
+  useRuntimeAdapters,
+} from "@assistant-ui/react";
+import { useAISDKRuntime, type AISDKRuntimeAdapter } from "./useAISDKRuntime";
+import { ChatInit } from "ai";
+import { AssistantChatTransport } from "./AssistantChatTransport";
+
+export type UseChatRuntimeOptions<UI_MESSAGE extends UIMessage = UIMessage> =
+  ChatInit<UI_MESSAGE> & {
+    cloud?: AssistantCloud | undefined;
+    adapters?: AISDKRuntimeAdapter["adapters"] | undefined;
+  };
+
+export const useChatThreadRuntime = <UI_MESSAGE extends UIMessage = UIMessage>(
+  options?: UseChatRuntimeOptions<UI_MESSAGE>,
+): AssistantRuntime => {
+  const {
+    adapters,
+    transport: transportOptions,
+    ...chatOptions
+  } = options ?? {};
+  const transport = transportOptions ?? new AssistantChatTransport();
+
+  // Get adapters from context (including history adapter from cloud)
+  const contextAdapters = useRuntimeAdapters();
+
+  const chat = useChat({
+    ...chatOptions,
+    transport,
+  });
+
+  const runtime = useAISDKRuntime(chat as any, {
+    adapters: {
+      ...contextAdapters,
+      ...adapters,
+    },
+  });
+  if (transport instanceof AssistantChatTransport) {
+    transport.setRuntime(runtime);
+  }
+
+  return runtime;
+};
+
+export const useChatRuntime = <UI_MESSAGE extends UIMessage = UIMessage>({
+  cloud,
+  ...options
+}: UseChatRuntimeOptions<UI_MESSAGE> = {}): AssistantRuntime => {
+  const cloudAdapter = unstable_useCloudThreadListAdapter({ cloud });
+  return unstable_useRemoteThreadListRuntime({
+    runtimeHook: function RuntimeHook() {
+      return useChatThreadRuntime(options);
+    },
+    adapter: cloudAdapter,
+  });
+};

package/src/ui/use-chat/useExternalHistory.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import {
+  AssistantRuntime,
+  ThreadHistoryAdapter,
+  ThreadMessage,
+  MessageFormatAdapter,
+  getExternalStoreMessages,
+  MessageFormatRepository,
+  ExportedMessageRepository,
+  INTERNAL,
+} from "@assistant-ui/react";
+import { useRef, useEffect, useState, RefObject } from "react";
+
+const { MessageRepository } = INTERNAL;
+
+export const toExportedMessageRepository = <TMessage,>(
+  toThreadMessages: (messages: TMessage[]) => ThreadMessage[],
+  messages: MessageFormatRepository<TMessage>,
+): ExportedMessageRepository => {
+  return {
+    headId: messages.headId!,
+    messages: messages.messages.map((m) => {
+      const message = toThreadMessages([m.message])[0]!;
+      return {
+        ...m,
+        message,
+      };
+    }),
+  };
+};
+
+export const useExternalHistory = <TMessage,>(
+  runtimeRef: RefObject<AssistantRuntime>,
+  historyAdapter: ThreadHistoryAdapter | undefined,
+  toThreadMessages: (messages: TMessage[]) => ThreadMessage[],
+  storageFormatAdapter: MessageFormatAdapter<TMessage, any>,
+  onSetMessages: (messages: TMessage[]) => void,
+) => {
+  const loadedRef = useRef(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const historyIds = useRef(new Set<string>());
+
+  const onSetMessagesRef = useRef(onSetMessages);
+  useEffect(() => {
+    onSetMessagesRef.current = onSetMessages;
+  });
+
+  // Load messages from history adapter on mount
+  useEffect(() => {
+    if (!historyAdapter || loadedRef.current) return;
+
+    const loadHistory = async () => {
+      setIsLoading(true);
+      try {
+        const repo = await historyAdapter
+          .withFormat?.(storageFormatAdapter)
+          .load();
+        if (repo && repo.messages.length > 0) {
+          const converted = toExportedMessageRepository(toThreadMessages, repo);
+          runtimeRef.current.thread.import(converted);
+
+          const tempRepo = new MessageRepository();
+          tempRepo.import(converted);
+          const messages = tempRepo.getMessages();
+
+          onSetMessagesRef.current(
+            messages.map(getExternalStoreMessages<TMessage>).flat(),
+          );
+
+          historyIds.current = new Set(
+            converted.messages.map((m) => m.message.id),
+          );
+        }
+      } catch (error) {
+        console.error("Failed to load message history:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    if (!loadedRef.current) {
+      loadedRef.current = true;
+      loadHistory();
+    }
+  }, [historyAdapter, storageFormatAdapter, toThreadMessages]);
+
+  useEffect(() => {
+    return runtimeRef.current.thread.subscribe(async () => {
+      const { messages, isRunning } = runtimeRef.current.thread.getState();
+      if (isRunning) return;
+
+      for (let i = 0; i < messages.length; i++) {
+        const message = messages[i]!;
+        if (
+          message.status === undefined ||
+          message.status.type === "complete" ||
+          message.status.type === "incomplete"
+        ) {
+          if (historyIds.current.has(message.id)) return;
+          historyIds.current.add(message.id);
+
+          const parentId = i > 0 ? messages[i - 1]!.id : null;
+          await historyAdapter?.withFormat?.(storageFormatAdapter).append({
+            parentId,
+            message: getExternalStoreMessages<TMessage>(message)[0]!,
+          });
+        }
+      }
+    });
+  }, []);
+
+  return isLoading;
+};

package/src/ui/utils/toCreateMessage.ts

@@ -2,6 +2,7 @@ import { AppendMessage } from "@assistant-ui/react";
 import {
   CreateUIMessage,
   FileUIPart,
+  generateId,
   UIDataTypes,
   UIMessage,
   UIMessagePart,
@@ -53,6 +54,7 @@ export const toCreateMessage = async (
   parts.push(...attachmentParts);
 
   return {
+    id: generateId(),
     role: message.role,
     parts,
   };