@assistant-ui/mcp-docs-server 0.1.24 → 0.1.25

package/.docs/raw/docs/(reference)/api-reference/primitives/thread.mdx

@@ -15,9 +15,11 @@ const Thread = () => (
   <ThreadPrimitive.Root>
     <ThreadPrimitive.Viewport>
       <AuiIf condition={(s) => s.thread.isEmpty}>...</AuiIf>
-      <ThreadPrimitive.Messages components={...} />
+      <ThreadPrimitive.Messages>{...}</ThreadPrimitive.Messages>
+      <ThreadPrimitive.ViewportFooter className="sticky bottom-0">
+        <Composer />
+      </ThreadPrimitive.ViewportFooter>
     </ThreadPrimitive.Viewport>
-    <Composer />
   </ThreadPrimitive.Root>
 );
 ```
@@ -26,7 +28,7 @@ const Thread = () => (
 
 ### Root
 
-Containts all parts of the thread.
+Contains all parts of the thread.
 
 This primitive renders a `<div>` element unless `asChild` is set.
 
@@ -54,9 +56,62 @@ This primitive renders a `<div>` element unless `asChild` is set.
     {
       name: "autoScroll",
       type: "boolean",
+      default: 'true (false when turnAnchor is "top")',
+      description:
+        "Whether to automatically scroll to the bottom of the viewport when new messages are added while the viewport was previously scrolled to the bottom.",
+    },
+    {
+      name: "turnAnchor",
+      type: '"top" | "bottom"',
+      default: '"bottom"',
+      description:
+        'Controls scroll anchoring behavior for new messages. "bottom" is the classic chat behavior where messages anchor at the bottom. "top" anchors new user messages at the top of the viewport for a focused reading experience.',
+    },
+    {
+      name: "scrollToBottomOnRunStart",
+      type: "boolean",
+      default: "true",
+      description: "Whether to scroll to bottom when a new run starts.",
+    },
+    {
+      name: "scrollToBottomOnInitialize",
+      type: "boolean",
       default: "true",
       description:
-        "Whether to automatically scroll to the bottom of the viewport when new messages are added while the viewport is was previously scrolled to the bottom.",
+        "Whether to scroll to bottom when thread history is first loaded.",
+    },
+    {
+      name: "scrollToBottomOnThreadSwitch",
+      type: "boolean",
+      default: "true",
+      description:
+        "Whether to scroll to bottom when switching to a different thread.",
+    },
+  ]}
+/>
+
+### ViewportFooter
+
+A footer container placed inside `ThreadPrimitive.Viewport` that measures its own height (including top margin) and reports it to the viewport context. The viewport uses this measurement in scroll calculations — for example, as the minimum height for `ViewportSlack` — so that the scroll-to-bottom behaviour accounts for any sticky footer overlapping the message list.
+
+Multiple `ViewportFooter` components may be used; their heights are summed.
+
+This primitive renders a `<div>` element unless `asChild` is set.
+
+```tsx
+<ThreadPrimitive.Viewport>
+  <ThreadPrimitive.Messages>{...}</ThreadPrimitive.Messages>
+  <ThreadPrimitive.ViewportFooter className="sticky bottom-0">
+    <Composer />
+  </ThreadPrimitive.ViewportFooter>
+</ThreadPrimitive.Viewport>
+```
+
+<ParametersTable
+  type="ThreadPrimitiveViewportFooterProps"
+  parameters={[
+    {
+      name: "asChild",
     },
   ]}
 />
@@ -86,16 +141,39 @@ Renders all messages. This primitive renders a separate component for each messa
               type: "ComponentType",
               description: "The component to render for user messages.",
             },
+            {
+              name: "AssistantMessage",
+              type: "ComponentType",
+              description: "The component to render for assistant messages.",
+            },
+            {
+              name: "SystemMessage",
+              type: "ComponentType",
+              description: "The component to render for system messages.",
+            },
             {
               name: "EditComposer",
               type: "ComponentType",
               description:
-                "The component to render for user messages that are being edited.",
+                "The component to render when any message type is being edited. Used as a fallback when a role-specific edit composer is not provided.",
             },
             {
-              name: "AssistantMessage",
+              name: "UserEditComposer",
               type: "ComponentType",
-              description: "The component to render for assistant messages.",
+              description:
+                "The component to render when a user message is being edited. Takes precedence over EditComposer for user messages.",
+            },
+            {
+              name: "AssistantEditComposer",
+              type: "ComponentType",
+              description:
+                "The component to render when an assistant message is being edited. Takes precedence over EditComposer for assistant messages.",
+            },
+            {
+              name: "SystemEditComposer",
+              type: "ComponentType",
+              description:
+                "The component to render when a system message is being edited. Takes precedence over EditComposer for system messages.",
             },
           ],
         },
@@ -109,13 +187,9 @@ Renders all messages. This primitive renders a separate component for each messa
 Renders a single message at the specified index in the current thread.
 
 ```tsx
