@assistant-ui/mcp-docs-server 0.1.17 → 0.1.19

package/.docs/raw/docs/ui/assistant-sidebar.mdx

@@ -0,0 +1,90 @@
+---
+title: AssistantSidebar
+description: Side panel chat for co-pilot experiences and inline assistance.
+---
+
+import { ParametersTable } from "@/components/docs/tables/ParametersTable";
+import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
+import { AssistantSidebarSample } from "@/components/docs/samples/assistant-sidebar";
+
+A resizable side panel layout with your main content on the left and a Thread chat interface on the right. Ideal for co-pilot experiences and inline assistance.
+
+<AssistantSidebarSample />
+
+## Getting Started
+
+<Steps> 
+  <Step>
+
+### Add `assistant-sidebar`
+
+<InstallCommand shadcn={["assistant-sidebar"]} />
+
+This adds `/components/assistant-ui/assistant-sidebar.tsx` to your project, which you can adjust as needed.
+
+  </Step>
+  <Step>
+
+### Use in your application
+
+```tsx title="/app/page.tsx" {1,6}
+import { AssistantSidebar } from "@/components/assistant-ui/assistant-sidebar";
+
+export default function Home() {
+  return (
+    <div className="h-full">
+      <AssistantSidebar>{/* your app */}</AssistantSidebar>
+    </div>
+  );
+}
+```
+
+  </Step>
+</Steps>
+
+## API Reference
+
+### AssistantSidebar
+
+A layout component that creates a resizable two-panel interface.
+
+<ParametersTable
+  type="AssistantSidebarProps"
+  parameters={[
+    {
+      name: "children",
+      type: "ReactNode",
+      description: "Content to display in the left panel (your main application).",
+    },
+  ]}
+/>
+
+The component uses `ResizablePanelGroup` from shadcn/ui internally, creating:
+- **Left panel**: Your application content (passed as `children`)
+- **Right panel**: The Thread chat interface (rendered automatically)
+- **Resize handle**: Draggable divider between panels
+
+## Customization
+
+Since this component is copied to your project at `/components/assistant-ui/assistant-sidebar.tsx`, you can customize:
+
+- Panel default sizes and min/max constraints
+- Resize handle styling
+- Thread component configuration
+
+```tsx title="/components/assistant-ui/assistant-sidebar.tsx"
+<ResizablePanelGroup direction="horizontal">
+  <ResizablePanel defaultSize={60} minSize={30}>
+    {children}
+  </ResizablePanel>
+  <ResizableHandle withHandle />
+  <ResizablePanel defaultSize={40} minSize={20}>
+    <Thread />
+  </ResizablePanel>
+</ResizablePanelGroup>
+```
+
+## Related Components
+
+- [Thread](/docs/ui/thread) - The chat interface displayed in the sidebar
+- [AssistantModal](/docs/ui/assistant-modal) - Alternative floating modal layout

package/.docs/raw/docs/ui/attachment.mdx

