@assistant-ui/mcp-docs-server 0.1.30 → 0.1.32

package/.docs/raw/docs/ui/quote.mdx

@@ -1,6 +1,7 @@
 ---
 title: Quote
 description: Let users select and quote text from messages with a floating toolbar, composer preview, and inline quote display.
+platforms: ["react"]
 ---
 
 import { QuoteSample } from "@/components/docs/samples/quote";

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

@@ -1,6 +1,7 @@
 ---
 title: Reasoning
 description: Collapsible UI for displaying AI reasoning and thinking messages.
+platforms: ["react"]
 ---
 
 import { ReasoningSample, ReasoningGroupSample } from "@/components/docs/samples/reasoning";
@@ -23,26 +24,58 @@ This adds a `/components/assistant-ui/reasoning.tsx` file to your project.
 
 ### Use in your application
 
-Pass the `Reasoning` and `ReasoningGroup` components to `MessagePrimitive.Parts` via the `components` prop. Using them together is the recommended default — `ReasoningGroup` wraps consecutive reasoning parts in a collapsible container for a smooth out-of-the-box UI.
+Previously, reasoning parts were rendered via `components.Reasoning` and grouped via `components.ReasoningGroup` on `MessagePrimitive.Parts`. Both are deprecated; `MessagePrimitive.GroupedParts` is the supported replacement, and the highlighted lines below show the new pieces.
+
+Render reasoning parts through `MessagePrimitive.GroupedParts`. Group consecutive reasoning parts with `"group-reasoning"`, then compose `ReasoningRoot`, `ReasoningTrigger`, `ReasoningContent`, and `ReasoningText` around the grouped children.
+
+While reasoning is streaming, `part.status.type === "running"`. Pass that to `defaultOpen` so the accordion auto-opens during streaming and lets the user collapse it once the model moves on.
 
 ```tsx title="/app/components/assistant-ui/thread.tsx"
 import { MessagePrimitive } from "@assistant-ui/react";
 import { MarkdownText } from "@/components/assistant-ui/markdown-text";
 import { ToolFallback } from "@/components/assistant-ui/tool-fallback";
-import { Reasoning, ReasoningGroup } from "@/components/assistant-ui/reasoning"; // [!code ++]
+import {
+  Reasoning,
+  ReasoningContent,
+  ReasoningRoot,
+  ReasoningText,
+  ReasoningTrigger,
+} from "@/components/assistant-ui/reasoning"; // [!code ++]
 
 const AssistantMessage: FC = () => {
   return (
     <MessagePrimitive.Root className="...">
       <div className="...">
-        <MessagePrimitive.Parts
-          components={{
-            Text: MarkdownText,
-            Reasoning, // [!code ++]
-            ReasoningGroup, // [!code ++]
-            tools: { Fallback: ToolFallback },
-          }}
-        />
+        <MessagePrimitive.GroupedParts // [!code ++]
+          groupBy={(part) => { // [!code ++]
+            if (part.type === "reasoning") return ["group-reasoning"]; // [!code ++]
+            return null; // [!code ++]
+          }} // [!code ++]
+        > // [!code ++]
+          {({ part, children }) => { // [!code ++]
+            switch (part.type) { // [!code ++]
+              case "group-reasoning": { // [!code ++]
+                const running = part.status.type === "running"; // [!code ++]
+                return ( // [!code ++]
+                  <ReasoningRoot defaultOpen={running}> // [!code ++]
+                    <ReasoningTrigger active={running} /> // [!code ++]
+                    <ReasoningContent aria-busy={running}> // [!code ++]
+                      <ReasoningText>{children}</ReasoningText> // [!code ++]
+                    </ReasoningContent> // [!code ++]
+                  </ReasoningRoot> // [!code ++]
+                ); // [!code ++]
+              } // [!code ++]
+              case "text": // [!code ++]
+                return <MarkdownText />; // [!code ++]
+              case "reasoning": // [!code ++]
+                return <Reasoning {...part} />; // [!code ++]
+              case "tool-call": // [!code ++]
+                return part.toolUI ?? <ToolFallback {...part} />; // [!code ++]
+              default: // [!code ++]
+                return null; // [!code ++]
+            } // [!code ++]
+          }} // [!code ++]
+        </MessagePrimitive.GroupedParts> // [!code ++]
       </div>
       <AssistantActionBar />
       <BranchPicker className="..." />
@@ -51,6 +84,8 @@ const AssistantMessage: FC = () => {
 };
 ```
 
