@assistant-ui/mcp-docs-server 0.2.2 → 0.3.0

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

@@ -1,240 +0,0 @@
----
-title: ToolGroup
-description: Wrapper for consecutive tool calls with collapsible and styled options.
-platforms: ["react"]
----
-
-import {
-  ToolGroupSample,
-  ToolGroupStreamingSample,
-} from "@/components/docs/samples/tool-group";
-
-A wrapper component that groups consecutive tool calls together, displaying them in a collapsible container with auto-expand behavior during streaming.
-
-<ToolGroupSample />
-
-## Getting Started
-
-<Steps>
-  <Step>
-
-### Add `tool-group` and `tool-fallback`
-
-<InstallCommand shadcn={["tool-group", "tool-fallback"]} />
-
-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
-
-Use `MessagePrimitive.GroupedParts` with `groupPartByType` to map tool-call parts to `"group-tool"`. The group case wraps `children`; the tool-call leaf renders the resolved tool UI or your fallback.
-
-```tsx title="/components/assistant-ui/thread.tsx"
-import { MessagePrimitive, groupPartByType } 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.GroupedParts
-        groupBy={groupPartByType({
-          "tool-call": ["group-tool"],
-        })}
-      >
-        {({ 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>
-  );
-};
-```
-
-  </Step>
-</Steps>
-
-## Variants
-
-Use the `variant` prop on `ToolGroup.Root` to change the visual style:
-
-```tsx
-<ToolGroup.Root variant="outline">...</ToolGroup.Root>
-<ToolGroup.Root variant="muted">...</ToolGroup.Root>
-```
-
-| Variant   | Description                        |
-| --------- | ---------------------------------- |
-| `outline` | Rounded border (default)           |
-| `ghost`   | No additional styling              |
-| `muted`   | Muted background with border       |
-
-## Examples
-
-### Streaming Demo (Custom UI + Fallback)
-
-Interactive demo showing tool group with **custom tool UIs** and `ToolFallback` working together. Watch as weather cards stream in with loading states, followed by a search tool using the fallback UI.
-
-<ToolGroupStreamingSample />
-
-### Custom Tool UIs
-
-ToolGroup works with any custom tool UI components:
-
-```tsx
-// Custom Weather Tool UI
-function WeatherToolUI({ location, temperature, condition }) {
-  return (
-    <div className="flex items-center gap-3 rounded-lg border p-3">
-      <WeatherIcon condition={condition} />
-      <div>
-        <div className="text-xs text-muted-foreground">{location}</div>
-        <div className="text-lg font-medium">{temperature}°F</div>
-      </div>
-    </div>
-  );
-}
-
-// Use in ToolGroup
-<ToolGroupRoot variant="outline">
-  <ToolGroupTrigger count={3} />
-  <ToolGroupContent>
-    <WeatherToolUI location="New York" temperature={65} condition="Cloudy" />
-    <WeatherToolUI location="London" temperature={55} condition="Rainy" />
-    <SearchToolUI query="best restaurants" results={24} />
-  </ToolGroupContent>
-</ToolGroupRoot>
-```
-
-## Composable API
-
-All sub-components are exported for custom layouts:
-
-| Component | Description |
-| --------- | ----------- |
-| `ToolGroup.Root` | Collapsible container with scroll lock and variants |
-| `ToolGroup.Trigger` | Header with tool count, shimmer animation, and chevron |
-| `ToolGroup.Content` | Animated collapsible content wrapper |
-
-```tsx
-import {
-  ToolGroup,
-  ToolGroupRoot,
-  ToolGroupTrigger,
-  ToolGroupContent,
-} from "@/components/assistant-ui/tool-group";
-
-// Compound component syntax
-<ToolGroup.Root variant="outline" defaultOpen>
-  <ToolGroup.Trigger count={3} active={false} />
-  <ToolGroup.Content>
-    {/* Any tool UI components - custom or ToolFallback */}
-  </ToolGroup.Content>
-</ToolGroup.Root>
-```
-
-## API Reference
-
-### ToolGroupRoot
-
-<ParametersTable
-  type="ToolGroupRootProps"
-  parameters={[
-    {
-      name: "variant",
-      type: '"outline" | "ghost" | "muted"',
-      default: '"outline"',
-      description: "Visual variant of the tool group container.",
-    },
-    {
-      name: "open",
-      type: "boolean",
-      description: "Controlled open state.",
-    },
-    {
-      name: "onOpenChange",
-      type: "(open: boolean) => void",
-      description: "Callback when open state changes.",
-    },
-    {
-      name: "defaultOpen",
-      type: "boolean",
-      default: "false",
-      description: "Initial open state for uncontrolled usage.",
-    },
-  ]}
-/>
-
-### ToolGroupTrigger
-
-<ParametersTable
-  type="ToolGroupTriggerProps"
-  parameters={[
-    {
-      name: "count",
-      type: "number",
-      required: true,
-      description: "Number of tool calls to display in the label.",
-    },
-    {
-      name: "active",
-      type: "boolean",
-      default: "false",
-      description: "Shows loading spinner and shimmer animation when true.",
-    },
-  ]}
-/>
-
-### 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"
-  parameters={[
-    {
-      name: "startIndex",
-      type: "number",
-      required: true,
-      description: "The index of the first tool call in the group.",
-    },
-    {
-      name: "endIndex",
-      type: "number",
-      required: true,
-      description: "The index of the last tool call in the group.",
-    },
-    {
-      name: "children",
-      type: "ReactNode",
-      required: true,
-      description: "The rendered tool call components.",
-    },
-  ]}
-/>
-
-## Related Components
-
-- [ToolFallback](/docs/ui/tool-fallback) - Default UI for tools without custom renderers
-- [PartGrouping](/docs/ui/part-grouping) - Advanced message part grouping (experimental)

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

