@assistant-ui/mcp-docs-server 0.1.34 → 0.1.35

package/.docs/raw/docs/ui/number-roll.mdx

@@ -0,0 +1,154 @@
+---
+title: Number Roll
+description: Animated number that rolls digits odometer-style when the value changes.
+platforms: ["react"]
+---
+
+import { PreviewCode } from "@/components/docs/preview-code.server";
+import {
+  NumberRollSample,
+  NumberRollCompactSample,
+  NumberRollFormatSample,
+  NumberRollLiveSample,
+} from "@/components/docs/samples/number-roll";
+
+<Callout>
+  This is a **standalone component** that does not depend on the assistant-ui runtime. Use it anywhere in your application.
+</Callout>
+
+<NumberRollSample />
+
+## Installation
+
+<InstallCommand shadcn={["number-roll"]} />
+
+This adds a `/components/assistant-ui/number-roll.tsx` file to your project, which you can adjust as needed. The component has no dependencies beyond React.
+
+## Usage
+
+```tsx
+import { NumberRoll } from "@/components/assistant-ui/number-roll";
+
+export function TokenCounter({ count }: { count: number }) {
+  return <NumberRoll value={count} format={{ notation: "compact" }} />;
+}
+```
+
+When `value` changes, each digit rolls in place to its new value. Formatting is handled by `Intl.NumberFormat`, so structural changes animate too: when `700` becomes `1.1K` with compact notation, the surviving ones digit rolls from 0 to 1 while the leading `70` slides out and the decimal point, fraction digit, and `K` suffix slide in.
+
+## Examples
+
+### Compact Notation
+
+Pass any `Intl.NumberFormatOptions` via the `format` prop. Crossing a compact-notation threshold animates the formatting change instead of remounting the whole string.
+
+<PreviewCode file="components/docs/samples/number-roll" name="NumberRollCompactSample">
+  <NumberRollCompactSample />
+</PreviewCode>
+
+### Formats and Locales
+
+Currencies, percentages, suffixes, and non-English locales all work through the same `Intl.NumberFormat` pipeline. Compact thresholds and suffixes are locale-dependent (`1.2万` in `zh-CN`), so never hardcode them.
+
+<PreviewCode file="components/docs/samples/number-roll" name="NumberRollFormatSample">
+  <NumberRollFormatSample />
+</PreviewCode>
+
+### Live Counter
+
+Rapid successive updates retarget the in-flight roll smoothly, which makes the component suitable for streaming token counts and other live metrics.
+
+<PreviewCode file="components/docs/samples/number-roll" name="NumberRollLiveSample">
+  <NumberRollLiveSample />
+</PreviewCode>
+
+## How It Works
+
+The value is formatted with `Intl.NumberFormat.formatToParts` and split into keyed parts. Integer digits are keyed by place value counted from the right, so when `999` becomes `1,000` the existing columns keep their identity and roll in place while only the new leading digit and separator enter. Symbols (decimal point, group separators, currency signs, compact suffixes) cross-fade and collapse via animated `grid-template-columns`.
+
+Each digit renders a strip of 0 to 9 and animates a registered CSS custom property; CSS `mod()` math wraps the strip into an endless ribbon, so rolling from 9 to 0 continues in the trend direction instead of spinning backwards. There is no JavaScript animation loop and no animation library dependency.
+
+In browsers without CSS `mod()` support, and during server rendering, the component renders the plain formatted string. With `prefers-reduced-motion`, values swap instantly without rolling. When server rendering, pass an explicit `locales`: the server's default locale can differ from the visitor's browser locale, and a mismatched formatted string causes a React hydration error. Locales whose default numbering system is non-Latin (such as `ar-EG`) cross-fade their digits as symbols instead of rolling.
+
+The formatted value is exposed to screen readers as plain text while the animated digits are `aria-hidden`. Value changes are not announced automatically; wrap the component in an `aria-live` region if you need announcements.
+
+## API Reference
+
+### NumberRoll
+
+<ParametersTable
+  type="NumberRollProps"
+  parameters={[
+    {
+      name: "value",
+      type: "number",
+      required: true,
+      description: "The number to display.",
+    },
+    {
+      name: "format",
+      type: "Intl.NumberFormatOptions",
+      description:
+        "Number formatting options, e.g. `{ notation: \"compact\" }` or `{ style: \"currency\", currency: \"USD\" }`.",
+    },
+    {
+      name: "locales",
+      type: "Intl.LocalesArgument",
+      description:
+        "Locale(s) passed to `Intl.NumberFormat`. Pass an explicit value in server-rendered apps so the server and client format identically.",
+    },
+    {
+      name: "prefix",
+      type: "string",
+      description: "Static text rendered before the number.",
+    },
+    {
+      name: "suffix",
+      type: "string",
+      description: "Static text rendered after the number.",
+    },
+    {
+      name: "trend",
+      type: '"auto" | "up" | "down"',
+      default: '"auto"',
+      description:
+        "Roll direction. `auto` follows the sign of the value change; `up` and `down` force a direction, wrapping digits through 9/0 as needed.",
+    },
+    {
+      name: "duration",
+      type: "number",
+      default: "500",
+      description:
+        "Digit roll duration in milliseconds. Enter/exit fades run at 60% of this value.",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "Additional CSS classes.",
+    },
+  ]}
+/>
+
+### Styling
+
+The root applies `tabular-nums` so digits keep a constant width while rolling; the font you use must provide tabular figures for the layout to stay stable. Size and color are inherited from the surrounding text, so style it like any span:
+
+```tsx
+<NumberRoll value={value} className="text-4xl font-semibold" />
+```
+
+Change the animation speed via the `duration` prop; it drives both the CSS timing and the cleanup that unmounts exited characters, so overriding the duration variable in CSS alone would remove them mid-fade. The fade and easing variables are safe to override via the `style` prop (the defaults are set as inline styles, so plain `className` overrides do not apply):
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--aui-number-roll-duration` | `500ms` (from the `duration` prop) | Digit roll duration. |
+| `--aui-number-roll-fade` | 60% of the duration | Enter/exit fade and width-collapse duration. |
+| `--aui-number-roll-ease` | `cubic-bezier(0.23, 1, 0.32, 1)` | Digit roll easing. |
+
+Parts are targetable via data attributes: `[data-slot="number-roll"]`, `[data-slot="number-roll-part"]`, `[data-slot="number-roll-digit"]`, and `[data-slot="number-roll-symbol"]`.
+
+## Related Components
+
+- [Context Display](/docs/ui/context-display) - Live token usage ring and bar
+- [Message Timing](/docs/ui/message-timing) - Streaming stats badge
+- [Badge](/docs/ui/badge) - Small status and metadata labels

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

@@ -28,7 +28,7 @@ Previously, reasoning parts were rendered via `components.Reasoning` and grouped
 
 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.
+While reasoning is streaming, `part.status.type === "running"`. Pass that to `streaming` so the accordion auto-opens during streaming with a bottom-pinned live preview of the newest tokens, auto-collapses when the model moves on, and permanently defers to the first manual toggle. When `streaming` is provided it supersedes `defaultOpen`.
 
 ```tsx title="/app/components/assistant-ui/thread.tsx"
 import { MessagePrimitive, groupPartByType } from "@assistant-ui/react";