+`GroupedParts` calls your render function for both group nodes and leaf parts. The `case "group-reasoning"` branch renders the collapsible shell and must render `{children}`; that is where the individual reasoning parts get placed. The `case "reasoning"` branch renders each individual reasoning part inside that shell and must not render `children`. Removing either case breaks rendering.
+
   </Step>
 </Steps>
 
@@ -59,20 +94,20 @@ const AssistantMessage: FC = () => {
 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
+2. Composable group pieces (`ReasoningRoot`, `ReasoningTrigger`, `ReasoningContent`, `ReasoningText`): Wrap grouped reasoning children in a collapsible container
 
-Consecutive reasoning parts are automatically grouped together by `ReasoningGroup`. We recommend using both together as the default — you can drop `ReasoningGroup` or build your own layout with the composable API below if you need more flexibility.
+Consecutive reasoning parts are grouped by `MessagePrimitive.GroupedParts`. Use the composable API below to control the grouped layout.
 
-> When using the composable API, `Reasoning.Text` is a plain container. Add `<MarkdownText />` for markdown rendering.
+> When using the composable API, `ReasoningText` is a plain container. Add `<MarkdownText />` for markdown rendering.
 
 ## Variants
 
-Use the `variant` prop on `Reasoning.Root` to change the visual style:
+Use the `variant` prop on `ReasoningRoot` to change the visual style:
 
 ```tsx
-<Reasoning.Root variant="outline">...</Reasoning.Root>
-<Reasoning.Root variant="ghost">...</Reasoning.Root>
-<Reasoning.Root variant="muted">...</Reasoning.Root>
+<ReasoningRoot variant="outline">...</ReasoningRoot>
+<ReasoningRoot variant="ghost">...</ReasoningRoot>
+<ReasoningRoot variant="muted">...</ReasoningRoot>
 ```
 
 | Variant   | Description                                  |
@@ -81,9 +116,9 @@ Use the `variant` prop on `Reasoning.Root` to change the visual style:
 | `ghost`   | No additional styling                        |
 | `muted`   | Muted background                             |
 
-## ReasoningGroup
+## Legacy ReasoningGroup
 
-`ReasoningGroup` wraps consecutive reasoning parts in a collapsible container. It auto-expands during streaming.
+`ReasoningGroup` is kept for existing code that still uses the deprecated `components.ReasoningGroup` prop on `MessagePrimitive.Parts`. New code should use `MessagePrimitive.GroupedParts` and compose the root/trigger/content pieces directly.
 
 <ReasoningGroupSample />
 
@@ -123,15 +158,14 @@ 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            |
+| `ReasoningRoot`      | Collapsible container with scroll lock     |
+| `ReasoningTrigger`   | Button with icon, label, and shimmer       |
+| `ReasoningContent`   | Animated collapsible content wrapper       |
+| `ReasoningText`      | Text wrapper with slide/fade animation     |
+| `ReasoningFade`      | Gradient fade overlay at bottom            |
 
 ```tsx
 import {
-  Reasoning,
   ReasoningRoot,
   ReasoningTrigger,
   ReasoningContent,
@@ -139,16 +173,15 @@ import {
   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>
+<ReasoningRoot variant="muted">
+  <ReasoningTrigger active={isStreaming} />
+  <ReasoningContent>
+    <ReasoningText>{children}</ReasoningText>
+  </ReasoningContent>
+</ReasoningRoot>
 ```
 
 ## Related Components
 
 - [ToolGroup](/docs/ui/tool-group) - Similar grouping pattern for tool calls
-- [PartGrouping](/docs/ui/part-grouping) - Experimental API for grouping message parts
+- [PartGrouping](/docs/ui/part-grouping) - Advanced grouping options for message parts

package/.docs/raw/docs/ui/scrollbar.mdx

@@ -1,6 +1,7 @@
 ---
 title: Custom Scrollbar
 description: Replace the default scrollbar with a custom Radix UI scroll area.
+platforms: ["react"]
 ---
 
 import { ScrollbarSample } from "@/components/docs/samples/scrollbar";

package/.docs/raw/docs/ui/select.mdx

@@ -4,6 +4,7 @@ description: A dropdown select component with composable sub-components.
 links:
   - label: Radix UI Select
     url: https://www.radix-ui.com/primitives/docs/components/select
+platforms: ["react"]
 ---
 
 import { PreviewCode } from "@/components/docs/preview-code.server";

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

@@ -1,6 +1,7 @@
 ---
 title: Sources
 description: Display URL sources with favicon, title, and external link.
+platforms: ["react"]
 ---
 
 import { SourcesSample } from "@/components/docs/samples/sources";
@@ -118,8 +119,25 @@ Displays the favicon for the given URL. Falls back to the domain initial inside
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `url` | `string` | — | URL used to derive the favicon and fallback initial |
+| `faviconUrl` | `(domain: string) => string` | DuckDuckGo's `ip3` endpoint | Override the favicon source — useful in environments where the default service is unreachable |
 | `className` | `string` | — | Additional CSS classes applied to the `<img>` or fallback `<span>` |
 
+#### Customizing the favicon provider
+
+The default `<Sources>` component renders `<SourceIcon>` without forwarding `faviconUrl`, so the prop only applies when you compose `Sources.Icon` directly:
+
+```tsx
+<Sources.Root href={url}>
+  <Sources.Icon
+    url={url}
+    faviconUrl={(domain) => `https://my-favicon-proxy.example.com/${domain}.ico`}
+  />
+  <Sources.Title>{title}</Sources.Title>
+</Sources.Root>
+```
+
+To change the default for every source in your app, edit the `defaultFaviconUrl` constant at the top of your copied `sources.tsx` — that is the single source of truth used by `<Sources>`.
+
 ### `SourceTitle`
 
 Truncated title text rendered as a `<span>`.

package/.docs/raw/docs/ui/streamdown.mdx

@@ -1,9 +1,10 @@
 ---
-title: Streamdown
-description: Alternative markdown renderer with built-in syntax highlighting, math, and diagram support.
+title: Streamdown Markdown Renderer
+description: Stream markdown into a React chat UI with syntax highlighting, math, and Mermaid diagrams. Powered by Vercel Streamdown, integrated for assistant-ui.
 links:
   - label: Streamdown
     url: https://github.com/vercel/streamdown
+platforms: ["react"]
 ---
 
 import { PackageManagerTabs } from "@/components/docs/fumadocs/install/package-manager-tabs";
@@ -25,6 +26,36 @@ For additional features, install the optional plugins:
 
 <PackageManagerTabs packages={["@streamdown/code", "@streamdown/math", "@streamdown/mermaid", "@streamdown/cjk"]} />
 
+## CSS setup
+
+Streamdown's controls (code-block copy/download buttons, mermaid fullscreen overlay) and the streaming caret are written as Tailwind utility classes. Tailwind v4 does not scan `node_modules` by default, so add a `@source` directive for Streamdown (and one per installed plugin) to the same global stylesheet that imports Tailwind:
+
+```css
+@import "tailwindcss";
+
+@source "../node_modules/streamdown/dist/*.js";
+@source "../node_modules/@streamdown/code/dist/*.js";
+@source "../node_modules/@streamdown/math/dist/*.js";
+@source "../node_modules/@streamdown/mermaid/dist/*.js";
+@source "../node_modules/@streamdown/cjk/dist/*.js";
+```
+
+Adjust the relative path to wherever your project's `node_modules` lives. In a pnpm or Turbo monorepo with hoisted dependencies, you typically need more `../` segments to reach the workspace root. Only include the plugin lines for packages you actually installed.
+
+Without these directives, the copy/download/fullscreen buttons render with no padding or cursor styling (and look broken), and the `caret` indicator stays invisible.
+
+<Callout type="info">
+  Streamdown's components assume the shadcn/ui design tokens (`--background`, `--muted-foreground`, `--border`, etc.). If you are not on shadcn/ui, copy the minimum variable set from the [Streamdown README](https://github.com/vercel/streamdown#css-custom-properties-design-tokens).
+</Callout>
+
+If you opt into the `animated` prop or use `createAnimatePlugin` for word-level fade-in, also import the keyframes once at your app entry:
+
+```ts
+import "streamdown/styles.css";
+```
+
+The bare `caret` prop does **not** require this import; only the word-level animation does.
+
 ## Basic Usage
 
 ```tsx
@@ -172,6 +203,8 @@ Display a caret indicator during streaming:
 <StreamdownTextPrimitive caret="circle" /> // ●
 ```
 
+The caret is implemented as a Tailwind `::after` utility on the wrapper, so it only appears if your Tailwind setup includes the `@source` directive from [CSS setup](#css-setup).
+
 ### Link Safety
 
 Show confirmation before opening external links:

package/.docs/raw/docs/ui/syntax-highlighting.mdx

@@ -1,6 +1,7 @@
 ---
 title: Syntax Highlighting
 description: Code block syntax highlighting with react-shiki or react-syntax-highlighter.
+platforms: ["react"]
 ---
 
 import { SyntaxHighlightingSample } from "@/components/docs/samples/syntax-highlighting";

package/.docs/raw/docs/ui/tabs.mdx

@@ -4,6 +4,7 @@ description: A multi-variant tabs component for organizing content into switchab
 links:
   - label: Radix UI Tabs
     url: https://www.radix-ui.com/primitives/docs/components/tabs
+platforms: ["react"]
 ---
 
 import { PreviewCode } from "@/components/docs/preview-code.server";

package/.docs/raw/docs/ui/thread-list.mdx

@@ -1,6 +1,7 @@
 ---
-title: ThreadList
-description: Switch between conversations. Supports sidebar or dropdown layouts.
+title: Thread List Component
+description: Sidebar or dropdown component for switching between AI chat conversations. Persistent thread state, search, and active selection — built for assistant-ui apps.
+platforms: ["react"]
 ---
 
 import { ThreadListSample } from "@/components/docs/samples/threadlist";
@@ -171,6 +172,22 @@ A button to create a new thread.
   ]}
 />
 
+### ThreadListPrimitive.LoadMore
+
+A button that appends the next page of threads. See the [LoadMore primitive reference](/docs/primitives/thread-list#loadmore) for usage and [Threads concepts](/docs/runtimes/concepts/threads#paginating-the-thread-list) for the adapter contract.
+
+<ParametersTable
+  type="ThreadListPrimitiveLoadMoreProps"
+  parameters={[
+    {
+      name: "asChild",
+      type: "boolean",
+      default: "false",
+      description: "Merge props with child element instead of rendering a wrapper button.",
+    },
+  ]}
+/>
+
 ### ThreadListItemPrimitive.Root
 
 Container for a single thread item. Automatically sets `data-active` and `aria-current` when this is the current thread.

package/.docs/raw/docs/ui/thread.mdx

@@ -1,6 +1,7 @@
 ---
-title: Thread
-description: The main chat container with messages, composer, and auto-scroll.
+title: Thread Component
+description: Stream-ready React chat container with message list, composer, auto-scroll, and accessibility built in. Drop into any AI chat UI built with assistant-ui.
+platforms: ["react"]
 ---
 
 import { ThreadSample } from "@/components/docs/samples/thread";
@@ -175,10 +176,64 @@ The scrollable area containing all messages. Automatically scrolls to the bottom
     {
       name: "autoScroll",
       type: "boolean",
-      default: "true",
+      default: 'true (false when turnAnchor is "top")',
       description:
         "Whether to automatically scroll to the bottom 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. "top" anchors new user messages at the top of the viewport.',
+    },
+    {
+      name: "topAnchorMessageClamp",
+      type: '{ tallerThan?: string; visibleHeight?: string }',
+      default: '{ tallerThan: "10em", visibleHeight: "6em" }',
+      description:
+        'Clamps tall user messages when turnAnchor is "top". Messages up to `tallerThan` stay fully visible; taller messages show only `visibleHeight` of their bottom edge above the assistant response.',
+      children: [
+        {
+          type: '{ tallerThan?: string; visibleHeight?: string }',
+          parameters: [
+            {
+              name: "tallerThan",
+              type: "string",
+              default: '"10em"',
+              description: "Clamp messages taller than this CSS length.",
+            },
+            {
+              name: "visibleHeight",
+              type: "string",
+              default: '"6em"',
+              description:
+                "Visible portion of a clamped message's bottom edge.",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      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 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.",
+    },
     {
       name: "className",
       type: "string",

package/.docs/raw/docs/ui/tool-fallback.mdx

@@ -1,6 +1,7 @@
 ---
 title: ToolFallback
 description: Default UI component for tools without dedicated custom renderers.
+platforms: ["react"]
 ---
 
 import {

package/.docs/raw/docs/ui/tool-group.mdx

@@ -1,6 +1,7 @@
 ---
 title: ToolGroup
 description: Wrapper for consecutive tool calls with collapsible and styled options.
+platforms: ["react"]
 ---
 
 import {
@@ -17,31 +18,56 @@ A wrapper component that groups consecutive tool calls together, displaying them
 <Steps>
   <Step>
 
-### Add `tool-group`
+### Add `tool-group` and `tool-fallback`
 
-<InstallCommand shadcn={["tool-group"]} />
+<InstallCommand shadcn={["tool-group", "tool-fallback"]} />
 
-This adds a `/components/assistant-ui/tool-group.tsx` file to your project, which you can adjust as needed.
+This adds `/components/assistant-ui/tool-group.tsx` and `/components/assistant-ui/tool-fallback.tsx` files to your project, which you can adjust as needed.
 
   </Step>
   <Step>
 
 ### Use it in your application
 
-Pass the `ToolGroup` component to the `MessagePrimitive.Parts` component
+Use `MessagePrimitive.GroupedParts` and return `"group-tool"` for tool-call parts. The group case wraps `children`; the tool-call leaf renders the resolved tool UI or your fallback.
 
-```tsx title="/components/assistant-ui/thread.tsx" {1,8}
-import { ToolGroup } from "@/components/assistant-ui/tool-group";
+```tsx title="/components/assistant-ui/thread.tsx"
+import { MessagePrimitive } from "@assistant-ui/react";
+import { ToolFallback } from "@/components/assistant-ui/tool-fallback";
+import {
+  ToolGroupContent,
+  ToolGroupRoot,
+  ToolGroupTrigger,
+} from "@/components/assistant-ui/tool-group";
 
 const AssistantMessage = () => {
   return (
     <MessagePrimitive.Root>
-      <MessagePrimitive.Parts>
-        {({ part }) => {
-          if (part.type === "tool-call") return <ToolGroup {...part} />;
+      <MessagePrimitive.GroupedParts
+        groupBy={(part) => {
+          if (part.type === "tool-call") return ["group-tool"];
           return null;
         }}
-      </MessagePrimitive.Parts>
+      >
+        {({ part, children }) => {
+          switch (part.type) {
+            case "group-tool":
+              return (
+                <ToolGroupRoot>
+                  <ToolGroupTrigger
+                    count={part.indices.length}
+                    active={part.status.type === "running"}
+                  />
+                  <ToolGroupContent>{children}</ToolGroupContent>
+                </ToolGroupRoot>
+              );
+            case "tool-call":
+              return part.toolUI ?? <ToolFallback {...part} />;
+            default:
+              return null;
+          }
+        }}
+      </MessagePrimitive.GroupedParts>
     </MessagePrimitive.Root>
   );
 };
@@ -181,7 +207,9 @@ import {
   ]}
 />
 
-### ToolGroup (Default Export)
+### ToolGroup (Legacy Wrapper)
+
+`ToolGroup` is kept for existing code that still uses the deprecated `components.ToolGroup` prop on `MessagePrimitive.Parts`. Prefer composing `ToolGroupRoot`, `ToolGroupTrigger`, and `ToolGroupContent` inside `MessagePrimitive.GroupedParts`.
 
 <ParametersTable
   type="ToolGroupProps"

package/.docs/raw/docs/ui/voice.mdx

@@ -1,6 +1,7 @@
 ---
 title: Voice
 description: Realtime voice session controls with connect, mute, and status indicator.
+platforms: ["react"]
 ---
 
 import { VoiceSample, VoiceVariantsSample, VoiceStatesSample } from "@/components/docs/samples/voice";

package/.docs/raw/docs/utilities/heat-graph.mdx

@@ -1,6 +1,7 @@
 ---
 title: heat-graph
 description: Headless, composable activity heatmap components for React.
+platforms: ["react"]
 ---
 
 import { HeatGraphDemo } from "@/app/heat-graph/heat-graph-demo";