diff --git a/.changeset/sour-dancers-fetch.md b/.changeset/sour-dancers-fetch.md
new file mode 100644
index 000000000..950832526
--- /dev/null
+++ b/.changeset/sour-dancers-fetch.md
@@ -0,0 +1,6 @@
+---
+"@assistant-ui/react-ai-sdk": patch
+"@assistant-ui/react": patch
+---
+
+feat: lift thread composer state to ThreadRuntime.Composer
diff --git a/apps/docs/components/docs/parameters/context.tsx b/apps/docs/components/docs/parameters/context.tsx
index da1084984..9f8a64ce8 100644
--- a/apps/docs/components/docs/parameters/context.tsx
+++ b/apps/docs/components/docs/parameters/context.tsx
@@ -259,16 +259,16 @@ export const BaseComposerState: ParametersTableProps = {
   type: "BaseComposerState",
   parameters: [
     {
-      name: "value",
+      name: "text",
       type: "string",
       required: true,
-      description: "The current value of the composer.",
+      description: "The current text of the composer.",
     },
     {
-      name: "setValue",
-      type: "(value: string) => void",
+      name: "setText",
+      type: "(text: string) => void",
       required: true,
-      description: "A function to set the value of the composer.",
+      description: "A function to set the text of the composer.",
     },
   ],
 };
diff --git a/apps/docs/content/docs/reference/context.mdx b/apps/docs/content/docs/reference/context.mdx
index 81acab5c9..3e885cf3d 100644
--- a/apps/docs/content/docs/reference/context.mdx
+++ b/apps/docs/content/docs/reference/context.mdx
@@ -169,8 +169,8 @@ const { useComposer } = useThreadContext();
 const value = useComposer((m) => m.value);
 const value = useComposer.getState().value;
 
-const setValue = useComposer((m) => m.setValue);
-const setValue = useComposer.getState().setValue;
+const setText = useComposer((m) => m.setText);
+const setText = useComposer.getState().setText;
 ```
 
 <ParametersTable {...ComposerState} />
@@ -254,8 +254,8 @@ const { useEditComposer } = useMessageContext();
 const value = useEditComposer((m) => m.value);
 const value = useEditComposer.getState().value;
 
-const setValue = useEditComposer((m) => m.setValue);
-const setValue = useEditComposer.getState().setValue;
+const setText = useEditComposer((m) => m.setText);
+const setText = useEditComposer.getState().setText;
 ```
 
 <ParametersTable {...EditComposerState} />
@@ -328,6 +328,6 @@ const { useComposer } = useComposerContext();
 const value = useComposer((m) => m.value);
 const value = useComposer.getState().value;
 