@@ -0,0 +1,227 @@
+---
+title: Attachment
+description: UI components for attaching and viewing files in messages.
+---
+
+import { ParametersTable } from "@/components/docs/tables/ParametersTable";
+import { AttachmentSample } from "@/components/docs/samples/attachment";
+import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
+
+<AttachmentSample />
+
+<Callout type="info">
+  **Note:** These components provide the UI for attachments, but you also need
+  to configure attachment adapters in your runtime to handle file uploads and
+  processing. See the [Attachments Guide](/docs/guides/attachments) for complete
+  setup instructions.
+</Callout>
+
+## Getting Started
+
+<Steps>
+  <Step>
+
+### Add `attachment`
+
+<InstallCommand shadcn={["attachment"]} />
+
+This adds a `/components/assistant-ui/attachment.tsx` file to your project, which you can adjust as needed.
+
+  </Step>
+  <Step>
+
+### Use in your application
+
+```tsx title="/components/assistant-ui/thread.tsx" {1-4,9-10}
+import {
+  ComposerAttachments,
+  ComposerAddAttachment,
+} from "@/components/assistant-ui/attachment";
+
+const Composer: FC = () => {
+  return (
+    <ComposerPrimitive.Root className="...">
+      <ComposerAttachments />
+      <ComposerAddAttachment />
+
+      <ComposerPrimitive.Input
+        autoFocus
+        placeholder="Write a message..."
+        rows={1}
+        className="..."
+      />
+      <ComposerAction />
+    </ComposerPrimitive.Root>
+  );
+};
+```
+
+```tsx title="/components/assistant-ui/thread.tsx" {1,8}
+import { UserMessageAttachments } from "@/components/assistant-ui/attachment";
+
+const UserMessage: FC = () => {
+  return (
+    <MessagePrimitive.Root className="...">
+      <UserActionBar />
+
+      <UserMessageAttachments />
+
+      <div className="...">
+        <MessagePrimitive.Parts />
+      </div>
+
+      <BranchPicker className="..." />
+    </MessagePrimitive.Root>
+  );
+};
+```
+
+  </Step>
+</Steps>
+
+## API Reference
+
+### Composer Attachments
+
+#### ComposerPrimitive.Attachments
+
+Renders all attachments in the composer.
+
+<ParametersTable
+  type="ComposerPrimitiveAttachmentsProps"
+  parameters={[
+    {
+      name: "components",
+      type: "AttachmentComponents",
+      description: "Components to render for different attachment types.",
+      children: [
+        {
+          type: "AttachmentComponents",
+          parameters: [
+            {
+              name: "Image",
+              type: "ComponentType",
+              description: "Component for image attachments.",
+            },
+            {
+              name: "Document",
+              type: "ComponentType",
+              description: "Component for document attachments (PDF, etc.).",
+            },
+            {
+              name: "File",
+              type: "ComponentType",
+              description: "Component for generic file attachments.",
+            },
+            {
+              name: "Attachment",
+              type: "ComponentType",
+              description: "Fallback component for all attachment types.",
+            },
+          ],
+        },
+      ],
+    },
+  ]}
+/>
+
+#### ComposerPrimitive.AddAttachment
+
+A button that opens the file picker to add attachments.
+
+<ParametersTable
+  type="ComposerPrimitiveAddAttachmentProps"
+  parameters={[
+    {
+      name: "multiple",
+      type: "boolean",
+      default: "true",
+      description: "Allow selecting multiple files at once.",
+    },
+    {
+      name: "asChild",
+      type: "boolean",
+      default: "false",
+      description: "Merge props with child element instead of rendering a wrapper button.",
+    },
+  ]}
+/>
+
+This primitive renders a `<button>` element unless `asChild` is set.
+
+### Message Attachments
+
+#### MessagePrimitive.Attachments
+
+Renders all attachments in a user message.
+
+<ParametersTable
+  type="MessagePrimitiveAttachmentsProps"
+  parameters={[
+    {
+      name: "components",
+      type: "AttachmentComponents",
+      description: "Components to render for different attachment types (same as ComposerPrimitive.Attachments).",
+    },
+  ]}
+/>
+
+### Attachment Primitives
+
+#### AttachmentPrimitive.Root
+
+Container for a single attachment.
+
+<ParametersTable
+  type="AttachmentPrimitiveRootProps"
+  parameters={[
+    {
+      name: "asChild",
+      type: "boolean",
+      default: "false",
+      description: "Merge props with child element instead of rendering a wrapper div.",
+    },
+  ]}
+/>
+
+#### AttachmentPrimitive.Name
+
+Renders the attachment's file name.
+
+#### AttachmentPrimitive.Remove
+
+A button to remove the attachment from the composer.
+
+<ParametersTable
+  type="AttachmentPrimitiveRemoveProps"
+  parameters={[
+    {
+      name: "asChild",
+      type: "boolean",
+      default: "false",
+      description: "Merge props with child element instead of rendering a wrapper button.",
+    },
+  ]}
+/>
+
+### Attachment Types
+
+Attachments have the following structure:
+
+```typescript
+type Attachment = {
+  id: string;
+  type: "image" | "document" | "file";
+  name: string;
+  contentType: string;
+  file?: File;
+  status:
+    | { type: "running" | "requires-action" | "incomplete"; progress?: number }
+    | { type: "complete" };
+};
+```
+
+## Related Components
+
+- [Thread](/docs/ui/thread) - Main chat interface that displays attachments
+- [Attachments Guide](/docs/guides/attachments) - Complete setup instructions for attachment adapters

package/.docs/raw/docs/ui/{Markdown.mdx → markdown.mdx}

