@assistant-ui/mcp-docs-server 0.1.9 → 0.1.10

package/.docs/raw/docs/ui/Thread.mdx

@@ -4,26 +4,64 @@ title: Thread
 
 import { Steps, Step } from "fumadocs-ui/components/steps";
 import { Callout } from "fumadocs-ui/components/callout";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+import { ParametersTable } from "@/components/docs";
 import { ThreadSample } from "../../../components/samples/thread-sample";
 
+A complete chat interface that combines message rendering, auto-scrolling, composer input,
+attachments, and conditional UI states. Fully customizable and composable.
 
-## Overview
-
-The raw message list and message composer UI.
 
 <ThreadSample />
 
+## Anatomy
+
+The Thread component is built with the following primitives:
+
+```tsx
+import { ThreadPrimitive } from "@assistant-ui/react";
+
+<ThreadPrimitive.Root>
+  <ThreadPrimitive.Viewport>
+    <ThreadPrimitive.Empty />
+    <ThreadPrimitive.Messages
+      components={{
+        EditComposer,
+        UserMessage, 
+        AssistantMessage,
+      }}
+    />
+    <ThreadPrimitive.ScrollToBottom />
+  </ThreadPrimitive.Viewport>
+  <ThreadPrimitive.Suggestion />
+  <ThreadPrimitive.If />
+</ThreadPrimitive.Root>
+```
+
 ## Getting Started
 
 <Steps>
   <Step>
 
-### Add `thread`
+### Add the component
+
+<Tabs items={["assistant-ui", "shadcn"]}>
+  <Tab>
+
+```sh
+npx assistant-ui@latest add thread
+```
+
+  </Tab>
+  <Tab>
 
 ```sh
 npx shadcn@latest add "https://r.assistant-ui.com/thread"
 ```
 
+  </Tab>
+</Tabs>
+
 This adds a `/components/assistant-ui/thread.tsx` file to your project, which you can adjust as needed.
 
   </Step>