-<ThreadPrimitive.MessageByIndex
-  index={0}
-  components={{
-    UserMessage: MyUserMessage,
-    AssistantMessage: MyAssistantMessage
-  }}
-/>
+<ThreadPrimitive.MessageByIndex index={0}>
+  {({ message }) => message.role === "user" ? <MyUserMessage /> : <MyAssistantMessage />}
+</ThreadPrimitive.MessageByIndex>
 ```
 
 <ParametersTable
@@ -145,16 +219,39 @@ Renders a single message at the specified index in the current thread.
               type: "ComponentType",
               description: "The component to render for user messages.",
             },
+            {
+              name: "AssistantMessage",
+              type: "ComponentType",
+              description: "The component to render for assistant messages.",
+            },
+            {
+              name: "SystemMessage",
+              type: "ComponentType",
+              description: "The component to render for system messages.",
+            },
             {
               name: "EditComposer",
               type: "ComponentType",
               description:
-                "The component to render for user messages that are being edited.",
+                "The component to render when any message type is being edited. Used as a fallback when a role-specific edit composer is not provided.",
             },
             {
-              name: "AssistantMessage",
+              name: "UserEditComposer",
               type: "ComponentType",
-              description: "The component to render for assistant messages.",
+              description:
+                "The component to render when a user message is being edited. Takes precedence over EditComposer for user messages.",
+            },
+            {
+              name: "AssistantEditComposer",
+              type: "ComponentType",
+              description:
+                "The component to render when an assistant message is being edited. Takes precedence over EditComposer for assistant messages.",
+            },
+            {
+              name: "SystemEditComposer",
+              type: "ComponentType",
+              description:
+                "The component to render when a system message is being edited. Takes precedence over EditComposer for system messages.",
             },
           ],
         },
@@ -165,6 +262,10 @@ Renders a single message at the specified index in the current thread.
 
 ### Empty
 
+<Callout type="warn">
+**Deprecated.** Use `<AuiIf condition={(s) => s.thread.isEmpty}>` instead.
+</Callout>
+
 Renders children only when there are no messages.
 
 ### ScrollToBottom
@@ -179,6 +280,54 @@ This primitive renders a `<button>` element unless `asChild` is set.
     {
       name: "asChild",
     },
+    {
+      name: "behavior",
+      type: '"auto" | "instant" | "smooth"',
+      description:
+        "The scroll behavior to use when scrolling to the bottom. Passed to the browser's scrollIntoView API.",
+    },
+  ]}
+/>
+
+### Suggestion
+
+A button that applies a suggestion prompt to the composer. When clicked, it sets the composer text to the given prompt and optionally sends the message immediately.
+
+This primitive renders a `<button>` element unless `asChild` is set.
+
+```tsx
+<ThreadPrimitive.Suggestion prompt="Tell me a joke" send>
+  Tell me a joke
+</ThreadPrimitive.Suggestion>
+```
+
+<ParametersTable
+  type="ThreadPrimitiveSuggestionProps"
+  parameters={[
+    {
+      name: "prompt",
+      type: "string",
+      required: true,
+      description:
+        "The text to place in the composer when this suggestion is activated.",
+    },
+    {
+      name: "send",
+      type: "boolean",
+      default: "false",
+      description:
+        "When true, immediately sends the message instead of only populating the composer.",
+    },
+    {
+      name: "clearComposer",
+      type: "boolean",
+      default: "true",
+      description:
+        "When send is false, determines whether the composer text is replaced by the prompt (true) or appended to it (false).",
+    },
+    {
+      name: "asChild",
+    },
   ]}
 />
 
@@ -192,11 +341,9 @@ import { ThreadPrimitive, SuggestionPrimitive } from "@assistant-ui/react";
 const SuggestionsList = () => {
   return (
     <div className="grid grid-cols-2 gap-2">
-      <ThreadPrimitive.Suggestions
-        components={{
-          Suggestion: SuggestionItem,
-        }}
-      />
+      <ThreadPrimitive.Suggestions>
+        {() => <SuggestionItem />}
+      </ThreadPrimitive.Suggestions>
     </div>
   );
 };

package/.docs/raw/docs/(reference)/api-reference/runtimes/assistant-runtime.mdx

@@ -3,16 +3,26 @@ title: AssistantRuntime
 description: Root runtime for managing threads, tool UIs, and assistant state.
 ---
 
-import { AssistantRuntime, AssistantToolUIsState } from "@/generated/typeDocs";
+import { AssistantRuntime } from "@/generated/typeDocs";
 
 The `AssistantRuntime` is the root runtime of the application.
 
-### `useAssistantRuntime`
+### `useAui`
+
+Access the assistant runtime via `useAui`:
 
 ```tsx