@@ -1,173 +0,0 @@
----
-title: Voice
-description: Realtime voice session controls with connect, mute, and status indicator.
-platforms: ["react"]
----
-
-import { VoiceSample, VoiceVariantsSample, VoiceStatesSample } from "@/components/docs/samples/voice";
-
-A control bar for realtime bidirectional voice sessions with an animated orb indicator. Works with any `RealtimeVoiceAdapter` (LiveKit, ElevenLabs, etc.).
-
-<VoiceSample />
-
-## Getting Started
-
-<Steps>
-  <Step>
-
-### Add the component
-
-<InstallCommand shadcn={["voice"]} />
-
-This adds `/components/assistant-ui/voice.tsx` to your project, which you can adjust as needed.
-
-  </Step>
-  <Step>
-
-### Configure a voice adapter
-
-Pass a `RealtimeVoiceAdapter` to your runtime. See the [Realtime Voice guide](/docs/guides/voice) for details.
-
-```tsx
-const runtime = useChatRuntime({
-  adapters: {
-    voice: myVoiceAdapter,
-  },
-});
-```
-
-  </Step>
-  <Step>
-
-### Use in your application
-
-```tsx title="app/page.tsx"
-import { Thread } from "@/components/assistant-ui/thread";
-import { VoiceControl } from "@/components/assistant-ui/voice";
-import { AuiIf } from "@assistant-ui/react";
-
-export default function Chat() {
-  return (
-    <div className="flex h-full flex-col">
-      <AuiIf condition={(s) => s.thread.capabilities.voice}>
-        <VoiceControl />
-      </AuiIf>
-      <div className="min-h-0 flex-1">
-        <Thread />
-      </div>
-    </div>
-  );
-}
-```
-
-  </Step>
-</Steps>
-
-## Anatomy
-
-The `VoiceControl` component is built with the following hooks and conditionals:
-
-```tsx
-import { AuiIf, useVoiceState, useVoiceControls } from "@assistant-ui/react";
-
-<div className="aui-voice-control">
-  <VoiceIndicator />
-
-  <AuiIf condition={(s) => s.thread.voice == null}>
-    <VoiceConnectButton />
-  </AuiIf>
-
-  <AuiIf condition={(s) => s.thread.voice?.status.type === "running"}>
-    <VoiceMuteButton />
-    <VoiceDisconnectButton />
-  </AuiIf>
-</div>
-```
-
-## Examples
-
-### Conditionally show voice controls
-
-Only render when a voice adapter is configured:
-
-```tsx
-<AuiIf condition={(s) => s.thread.capabilities.voice}>
-  <VoiceControl />
-</AuiIf>
-```
-
-### Voice toggle in composer
-
-Add a compact voice toggle button inside the composer action area:
-
-```tsx
-function ComposerVoiceToggle() {
-  const voiceState = useVoiceState();
-  const { connect, disconnect } = useVoiceControls();
-  const isActive =
-    voiceState?.status.type === "running" ||
-    voiceState?.status.type === "starting";
-
-  return (
-    <AuiIf condition={(s) => s.thread.capabilities.voice}>
-      <button
-        type="button"
-        onClick={() => (isActive ? disconnect() : connect())}
-        aria-label={isActive ? "End voice" : "Start voice"}
-      >
-        {isActive ? <PhoneOffIcon /> : <PhoneIcon />}
-      </button>
-    </AuiIf>
-  );
-}
-```
-
-### Custom indicator colors
-
-Override the indicator styles by targeting the `aui-voice-indicator` class:
-
-```css
-.aui-voice-indicator {
-  /* Override active color */
-  &.bg-green-500 {
-    background: theme("colors.blue.500");
-  }
-}
-```
-
-## States
-
-The `VoiceOrb` responds to five voice session states with distinct animations:
-
-<VoiceStatesSample />
-
-## Variants
-
-Four built-in color palettes. Size is controlled via `className`.
-
-<VoiceVariantsSample />
-
-## Sub-components
-
-| Component | Description |
-|-----------|-------------|
-| `VoiceOrb` | Animated orb visual with gradient, glow, and ripple effects. Accepts `state` and `variant` props. |
-| `VoiceControl` | Control bar with status dot, connect/disconnect, and mute/unmute buttons. |
-| `VoiceConnectButton` | Calls `connect()`. Shown when no session is active. |
-| `VoiceMuteButton` | Toggles `mute()`/`unmute()`. Shown when session is running. |
-| `VoiceDisconnectButton` | Calls `disconnect()`. Shown when session is active. |
-
-All sub-components are exported and can be used independently for custom layouts.
-
-## State Selectors
-
-Use these with `AuiIf` or `useAuiState` to build custom voice UI:
-
-| Selector | Type | Description |
-|----------|------|-------------|
-| `s.thread.capabilities.voice` | `boolean` | Whether a voice adapter is configured |
-| `s.thread.voice` | `VoiceSessionState \| undefined` | `undefined` when no session |
-| `s.thread.voice?.status.type` | `"starting" \| "running" \| "ended"` | Session phase |
-| `s.thread.voice?.isMuted` | `boolean` | Microphone muted state |
-| `s.thread.voice?.mode` | `"listening" \| "speaking"` | Who is currently active (user or agent) |
-| `useVoiceVolume()` | `number` | Real-time audio level (0–1), separate from main state to avoid 20Hz re-renders |

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