@@ -1,12 +1,12 @@
 ---
 title: Markdown
+description: Display rich text with headings, lists, links, and code blocks.
 ---
 
-Allow the assistant to display rich text using markdown.
+import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
+import { MarkdownSample } from "@/components/docs/samples/markdown";
 
-import { Step, Steps } from "fumadocs-ui/components/steps";
-import { Callout } from "fumadocs-ui/components/callout";
-import { InstallCommand } from "@/components/docs/install-command";
+<MarkdownSample />
 
 <Callout>
   Markdown support is already included by default in the `Thread` component.
@@ -31,7 +31,7 @@ This adds a `/components/assistant-ui/markdown-text.tsx` file to your project, w
 
 Pass the `MarkdownText` component to the `MessagePrimitive.Parts` component
 
-```tsx twoslash title="/components/assistant-ui/thread.tsx" {1,11}
+```tsx twoslash title="/components/assistant-ui/thread.tsx" {1,7}
 // @filename: /components/assistant-ui/markdown-text.tsx
 import { FC } from "react";
 export const MarkdownText: FC = () => null;
@@ -67,4 +67,9 @@ const AssistantMessage: FC = () => {
 
 ## Syntax highlighting
 
-Syntax Highlighting is not included by default, see [Syntax Highlighting](/docs/ui/SyntaxHighlighting) to learn how to add it.
+Syntax Highlighting is not included by default, see [Syntax Highlighting](/docs/ui/syntax-highlighting) to learn how to add it.
+
+## Related Components
+
+- [Syntax Highlighting](/docs/ui/syntax-highlighting) - Add code highlighting to markdown
+- [Mermaid](/docs/ui/mermaid) - Render diagrams in markdown code blocks

package/.docs/raw/docs/ui/{Mermaid.mdx → mermaid.mdx}

@@ -1,12 +1,14 @@
 ---
 title: "Mermaid Diagrams"
+description: Render Mermaid diagrams in chat messages with streaming support.
 ---
 
-import { Callout } from "fumadocs-ui/components/callout";
-import { Step, Steps } from "fumadocs-ui/components/steps";
-import { InstallCommand } from "@/components/docs/install-command";
+import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
+import { MermaidSample } from "@/components/docs/samples/mermaid";
 
-Render Mermaid diagrams in chat messages with the `mermaid-diagram` component.
+<MermaidSample />
+
+## Getting Started
 
 <Steps>
   <Step>
@@ -67,7 +69,7 @@ The `MermaidDiagram` component is optimized for streaming scenarios:
 Mermaid supports various diagram types including:
 
 - Flowcharts and decision trees
-- Sequence diagrams  
+- Sequence diagrams
 - Gantt charts
 - Class diagrams
 - State diagrams
@@ -76,3 +78,8 @@ Mermaid supports various diagram types including:
 - Entity relationship diagrams
 
 See the [Mermaid documentation](https://mermaid.js.org/) for complete syntax reference.
+
+## Related Components
+
+- [Markdown](/docs/ui/markdown) - Rich text rendering where mermaid is integrated
+- [Syntax Highlighting](/docs/ui/syntax-highlighting) - Code highlighting for other languages

package/.docs/raw/docs/ui/{PartGrouping.mdx → part-grouping.mdx}

@@ -1,19 +1,17 @@
 ---
 title: Message Part Grouping
+description: Organize message parts into custom groups with flexible grouping functions.
 ---
 
-import { Steps, Step } from "fumadocs-ui/components/steps";
-import { Callout } from "fumadocs-ui/components/callout";
-import { ParametersTable } from "@/components/docs";
+import { ParametersTable } from "@/components/docs/tables/ParametersTable";
+import { PartGroupingSample } from "@/components/docs/samples/part-grouping";
 
-## Overview
+<PartGroupingSample />
 
 <Callout type="warn">
   This feature is experimental and the API may change in future versions.
 </Callout>
 
-The Message Part Grouping feature allows you to organize and display message parts in custom groups using a flexible grouping function. This is useful for creating visual hierarchies, organizing related content together, or building custom UI patterns based on message part characteristics.
-
 ## Basic Usage
 
 Use the `MessagePrimitive.Unstable_PartsGrouped` component with a custom grouping function:

package/.docs/raw/docs/ui/reasoning.mdx

@@ -0,0 +1,148 @@
+---
+title: Reasoning
+description: Collapsible UI for displaying AI reasoning and thinking messages.
+---
+
+import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
+import { ReasoningSample, ReasoningGroupSample } from "@/components/docs/samples/reasoning";
+
+<ReasoningSample />
+
+## Getting Started
+
+<Steps>
+  <Step>
+
+### Add `reasoning`
+
+<InstallCommand shadcn={["reasoning"]} />
+
+This adds a `/components/assistant-ui/reasoning.tsx` file to your project.
+
+  </Step>
+  <Step>
+
+### Use in your application
+
+Pass the `Reasoning` and `ReasoningGroup` components to the `MessagePrimitive.Parts` component:
+
+```tsx title="/app/components/assistant-ui/thread.tsx" {2,10-11}
+import { MessagePrimitive } from "@assistant-ui/react";
+import { Reasoning, ReasoningGroup } from "@/components/assistant-ui/reasoning";
+
+const AssistantMessage: FC = () => {
+  return (
+    <MessagePrimitive.Root className="...">
+      <div className="...">
+        <MessagePrimitive.Parts
+          components={{
+            Reasoning: Reasoning,
+            ReasoningGroup: ReasoningGroup
+          }}
+        />
+      </div>
+      <AssistantActionBar />
+      <BranchPicker className="..." />
+    </MessagePrimitive.Root>
+  );
+};
+```
+
+  </Step>
+</Steps>
+
+## How It Works
+
+The component consists of two parts:
+
+1. **Reasoning**: Renders individual reasoning message part content (with markdown support)
+2. **ReasoningGroup**: Wraps consecutive reasoning parts in a collapsible container
+
+Consecutive reasoning parts are automatically grouped together by the `ReasoningGroup` component.
+
+> When using the composable API, `Reasoning.Text` is a plain container. Add `<MarkdownText />` for markdown rendering.
+
+## Variants
+
+Use the `variant` prop on `Reasoning.Root` to change the visual style:
+
+```tsx
+<Reasoning.Root variant="outline">...</Reasoning.Root>
+<Reasoning.Root variant="muted">...</Reasoning.Root>
+```
+
+| Variant   | Description                        |
+| --------- | ---------------------------------- |
+| `default` | No additional styling              |
+| `muted`   | Muted background                   |
+| `outline` | Rounded border                     |
+
+## ReasoningGroup
+
+`ReasoningGroup` wraps consecutive reasoning parts in a collapsible container. It auto-expands during streaming.
+
+<ReasoningGroupSample />
+
+```tsx
+import { ReasoningGroup } from "@/components/assistant-ui/reasoning";
+
+const ReasoningGroupImpl: ReasoningGroupComponent = ({
+  children,
+  startIndex,
+  endIndex,
+}) => {
+  const isReasoningStreaming = useAssistantState(({ message }) => {
+    if (message.status?.type !== "running") return false;
+    const lastIndex = message.parts.length - 1;
+    if (lastIndex < 0) return false;
+    const lastType = message.parts[lastIndex]?.type;
+    if (lastType !== "reasoning") return false;
+    return lastIndex >= startIndex && lastIndex <= endIndex;
+  });
+
+  return (
+    <ReasoningRoot defaultOpen={isReasoningStreaming}>
+      <ReasoningTrigger active={isReasoningStreaming} />
+      <ReasoningContent aria-busy={isReasoningStreaming}>
+        <ReasoningText>{children}</ReasoningText>
+      </ReasoningContent>
+    </ReasoningRoot>
+  );
+};
+```
+
+## Composable API
+
+All sub-components are exported for custom layouts:
+
+| Component             | Description                                |
+| --------------------- | ------------------------------------------ |
+| `Reasoning.Root`      | Collapsible container with scroll lock     |
+| `Reasoning.Trigger`   | Button with icon, label, and shimmer       |
+| `Reasoning.Content`   | Animated collapsible content wrapper       |
+| `Reasoning.Text`      | Text wrapper with slide/fade animation     |
+| `Reasoning.Fade`      | Gradient fade overlay at bottom            |
+
+```tsx
+import {
+  Reasoning,
+  ReasoningRoot,
+  ReasoningTrigger,
+  ReasoningContent,
+  ReasoningText,
+  ReasoningFade,
+} from "@/components/assistant-ui/reasoning";
+
+// Compound component syntax
+<Reasoning.Root variant="muted">
+  <Reasoning.Trigger active={isStreaming} />
+  <Reasoning.Content>
+    <Reasoning.Text>{children}</Reasoning.Text>
+  </Reasoning.Content>
+</Reasoning.Root>
+```
+
+## Related Components
+
+- [ToolGroup](/docs/ui/tool-group) - Similar grouping pattern for tool calls
+- [PartGrouping](/docs/ui/part-grouping) - Experimental API for grouping message parts

package/.docs/raw/docs/ui/{Scrollbar.mdx → scrollbar.mdx}

@@ -1,8 +1,12 @@
 ---
 title: Custom Scrollbar
+description: Replace the default scrollbar with a custom Radix UI scroll area.
 ---
 
-import { InstallCommand } from "@/components/docs/install-command";
+import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
+import { ScrollbarSample } from "@/components/docs/samples/scrollbar";
+
+<ScrollbarSample />
 
 If you want to show a custom scrollbar UI of the Thread.Viewport in place of the system default, you can integrate `@radix-ui/react-scroll-area`.
 An example implementation of this is [shadcn/ui's Scroll Area](https://ui.shadcn.com/docs/components/scroll-area).
@@ -11,12 +15,6 @@ An example implementation of this is [shadcn/ui's Scroll Area](https://ui.shadcn
 
 <InstallCommand shadcn={["scroll-area"]} />
 
-### @radix-ui/react-scroll-area v1.2.0 release candidate required
-
-The v1.2.0-rc.x release candidate can be installed via
-
-<InstallCommand npm={["@radix-ui/react-scroll-area@next"]} />
-
 ## Additional Styles
 
 The Radix UI Viewport component adds an intermediate `<div data-radix-scroll-area-content>` element.
@@ -55,3 +53,7 @@ const MyThread: FC = () => {
   );
 };
 ```
+
+## Related Components
+
+- [Thread](/docs/ui/thread) - The main chat interface where the scrollbar is used

package/.docs/raw/docs/ui/sources.mdx

@@ -0,0 +1,87 @@
+---
+title: Sources
+description: Display URL sources with favicon, title, and external link.
+---
+
+import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
+import { SourcesSample } from "@/components/docs/samples/sources";
+
+<SourcesSample />
+
+## Getting Started
+
+<Steps>
+  <Step>
+
+### Add `sources`
+
+<InstallCommand shadcn={["sources"]} />
+
+  </Step>
+  <Step>
+
+### Use in your application
+
+Pass `Sources` to `MessagePrimitive.Parts`:
+
+```tsx title="/components/assistant-ui/thread.tsx" {1,8}
+import { Sources } from "@/components/assistant-ui/sources";
+
+const AssistantMessage: FC = () => {
+  return (
+    <MessagePrimitive.Root className="...">
+      <MessagePrimitive.Parts
+        components={{
+          Source: Sources,
+        }}
+      />
+    </MessagePrimitive.Root>
+  );
+};
+```
+
+  </Step>
+</Steps>
+
+## Variants
+
+Use the `variant` prop to change the visual style.
+
+```tsx
+<Source variant="default" /> // Default
+<Source variant="outline" /> // Border only
+<Source variant="ghost" />   // No background
+```
+
+## Sizes
+
+Use the `size` prop to change the size.
+
+```tsx
+<Source size="sm" />      // Small
+<Source size="default" /> // Default
+<Source size="lg" />      // Large
+```
+
+## Composable API
+
+The component exports composable sub-components:
+
+```tsx
+import { Source, SourceIcon, SourceTitle } from "@/components/assistant-ui/sources";
+
+<Source href="https://example.com" className="gap-2">
+  <SourceIcon url="https://example.com" className="size-4" />
+  <SourceTitle className="max-w-none font-medium">Example</SourceTitle>
+</Source>
+```
+
+| Component | Description |
+|-----------|-------------|
+| `Source` | Root container, renders as `<a>` |
+| `SourceIcon` | Favicon with domain initial fallback |
+| `SourceTitle` | Truncated title text |
+
+## Related
+
+- [PartGrouping](/docs/ui/part-grouping) - Group sources by parentId