-import { useAssistantRuntime } from "@assistant-ui/react";
+import { useAui } from "@assistant-ui/react";
+
+const aui = useAui();
+
+// Thread management
+aui.threads().switchToNewThread();
+aui.threads().switchToThread(threadId);
 
-const runtime = useAssistantRuntime();
+// Thread actions
+aui.thread().cancelRun();
+aui.thread().append(message);
 ```
 
 <ParametersTable {...AssistantRuntime} />

package/.docs/raw/docs/(reference)/api-reference/runtimes/attachment-runtime.mdx

@@ -3,44 +3,33 @@ title: AttachmentRuntime
 description: Hooks for accessing attachment state in composer and messages.
 ---
 
-import {
-  ComposerAttachmentState,
-  MessageAttachmentState,
-} from "@/components/docs/parameters-table.context";
+import { AttachmentRuntime, AttachmentState } from "@/generated/typeDocs";
 
-### `useAttachment`
+### `useAuiState` (Attachment State)
 
-Access the current attachment state:
+Access the current attachment state reactively:
 
 ```tsx
-import { useAttachment } from "@assistant-ui/react";
+import { useAuiState } from "@assistant-ui/react";
 
-const { attachment } = useAttachment();
-const att = useAttachment((m) => m.attachment);
+const name = useAuiState((s) => s.attachment.name);
+const type = useAuiState((s) => s.attachment.type);
 ```
 
-### `useComposerAttachment` (Composer)
-
-When working with a composer’s attachment:
+For imperative access and actions, use `useAui`:
 
 ```tsx
-import { useComposerAttachment } from "@assistant-ui/react";
+import { useAui } from "@assistant-ui/react";
 
-const { attachment } = useComposerAttachment();
-const composerAttachment = useComposerAttachment((m) => m.attachment);
+const aui = useAui();
+aui.attachment().remove();
+const state = aui.attachment().getState();
 ```
 
-<ParametersTable {...ComposerAttachmentState} />
-
-### `useMessageAttachment` (Message)
+### Attachment Runtime
 
-For managing a message’s attachment:
+<ParametersTable {...AttachmentRuntime} />
 
-```tsx
-import { useMessageAttachment } from "@assistant-ui/react";
-
-const { attachment } = useMessageAttachment();
-const messageAttachment = useMessageAttachment((m) => m.attachment);
-```
+### Attachment State
 
-<ParametersTable {...MessageAttachmentState} />
+<ParametersTable {...AttachmentState} />

package/.docs/raw/docs/(reference)/api-reference/runtimes/composer-runtime.mdx

@@ -5,26 +5,26 @@ description: Runtime for programmatically controlling the message composer.
 
 The composer runtime allows you to view or edit anything related to how new information is added and sent. For instance you can use the composer runtime to read the state, add attachments, update text, send a message, etc.
 
-import { ComposerRuntime, ThreadComposerRuntime, ThreadComposerState, EditComposerState } from "@/generated/typeDocs";
+import { ComposerRuntime, ThreadComposerRuntime, EditComposerRuntime, ThreadComposerState } from "@/generated/typeDocs";
 
-### `useComposerRuntime`
+### `useAui` (Composer Actions)
 
-Grabs the nearest composer (whether it’s the edit composer or the thread’s composer):
+Grabs the nearest composer (whether it’s the edit composer or the thread’s composer) via `useAui`:
 
 ```tsx
 // Example
-import { useComposerRuntime } from "@assistant-ui/react";
+import { useAui } from "@assistant-ui/react";
 
-const composerRuntime = useComposerRuntime();
+const aui = useAui();
 
 // set the text
-composerRuntime.setText("Hello from the composer runtime");
+aui.composer().setText("Hello from the composer");
 
 // send whatever is in the composer