@@ -56,7 +56,7 @@ const AssistantMessage: FC = () => {
               case "group-reasoning": { // [!code ++]
                 const running = part.status.type === "running"; // [!code ++]
                 return ( // [!code ++]
-                  <ReasoningRoot defaultOpen={running}> // [!code ++]
+                  <ReasoningRoot streaming={running}> // [!code ++]
                     <ReasoningTrigger active={running} /> // [!code ++]
                     <ReasoningContent aria-busy={running}> // [!code ++]
                       <ReasoningText>{children}</ReasoningText> // [!code ++]
@@ -139,7 +139,7 @@ const ReasoningGroupImpl: ReasoningGroupComponent = ({
   });
 
   return (
-    <ReasoningRoot defaultOpen={isReasoningStreaming}>
+    <ReasoningRoot streaming={isReasoningStreaming}>
       <ReasoningTrigger active={isReasoningStreaming} />
       <ReasoningContent aria-busy={isReasoningStreaming}>
         <ReasoningText>{children}</ReasoningText>

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

@@ -119,6 +119,8 @@ const StreamdownText = () => (
 | `components` | `object` | - | Custom components including `SyntaxHighlighter` and `CodeHeader` |
 | `componentsByLanguage` | `object` | - | Language-specific component overrides |
 | `preprocess` | `(text: string) => string` | - | Text preprocessing function |
+| `defer` | `boolean` | `false` | Defer markdown parsing to a lower priority via `useDeferredValue` so typing and scrolling stay responsive during streaming |
+| `smooth` | `boolean \| SmoothOptions` | `false` | Typewriter-style reveal via `useSmooth`; the caret and controls stay active until the reveal catches up. Prefer the native `animated` prop for entrance animations |
 | `controls` | `boolean \| object` | `true` | Enable/disable UI controls for code blocks and tables |
 | `caret` | `"block" \| "circle"` | - | Streaming caret style |
 | `mermaid` | `MermaidOptions` | - | Mermaid diagram configuration |

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

@@ -29,7 +29,7 @@ import { SyntaxHighlightingSample } from "@/components/docs/samples/syntax-highl
 
 This adds a `/components/assistant-ui/shiki-highlighter.tsx` file to your project and
 installs the `react-shiki` dependency. The highlighter can be customized by editing
-the config in the `shiki-highlighter.tsx` file.
+the config in the `shiki-highlighter.tsx` file. While a message part is still streaming, the component renders the plain code without tokenization and highlights once the part settles, so streaming stays cheap.
 
   </Step>
   <Step>

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

@@ -133,6 +133,58 @@ const SuggestionItem = () => (
 );
 ```
 
+## Component Overrides
+
+`Thread` accepts an optional `components` prop that swaps parts of the rendering without editing the copied file. All slots are optional; omitted slots keep the built-in rendering.
+
+```tsx
+import { Thread, type ThreadComponents } from "@/components/assistant-ui/thread";
+
+const THREAD_COMPONENTS: ThreadComponents = {
+  ToolFallback: MyToolFallback,
+  ToolGroup: MyToolGroup,
+};
+
+export default function Chat() {
+  return <Thread components={THREAD_COMPONENTS} />;
+}
+```
+
+<ParametersTable
+  type="ThreadComponents"
+  parameters={[
+    {
+      name: "AssistantMessage",
+      type: "ComponentType",
+      description: "Replaces the entire assistant message, including the action bar and branch picker.",
+    },
+    {
+      name: "Welcome",
+      type: "ComponentType",
+      description: "Replaces the welcome screen shown for a new chat.",
+    },
+    {
+      name: "ToolFallback",
+      type: "ToolCallMessagePartComponent",
+      description: "Renders tool calls that have no tool UI registered by name. Registered tool UIs take precedence over this slot.",
+    },
+    {
+      name: "ToolGroup",
+      type: "ComponentType<PropsWithChildren<{ group: ThreadGroupPart }>>",
+      description: "Wraps runs of consecutive tool calls. Receives the group part (`indices`, `status`) and the rendered children.",
+    },
+    {
+      name: "ReasoningGroup",
+      type: "ComponentType<PropsWithChildren<{ group: ThreadGroupPart }>>",
+      description: "Wraps runs of consecutive reasoning parts. Receives the group part and the rendered children.",
+    },
+  ]}
+/>
+
+Define the `components` object once at module scope (or memoize it) so message subtrees do not re-render whenever the parent re-renders.
+
+For per-tool UI, prefer registering a renderer by tool name over overriding `ToolFallback`: put `render` on the matching toolkit entry (see [Tool UI](/docs/tools/tool-ui)). `data` message parts render through renderers registered with `useAssistantDataUI`; parts without a registered renderer are not displayed.
+
 ## API Reference
 
 The following primitives are used within the Thread component and can be customized in your `/components/assistant-ui/thread.tsx` file.

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

@@ -74,7 +74,7 @@ Shows a muted appearance when a tool call was cancelled.
 
 ### Approval State
 
-Shows the default Allow / Deny buttons rendered when a tool call enters `requires-action`. The block auto-expands so the decision is visible without a click. Edit your project's copy of `tool-fallback.tsx` to add trust escalation, edit-args, custom labels, or analytics hooks — the shadcn philosophy is you own the file.
+Shows the default Allow / Deny buttons rendered when a tool call enters `requires-action`. A tool call whose approval gate is already decided renders no buttons. The block auto-expands so the decision is visible without a click. Edit your project's copy of `tool-fallback.tsx` to add trust escalation, edit-args, custom labels, or analytics hooks — the shadcn philosophy is you own the file.
 
 <ToolFallbackRequiresActionSample />
 
@@ -90,7 +90,7 @@ All sub-components are exported for custom layouts:
 | `ToolFallback.Args` | Displays tool arguments |
 | `ToolFallback.Result` | Displays tool execution result |
 | `ToolFallback.Error` | Displays error or cancellation messages |
-| `ToolFallback.Approval` | Renders Allow / Deny buttons for `requires-action` tools; wires `resume` / `addResult` / `respondToApproval` |
+| `ToolFallback.Approval` | Renders Allow / Deny buttons for `requires-action` tools until a decision is recorded; wires `resume` / `addResult` / `respondToApproval` |
 
 ```tsx
 import {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/mcp-docs-server",
-  "version": "0.1.34",
+  "version": "0.1.35",
   "description": "MCP server for assistant-ui documentation and examples",
   "keywords": [
     "mcp",
@@ -37,10 +37,10 @@
     "zod": "^4.4.3"
   },
   "devDependencies": {
-    "@types/node": "^25.9.2",
+    "@types/node": "^25.9.3",
     "tsx": "^4.22.4",
     "vitest": "^4.1.8",
-    "@assistant-ui/x-buildutils": "0.0.12"
+    "@assistant-ui/x-buildutils": "0.0.14"
   },
   "publishConfig": {
     "access": "public",