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

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

@@ -4,26 +4,71 @@ 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 (namespace)", "shadcn"]}>
+  <Tab>
+
+```sh
+npx assistant-ui@latest add thread
+```
+
+  </Tab>
+  <Tab>
+
+```sh
+npx shadcn@latest add @assistant-ui/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 +79,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 +90,327 @@ 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, with or without sidebar

package/.docs/raw/docs/ui/ThreadList.mdx

@@ -24,14 +24,60 @@ This demo uses **ThreadListSidebar**, which includes `thread-list` as a dependen
 
 ### Add the component
 
+Use `threadlist-sidebar` for a complete sidebar layout or `thread-list` for custom layouts.
+
+#### ThreadListSidebar
+
+<Tabs items={["assistant-ui", "shadcn (namespace)", "shadcn"]}>
+  <Tab>
+
+```sh
+npx assistant-ui@latest add threadlist-sidebar
+```
+
+  </Tab>
+  <Tab>
+
+```sh
+npx shadcn@latest add @assistant-ui/threadlist-sidebar
+```
+
+  </Tab>
+  <Tab>
+
 ```sh
-# Complete thread-list sidebar layout
 npx shadcn@latest add "https://r.assistant-ui.com/threadlist-sidebar"
+```
+
+  </Tab>
+</Tabs>
 
-# Just the thread-list for custom layouts
+#### ThreadList
+
+<Tabs items={["assistant-ui", "shadcn (namespace)", "shadcn"]}>
+  <Tab>
+
+```sh
+npx assistant-ui@latest add thread-list
+```
+
+  </Tab>
+  <Tab>
+
+```sh
+npx shadcn@latest add @assistant-ui/thread-list
+```
+
+  </Tab>
+  <Tab>
+
+```sh
 npx shadcn@latest add "https://r.assistant-ui.com/thread-list"
 ```
 
+  </Tab>
+</Tabs>
+
   </Step>
   <Step>
 

package/.docs/raw/docs/ui/ToolFallback.mdx

@@ -3,6 +3,7 @@ title: ToolFallback
 ---
 
 import { Steps, Step } from "fumadocs-ui/components/steps";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 
 ## Overview
 
@@ -15,10 +16,30 @@ The ToolFallback component displays a default ToolUI for tools that do not have
 
 ### Add `tool-fallback`
 
+<Tabs items={["assistant-ui", "shadcn (namespace)", "shadcn"]}>
+  <Tab>
+
+```sh
+npx assistant-ui@latest add tool-fallback
+```
+
+  </Tab>
+  <Tab>
+
+```sh
+npx shadcn@latest add @assistant-ui/tool-fallback
+```
+
+  </Tab>
+  <Tab>
+
 ```sh
 npx shadcn@latest add "https://r.assistant-ui.com/tool-fallback"
 ```
 
+  </Tab>
+</Tabs>
+
 This adds a `/components/assistant-ui/tool-fallback.tsx` file to your project, which you can adjust as needed.
 
   </Step>

package/package.json

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