-const setValue = useComposer((m) => m.setValue);
-const setValue = useComposer.getState().setValue;
+const setText = useComposer((m) => m.setText);
+const setText = useComposer.getState().setText;
 ```
diff --git a/packages/react-ai-sdk/src/ui/use-assistant/VercelUseAssistantThreadRuntime.tsx b/packages/react-ai-sdk/src/ui/use-assistant/VercelUseAssistantThreadRuntime.tsx
index 62bf93b3c..f577437d1 100644
--- a/packages/react-ai-sdk/src/ui/use-assistant/VercelUseAssistantThreadRuntime.tsx
+++ b/packages/react-ai-sdk/src/ui/use-assistant/VercelUseAssistantThreadRuntime.tsx
@@ -30,6 +30,16 @@ export class VercelUseAssistantThreadRuntime implements ReactThreadRuntime {
   >;
 
   public messages: readonly ThreadMessage[] = [];
+
+  public readonly composer = {
+    text: "",
+    setText: (value: string) => {
+      this.composer.text = value;
+
+      for (const callback of this._subscriptions) callback();
+    },
+  };
+
   public readonly isDisabled = false;
 
   constructor(public vercel: ReturnType<typeof useAssistant>) {
diff --git a/packages/react-ai-sdk/src/ui/use-chat/VercelUseChatThreadRuntime.tsx b/packages/react-ai-sdk/src/ui/use-chat/VercelUseChatThreadRuntime.tsx
index dc53c2afd..651e5df08 100644
--- a/packages/react-ai-sdk/src/ui/use-chat/VercelUseChatThreadRuntime.tsx
+++ b/packages/react-ai-sdk/src/ui/use-chat/VercelUseChatThreadRuntime.tsx
@@ -45,6 +45,15 @@ export class VercelUseChatThreadRuntime implements ReactThreadRuntime {
   public messages: ThreadMessage[] = [];
   public readonly isDisabled = false;
 
+  public readonly composer = {
+    text: "",
+    setText: (value: string) => {
+      this.composer.text = value;
+
+      for (const callback of this._subscriptions) callback();
+    },
+  };
+
   constructor(public vercel: ReturnType<typeof useChat>) {
     this.useVercel = create(() => ({
       vercel,
diff --git a/packages/react-ai-sdk/src/ui/utils/useVercelAIComposerSync.tsx b/packages/react-ai-sdk/src/ui/utils/useVercelAIComposerSync.tsx
index 0ef102c26..b66a0d21e 100644
--- a/packages/react-ai-sdk/src/ui/utils/useVercelAIComposerSync.tsx
+++ b/packages/react-ai-sdk/src/ui/utils/useVercelAIComposerSync.tsx
@@ -9,8 +9,8 @@ export const useVercelAIComposerSync = (vercel: VercelHelpers) => {
 
   useEffect(() => {
     (useComposer as unknown as StoreApi<ComposerState>).setState({
-      value: vercel.input,
-      setValue: vercel.setInput,
+      text: vercel.input,
+      setText: vercel.setInput,
     });
   }, [useComposer, vercel.input, vercel.setInput]);
 };
diff --git a/packages/react-playground/src/components/ui/assistant-ui/thread.tsx b/packages/react-playground/src/components/ui/assistant-ui/thread.tsx
index 7ff31ad51..a65262a58 100644
--- a/packages/react-playground/src/components/ui/assistant-ui/thread.tsx
+++ b/packages/react-playground/src/components/ui/assistant-ui/thread.tsx
@@ -105,19 +105,19 @@ const Composer: FC = () => {
     useThreadContext();
 
   const isRunning = useThread((t) => t.isRunning);
-  const hasValue = useComposer((c) => c.value.length > 0);
+  const hasText = useComposer((c) => c.text.length > 0);
 
   const performAdd = () => {
     const composer = useComposer.getState();
-    const value = composer.value;
-    if (!value) return;
+    const text = composer.text;
+    if (!text) return;
 
-    composer.setValue("");
+    composer.setText("");
 
     useThreadActions.getState().append({
       parentId: useThreadMessages.getState().at(-1)?.id ?? null,
       role,
-      content: [{ type: "text", text: value }],
+      content: [{ type: "text", text }],
     });
 
     setRole("user");
@@ -167,7 +167,7 @@ const Composer: FC = () => {
         <div className="flex-grow" />
         <Button
           onClick={handleAdd}
-          disabled={isRunning || !hasValue}
+          disabled={isRunning || !hasText}
           variant="default"
           size="sm"
           className="transition-opacity"
diff --git a/packages/react-playground/src/lib/playground-runtime.ts b/packages/react-playground/src/lib/playground-runtime.ts
index 147abc94c..633b4430a 100644
--- a/packages/react-playground/src/lib/playground-runtime.ts
+++ b/packages/react-playground/src/lib/playground-runtime.ts
@@ -101,6 +101,14 @@ export class PlaygroundThreadRuntime implements ReactThreadRuntime {
 
   private configProvider = new ProxyConfigProvider();
 
+  public readonly composer = {
+    text: "",
+    setText: (value: string) => {
+      this.composer.text = value;
+      this.notifySubscribers();
+    },
+  };
+
   constructor(
     configProvider: ModelConfigProvider,
     private _messages: ThreadMessage[],
diff --git a/packages/react/src/context/providers/ThreadProvider.tsx b/packages/react/src/context/providers/ThreadProvider.tsx
index 35345f3b4..05e3d4232 100644
--- a/packages/react/src/context/providers/ThreadProvider.tsx
+++ b/packages/react/src/context/providers/ThreadProvider.tsx
@@ -3,7 +3,7 @@ import { useCallback, useInsertionEffect, useState } from "react";
 import type { ReactThreadRuntime } from "../../runtimes/core/ReactThreadRuntime";
 import type { ThreadContextValue } from "../react/ThreadContext";
 import { ThreadContext } from "../react/ThreadContext";
-import { makeComposerStore } from "../stores/Composer";
+import { ComposerState, makeComposerStore } from "../stores/Composer";
 import {
   ThreadState,
   getThreadStateFromRuntime,
@@ -37,7 +37,12 @@ export const ThreadProvider: FC<PropsWithChildren<ThreadProviderProps>> = ({
     const useThreadMessages = makeThreadMessagesStore(useThreadRuntime);
     const useThreadActions = makeThreadActionStore(useThreadRuntime);
     const useViewport = makeThreadViewportStore();
-    const useComposer = makeComposerStore(useThreadMessages, useThreadActions);
+    const useComposer = makeComposerStore(
+      useThreadMessages,
+      useThreadActions,
+      provider.thread.capabilities.cancel,
+      provider.thread.composer,
+    );
 
     return {
       useThread,
@@ -57,10 +62,12 @@ export const ThreadProvider: FC<PropsWithChildren<ThreadProviderProps>> = ({
           const state = getThreadStateFromRuntime(thread);
           if (
             oldState.isDisabled !== state.isDisabled ||
-            oldState.isRunning !== state.isRunning
+            oldState.isRunning !== state.isRunning ||
+            // TODO ensure capabilities is memoized
+            oldState.capabilities !== state.capabilities
           ) {
             (context.useThread as unknown as StoreApi<ThreadState>).setState(
-              getThreadStateFromRuntime(thread),
+              state,
               true,
             );
           }
@@ -70,6 +77,19 @@ export const ThreadProvider: FC<PropsWithChildren<ThreadProviderProps>> = ({
               context.useThreadMessages as unknown as StoreApi<ThreadMessagesState>
             ).setState(thread.messages, true);
           }
+
+          const composerState = context.useComposer.getState();
+          if (
+            thread.composer.text !== composerState.text ||
+            state.capabilities.cancel !== composerState.canCancel
+          ) {
+            (
+              context.useComposer as unknown as StoreApi<ComposerState>
+            ).setState({
+              text: thread.composer.text,
+              canCancel: state.capabilities.cancel,
+            });
+          }
         };
 
         onThreadUpdate();
diff --git a/packages/react/src/context/stores/BaseComposer.ts b/packages/react/src/context/stores/BaseComposer.ts
deleted file mode 100644
index cf23734e3..000000000
--- a/packages/react/src/context/stores/BaseComposer.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { StateCreator } from "zustand";
-
-export type BaseComposerState = Readonly<{
-  value: string;
-  setValue: (value: string) => void;
-}>;
-
-export const makeBaseComposer: StateCreator<
-  BaseComposerState,
-  [],
-  [],
-  BaseComposerState
-> = (set) => ({
-  value: "",
-  setValue: (value) => {
-    set({ value });
-  },
-});
diff --git a/packages/react/src/context/stores/Composer.ts b/packages/react/src/context/stores/Composer.ts
index 60a7d03b1..e24ca7248 100644
--- a/packages/react/src/context/stores/Composer.ts
+++ b/packages/react/src/context/stores/Composer.ts
@@ -1,58 +1,73 @@
 import { create } from "zustand";
-import { type BaseComposerState, makeBaseComposer } from "./BaseComposer";
 import { ReadonlyStore } from "../ReadonlyStore";
 import { Unsubscribe } from "../../types/Unsubscribe";
 import { ThreadContextValue } from "../react";
+import { ThreadRuntime } from "../../runtimes";
 
-export type ComposerState = BaseComposerState &
-  Readonly<{
-    canCancel: boolean;
-    isEditing: true;
+export type ComposerState = Readonly<{
+  /** @deprecated Use `text` instead. */
+  value: string;
+  /** @deprecated Use `setText` instead. */
+  setValue: (value: string) => void;
 
-    send: () => void;
-    cancel: () => void;
-    focus: () => void;
-    onFocus: (listener: () => void) => Unsubscribe;
-  }>;
+  text: string;
+  setText: (value: string) => void;
+
+  canCancel: boolean;
+  isEditing: true;
+
+  send: () => void;
+  cancel: () => void;
+  focus: () => void;
+  onFocus: (listener: () => void) => Unsubscribe;
+}>;
 
 export const makeComposerStore = (
   useThreadMessages: ThreadContextValue["useThreadMessages"],
   useThreadActions: ThreadContextValue["useThreadActions"],
+  canCancel: boolean,
+  composerState: ThreadRuntime.Composer,
 ): ReadonlyStore<ComposerState> => {
   const focusListeners = new Set<() => void>();
-  return create<ComposerState>()((set, get, store) => {
-    return {
-      ...makeBaseComposer(set, get, store),
-
-      get canCancel() {
-        return useThreadActions.getState().capabilities.cancel;
-      },
-      isEditing: true,
-
-      send: () => {
-        const { setValue, value } = get();
-        setValue("");
-
-        useThreadActions.getState().append({
-          parentId: useThreadMessages.getState().at(-1)?.id ?? null,
-          role: "user",
-          content: [{ type: "text", text: value }],
-        });
-      },
-      cancel: () => {
-        useThreadActions.getState().cancelRun();
-      },
-      focus: () => {
-        for (const listener of focusListeners) {
-          listener();
-        }
-      },
-      onFocus: (listener) => {
-        focusListeners.add(listener);
-        return () => {
-          focusListeners.delete(listener);
-        };
-      },
-    };
-  });
+  return create<ComposerState>()((_, get) => ({
+    get value() {
+      return get().text;
+    },
+    setValue(value) {
+      get().setText(value);
+    },
+
+    text: composerState.text,
+    setText: (value) => {
+      composerState.setText(value);
+    },
+
+    canCancel,
+    isEditing: true,
+
+    send: () => {
+      const text = composerState.text;
+      composerState.setText("");
+
+      useThreadActions.getState().append({
+        parentId: useThreadMessages.getState().at(-1)?.id ?? null,
+        role: "user",
+        content: [{ type: "text", text }],
+      });
+    },
+    cancel: () => {
+      useThreadActions.getState().cancelRun();
+    },
+    focus: () => {
+      for (const listener of focusListeners) {
+        listener();
+      }
+    },
+    onFocus: (listener) => {
+      focusListeners.add(listener);
+      return () => {
+        focusListeners.delete(listener);
+      };
+    },
+  }));
 };
diff --git a/packages/react/src/context/stores/EditComposer.ts b/packages/react/src/context/stores/EditComposer.ts
index 682c4f5a1..1444365b3 100644
--- a/packages/react/src/context/stores/EditComposer.ts
+++ b/packages/react/src/context/stores/EditComposer.ts
@@ -1,38 +1,55 @@
 import { create } from "zustand";
-import { type BaseComposerState, makeBaseComposer } from "./BaseComposer";
 import { ReadonlyStore } from "../ReadonlyStore";
 
-export type EditComposerState = BaseComposerState &
-  Readonly<{
-    canCancel: boolean;
-    isEditing: boolean;
+export type EditComposerState = Readonly<{
+  // TODO 
+  /** @deprecated Use `text` instead. */
+  value: string;
+  /** @deprecated Use `setText` instead. */
+  setValue: (value: string) => void;
 
-    edit: () => void;
-    send: () => void;
-    cancel: () => void;
-  }>;
+  text: string;
+  setText: (value: string) => void;
+
+  canCancel: boolean;
+  isEditing: boolean;
+
+  edit: () => void;
+  send: () => void;
+  cancel: () => void;
+}>;
 
 export const makeEditComposerStore = ({
   onEdit,
   onSend,
 }: {
   onEdit: () => string;
-  onSend: (value: string) => void;
+  onSend: (text: string) => void;
 }): ReadonlyStore<EditComposerState> =>
-  create<EditComposerState>()((set, get, store) => ({
-    ...makeBaseComposer(set, get, store),
+  create<EditComposerState>()((set, get) => ({
+    get value() {
+      return get().text;
+    },
+    setValue(value) {
+      get().setText(value);
+    },
+
+    text: "",
+    setText: (text) => {
+      set({ text });
+    },
 
     canCancel: false,
     isEditing: false,
 
     edit: () => {
-      const value = onEdit();
-      set({ isEditing: true, canCancel: true, value });
+      const text = onEdit();
+      set({ isEditing: true, canCancel: true, text });
     },
     send: () => {
-      const value = get().value;
+      const text = get().text;
       set({ isEditing: false, canCancel: false });
-      onSend(value);
+      onSend(text);
     },
     cancel: () => {
       set({ isEditing: false, canCancel: false });
diff --git a/packages/react/src/context/stores/Thread.ts b/packages/react/src/context/stores/Thread.ts
index c11d8f860..915dd679a 100644
--- a/packages/react/src/context/stores/Thread.ts
+++ b/packages/react/src/context/stores/Thread.ts
@@ -3,22 +3,30 @@ import { ReadonlyStore } from "../ReadonlyStore";
 import { ThreadRuntimeStore } from "./ThreadRuntime";
 
 export type ThreadState = Readonly<{
+  capabilities: Readonly<RuntimeCapabilities>;
   isRunning: boolean;
   isDisabled: boolean;
 }>;
 
+export type RuntimeCapabilities = {
+  switchToBranch: boolean;
+  edit: boolean;
+  reload: boolean;
+  cancel: boolean;
+  copy: boolean;
+};
+
 export const getThreadStateFromRuntime = (
   runtime: ThreadRuntimeStore,
 ): ThreadState => {
   const lastMessage = runtime.messages.at(-1);
-  if (lastMessage?.role !== "assistant")
-    return Object.freeze({
-      isDisabled: runtime.isDisabled,
-      isRunning: false,
-    });
   return Object.freeze({
+    capabilities: runtime.capabilities,
     isDisabled: runtime.isDisabled,
-    isRunning: lastMessage.status.type === "running",
+    isRunning:
+      lastMessage?.role !== "assistant"
+        ? false
+        : lastMessage.status.type === "running",
   });
 };
 
diff --git a/packages/react/src/context/stores/ThreadActions.ts b/packages/react/src/context/stores/ThreadActions.ts
index 4b690c890..f01d50746 100644
--- a/packages/react/src/context/stores/ThreadActions.ts
+++ b/packages/react/src/context/stores/ThreadActions.ts
@@ -9,17 +9,7 @@ export type AddToolResultOptions = {
   result: any;
 };
 
-export type RuntimeCapabilities = {
-  switchToBranch: boolean;
-  edit: boolean;
-  reload: boolean;
-  cancel: boolean;
-  copy: boolean;
-};
-
 export type ThreadActionsState = Readonly<{
-  capabilities: Readonly<RuntimeCapabilities>;
-
   getBranches: (messageId: string) => readonly string[];
   switchToBranch: (branchId: string) => void;
 
@@ -35,9 +25,6 @@ export const makeThreadActionStore = (
 ) => {
   return create<ThreadActionsState>(() =>
     Object.freeze({
-      get capabilities() {
-        return runtimeStore.getState().capabilities;
-      },
       getBranches: (messageId) =>
         runtimeStore.getState().getBranches(messageId),
       switchToBranch: (branchId) =>
diff --git a/packages/react/src/primitive-hooks/actionBar/useActionBarCopy.tsx b/packages/react/src/primitive-hooks/actionBar/useActionBarCopy.tsx
index d93591f19..8bb851faa 100644
--- a/packages/react/src/primitive-hooks/actionBar/useActionBarCopy.tsx
+++ b/packages/react/src/primitive-hooks/actionBar/useActionBarCopy.tsx
@@ -25,7 +25,7 @@ export const useActionBarCopy = ({
   const callback = useCallback(() => {
     const { message } = useMessage.getState();
     const { setIsCopied } = useMessageUtils.getState();
-    const { isEditing, value: composerValue } = useEditComposer.getState();
+    const { isEditing, text: composerValue } = useEditComposer.getState();
 
     const valueToCopy = isEditing
       ? composerValue
diff --git a/packages/react/src/primitive-hooks/composer/useComposerSend.tsx b/packages/react/src/primitive-hooks/composer/useComposerSend.tsx
index c1f3c2188..d3822ceb0 100644
--- a/packages/react/src/primitive-hooks/composer/useComposerSend.tsx
+++ b/packages/react/src/primitive-hooks/composer/useComposerSend.tsx
@@ -12,7 +12,7 @@ export const useComposerSend = () => {
 
   const disabled = useCombinedStore(
     [useThread, useComposer],
-    (t, c) => t.isRunning || !c.isEditing || c.value.length === 0,
+    (t, c) => t.isRunning || !c.isEditing || c.text.length === 0,
   );
 
   const callback = useCallback(() => {
diff --git a/packages/react/src/primitive-hooks/thread/useThreadSuggestion.tsx b/packages/react/src/primitive-hooks/thread/useThreadSuggestion.tsx
index c12293632..46856e989 100644
--- a/packages/react/src/primitive-hooks/thread/useThreadSuggestion.tsx
+++ b/packages/react/src/primitive-hooks/thread/useThreadSuggestion.tsx
@@ -21,9 +21,9 @@ export const useThreadSuggestion = ({
     const composer = useComposer.getState();
     if (autoSend && !thread.isRunning) {
       append(prompt);
-      composer.setValue("");
+      composer.setText("");
     } else {
-      composer.setValue(prompt);
+      composer.setText(prompt);
     }
   }, [useThread, useComposer, autoSend, append, prompt]);
 
diff --git a/packages/react/src/primitives/composer/ComposerInput.tsx b/packages/react/src/primitives/composer/ComposerInput.tsx
index 9733310ef..ce128628f 100644
--- a/packages/react/src/primitives/composer/ComposerInput.tsx
+++ b/packages/react/src/primitives/composer/ComposerInput.tsx
@@ -42,7 +42,7 @@ export const ComposerPrimitiveInput = forwardRef<
 
     const value = useComposer((c) => {
       if (!c.isEditing) return "";
-      return c.value;
+      return c.text;
     });
 
     const Component = asChild ? Slot : TextareaAutosize;
@@ -106,7 +106,7 @@ export const ComposerPrimitiveInput = forwardRef<
         onChange={composeEventHandlers(onChange, (e) => {
           const composerState = useComposer.getState();
           if (!composerState.isEditing) return;
-          return composerState.setValue(e.target.value);
+          return composerState.setText(e.target.value);
         })}
         onKeyDown={composeEventHandlers(onKeyDown, handleKeyPress)}
       />
diff --git a/packages/react/src/primitives/composer/ComposerSend.tsx b/packages/react/src/primitives/composer/ComposerSend.tsx
index db6f7c557..0d5fbe35a 100644
--- a/packages/react/src/primitives/composer/ComposerSend.tsx
+++ b/packages/react/src/primitives/composer/ComposerSend.tsx
@@ -14,7 +14,7 @@ export const ComposerPrimitiveSend = forwardRef<
   ComposerPrimitiveSendProps
 >(({ disabled, ...rest }, ref) => {
   const { useComposer } = useComposerContext();
-  const hasValue = useComposer((c) => c.isEditing && c.value.length > 0);
+  const hasValue = useComposer((c) => c.isEditing && c.text.length > 0);
 
   return (
     <Primitive.button
diff --git a/packages/react/src/runtimes/core/ThreadRuntime.tsx b/packages/react/src/runtimes/core/ThreadRuntime.tsx
index 629f02c3b..594247e7b 100644
--- a/packages/react/src/runtimes/core/ThreadRuntime.tsx
+++ b/packages/react/src/runtimes/core/ThreadRuntime.tsx
@@ -1,11 +1,20 @@
+import { RuntimeCapabilities } from "../../context/stores/Thread";
 import { ThreadActionsState } from "../../context/stores/ThreadActions";
 import { ThreadMessage } from "../../types";
 import type { Unsubscribe } from "../../types/Unsubscribe";
 
-export type ThreadRuntime = Readonly<
-  Omit<ThreadActionsState, "getRuntime"> & {
+export type ThreadRuntime = ThreadActionsState &
+  Readonly<{
+    composer: ThreadRuntime.Composer;
+    capabilities: Readonly<RuntimeCapabilities>;
     isDisabled: boolean;
     messages: readonly ThreadMessage[];
     subscribe: (callback: () => void) => Unsubscribe;
-  }
->;
+  }>;
+
+export declare namespace ThreadRuntime {
+  export type Composer = Readonly<{
+    text: string;
+    setText: (value: string) => void;
+  }>;
+}
diff --git a/packages/react/src/runtimes/external-store/ExternalStoreThreadRuntime.tsx b/packages/react/src/runtimes/external-store/ExternalStoreThreadRuntime.tsx
index b719e9c42..d7d931465 100644
--- a/packages/react/src/runtimes/external-store/ExternalStoreThreadRuntime.tsx
+++ b/packages/react/src/runtimes/external-store/ExternalStoreThreadRuntime.tsx
@@ -13,6 +13,7 @@ import {
 } from "./ThreadMessageConverter";
 import { getAutoStatus, isAutoStatus } from "./auto-status";
 import { fromThreadMessageLike } from "./ThreadMessageLike";
+import { RuntimeCapabilities } from "../../context/stores/Thread";
 
 export const hasUpcomingMessage = (
   isRunning: boolean,
@@ -26,14 +27,16 @@ export class ExternalStoreThreadRuntime implements ReactThreadRuntime {
   private repository = new MessageRepository();
   private assistantOptimisticId: string | null = null;
 
+  private _capabilities: RuntimeCapabilities = {
+    switchToBranch: false,
+    edit: false,
+    reload: false,
+    cancel: false,
+    copy: false,
+  };
+
   public get capabilities() {
-    return {
-      switchToBranch: this._store.setMessages !== undefined,
-      edit: this._store.onEdit !== undefined,
-      reload: this._store.onReload !== undefined,
-      cancel: this._store.onCancel !== undefined,
-      copy: this._store.onCopy !== null,
-    };
+    return this._capabilities;
   }
 
   public messages: ThreadMessage[] = [];
@@ -42,31 +45,48 @@ export class ExternalStoreThreadRuntime implements ReactThreadRuntime {
 
   private _store!: ExternalStoreAdapter<any>;
 
+  public readonly composer = {
+    text: "",
+    setText: (value: string) => {
+      this.composer.text = value;
+      this.notifySubscribers();
+    },
+  };
+
   constructor(store: ExternalStoreAdapter<any>) {
     this.store = store;
   }
 
   public set store(store: ExternalStoreAdapter<any>) {
+    if (this._store === store) return;
+
+    const isRunning = store.isRunning ?? false;
+    this.isDisabled = store.isDisabled ?? false;
+
     const oldStore = this._store as ExternalStoreAdapter<any> | undefined;
+    this._store = store;
+    this._capabilities = {
+      switchToBranch: this._store.setMessages !== undefined,
+      edit: this._store.onEdit !== undefined,
+      reload: this._store.onReload !== undefined,
+      cancel: this._store.onCancel !== undefined,
+      copy: this._store.onCopy !== null,
+    };
 
-    // flush the converter cache when the convertMessage prop changes
     if (oldStore) {
+      // flush the converter cache when the convertMessage prop changes
       if (oldStore.convertMessage !== store.convertMessage) {
         this.converter = new ThreadMessageConverter();
       } else if (
-        oldStore.isDisabled === store.isDisabled &&
         oldStore.isRunning === store.isRunning &&
         oldStore.messages === store.messages
       ) {
-        // no update needed
+        this.notifySubscribers();
+        // no conversion update
         return;
       }
     }
 
-    this._store = store;
-    const isRunning = store.isRunning ?? false;
-    const isDisabled = store.isDisabled ?? false;
-
     const convertCallback: ConverterCallback<any> = (cache, m, idx) => {
       if (!store.convertMessage) return m;
 
@@ -121,7 +141,10 @@ export class ExternalStoreThreadRuntime implements ReactThreadRuntime {
     );
 
     this.messages = this.repository.getMessages();
-    this.isDisabled = isDisabled;
+    this.notifySubscribers();
+  }
+
+  private notifySubscribers() {
     for (const callback of this._subscriptions) callback();
   }
 
diff --git a/packages/react/src/runtimes/local/LocalThreadRuntime.tsx b/packages/react/src/runtimes/local/LocalThreadRuntime.tsx
index 581ed4465..ecf0b96e4 100644
--- a/packages/react/src/runtimes/local/LocalThreadRuntime.tsx
+++ b/packages/react/src/runtimes/local/LocalThreadRuntime.tsx
@@ -39,6 +39,14 @@ export class LocalThreadRuntime implements ThreadRuntime {
     return this.repository.getMessages();
   }
 
+  public readonly composer = {
+    text: "",
+    setText: (value: string) => {
+      this.composer.text = value;
+      this.notifySubscribers();
+    },
+  };
+
   constructor(
     private configProvider: ModelConfigProvider,
     public adapter: ChatModelAdapter,
diff --git a/packages/react/src/ui/assistant-action-bar.tsx b/packages/react/src/ui/assistant-action-bar.tsx
index ad8dc24e3..989db5666 100644
--- a/packages/react/src/ui/assistant-action-bar.tsx
+++ b/packages/react/src/ui/assistant-action-bar.tsx
@@ -13,15 +13,15 @@ import { useThreadContext } from "../context";
 
 const useAllowCopy = () => {
   const { assistantMessage: { allowCopy = true } = {} } = useThreadConfig();
-  const { useThreadActions } = useThreadContext();
-  const copySupported = useThreadActions((t) => t.capabilities.copy);
+  const { useThread } = useThreadContext();
+  const copySupported = useThread((t) => t.capabilities.copy);
   return copySupported && allowCopy;
 };
 
 const useAllowReload = () => {
   const { assistantMessage: { allowReload = true } = {} } = useThreadConfig();
-  const { useThreadActions } = useThreadContext();
-  const reloadSupported = useThreadActions((t) => t.capabilities.reload);
+  const { useThread } = useThreadContext();
+  const reloadSupported = useThread((t) => t.capabilities.reload);
   return reloadSupported && allowReload;
 };
 
diff --git a/packages/react/src/ui/branch-picker.tsx b/packages/react/src/ui/branch-picker.tsx
index 3f10ca2af..d386e11b1 100644
--- a/packages/react/src/ui/branch-picker.tsx
+++ b/packages/react/src/ui/branch-picker.tsx
@@ -14,8 +14,8 @@ import { useThreadContext } from "../context";
 
 const useAllowBranchPicker = () => {
   const { branchPicker: { allowBranchPicker = true } = {} } = useThreadConfig();
-  const { useThreadActions } = useThreadContext();
-  const branchPickerSupported = useThreadActions((t) => t.capabilities.edit);
+  const { useThread } = useThreadContext();
+  const branchPickerSupported = useThread((t) => t.capabilities.edit);
   return branchPickerSupported && allowBranchPicker;
 };
 
diff --git a/packages/react/src/ui/composer.tsx b/packages/react/src/ui/composer.tsx
index 66f3fad7b..deae04c76 100644
--- a/packages/react/src/ui/composer.tsx
+++ b/packages/react/src/ui/composer.tsx
@@ -55,8 +55,8 @@ const ComposerInput = forwardRef<HTMLTextAreaElement, ComposerInputProps>(
 ComposerInput.displayName = "ComposerInput";
 
 const useAllowCancel = () => {
-  const { useThreadActions } = useThreadContext();
-  const cancelSupported = useThreadActions((t) => t.capabilities.cancel);
+  const { useThread } = useThreadContext();
+  const cancelSupported = useThread((t) => t.capabilities.cancel);
   return cancelSupported;
 };
 
diff --git a/packages/react/src/ui/user-action-bar.tsx b/packages/react/src/ui/user-action-bar.tsx
index 930feb537..a95a78337 100644
--- a/packages/react/src/ui/user-action-bar.tsx
+++ b/packages/react/src/ui/user-action-bar.tsx
@@ -14,8 +14,8 @@ import { ActionBarPrimitive } from "../primitives";
 
 const useAllowEdit = () => {
   const { userMessage: { allowEdit = true } = {} } = useThreadConfig();
-  const { useThreadActions } = useThreadContext();
-  const editSupported = useThreadActions((t) => t.capabilities.edit);
+  const { useThread } = useThreadContext();
+  const editSupported = useThread((t) => t.capabilities.edit);
   return editSupported && allowEdit;
 };