-composerRuntime.send();
+aui.composer().send();
 
 // get the current text in the composer state
-const composerState = composerRuntime.getState();
+const composerState = aui.composer().getState();
 const currentText = composerState.text;
 
 ```
@@ -32,38 +32,56 @@ const currentText = composerState.text;
 <ParametersTable {...ComposerRuntime} />
 
 
-### `useThreadComposer`
+### `useAuiState` (Thread Composer State)
 
 Access the thread’s new message composer state:
 
 ```tsx
-import { useThreadComposer } from "@assistant-ui/react";
+import { useAuiState, useAui } from "@assistant-ui/react";
 
-const threadComposerRuntime = useThreadComposer();
+const text = useAuiState((s) => s.composer.text);
+const isEmpty = useAuiState((s) => s.composer.isEmpty);
+
+// For actions, use useAui
+const aui = useAui();
 
 // set the text
-threadComposerRuntime.setText("Hello from the thread composer runtime");
+aui.composer().setText("Hello from the thread composer");
 
 // send whatever is in the thread composer
-threadComposerRuntime.send();
-
-// get the current text in the composer state
-const threadComposerState = threadComposerRuntime.getState();
-const currentText = threadComposerRuntime.text;
+aui.composer().send();
 
 ```
 
 <ParametersTable {...ThreadComposerRuntime} />
 
 
+### `useAui` (Edit Composer Actions)
+
+Access edit composer actions via `useAui` from within a message component:
+
+```tsx
+import { useAui } from "@assistant-ui/react";
+
+const aui = useAui();
+
+// Begin editing the current message (populates the composer with its content)
+aui.message().composer().beginEdit();
+
+// Update the text and send the edit
+aui.message().composer().setText("Updated message text");
+aui.message().composer().send();
+
+// Cancel editing without saving
+aui.message().composer().cancel();
+```
+
+<ParametersTable {...EditComposerRuntime} />
+
 ### `ThreadComposerState`
 
 The state of the thread composer which is the composer the user can interact with at the bottom.
 
 <ParametersTable {...ThreadComposerState} />
 
-### `EditComposerState`
-
-The state of the edit composer which is the composer the user can edit messages with.
 
-<ParametersTable {...EditComposerState} />

package/.docs/raw/docs/(reference)/api-reference/runtimes/message-part-runtime.mdx

@@ -3,20 +3,44 @@ title: MessagePartRuntime
 description: Hook for accessing message part state within parts.
 ---
 
-import { MessagePartState } from "@/components/docs/parameters-table.context";
+import { MessagePartRuntime, TextMessagePartState } from "@/generated/typeDocs";
 
-### `useMessagePart`
+### `useAui` (Message Part Actions)
 
-Access the message part state:
+Access message part actions via `useAui`:
 
 ```tsx
-import { useMessagePart } from "@assistant-ui/react";
+import { useAui } from "@assistant-ui/react";
 
-const part = useMessagePart();
-const partState = useMessagePart.getState();
+const aui = useAui();
 
-const status = useMessagePart((m) => m.status);
-const statusAgain = useMessagePart.getState().status;
+// Add a tool result to a tool-call message part
+aui.part().addToolResult({ result: "Tool output" });
+
+// Resume an interrupted tool call
+aui.part().resumeToolCall({ approved: true });
+```
+
+<ParametersTable {...MessagePartRuntime} />
+
+### `useAuiState` (Message Part State)
+
+Access the message part state reactively:
+
+```tsx
+import { useAuiState } from "@assistant-ui/react";
+
+const status = useAuiState((s) => s.part.status);
+const type = useAuiState((s) => s.part.type);
+```
+
+For imperative access, use `useAui`:
+
+```tsx
+import { useAui } from "@assistant-ui/react";
+
+const aui = useAui();
+const partState = aui.part().getState();
 ```
 
-<ParametersTable {...MessagePartState} />
+<ParametersTable {...TextMessagePartState} />

package/.docs/raw/docs/(reference)/api-reference/runtimes/message-runtime.mdx

@@ -1,49 +1,76 @@
 ---
 title: MessageRuntime
-description: Hooks for accessing message state, utilities, and edit composer.
+description: Hooks for accessing message state and edit composer.
 ---
 
 import {
+  MessageRuntime,
   MessageState,
-  MessageUtilsState,
-  EditComposerState,
-} from "@/components/docs/parameters-table.context";
+  ComposerState,
+} from "@/generated/typeDocs";
 
-### `useMessage`
+### `useAui` (Message Actions)
 
-Retrieve the message object:
+Access message actions via `useAui`:
 
 ```tsx
