@assistant-ui/mcp-docs-server 0.1.38 → 0.2.0

package/.docs/raw/docs/ui/accordion.mdx

@@ -2,8 +2,10 @@
 title: Accordion
 description: A vertically stacked set of interactive headings that reveal or hide content sections.
 links:
-  - label: Radix UI Accordion
+  - label: Radix UI Accordion (Radix styles)
     url: https://www.radix-ui.com/primitives/docs/components/accordion
+  - label: Base UI Accordion (base styles)
+    url: https://base-ui.com/react/components/accordion
 platforms: ["react"]
 ---
 
@@ -16,12 +18,16 @@ import {
   AccordionControlledSample,
   AccordionFAQSample,
 } from "@/components/docs/samples/accordion";
+import * as AccordionRadixSamples from "@/components/docs/samples/accordion.radix";
+import { Flavored, FlavorSwitcher } from "@/components/docs/contexts/flavor.server";
 
 <Callout>
   This is a **standalone component** that does not depend on the assistant-ui runtime. Use it anywhere in your application.
 </Callout>
 
-<AccordionSample />
+<FlavorSwitcher />
+
+<Flavored radix={<AccordionRadixSamples.AccordionSample />} base={<AccordionSample />} />
 
 ## Installation
 
@@ -59,7 +65,7 @@ export function Example() {
 
 Use the `variant` prop on `Accordion` to change the visual style. Child components inherit the variant automatically.
 
-<AccordionVariantsSample />
+<Flavored radix={<AccordionRadixSamples.AccordionVariantsSample />} base={<AccordionVariantsSample />} />
 
 ```tsx
 // Default - border-bottom separator
@@ -91,7 +97,7 @@ Use the `variant` prop on `Accordion` to change the visual style. Child componen
 
 Use `type="multiple"` to allow multiple items to be open simultaneously.
 
-<AccordionMultipleSample />
+<Flavored radix={<AccordionRadixSamples.AccordionMultipleSample />} base={<AccordionMultipleSample />} />
 
 ```tsx
 <Accordion type="multiple">
@@ -110,24 +116,24 @@ Use `type="multiple"` to allow multiple items to be open simultaneously.
 
 Add icons or custom elements inside the trigger.
 
-<PreviewCode file="components/docs/samples/accordion" name="AccordionWithIconsSample">
-  <AccordionWithIconsSample />
+<PreviewCode file="components/docs/samples/accordion" name="AccordionWithIconsSample" base={<AccordionWithIconsSample />}>
+  <AccordionRadixSamples.AccordionWithIconsSample />
 </PreviewCode>
 
 ### Controlled
 
 Use `value` and `onValueChange` for controlled accordion state.
 
-<PreviewCode file="components/docs/samples/accordion" name="AccordionControlledSample">
-  <AccordionControlledSample />
+<PreviewCode file="components/docs/samples/accordion" name="AccordionControlledSample" base={<AccordionControlledSample />}>
+  <AccordionRadixSamples.AccordionControlledSample />
 </PreviewCode>
 
 ### FAQ Section
 
 A practical example of using accordion for a FAQ section.
 
-<PreviewCode file="components/docs/samples/accordion" name="AccordionFAQSample">
-  <AccordionFAQSample />
+<PreviewCode file="components/docs/samples/accordion" name="AccordionFAQSample" base={<AccordionFAQSample />}>
+  <AccordionRadixSamples.AccordionFAQSample />
 </PreviewCode>
 
 ## API Reference

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

@@ -5,10 +5,14 @@ platforms: ["react"]
 ---
 
 import { AssistantModalSample } from "@/components/docs/samples/assistant-modal";
+import * as AssistantModalRadixSamples from "@/components/docs/samples/assistant-modal.radix";
+import { Flavored, FlavorSwitcher } from "@/components/docs/contexts/flavor.server";
 
-A floating chat modal built on Radix UI Popover. Ideal for support widgets, help desks, and embedded assistants.
+A floating chat modal built on the popover primitive of your configured style (Radix UI Popover on Radix styles, Base UI Popover on `base-*` styles). Ideal for support widgets, help desks, and embedded assistants.
 
-<AssistantModalSample />
+<FlavorSwitcher />
+
+<Flavored radix={<AssistantModalRadixSamples.AssistantModalSample />} base={<AssistantModalSample />} />
 
 ## Getting Started
 
@@ -43,7 +47,7 @@ export default function Home() {
 
 ## Anatomy
 
-The `AssistantModal` component is built with the following primitives:
+The Radix flavor of `AssistantModal` is built with the following primitives. The Base UI flavor composes your project's Base UI Popover instead.
 
 ```tsx
 import { AssistantModalPrimitive } from "@assistant-ui/react";
@@ -61,7 +65,7 @@ import { AssistantModalPrimitive } from "@assistant-ui/react";
 
 ### Root
 
-Contains all parts of the modal. Based on Radix UI Popover.
+Contains all parts of the modal when using `AssistantModalPrimitive` (the Radix flavor). The Base UI flavor uses your project's Base UI Popover instead.
 
 <ParametersTable
   type="AssistantModalPrimitiveRootProps"

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

@@ -5,8 +5,12 @@ platforms: ["react"]
 ---
 
 import { AttachmentSample } from "@/components/docs/samples/attachment";
+import * as AttachmentRadixSamples from "@/components/docs/samples/attachment.radix";
+import { Flavored, FlavorSwitcher } from "@/components/docs/contexts/flavor.server";
 
-<AttachmentSample />
+<FlavorSwitcher />
+
+<Flavored radix={<AttachmentRadixSamples.AttachmentSample />} base={<AttachmentSample />} />
 
 <Callout type="info">
   **Note:** These components provide the UI for attachments, but you also need

package/.docs/raw/docs/ui/badge.mdx

@@ -2,8 +2,10 @@
 title: Badge
 description: A small label component for displaying status, categories, or metadata.
 links:
-  - label: Radix UI Slot
+  - label: Radix UI Slot (Radix styles)
     url: https://www.radix-ui.com/primitives/docs/utilities/slot
+  - label: Base UI useRender (base styles)
+    url: https://base-ui.com/react/utils/use-render
 platforms: ["react"]
 ---
 
@@ -15,12 +17,16 @@ import {
   BadgeAsLinkSample,
   BadgeAnimatedSample,
 } from "@/components/docs/samples/badge";
+import * as BadgeRadixSamples from "@/components/docs/samples/badge.radix";
+import { Flavored, FlavorSwitcher } from "@/components/docs/contexts/flavor.server";
 
 <Callout>
   This is a **standalone component** that does not depend on the assistant-ui runtime. Use it anywhere in your application.
 </Callout>
 
-<BadgeSample />
+<FlavorSwitcher />
+
+<Flavored radix={<BadgeRadixSamples.BadgeSample />} base={<BadgeSample />} />
 
 ## Installation
 
@@ -42,7 +48,7 @@ export function Example() {
 
 Use the `variant` prop to change the visual style.
 
-<BadgeSample />
+<Flavored radix={<BadgeRadixSamples.BadgeSample />} base={<BadgeSample />} />
 
 ```tsx
 <Badge variant="outline" />     // Border (default)
@@ -59,7 +65,7 @@ Use the `variant` prop to change the visual style.
 
 Use the `size` prop to change the badge size.
 
-<BadgeSizesSample />
+<Flavored radix={<BadgeRadixSamples.BadgeSizesSample />} base={<BadgeSizesSample />} />
 
 ```tsx
 <Badge size="sm" />      // Small
@@ -71,24 +77,24 @@ Use the `size` prop to change the badge size.
 
 Badges automatically style SVG icons.
 
-<PreviewCode file="components/docs/samples/badge" name="BadgeWithIconSample">
-  <BadgeWithIconSample />
+<PreviewCode file="components/docs/samples/badge" name="BadgeWithIconSample" base={<BadgeWithIconSample />}>
+  <BadgeRadixSamples.BadgeWithIconSample />
 </PreviewCode>
 
 ### As Link
 
-Use the `asChild` prop to render the badge as a different element, like a link.
+Compose with `render` (Base UI) or `asChild` (Radix) to render the badge as a different element, like a link.
 
-<PreviewCode file="components/docs/samples/badge" name="BadgeAsLinkSample">
-  <BadgeAsLinkSample />
+<PreviewCode file="components/docs/samples/badge" name="BadgeAsLinkSample" base={<BadgeAsLinkSample />}>
+  <BadgeRadixSamples.BadgeAsLinkSample />
 </PreviewCode>
 
 ### Animated
 
 Combine with CSS transitions for scroll and color animations.
 
-<PreviewCode file="components/docs/samples/badge" name="BadgeAnimatedSample">
-  <BadgeAnimatedSample />
+<PreviewCode file="components/docs/samples/badge" name="BadgeAnimatedSample" base={<BadgeAnimatedSample />}>
+  <BadgeRadixSamples.BadgeAnimatedSample />
 </PreviewCode>
 
 ## API Reference
@@ -110,11 +116,16 @@ Combine with CSS transitions for scroll and color animations.
       default: '"default"',
       description: "The size of the badge.",
     },
+    {
+      name: "render",
+      type: "ReactElement | function",
+      description: "Base UI: compose as a different element instead of rendering a span.",
+    },
     {
       name: "asChild",
       type: "boolean",
       default: "false",
-      description: "Merge props with child element instead of rendering a span.",
+      description: "Radix: merge props with a child element instead of rendering a span.",
     },
     {
       name: "className",

package/.docs/raw/docs/ui/follow-up-suggestions.mdx

@@ -23,7 +23,7 @@ import { FollowUpSuggestionsSample } from "@/components/docs/samples/follow-up-s
 
 <InstallCommand shadcn={["follow-up-suggestions"]} />
 
-This adds a `/components/assistant-ui/follow-up-suggestions.tsx` file to your project.
+This adds a `/components/assistant-ui/follow-up-suggestions.tsx` file to your project. The default `thread` component already renders `ThreadFollowupSuggestions`, so installing it standalone is only needed when you build your own thread layout.
 
   </Step>
   <Step>
@@ -72,7 +72,9 @@ const ThreadViewportFooter = () => {
 
 ## Behavior
 
-The component only renders when the thread is not empty and not currently running. Each suggestion uses `ThreadPrimitive.Suggestion`, replaces the composer text with the prompt, and sends it immediately.
+The component only renders when the thread is not empty, not currently running, and has at least one suggestion. Each suggestion uses `ThreadPrimitive.Suggestion`, replaces the composer text with the prompt, and sends it immediately.
+
+Suggestions stay on a single line. When they overflow, the row scrolls horizontally without a scrollbar, and each edge with clipped content fades out — so no fade shows at the start edge until you scroll.
 
 ## Related Components
 

package/.docs/raw/docs/ui/model-selector.mdx

@@ -5,10 +5,14 @@ platforms: ["react"]
 ---
 
 import { ModelSelectorSample } from "@/components/docs/samples/model-selector";
+import * as ModelSelectorRadixSamples from "@/components/docs/samples/model-selector.radix";
+import { Flavored, FlavorSwitcher } from "@/components/docs/contexts/flavor.server";
 
 A picker that lets users switch between AI models and choose a reasoning effort (thinking) level. It is built on Popover + Command, so search, provider grouping, and filtering compose in without being built in. The default export integrates with assistant-ui's `ModelContext` system, so the selection reaches your backend on every request with no extra wiring.
 
-<ModelSelectorSample />
+<FlavorSwitcher />
+
+<Flavored radix={<ModelSelectorRadixSamples.ModelSelectorSample />} base={<ModelSelectorSample />} />
 
 ## Getting Started
 
@@ -141,6 +145,26 @@ function EffortDropdown() {
 
 Render it inside `ModelSelector.Content` in place of `ModelSelector.Effort`. The same hook supports any shape that reads the levels and writes the selection.
 
+## Provider Logos
+
+Each model's `icon` accepts any `ReactNode` and renders in the trigger and the dropdown items. The optional `logos` registry item ships `OpenAILogo`, `ClaudeLogo`, and `GeminiLogo` marks to plug in:
+
+<InstallCommand shadcn={["logos"]} />
+
+```tsx
+import { ClaudeLogo, GeminiLogo, OpenAILogo } from "@/components/assistant-ui/logos";
+
+<ModelSelector
+  models={[
+    { id: "gpt-5.5", name: "GPT-5.5", icon: <OpenAILogo /> },
+    { id: "claude-opus-4.5", name: "Claude Opus 4.5", icon: <ClaudeLogo /> },
+    { id: "gemini-3-pro", name: "Gemini 3 Pro", icon: <GeminiLogo /> },
+  ]}
+/>;
+```
+
+Icons are opt-in per model — omit `icon` and the entry renders text-only.
+
 ## Search
 
 Search is opt-in. Pass `searchable` to the default component:
@@ -275,7 +299,7 @@ When `searchable` is set, typing filters the list; otherwise the keys above driv
 
 The picker implements the WAI-ARIA combobox pattern over Popover + Command.
 
-- The trigger is `role="combobox"` with `aria-haspopup="listbox"`; Radix Popover manages `aria-expanded` and `aria-controls`.
+- The trigger is `role="combobox"` with `aria-haspopup="listbox"`; the popover primitive manages `aria-expanded` and `aria-controls`.
 - The model list is a Command (cmdk) listbox: each item is `role="option"` with `aria-selected`, and the active item is tracked with `aria-activedescendant`.
 - Keyboard navigation works without a visible search box: `ModelSelector.Content` renders a visually hidden input (`ModelSelector.FocusAnchor`) that anchors cmdk's focus so the list stays reachable. Pass `searchable` to surface a real search input instead.
 - The Thinking row (`ModelSelector.Effort`) is a `role="radiogroup"` of `role="radio"` toggles with roving tabindex, so it is a single tab stop and <Kbd>ArrowLeft</Kbd> / <Kbd>ArrowRight</Kbd> move focus and select in one step. <Kbd>ArrowUp</Kbd> / <Kbd>ArrowDown</Kbd> return focus to the model list.
@@ -284,7 +308,7 @@ The picker implements the WAI-ARIA combobox pattern over Popover + Command.
 
 The default `ModelSelector` export registers the selection with assistant-ui's `ModelContext` system:
 
-1. The component calls `aui.modelContext().register()` with `config.modelName`, plus `config.reasoningEffort` when the selected model supports the chosen level
+1. The component calls `aui.modelContext.register()` with `config.modelName`, plus `config.reasoningEffort` when the selected model supports the chosen level
 2. The `AssistantChatTransport` includes `config` in the request body of every chat request
 3. Your API route reads `config.modelName` and `config.reasoningEffort`
 
@@ -351,6 +375,12 @@ This works out of the box with `@assistant-ui/react-ai-sdk`. `ModelSelector.Root
       default: '"default"',
       description: "Size of the trigger button.",
     },
+    {
+      name: "align",
+      type: '"start" | "center" | "end"',
+      default: '"start"',
+      description: "Alignment of the dropdown relative to the trigger.",
+    },
     {
       name: "contentClassName",
       type: "string",

package/.docs/raw/docs/ui/part-grouping.mdx

@@ -248,10 +248,6 @@ The synthetic `"standalone-tool-call"` key on `groupPartByType` matches all of t
 </MessagePrimitive.GroupedParts>;
 ```
 
-<Callout type="info">
-  The `"mcp-app"` key is deprecated in favor of `"standalone-tool-call"`, which is a superset (it also matches MCP-app tool calls). Existing `"mcp-app"` usage keeps working.
-</Callout>
-
 ### Render Tool Calls as Flat Rows
 
 The previous section keeps `"tool-call"` folded into the chain-of-thought and only lifts standalone tool UIs out. To keep reasoning collapsed in a group while every tool call renders as its own row in the message flow, map both tool keys to `[]`:

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 `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`.
+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, and permanently defers to the first manual toggle. `streaming` only holds the disclosure open; when it ends the accordion returns to `defaultOpen`, which is `false` by default and therefore collapses. Pass `defaultOpen` to keep reasoning expanded once the run finishes.
 
 ```tsx title="/app/components/assistant-ui/thread.tsx"
 import { MessagePrimitive, groupPartByType } from "@assistant-ui/react";

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

@@ -2,8 +2,10 @@
 title: Select
 description: A dropdown select component with composable sub-components.
 links:
-  - label: Radix UI Select
+  - label: Radix UI Select (Radix styles)
     url: https://www.radix-ui.com/primitives/docs/components/select
+  - label: Base UI Select (base styles)
+    url: https://base-ui.com/react/components/select
 platforms: ["react"]
 ---
 
@@ -18,12 +20,16 @@ import {
   SelectSizesSample,
   SelectScrollableSample,
 } from "@/components/docs/samples/select";
+import * as SelectRadixSamples from "@/components/docs/samples/select.radix";
+import { Flavored, FlavorSwitcher } from "@/components/docs/contexts/flavor.server";
 
 <Callout>
   This is a **standalone component** that does not depend on the assistant-ui runtime. Use it anywhere in your application.
 </Callout>
 
-<SelectSample />
+<FlavorSwitcher />
+
+<Flavored radix={<SelectRadixSamples.SelectSample />} base={<SelectSample />} />
 
 ## Installation
 
@@ -60,7 +66,7 @@ export function FruitPicker() {
 
 Use the `variant` prop on `SelectTrigger` to change the visual style.
 
-<SelectVariantsSample />
+<Flavored radix={<SelectRadixSamples.SelectVariantsSample />} base={<SelectVariantsSample />} />
 
 ```tsx
 <SelectTrigger variant="outline" /> // Border (default)
@@ -72,7 +78,7 @@ Use the `variant` prop on `SelectTrigger` to change the visual style.
 
 Use the `size` prop on `SelectTrigger` to change the height.
 
-<SelectSizesSample />
+<Flavored radix={<SelectRadixSamples.SelectSizesSample />} base={<SelectSizesSample />} />
 
 ```tsx
 <SelectTrigger size="default" /> // 36px (default)
@@ -83,34 +89,34 @@ Use the `size` prop on `SelectTrigger` to change the height.
 
 Long lists automatically become scrollable.
 
-<PreviewCode file="components/docs/samples/select" name="SelectScrollableSample">
-  <SelectScrollableSample />
+<PreviewCode file="components/docs/samples/select" name="SelectScrollableSample" base={<SelectScrollableSample />}>
+  <SelectRadixSamples.SelectScrollableSample />
 </PreviewCode>
 
 ### Groups
 
 Use the composable API for grouped options:
 
-<PreviewCode file="components/docs/samples/select" name="SelectGroupsSample">
-  <SelectGroupsSample />
+<PreviewCode file="components/docs/samples/select" name="SelectGroupsSample" base={<SelectGroupsSample />}>
+  <SelectRadixSamples.SelectGroupsSample />
 </PreviewCode>
 
 ### Disabled Items
 
-<PreviewCode file="components/docs/samples/select" name="SelectDisabledItemsSample">
-  <SelectDisabledItemsSample />
+<PreviewCode file="components/docs/samples/select" name="SelectDisabledItemsSample" base={<SelectDisabledItemsSample />}>
+  <SelectRadixSamples.SelectDisabledItemsSample />
 </PreviewCode>
 
 ### With Placeholder
 
-<PreviewCode file="components/docs/samples/select" name="SelectPlaceholderSample">
-  <SelectPlaceholderSample />
+<PreviewCode file="components/docs/samples/select" name="SelectPlaceholderSample" base={<SelectPlaceholderSample />}>
+  <SelectRadixSamples.SelectPlaceholderSample />
 </PreviewCode>
 
 ### Disabled Select
 
-<PreviewCode file="components/docs/samples/select" name="SelectDisabledSample">
-  <SelectDisabledSample />
+<PreviewCode file="components/docs/samples/select" name="SelectDisabledSample" base={<SelectDisabledSample />}>
+  <SelectRadixSamples.SelectDisabledSample />
 </PreviewCode>
 
 ## API Reference
@@ -131,6 +137,8 @@ Use the composable API for grouped options:
 | `SelectScrollUpButton` | Scroll indicator for long lists. |
 | `SelectScrollDownButton` | Scroll indicator for long lists. |
 
+With the Base UI flavor, `SelectValue` resolves the trigger label from the `items` prop on `SelectRoot`; pass the same array you map into `SelectItem` children. The Radix flavor reads the label from the selected item's text automatically.
+
 ### Select
 
 A convenience component that renders a complete select with options.

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

@@ -109,7 +109,7 @@ Root container rendered as an `<a>` tag. Accepts all `<a>` props plus `variant`
 | `size` | `"sm" \| "default" \| "lg"` | `"default"` | Size of the badge |
 | `target` | `string` | `"_blank"` | Link target |
 | `rel` | `string` | `"noopener noreferrer"` | Link rel attribute |
-| `asChild` | `boolean` | `false` | Render as a child element using Radix Slot |
+| `asChild` | `boolean` | `false` | Merge props with a child element instead of rendering an anchor. Effective with the Radix badge; the Base UI badge ignores it |
 | `className` | `string` | — | Additional CSS classes |
 
 ### `SourceIcon`

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

@@ -2,8 +2,10 @@
 title: Tabs
 description: A multi-variant tabs component for organizing content into switchable panels.
 links:
-  - label: Radix UI Tabs
+  - label: Radix UI Tabs (Radix styles)
     url: https://www.radix-ui.com/primitives/docs/components/tabs
+  - label: Base UI Tabs (base styles)
+    url: https://base-ui.com/react/components/tabs
 platforms: ["react"]
 ---
 
@@ -17,12 +19,16 @@ import {
   TabsAsLinkSample,
   TabsAnimatedIndicatorSample,
 } from "@/components/docs/samples/tabs";
+import * as TabsRadixSamples from "@/components/docs/samples/tabs.radix";
+import { Flavored, FlavorSwitcher } from "@/components/docs/contexts/flavor.server";
 
 <Callout>
   This is a **standalone component** that does not depend on the assistant-ui runtime. Use it anywhere in your application.
 </Callout>
 
-<TabsSample />
+<FlavorSwitcher />
+
+<Flavored radix={<TabsRadixSamples.TabsSample />} base={<TabsSample />} />
 
 ## Installation
 
@@ -58,7 +64,7 @@ export function Example() {
 
 Use the `variant` prop on `TabsList` to change the visual style. Child components inherit the variant automatically.
 
-<TabsVariantsSample />
+<Flavored radix={<TabsRadixSamples.TabsVariantsSample />} base={<TabsVariantsSample />} />
 
 ```tsx
 <TabsList variant="default" />  // Muted background with shadow (default)
@@ -72,7 +78,7 @@ Use the `variant` prop on `TabsList` to change the visual style. Child component
 
 Use the `size` prop on `TabsList` to change the tab height. Child components inherit the size automatically.
 
-<TabsSizesSample />
+<Flavored radix={<TabsRadixSamples.TabsSizesSample />} base={<TabsSizesSample />} />
 
 ```tsx
 <TabsList size="sm" />      // 32px height
@@ -84,24 +90,24 @@ Use the `size` prop on `TabsList` to change the tab height. Child components inh
 
 Tabs automatically style SVG icons placed inside triggers.
 
-<PreviewCode file="components/docs/samples/tabs" name="TabsWithIconsSample">
-  <TabsWithIconsSample />
+<PreviewCode file="components/docs/samples/tabs" name="TabsWithIconsSample" base={<TabsWithIconsSample />}>
+  <TabsRadixSamples.TabsWithIconsSample />
 </PreviewCode>
 
 ### Controlled
 
 Use `value` and `onValueChange` for controlled tab state.
 
-<PreviewCode file="components/docs/samples/tabs" name="TabsControlledSample">
-  <TabsControlledSample />
+<PreviewCode file="components/docs/samples/tabs" name="TabsControlledSample" base={<TabsControlledSample />}>
+  <TabsRadixSamples.TabsControlledSample />
 </PreviewCode>
 
 ### As Link
 
-Use the `asChild` prop on `TabsTrigger` to render as a different element, like a navigation link.
+Compose with `render` (Base UI) or `asChild` (Radix) on `TabsTrigger` to render as a different element, like a navigation link.
 
-<PreviewCode file="components/docs/samples/tabs" name="TabsAsLinkSample">
-  <TabsAsLinkSample />
+<PreviewCode file="components/docs/samples/tabs" name="TabsAsLinkSample" base={<TabsAsLinkSample />}>
+  <TabsRadixSamples.TabsAsLinkSample />
 </PreviewCode>
 
 ### Animated Indicator
@@ -116,8 +122,8 @@ All variants feature smooth animated indicators that slide between tabs:
 | `pills` | Sliding pill background |
 | `outline` | Sliding border |
 
-<PreviewCode file="components/docs/samples/tabs" name="TabsAnimatedIndicatorSample">
-  <TabsAnimatedIndicatorSample />
+<PreviewCode file="components/docs/samples/tabs" name="TabsAnimatedIndicatorSample" base={<TabsAnimatedIndicatorSample />}>
+  <TabsRadixSamples.TabsAnimatedIndicatorSample />
 </PreviewCode>
 
 ## API Reference
@@ -201,11 +207,16 @@ An individual tab button.
       required: true,
       description: "The unique value for this tab.",
     },
+    {
+      name: "render",
+      type: "ReactElement | function",
+      description: "Base UI: compose as a different element instead of rendering a button.",
+    },
     {
       name: "asChild",
       type: "boolean",
       default: "false",
-      description: "Merge props with child element instead of rendering a button.",
+      description: "Radix: merge props with a child element instead of rendering a button.",
     },
     {
       name: "disabled",

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

@@ -20,9 +20,9 @@ import { HeatGraphDemo } from "@/app/(demos)/heat-graph/heat-graph-demo";
 <Tabs items={["shadcn", "npm", "pnpm", "yarn"]}>
   <Tab value="shadcn">
     ```sh
-    npx shadcn@latest add https://r.assistant-ui.com/heat-graph
+    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.
+    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

package/dist/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","names":[],"sources":["../src/constants.ts"],"mappings":";cAKa,QAAA;AAAA,cACA,WAAA;AAAA,cAEA,aAAA;AAAA,cAGA,SAAA;AAAA,cACA,kBAAA;AAAA,cAEA,aAAA;AAAA,cACA,YAAA;AAAA,cAEA,aAAA;AAAA,cAEA,0BAAA;AAAA,cAEA,eAAA"}
+{"version":3,"file":"constants.d.ts","names":[],"sources":["../src/constants.ts"],"mappings":";cAKa;cACA;cAEA;cAGA;cACA;cAEA;cACA;cAEA;cAEA;cAEA"}

package/dist/index.d.ts

@@ -1,5 +1,4 @@
-import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
-
+import { McpServer } from "@modelcontextprotocol/server";
 //#region src/index.d.ts
 declare const server: McpServer;
 declare function runServer(): Promise<void>;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/index.ts"],"mappings":";;;cAgBa,MAAA,EAAM,SAGjB;AAAA,iBAmCoB,SAAA,IAAS,OAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/index.ts"],"mappings":";;cAsBa,QAAM;iBAqFG,aAAS"}

package/dist/index.js

@@ -3,10 +3,12 @@ import { logger } from "./utils/logger.js";
 import { docsTools } from "./tools/docs.js";
 import { examplesTools } from "./tools/examples.js";
 import { searchTools } from "./tools/search.js";
+import { xuluxTemplateDetailsTool, xuluxTemplatePreviewTool, xuluxTemplatesListTool } from "./tools/xulux-templates.js";
+import { xuluxPlaygroundPrompt } from "./prompts/xulux-playground.js";
 import { registerResources } from "./tools/resources.js";
 import { join } from "node:path";
-import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
-import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { McpServer } from "@modelcontextprotocol/server";
+import { StdioServerTransport } from "@modelcontextprotocol/server/stdio";
 import { readFileSync } from "node:fs";
 //#region src/index.ts
 const packageJson = JSON.parse(readFileSync(join(PACKAGE_DIR, "package.json"), "utf-8"));
@@ -41,6 +43,43 @@ server.registerTool(searchTools.name, {
 		openWorldHint: false
 	}
 }, searchTools.execute);
+server.registerTool(xuluxTemplatesListTool.name, {
+	title: "assistant-ui Templates",
+	description: xuluxTemplatesListTool.description,
+	inputSchema: xuluxTemplatesListTool.parameters,
+	annotations: {
+		readOnlyHint: true,
+		openWorldHint: true
+	}
+}, xuluxTemplatesListTool.execute);
+server.registerTool(xuluxTemplateDetailsTool.name, {
+	title: "assistant-ui Template Details",
+	description: xuluxTemplateDetailsTool.description,
+	inputSchema: xuluxTemplateDetailsTool.parameters,
+	annotations: {
+		readOnlyHint: true,
+		openWorldHint: true
+	}
+}, xuluxTemplateDetailsTool.execute);
+server.registerTool(xuluxTemplatePreviewTool.name, {
+	title: "assistant-ui Template Preview URLs",
+	description: xuluxTemplatePreviewTool.description,
+	inputSchema: xuluxTemplatePreviewTool.parameters,
+	annotations: {
+		readOnlyHint: false,
+		openWorldHint: true
+	}
+}, xuluxTemplatePreviewTool.execute);
+server.registerPrompt(xuluxPlaygroundPrompt.name, {
+	title: "assistant-ui Template Workflow",
+	description: xuluxPlaygroundPrompt.description
+}, () => ({ messages: [{
+	role: "user",
+	content: {
+		type: "text",
+		text: xuluxPlaygroundPrompt.text
+	}
+}] }));
 registerResources(server);
 async function runServer() {
 	try {