@@ -34,7 +72,7 @@ This adds a `/components/assistant-ui/thread.tsx` file to your project, which yo
 ```tsx title="/app/page.tsx" {1,6}
 import { Thread } from "@/components/assistant-ui/thread";
 
-export default function Home() {
+export default function Chat() {
   return (
     <div className="h-full">
       <Thread />
@@ -45,3 +83,328 @@ export default function Home() {
 
   </Step>
 </Steps>
+
+## Examples
+
+### Welcome Screen
+
+```tsx
+<ThreadPrimitive.If empty>
+  <ThreadWelcome />
+</ThreadPrimitive.If>
+```
+
+### Viewport Spacer
+
+```tsx
+<ThreadPrimitive.If empty={false}>
+  <div className="min-h-8 grow" />
+</ThreadPrimitive.If>
+```
+
+### Conditional Send/Cancel Button
+
+```tsx
+<ThreadPrimitive.If running={false}>
+  <ComposerPrimitive.Send>
+    Send
+  </ComposerPrimitive.Send>
+</ThreadPrimitive.If>
+
+<ThreadPrimitive.If running>
+  <ComposerPrimitive.Cancel>
+    Cancel
+  </ComposerPrimitive.Cancel>
+</ThreadPrimitive.If>
+```
+
+### Suggestions
+
+```tsx
+<ThreadPrimitive.Suggestion
+  prompt="What's the weather in San Francisco?"
+  send
+/>
+```
+
+## API Reference
+
+The following primitives are used within the Thread component and can be customized in your `/components/assistant-ui/thread.tsx` file.
+
+### Root
+
+Contains all parts of the thread.
+
+<ParametersTable
+  type="ThreadPrimitiveRootProps"
+  parameters={[
+    {
+      name: "asChild",
+      type: "boolean",
+      default: "false",
+      description: "Merge props with child element instead of rendering a wrapper div.",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "CSS class name.",
+    },
+  ]}
+/>
+
+This primitive renders a `<div>` element unless `asChild` is set.
+
+### Viewport
+
+The scrollable area containing all messages. Automatically scrolls to the bottom as new messages are added.
+
+<ParametersTable
+  type="ThreadPrimitiveViewportProps"
+  parameters={[
+    {
+      name: "asChild",
+      type: "boolean",
+      default: "false",
+      description: "Merge props with child element instead of rendering a wrapper div.",
+    },
+    {
+      name: "autoScroll",
+      type: "boolean",
+      default: "true",
+      description:
+        "Whether to automatically scroll to the bottom when new messages are added while the viewport was previously scrolled to the bottom.",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "CSS class name.",
+    },
+  ]}
+/>
+
+This primitive renders a `<div>` element unless `asChild` is set.
+
+### Messages
+
+Renders all messages in the thread. This primitive renders a separate component for each message.
+
+```tsx
+<ThreadPrimitive.Messages
+  components={{
+    UserMessage: UserMessage,
+    EditComposer: EditComposer,
+    AssistantMessage: AssistantMessage,
+  }}
+/>
+```
+
+<ParametersTable
+  type="ThreadPrimitiveMessagesProps"
+  parameters={[
+    {
+      name: "components",
+      type: "MessageComponents",
+      required: true,
+      description: "Components to render for different message types.",
+      children: [
+        {
+          type: "MessageComponents",
+          parameters: [
+            {
+              name: "Message",
+              type: "ComponentType",
+              description: "Default component for all messages.",
+            },
+            {
+              name: "UserMessage",
+              type: "ComponentType",
+              description: "Component for user messages.",
+            },
+            {
+              name: "EditComposer",
+              type: "ComponentType",
+              description:
+                "Component for user messages being edited.",
+            },
+            {
+              name: "AssistantMessage",
+              type: "ComponentType",
+              description: "Component for assistant messages.",
+            },
+            {
+              name: "SystemMessage",
+              type: "ComponentType",
+              description: "Component for system messages.",
+            },
+          ],
+        },
+      ],
+    },
+  ]}
+/>
+
+
+### MessageByIndex
+
+Renders a single message at the specified index.
+
+```tsx
+<ThreadPrimitive.MessageByIndex
+  index={0}
+  components={{
+    UserMessage: UserMessage,
+    AssistantMessage: AssistantMessage
+  }}
+/>
+```
+
+<ParametersTable
+  type="ThreadPrimitiveMessageByIndexProps"
+  parameters={[
+    {
+      name: "index",
+      type: "number",
+      required: true,
+      description: "The index of the message to render.",
+    },
+    {
+      name: "components",
+      type: "MessageComponents",
+      description: "Components to render for different message types.",
+    },
+  ]}
+/>
+
+### Empty
+
+Renders children only when there are no messages in the thread.
+
+<ParametersTable
+  type="ThreadPrimitiveEmptyProps"
+  parameters={[
+    {
+      name: "children",
+      type: "ReactNode",
+      description: "Content to display when the thread is empty.",
+    },
+  ]}
+/>
+
+### ScrollToBottom
+
+A button to scroll the viewport to the bottom. Disabled when the viewport is already at the bottom.
+
+<ParametersTable
+  type="ThreadPrimitiveScrollToBottomProps"
+  parameters={[
+    {
+      name: "asChild",
+      type: "boolean",
+      default: "false",
+      description: "Merge props with child element instead of rendering a wrapper button.",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "CSS class name.",
+    },
+  ]}
+/>
+
+This primitive renders a `<button>` element unless `asChild` is set.
+
+### Suggestion
+
+Shows a suggestion to the user. When clicked, replaces the composer's value with the suggestion and optionally sends it.
+
+```tsx
+<ThreadPrimitive.Suggestion
+  prompt="Tell me about React hooks"
+  send
+/>
+```
+
+<ParametersTable
+  type="ThreadPrimitiveSuggestionProps"
+  parameters={[
+    {
+      name: "prompt",
+      type: "string",
+      required: true,
+      description: "The suggestion text to use when clicked.",
+    },
+    {
+      name: "send",
+      type: "boolean",
+      description:
+        "When true, automatically sends the message. When false, replaces or appends the composer text with the suggestion - depending on the value of `clearComposer`",
+    },
+    {
+      name: "clearComposer",
+      type: "boolean",
+      default: "true",
+      description:
+        "Whether to clear the composer after sending. When send is set to false, determines if composer text is replaced with suggestion (true, default), or if the suggestion's prompt is appended to the composer text (false).",
+    },
+    {
+      name: "autoSend",
+      type: "boolean",
+      deprecated: true,
+      description: "Deprecated. Use 'send' instead.",
+    },
+    {
+      name: "method",
+      type: "'replace'",
+      deprecated: true,
+      description: "Deprecated. This parameter is no longer used.",
+    },
+    {
+      name: "asChild",
+      type: "boolean",
+      default: "false",
+      description: "Merge props with child element instead of rendering a wrapper button.",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "CSS class name.",
+    },
+  ]}
+/>
+
+This primitive renders a `<button>` element unless `asChild` is set.
+
+### If
+
+Conditionally renders children based on thread state.
+
+<ParametersTable
+  type="ThreadPrimitiveIfProps"
+  parameters={[
+    {
+      name: "empty",
+      type: "boolean | undefined",
+      description: "Render children if the thread is empty (no messages).",
+    },
+    {
+      name: "running",
+      type: "boolean | undefined",
+      description: "Render children if the thread is running (assistant is responding).",
+    },
+    {
+      name: "disabled",
+      type: "boolean | undefined",
+      description: "Render children if the thread is disabled.",
+    },
+  ]}
+/>
+
+<Callout type="info">
+Multiple conditions can be combined on `ThreadPrimitive.If` - all specified conditions must match for children to render.
+</Callout>
+
+
+## Related Components
+
+- [ThreadList](/docs/ui/ThreadList) - List of threads
+- [ThreadListSidebar](/docs/ui/ThreadListSidebar) - Sidebar with thread list

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/mcp-docs-server",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "MCP server for assistant-ui documentation and examples",
   "type": "module",
   "main": "dist/index.js",
@@ -8,16 +8,16 @@
     "assistant-ui-mcp": "./dist/stdio.js"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.18.2",
+    "@modelcontextprotocol/sdk": "^1.19.1",
     "zod": "^4.1.11",
     "gray-matter": "^4.0.3",
-    "cross-env": "^10.0.0"
+    "cross-env": "^10.1.0"
   },
   "devDependencies": {
-    "@types/node": "^24.5.2",
+    "@types/node": "^24.6.2",
     "tsup": "^8.5.0",
     "tsx": "^4.20.6",
-    "typescript": "^5.9.2",
+    "typescript": "^5.9.3",
     "vitest": "^3.2.4",
     "eslint": "^9.36.0"
   },

package/.docs/raw/docs/migrations/v0-7.mdx

@@ -1,188 +0,0 @@
----
-title: Migration to v0.7
----
-
-import { Callout } from "fumadocs-ui/components/callout";
-
-This guide serves as a reference for users facing breaking changes during upgrade to v0.7. You do not need to read this guide to upgrade to v0.7.
-
-All breaking changes in v0.7 are renames or removals of existing APIs. Therefore, all breaking changes should cause a Typescript error, so you can simply check for errors after upgrading.
-
-### Component Property Types moved to `Component.Props`
-
-Component property types are now neatly organized under the component itself.
-
-```diff
--import { ThreadPrimitiveMessagesProps } from "@assistant-ui/react";
-+import { ThreadPrimitive } from "@assistant-ui/react";
-
--type Props = ThreadPrimitiveMessagesProps;
-+type Props = ThreadPrimitive.Messages.Props;
-```
-
-## Context API simplifications
-
-### `useThreadContext`, `useMessageContext`, ... replaced with direct imports of stores
-
-`useAssistantContext`, `useThreadContext`, `useMessageContext` and `useMessagePartContext` have been removed in favor of direct exports from `@assistant-ui/react`;
-
-```diff
--const { useThread } = useThreadContext();
-
-+import { useThread } from "@assistant-ui/react";
-```
-
-# Assistant Context API simplifications
-
-### `useAssistantActions` replaced with `useAssistantRuntime`
-
-`useAssistantActions` has been removed in favor of `useAssistantRuntime`.
-
-```diff
--const switchToNewThread = useAssistantActions(a => a.switchToNewThread);
-+const runtime = useAssistantRuntime();
-+runtime.switchToNewThread();
-```
-
-### `switchToThread(null)` replaced with `switchToNewThread()`
-
-```diff
--useThreadRuntime().switchToThread(null);
-+useThreadRuntime().switchToNewThread();
-```
-
-### useSwtichToNewThread() moved to useAssistantRuntime().switchToNewThread()
-
-```diff
--useSwitchToNewThread();
-+const runtime = useAssistantRuntime()
-+runtime.switchToNewThread();
-```
-
-### `runtime.subscribe` removed, `subscribeToMainThread` removed
-
-Previously, you needed to subscribe to the runtime to receive updates whenever the main thread changed and resubscribe to the main thread whenever you switched to a new thread. The `runtime.thread` value now always refers to the current main thread, there is no need to subscribe to the runtime anymore.
-
-## ThreadRuntime API simplifications
-
-### `useAppendMessage` moved to `useThreadRuntime().append()`
-
-```diff
--const append = useAppendMessage();
-+const threadRuntime = useThreadRuntime();
--append("hello world");
-+threadRuntime.append("hello world");
-```
-
-### `useThreadActions` replaced with `useThreadRuntime`
-
-`useThreadActions` has been removed in favor of `useThreadRuntime`.
-
-```diff
--const reload = useThreadActions(a => a.reload);
-+const threadRuntime = useThreadRuntime();
-+threadRuntime.reload();
-```
-
-### State values moved to `threadRuntime.getState()`
-
-In order to make it clear that accessing the state only provides a snapshot of the current state and will not cause a re-render on changes, the state values of `useThreadRuntime` have been moved to `threadRuntime.getState()`.
-
-```diff
--const isRunning = useThreadRuntime().isRunning; // anti-pattern, your code will not update on change
-+const isRunning = useThread(t => t.isRunning);
-```
-
-### `useThreadStore` replaced with `useThreadRuntime().getState()`
-
-`useThreadStore` has been removed in favor of `useThreadRuntime().getState()`.
-
-### `threadRuntime.getBranches()` replaced with `useThreadRuntime().getMessageByIndex(idx).getState().branchNumber/Count`
-
-The branch IDs are an internal implementation detail. The new Message Runtime API provides `branchNumber` and `branchCount` state fields that can be used instead.
-
-### New Message Runtime API replaces several methods from `useThreadRuntime`
-
-A few methods from `useThreadRuntime` have been moved to `useMessageRuntime()`.
-
-- `threadRuntime.switchToBranch()` has been removed in favor of `useThreadRuntime().getMessageByIndex(idx).switchToBranch()`.
-- `threadRuntime.addToolResult()` has been removed in favor of `useThreadRuntime().getMessageByIndex(idx).getMessagePartByToolCallId(toolCallId).addToolResult()`.
-- `threadRuntime.speak()` has been removed in favor of `useThreadRuntime().getMessageByIndex(idx).speak()`.
-- `threadRuntime.submitFeedback()` has been removed in favor of `useThreadRuntime().getMessageByIndex(idx).submitFeedback()`.
-- `threadRuntime.getEditComposer()` has been removed in favor of `useThreadRuntime().getMessageById(id).getMessageByIndex(idx).composer`.
-- `threadRuntime.beginEdit()` has been removed in favor of `useThreadRuntime().getMessageById(id).getMessageByIndex(idx).composer.beginEdit()`.
-
-## Composer Runtime API simplifications
-
-### Methods inside `useComposer` moved to `useComposerRuntime`
-
-`useComposer()` used to provide several methods such as `setText`, `addAttachment`, `send`, `edit`, `cancel`, ...
-These methods have been moved to `useComposerRuntime()`.
-
-### `useComposerStore` replaced with `useComposerRuntime().getState()`
-
-`useComposerStore` has been removed in favor of `useComposerRuntime().getState()`.
-
-### `value` `setValue` replaced with `text` `setText`
-
-```diff
--useComposer(c => c.value);
-+useComposer(c => c.text);
-```
-
-### `focus`, `onFocus` methods removed
-
-These methods have been removed.
-
-## Message Context API simplifications
-
-### Flattened context values `useMessage().message` -> `useMessage()`
-
-`MessageState` is now itself a message, so you no longer need to access the nested `useMessage().message` field.
-
-```diff
--useMessage(m => m.message.content);
-+useMessage(m => m.content);
-```
-
-### `useMessageStore` replaced with `useMessageRuntime().getState()`
-
-`useMessageStore` has been removed in favor of `useMessageRuntime().getState()`.
-
-## Message part Context API simplifications
-
-### Flattened context values `useMessagePart().part` -> `useMessagePart()`
-
-`MessagePartState` is now itself a message part, so you no longer need to access the nested `useMessagePart().part` field.
-
-```diff
--useMessagePart(c => c.part.type);
-+useMessagePart(c => c.type);
-```
-
-This also applies to tool UI render functions:
-
-```diff
- makeAssistantToolUI({
-   ...
--  render: ({ part: { args } }) => <>{args}</>,
-+  render: ({ args }) => <>{args}</>,
- });
-```
-
-## Attachment Context API simplifications
-
-### Flattened context values `useAttachment().attachment` -> `useAttachment()`
-
-`AttachmentState` is now itself an attachment, so you no longer need to access the nested `useAttachment().attachment` field.
-
-```diff
--useAttachment(a => a.attachment.type);
-+useAttachment(a => a.type);
-```
-
-## Roundtrips renamed to steps
-
-`AssistantMessage.roundtrips` was renamed to `AssistantMessage.metadata.steps`.
-
-Edge runtime's `maxToolRoundtrips` was replaced with `maxSteps` (which is `maxToolRoundtrips` + 1; if you had `maxToolRoundtrips` at 2, set `maxSteps` to 3).