-import { useMessage } from "@assistant-ui/react";
+import { useAui } from "@assistant-ui/react";
 
-const { message } = useMessage();
-const msg = useMessage((m) => m.message);
+const aui = useAui();
+
+// Reload an assistant message (regenerate the response)
+aui.message().reload();
+
+// Switch to the previous or next branch
+aui.message().switchToBranch({ position: "previous" });
+aui.message().switchToBranch({ position: "next" });
+
+// Submit feedback on a message
+aui.message().submitFeedback({ type: "positive" });
+aui.message().submitFeedback({ type: "negative" });
+
+// Get the plain-text content of the message
+const text = aui.message().getCopyText();
+
+// Access a message part by index or tool call ID
+aui.message().part({ index: 0 });
+aui.message().part({ toolCallId: "call_123" });
+
+// Access an attachment by index
+aui.message().attachment({ index: 0 });
+
+// Access the edit composer for this message
+aui.message().composer();
+
+// Get a snapshot of the full message state
+const state = aui.message().getState();
 ```
 
-<ParametersTable {...MessageState} />
+<ParametersTable {...MessageRuntime} />
 
-### `useMessageUtils`
+### `useAuiState` (Message State)
 
-Provides utility functions for a message (e.g., copy status):
+Access message state reactively:
 
 ```tsx
-import { useMessageUtils } from "@assistant-ui/react";
+import { useAuiState } from "@assistant-ui/react";
 
-const messageUtils = useMessageUtils();
-const isCopied = useMessageUtils((m) => m.isCopied);
+const role = useAuiState((s) => s.message.role);
+const content = useAuiState((s) => s.message.content);
+const isLast = useAuiState((s) => s.message.isLast);
 ```
 
-<ParametersTable {...MessageUtilsState} />
+<ParametersTable {...MessageState} />
 
-### `useEditComposer`
+### `useAuiState` (Edit Composer)
 
 Access the edit composer state (used when editing a message):
 
 ```tsx
-import { useEditComposer } from "@assistant-ui/react";
+import { useAuiState } from "@assistant-ui/react";
 
-const editComposer = useEditComposer();
-const text = useEditComposer((m) => m.text);
+const editText = useAuiState((s) => s.message.composer.text);
+const isEditing = useAuiState((s) => s.message.composer.isEditing);
 ```
 
-<ParametersTable {...EditComposerState} />
+<ParametersTable {...ComposerState} />

package/.docs/raw/docs/(reference)/api-reference/runtimes/thread-list-item-runtime.mdx

@@ -8,25 +8,54 @@ import {
   ThreadListItemState,
 } from "@/generated/typeDocs";
 
-### `useThreadListItemRuntime`
+### `useAui` (Thread List Item Actions)
+
+Access thread list item actions via `useAui`:
 
 ```tsx
-import { useThreadListItemRuntime } from "@assistant-ui/react";
+import { useAui } from "@assistant-ui/react";
+
+const aui = useAui();
+
+// Navigation
+await aui.threadListItem().switchTo();
+
+// Rename
+await aui.threadListItem().rename("New Title");
+
+// Archive / unarchive
+await aui.threadListItem().archive();
+await aui.threadListItem().unarchive();
+
+// Delete
+await aui.threadListItem().delete();
+
+// Initialize a new thread (returns remoteId and externalId)
+const { remoteId, externalId } = await aui.threadListItem().initialize();
+
+// Auto-generate a title from thread content
+await aui.threadListItem().generateTitle();
+
+// Detach the thread list item from its thread
+aui.threadListItem().detach();
 
-const threadListItemRuntime = useThreadListItemRuntime();
+// Get current state
+const state = aui.threadListItem().getState();
+const { id, title, status } = state;
 ```
 
 <ParametersTable {...ThreadListItemRuntime} />
 
-### `useThreadListItem`
+### `useAuiState` (Thread List Item State)
 
 Access the state for a specific thread list item:
 
 ```tsx
-import { useThreadListItem } from "@assistant-ui/react";
+import { useAuiState } from "@assistant-ui/react";
 
-const threadListItem = useThreadListItem();
-const title = useThreadListItem((m) => m.title);
+const title = useAuiState((s) => s.threadListItem.title);
+const status = useAuiState((s) => s.threadListItem.status);
+const id = useAuiState((s) => s.threadListItem.id);
 ```
 
 <ParametersTable {...ThreadListItemState} />