@@ -1,237 +0,0 @@
----
-title: heat-graph
-description: Headless, composable activity heatmap components for React.
-platforms: ["react"]
----
-
-import { HeatGraphDemo } from "@/app/(demos)/heat-graph/heat-graph-demo";
-
-`heat-graph` provides headless, Radix-style primitives for building GitHub-style activity heatmap graphs.
-
-- **Composable** — Radix-style compound components you fully control
-- **Headless** — Zero styling opinions, bring your own CSS/Tailwind
-- **Tooltip built-in** — Powered by Radix Popper for positioning
-- **Customizable bucketing** — Plug in your own classification function
-
-<HeatGraphDemo />
-
-## Installation
-
-<Tabs items={["shadcn", "npm", "pnpm", "yarn"]}>
-  <Tab value="shadcn">
-    ```sh
-    npx shadcn@latest add @assistant-ui/heat-graph
-    ```
-    This installs a pre-styled `HeatGraph` component to `components/assistant-ui/heat-graph.tsx` along with the `heat-graph` package. The `@assistant-ui` namespace resolves through the registry entry configured in [Manual Setup](/docs/installation#manual-setup).
-  </Tab>
-  <Tab value="npm">
-    ```sh
-    npm install heat-graph
-    ```
-  </Tab>
-  <Tab value="pnpm">
-    ```sh
-    pnpm add heat-graph
-    ```
-  </Tab>
-  <Tab value="yarn">
-    ```sh
-    yarn add heat-graph
-    ```
-  </Tab>
-</Tabs>
-
-## Quick Start
-
-```tsx title="components/activity-graph.tsx"
-"use client";
-
-import * as HeatGraph from "heat-graph";
-
-const COLORS = ["#ebedf0", "#c6d7f9", "#8fb0f3", "#5888e8", "#2563eb"];
-
-export function ActivityGraph({ data }: { data: HeatGraph.DataPoint[] }) {
-  return (
-    <HeatGraph.Root data={data} weekStart="monday" colorScale={COLORS}>
-      <HeatGraph.Grid className="gap-[3px]">
-        {() => (
-          <HeatGraph.Cell className="aspect-square rounded-sm" />
-        )}
-      </HeatGraph.Grid>
-      <HeatGraph.Tooltip>
-        {({ cell }) => (
-          <div>
-            {cell.count} contributions on {cell.date.toLocaleDateString()}
-          </div>
-        )}
-      </HeatGraph.Tooltip>
-    </HeatGraph.Root>
-  );
-}
-```
-
-<Callout type="info">
-  Components using Heat Graph must be Client Components (`"use client"`), since they rely on React Context and interactivity.
-</Callout>
-
-## Anatomy
-
-```tsx
-import * as HeatGraph from "heat-graph";
-
-<HeatGraph.Root data={data} colorScale={colors}>
-
-  {/* Month labels — iterates internally, renders each label */}
-  <HeatGraph.MonthLabels>
-    {({ label, totalWeeks }) => (
-      <span style={{ left: `${(label.column / totalWeeks) * 100}%` }}>
-        {HeatGraph.MONTH_SHORT[label.month]}
-      </span>
-    )}
-  </HeatGraph.MonthLabels>
-
-  {/* Day-of-week labels — iterates internally, renders each label */}
-  <HeatGraph.DayLabels>
-    {({ label }) => (
-      <span>{HeatGraph.DAY_SHORT[label.dayOfWeek]}</span>
-    )}
-  </HeatGraph.DayLabels>
-
-  {/* Grid + Cells — iterates internally, renders each cell */}
-  <HeatGraph.Grid>
-    {() => <HeatGraph.Cell />}
-  </HeatGraph.Grid>
-
-  {/* Legend — iterates internally, renders each level */}
-  <HeatGraph.Legend>
-    {() => <HeatGraph.LegendLevel />}
-  </HeatGraph.Legend>
-
-  {/* Tooltip */}
-  <HeatGraph.Tooltip>
-    {({ cell }) => <div>{cell.count} on {cell.date.toLocaleDateString()}</div>}
-  </HeatGraph.Tooltip>
-
-</HeatGraph.Root>
-```
-
-## API Reference
-
-### Root
-
-The top-level provider. Renders a `<div>` that computes the grid layout and provides state to all children. Accepts all standard div props.
-
-| Prop         | Type                   | Default             | Description                                        |
-| ------------ | ---------------------- | ------------------- | -------------------------------------------------- |
-| `data`       | `DataPoint[]`          | required            | Array of `{ date: string \| Date, count: number }` |
-| `start`      | `string \| Date`       | 1 year before `end` | Start of the date range                            |
-| `end`        | `string \| Date`       | today               | End of the date range                              |
-| `weekStart`  | `"sunday" \| "monday"` | `"sunday"`          | First day of the week                              |
-| `classify`   | `ClassifyFn`           | `autoLevels(5)`     | Bucketing function mapping counts to levels        |
-| `colorScale` | `string[]`             | —                   | Array of colors, one per level (index 0 = lowest)  |
-
-### Grid
-
-A `<div>` with CSS Grid layout. Renders `gridTemplateColumns` and `gridTemplateRows` based on the computed data. Accepts all standard div props.
-
-Iterates over cells internally, calling the children render function for each cell. Each cell is wrapped in a context that `Cell` reads from.
-
-```ts
-type CellData = {
-  date: Date;
-  count: number;
-  level: number;
-  column: number;
-  row: number;
-};
-```
-
-### Cell
-
-A `<div>` that reads from cell context. Automatically applies:
-- Grid positioning (`gridColumn`, `gridRow`)
-- Background color from `colorScale`
-- Tooltip hover handlers
-
-Accepts all standard div props. Pass `colorScale` to override the Root-level color scale.
-
-### MonthLabels
-
-Iterates over month labels, calling the children render function for each label.
-
-```tsx
-<HeatGraph.MonthLabels>
-  {({ label, totalWeeks }) => (
-    <span style={{ left: `${(label.column / totalWeeks) * 100}%` }}>
-      {HeatGraph.MONTH_SHORT[label.month]}
-    </span>
-  )}
-</HeatGraph.MonthLabels>
-```
-
-Each label has `{ month: number, column: number }`. Use `totalWeeks` to compute label positions. Use `MONTH_SHORT[label.month]` for English labels, or format with `Intl.DateTimeFormat` for localization.
-
-### DayLabels
-
-Iterates over day-of-week labels, calling the children render function for each label.
-
-```tsx
-<HeatGraph.DayLabels>
-  {({ label }) => (
-    <span>{HeatGraph.DAY_SHORT[label.dayOfWeek]}</span>
-  )}
-</HeatGraph.DayLabels>
-```
-
-Each label has `{ dayOfWeek: number, row: number }` where `dayOfWeek` is 0=Sun..6=Sat. Use `DAY_SHORT[label.dayOfWeek]` for English labels, or format with `Intl.DateTimeFormat` for localization.
-
-### Legend
-
-Iterates over legend levels, calling the children render function for each item. Each item has `{ level: number, color: string | undefined }`.
-
-### LegendLevel
-
-A `<div>` that reads from legend item context. Automatically applies `backgroundColor` from the color scale. Use inside `Legend`.
-
-### Tooltip
-
-Renders only when a cell is hovered. Positioned by Radix Popper relative to the hovered cell. Accepts Radix Popper `Content` props (`side`, `sideOffset`, `align`, etc.).
-
-```tsx
-<HeatGraph.Tooltip side="top" sideOffset={8} className="...">
-  {({ cell }) => <div>{cell.count} contributions</div>}
-</HeatGraph.Tooltip>
-```
-
-### autoLevels(n)
-
-Default classification function. Maps counts into `n` evenly-distributed levels (0 to n-1). Level 0 is always count 0.
-
-```ts
-type ClassifyFn = (counts: number[]) => (count: number) => number;
-```
-
-To provide a custom classifier:
-
-```tsx
-const myClassify: HeatGraph.ClassifyFn = (counts) => {
-  const p75 = percentile(counts, 75);
-  return (count) => {
-    if (count === 0) return 0;
-    if (count < p75 * 0.25) return 1;
-    if (count < p75 * 0.5) return 2;
-    if (count < p75) return 3;
-    return 4;
-  };
-};
-
-<HeatGraph.Root data={data} classify={myClassify}>
-```
-
-### MONTH_SHORT
-
-English month abbreviations array: `["Jan", "Feb", ..., "Dec"]`. Index by `MonthLabel.month`.
-
-### DAY_SHORT
-
-English day abbreviations array: `["Sun", "Mon", ..., "Sat"]`. Index by `DayLabel.dayOfWeek`.