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

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

@@ -74,7 +74,7 @@ import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
 import toolkit from "./toolkit";
 
 function MyRuntimeProvider({ children }: { children: React.ReactNode }) {
-  const runtime = useChatRuntime({ api: "/api/chat" });
+  const runtime = useChatRuntime();
   const aui = useAui({ tools: Tools({ toolkit }) });
   return (
     <AssistantRuntimeProvider aui={aui} runtime={runtime}>
@@ -84,6 +84,8 @@ function MyRuntimeProvider({ children }: { children: React.ReactNode }) {
 }
 ```
 
+`useChatRuntime()` targets `/api/chat` by default. To point at a different endpoint or customize requests, see [Custom transport](/docs/runtimes/ai-sdk/v7#custom-transport).
+
 <Callout type="tip">
   Frontend toolkit entries can be passed to your backend using the
   `frontendTools` utility.
@@ -537,7 +539,7 @@ export default defineToolkit({
 
 ### Server-side approval gates
 
-Some runtimes (notably AI SDK v6's `needsApproval` tools) pause on the server and emit an approval request that the client must acknowledge before the tool runs. assistant-ui surfaces this on the tool part as `approval` and exposes `respondToApproval({ approved, reason? })` on the renderer:
+Some runtimes (notably AI SDK v7's `toolApproval`-gated tools) pause on the server and emit an approval request that the client must acknowledge before the tool runs. assistant-ui surfaces this on the tool part as `approval` and exposes `respondToApproval({ approved, reason? })` on the renderer:
 
 ```tsx
 const toolkit = defineToolkit({
@@ -581,9 +583,9 @@ const toolkit = defineToolkit({
 
 `approval.isAutomatic` is `true` when the runtime granted the decision from a server-side policy rather than the user; render a "auto-approved" badge instead of buttons in that case.
 
-Approval gates require a runtime that implements them: the AI SDK v6 runtime emits them for `needsApproval` tools, and `LocalRuntime` supports gates emitted by your `ChatModelAdapter`; see [LocalRuntime approval gates](/docs/runtimes/custom/local-runtime#approval-gates). For tools where the user supplies the result itself, use `unstable_humanToolNames` with `addResult` instead; see [human-in-the-loop tools](/docs/runtimes/custom/local-runtime#human-in-the-loop-tools).
+Approval gates require a runtime that implements them: the AI SDK v7 runtime emits them for `toolApproval`-gated tools, and `LocalRuntime` supports gates emitted by your `ChatModelAdapter`; see [LocalRuntime approval gates](/docs/runtimes/custom/local-runtime#approval-gates). For tools where the user supplies the result itself, use `unstable_humanToolNames` with `addResult` instead; see [human-in-the-loop tools](/docs/runtimes/custom/local-runtime#human-in-the-loop-tools).
 
-For the wire-side setup (`needsApproval`, `sendAutomaticallyWhen`), see [AI SDK v6 server-side tool approval](/docs/runtimes/ai-sdk/v6#server-side-tool-approval).
+For the wire-side setup (`needsApproval`, `sendAutomaticallyWhen`), see [AI SDK v7 server-side tool approval](/docs/runtimes/ai-sdk/v7#server-side-tool-approval).
 
 ### Approval options
 

package/.docs/raw/docs/tools/user-managed-mcp.mdx

@@ -221,14 +221,13 @@ import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
 
 export function Chat() {
   const runtime = useChatRuntime({
-    api: "/api/chat",
     sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
   });
   /* … */
 }
 ```
 
-`sendAutomaticallyWhen` sends completed frontend tool results back to the server so the model can continue after a tool call.
+`sendAutomaticallyWhen` sends completed frontend tool results back to the server so the model can continue after a tool call. `useChatRuntime()` targets `/api/chat` by default; to point at a different endpoint, see [Custom transport](/docs/runtimes/ai-sdk/v7#custom-transport).
 
 Tool names are prefixed `serverId__toolName` to avoid collisions across connected servers. The toolkit re-registers whenever a server connects / disconnects or its tool list changes.
 
@@ -316,6 +315,29 @@ const aui = useAui();
 await aui.mcp().addCustomServer({ name, url, auth: { type: "bearer", token } });
 await aui.mcp().server({ id }).connect();
 await aui.mcp().server({ id }).callTool("echo", { text: "hi" });
+
+// Build a paginated resource browser/preview UI.
+type ResourcePage = {
+  resources: Array<{ uri: string; name?: string }>;
+  nextCursor?: string;
+};
+
+const server = aui.mcp().server({ id });
+const resources: ResourcePage["resources"] = [];
+let nextCursor: string | undefined;
+
+do {
+  const page = (await (nextCursor === undefined
+    ? server.listResources()
+    : server.listResources({ cursor: nextCursor }))) as ResourcePage;
+  resources.push(...page.resources);
+  nextCursor = page.nextCursor;
+} while (nextCursor !== undefined);
+
+const firstResource = resources[0];
+if (firstResource) {
+  const preview = await server.readResource(firstResource.uri);
+}
 ```
 
 ## v1 scope
@@ -323,13 +345,14 @@ await aui.mcp().server({ id }).callTool("echo", { text: "hi" });
 What ships:
 
 - Tool listing and invocation, auto-registered as frontend tools
+- Resource listing and reads for app-built browsers or preview panes
 - OAuth (PKCE + DCR), bearer, none
 - StreamableHTTP transport
 - Manual connect/disconnect
 
 What's deferred:
 
-- Resources, prompts, sampling
+- Prompts, sampling
 - Auto-reconnect with backoff
 - Per-tool enable/disable persistence
 - Per-tool consent prompts

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,7 @@ 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.
 
 ## 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.
@@ -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/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";
-
 //#region src/index.d.ts
 declare const server: McpServer;
 declare function runServer(): Promise<void>;