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

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

@@ -1,428 +0,0 @@
----
-title: User-managed MCP servers
-description: Let end users add and authenticate MCP servers from the browser with @assistant-ui/react-mcp.
----
-
-[`@assistant-ui/react-mcp`](https://npmjs.com/package/@assistant-ui/react-mcp) is the user-facing layer for MCP. Where the [server-side MCP guide](/docs/tools/mcp) wires a single fixed set of MCP servers into your API route, this package lets *end users* see a list of connectors, sign in via OAuth, paste a custom server URL, and have the resulting tool catalog flow into the chat — automatically.
-
-Two ways a server reaches the user:
-
-- **Connector** — a preset declared by the app developer with `defineConnector(...)`. The user just clicks Connect (and completes auth).
-- **Custom server** — the user supplies the URL, name, and auth in `<McpAddFormPrimitive>`. Hide the add UI to disable.
-
-Both flow through one connection lifecycle, one persisted state surface, and one tool registration path.
-
-## How it works
-
-```
-AuiConfig({ mcp: McpManagerResource({ connectors }) })
-        │
-        ├─ Resource — connection lifecycle, server lookup, OAuth/bearer auth
-        ├─ Auto-mounts the modelContext scope when no chat runtime provides one
-        └─ Registers connected tools as frontend tools — your chat sees them automatically
-```
-
-The manager is a single resource. Mount it with `AuiProvider` like any other scope. OAuth (PKCE + RFC 7591 dynamic client registration), bearer, and "no auth" are first-class. Token refresh runs inside the MCP SDK on 401; this package mediates persistence and the redirect step.
-
-<Callout type="info">
-The [2026-07-28 spec revision](https://modelcontextprotocol.io/specification/2026-07-28/changelog) deprecates RFC 7591 dynamic client registration in favor of [Client ID Metadata Documents](https://modelcontextprotocol.io/specification/2026-07-28/basic/authorization/client-registration#client-id-metadata-documents), which clients should prefer over DCR when the authorization server advertises `client_id_metadata_document_supported`. Dynamic client registration remains available for backwards compatibility with authorization servers that do not support CIMD, and the spec's deprecation policy sets a minimum twelve-month window before removal, so the flow described here keeps working. Against a CIMD-only authorization server that exposes no `registration_endpoint`, supply a pre-registered [`clientId`](#auth) instead.
-</Callout>
-
-## Setup
-
-<Steps>
-<Step>
-
-### Install
-
-<InstallCommand npm={["@assistant-ui/react-mcp"]} />
-
-</Step>
-<Step>
-
-### Mount the manager
-
-Declare your connectors and provide the `mcp` scope via `AuiProvider`. No imperative hooks:
-
-```tsx title="app/providers.tsx"
-"use client";
-
-import { AuiConfig, AuiProvider, useAui } from "@assistant-ui/react";
-import { McpManagerResource, defineConnector } from "@assistant-ui/react-mcp";
-
-const connectors = [
-  defineConnector({
-    id: "linear",
-    name: "Linear",
-    url: "https://mcp.linear.app",
-    auth: { type: "oauth", scopes: ["read"] },
-    icon: "/icons/linear.svg",
-  }),
-  defineConnector({
-    id: "weather",
-    name: "Weather",
-    url: "https://mcp.example.com/weather",
-    auth: { type: "none" },
-    connectionTimeout: 10_000,
-  }),
-];
-
-export function Providers({ children }: { children: React.ReactNode }) {
-  const aui = useAui();
-  const config = AuiConfig({
-    mcp: McpManagerResource({
-      connectors,
-      connectionTimeout: 15_000,
-    }),
-  });
-  return (
-    <AuiProvider extends={aui} config={config}>
-      {children}
-    </AuiProvider>
-  );
-}
-```
-
-Defaults and useful options:
-
-- `storage` — `McpLocalStorage()` (override for production; see [Storage](#storage))
-- `oauthRedirectUri` — `${window.location.origin}/mcp/callback`
-- `autoConnect` — `true` (connect on mount when usable auth is persisted)
-- `connectionTimeout` — optional timeout in milliseconds. Set it on the manager as a default or on a connector/custom server to bound the MCP readiness flow (`connect()` plus `listTools()`) with a clear error.
-- Connector `id` values must be unique. The id is used for server lookup, OAuth routing, and model-visible tool names such as `linear__search`.
-
-</Step>
-<Step>
-
-### Pick your UI
-
-You have two options:
-
-**Drop-in shadcn dialog** (recommended for most apps) — install the `mcp-config` component via the assistant-ui registry, then render `<McpConfigDialog />` anywhere inside the provider. You get a styled trigger, server cards, status badges, error banners, and the add form for free:
-
-<InstallCommand shadcn={["mcp-config"]} />
-
-```tsx title="app/page.tsx"
-import { McpConfigDialog } from "@/components/assistant-ui/mcp-config";
-
-export default function Page() {
-  return (
-    <header className="flex items-center justify-between">
-      <h1>My app</h1>
-      <McpConfigDialog />
-    </header>
-  );
-}
-```
-
-Pass children to override the trigger:
-
-```tsx
-<McpConfigDialog>
-  <Button variant="ghost">Servers</Button>
-</McpConfigDialog>
-```
-
-**Compose your own from primitives.** Four namespaces are available, all unstyled and `data-*`-driven. The iteration primitives take a **render function** so the body re-runs per server with the right scope:
-
-```tsx title="app/mcp/page.tsx"
-"use client";
-
-import {
-  McpManagerPrimitive,
-  McpServerPrimitive,
-} from "@assistant-ui/react-mcp";
-
-const ServerCard = () => (
-  <McpServerPrimitive.Root>
-    <McpServerPrimitive.Icon />
-    <McpServerPrimitive.Name />
-    <McpServerPrimitive.Status />
-    <McpServerPrimitive.ConnectButton>Connect</McpServerPrimitive.ConnectButton>
-    <McpServerPrimitive.DisconnectButton>Disconnect</McpServerPrimitive.DisconnectButton>
-    <McpServerPrimitive.OAuthLink>Authorize ↗</McpServerPrimitive.OAuthLink>
-    <McpServerPrimitive.RemoveButton>Remove</McpServerPrimitive.RemoveButton>
-    <McpServerPrimitive.Error />
-  </McpServerPrimitive.Root>
-);
-
-export default function McpPage() {
-  return (
-    <McpManagerPrimitive.Root>
-      <h2>Connectors</h2>
-      <McpManagerPrimitive.Connectors>
-        {() => <ServerCard />}
-      </McpManagerPrimitive.Connectors>
-
-      <h2>Your servers</h2>
-      <McpManagerPrimitive.CustomServers>
-        {() => <ServerCard />}
-      </McpManagerPrimitive.CustomServers>
-
-      <McpManagerPrimitive.AddCustomTrigger>
-        Add custom server
-      </McpManagerPrimitive.AddCustomTrigger>
-    </McpManagerPrimitive.Root>
-  );
-}
-```
-
-To disable custom servers entirely, just don't render `AddCustomTrigger` and `CustomServers`.
-
-The iteration primitives wrap each item in an `McpServerByIdProvider`, so the nested `<McpServerPrimitive.*>` automatically reads the right scope. `<ConnectButton>`, `<DisconnectButton>`, `<OAuthLink>` and `<RemoveButton>` only render when the relevant state matches — no manual gating. `<RemoveButton>` is also hidden on connector items (which the user can't remove).
-
-</Step>
-<Step>
-
-### Add the custom-server form
-
-```tsx
-<McpAddFormPrimitive.Root onSubmitted={() => closeDialog()}>
-  <McpAddFormPrimitive.NameField />
-  <McpAddFormPrimitive.UrlField />
-  <McpAddFormPrimitive.AuthSelect /> {/* none | bearer | oauth */}
-  <McpAddFormPrimitive.AuthFields /> {/* token or scope input depending on selection */}
-  <McpAddFormPrimitive.Error />
-  <McpAddFormPrimitive.Submit>Add</McpAddFormPrimitive.Submit>
-  <McpAddFormPrimitive.Cancel>Cancel</McpAddFormPrimitive.Cancel>
-</McpAddFormPrimitive.Root>
-```
-
-The form owns its own draft state and submits via `aui.mcp.addCustomServer(...)`. Pass a render function to `AuthFields` to fully customize it.
-
-</Step>
-<Step>
-
-### Handle the OAuth callback
-
-Add a route at `/mcp/callback` (or whatever you set `oauthRedirectUri` to):
-
-```tsx title="app/mcp/callback/page.tsx"
-"use client";
-
-import { McpOAuthCallback } from "@assistant-ui/react-mcp";
-import { useRouter } from "next/navigation";
-import { Providers } from "../../providers";
-
-export default function Callback() {
-  const router = useRouter();
-  return (
-    <Providers>
-      <McpOAuthCallback onComplete={() => router.replace("/mcp")} />
-    </Providers>
-  );
-}
-```
-
-The callback reads `?state=...&code=...` from the URL, derives the target server id (encoded in the OAuth `state` parameter automatically), and calls `completeAuth` on the right server.
-
-</Step>
-<Step>
-
-### That's it — the chat sees your tools
-
-`McpManagerResource` registers connected tools as **frontend tools** with the `modelContext` scope. Any chat runtime mounted in the same store (e.g. `@assistant-ui/react-ai-sdk`'s `useChatRuntime`) sees them and exposes them to the model — no `useMcpTools` hook, no adapter call.
-
-```tsx
-"use client";
-import { lastAssistantMessageIsCompleteWithToolCalls } from "ai";
-import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
-
-export function Chat() {
-  const runtime = useChatRuntime({
-    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
-  });
-  /* … */
-}
-```
-
-`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.
-
-If no chat runtime is mounted, `McpManagerResource` brings its own minimal `modelContext` along. Tools are still callable directly:
-
-```ts
-// In an event handler, never in render.
-const aui = useAui();
-const out = await aui.mcp.server({ id: "linear" }).callTool("search", { q });
-```
-
-</Step>
-</Steps>
-
-## Form elicitation
-
-Connected servers can request structured user input through form-mode elicitation. Render `McpElicitationPrimitive.Items` inside a server-scoped subtree, then compose fields and response actions from the unstyled primitives:
-
-Answering a request requires composing `McpElicitationPrimitive`, because the server waits for the form response otherwise. Set `elicitation: false` on a connector or custom server to opt it out of advertising the capability. Numeric fields can stay text inputs (parseable strings are coerced); boolean fields must compose a checkbox, because string drafts for booleans are flagged invalid rather than coerced. Clearing a field returns it to the unanswered state, so an empty text input is omitted from the response rather than submitted as `""` or flagged invalid, unless the schema admits `""` for that property through an `enum` member or a `""` default. Render `enum` properties as a select; when `""` is not a member, its blank option is the unanswered state.
-
-```tsx
-import { McpElicitationPrimitive } from "@assistant-ui/react-mcp";
-
-<McpElicitationPrimitive.Items>
-  {() => (
-    <McpElicitationPrimitive.Root>
-      <McpElicitationPrimitive.Message />
-      <McpElicitationPrimitive.Error />
-      <McpElicitationPrimitive.Fields>
-        {({ name, schema, value, setValue }) =>
-          (schema as { type?: string } | undefined)?.type === "boolean" ? (
-            <label>
-              {name}
-              <input
-                type="checkbox"
-                checked={value === true}
-                onChange={(event) => setValue(event.target.checked)}
-              />
-            </label>
-          ) : (
-            <input
-              name={name}
-              value={typeof value === "string" ? value : ""}
-              onChange={(event) => setValue(event.target.value)}
-            />
-          )
-        }
-      </McpElicitationPrimitive.Fields>
-      <McpElicitationPrimitive.Accept>Submit</McpElicitationPrimitive.Accept>
-      <McpElicitationPrimitive.Decline>Decline</McpElicitationPrimitive.Decline>
-      <McpElicitationPrimitive.Cancel>Cancel</McpElicitationPrimitive.Cancel>
-    </McpElicitationPrimitive.Root>
-  )}
-</McpElicitationPrimitive.Items>
-```
-
-Client-side validation errors keep the elicitation pending so the user can correct the form, and `McpElicitationPrimitive.Error` renders the resulting message.
-
-## Storage
-
-All persisted state — custom server records, OAuth tokens, PKCE verifiers, DCR client info — goes through a single `MCPStorage` resource. Three built-ins:
-
-- `McpLocalStorage()` — default. Stores under the `aui-mcp:` prefix in `window.localStorage`.
-- `McpMemoryStorage()` — in-process Map. Use for SSR/tests where localStorage is absent.
-- `McpCustomStorage({...})` — bring your own load/save. Use for app-controlled backends (e.g. POST to your API).
-
-```tsx
-import { McpManagerResource, McpCustomStorage } from "@assistant-ui/react-mcp";
-
-AuiConfig({
-  mcp: McpManagerResource({
-    connectors,
-    storage: McpCustomStorage({
-      loadCustomServers: async () => fetch("/api/mcp/servers").then((r) => r.json()),
-      saveCustomServers: async (records) =>
-        fetch("/api/mcp/servers", { method: "PUT", body: JSON.stringify(records) }),
-      loadAuthState: async (id) =>
-        fetch(`/api/mcp/auth/${id}`).then((r) => (r.ok ? r.json() : null)),
-      saveAuthState: async (id, state) =>
-        fetch(`/api/mcp/auth/${id}`, { method: "PUT", body: JSON.stringify(state) }),
-      clearAuthState: async (id) =>
-        fetch(`/api/mcp/auth/${id}`, { method: "DELETE" }),
-    }),
-  }),
-});
-```
-
-<Callout type="warn">
-`McpLocalStorage` stores tokens in plain text and is XSS-exposed. For anything beyond local prototyping, use `McpCustomStorage` against an HTTP-only-cookie-backed endpoint, or wrap localStorage with your own encrypted serializer.
-</Callout>
-
-## Auth
-
-Three modes, declared per-connector or per-custom-record:
-
-```ts
-{ type: "none" }                                    // no auth header
-{ type: "bearer", token?: "…" }                     // Authorization: Bearer …
-{ type: "oauth",                                    // PKCE + DCR + refresh
-  scopes?: ["read"],
-  authorizationEndpoint?: "…",                      // overrides RFC 8414 discovery
-  tokenEndpoint?: "…",
-  registrationEndpoint?: "…",
-  clientId?: "…",                                   // skip DCR with a static client
-  clientSecret?: "…",
-}
-```
-
-The OAuth provider implements the MCP SDK's `OAuthClientProvider`. The SDK handles discovery (RFC 8414), DCR (RFC 7591 — [deprecated in favor of CIMD](#how-it-works) but still supported), PKCE, token exchange, and refresh; this package mediates `MCPStorage` reads/writes and the redirect step. The server id is embedded in the OAuth `state` parameter so a single `/mcp/callback` route knows which server to complete.
-
-## State & methods
-
-Render-time state — `useAuiState`:
-
-```ts
-import { useAuiState } from "@assistant-ui/store";
-
-const isHydrated = useAuiState((s) => s.mcp.isHydrated);
-const connectionState = useAuiState((s) => s.mcpServer.connectionState);
-//                                          ^ requires McpServerByIdProvider
-```
-
-Imperative methods: `useAui` + resolve in a callback (never during render):
-
-```ts
-const aui = useAui();
-
-// inside an event handler:
-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
-
-What ships:
-
-- Tool listing and invocation, auto-registered as frontend tools
-- Resource listing and reads for app-built browsers or preview panes
-- Form-mode elicitation with app-composed fields and response actions
-- OAuth (PKCE + DCR), bearer, none
-- StreamableHTTP transport
-- Manual connect/disconnect
-
-What's deferred:
-
-- Prompts, sampling
-- Auto-reconnect with backoff
-- Per-tool enable/disable persistence
-- Per-tool consent prompts
-- Out-of-the-box token encryption (use `McpCustomStorage` against a server endpoint)
-
-## Related
-
-<Cards>
-  <Card
-    title="Server-side MCP"
-    description="App-developer-controlled MCP servers wired into the API route."
-    href="/docs/tools/mcp"
-  />
-  <Card
-    title="Tools and tool UI"
-    description="Build custom renderers for tool calls and approvals."
-    href="/docs/tools/defining-tools"
-  />
-</Cards>

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

@@ -1,266 +0,0 @@
----
-title: Accordion
-description: A vertically stacked set of interactive headings that reveal or hide content sections.
-links:
-  - 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"]
----
-
-import { PreviewCode } from "@/components/docs/preview-code.server";
-import {
-  AccordionSample,
-  AccordionVariantsSample,
-  AccordionMultipleSample,
-  AccordionWithIconsSample,
-  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>
-
-<FlavorSwitcher />
-
-<Flavored radix={<AccordionRadixSamples.AccordionSample />} base={<AccordionSample />} />
-
-## Installation
-
-<InstallCommand shadcn={["accordion"]} />
-
-## Usage
-
-```tsx
-import {
-  Accordion,
-  AccordionItem,
-  AccordionTrigger,
-  AccordionContent,
-} from "@/components/assistant-ui/accordion";
-
-export function Example() {
-  return (
-    <Accordion type="single" collapsible>
-      <AccordionItem value="item-1">
-        <AccordionTrigger>Section 1</AccordionTrigger>
-        <AccordionContent>Content for section 1.</AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2">
-        <AccordionTrigger>Section 2</AccordionTrigger>
-        <AccordionContent>Content for section 2.</AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-}
-```
-
-## Examples
-
-### Variants
-
-Use the `variant` prop on `Accordion` to change the visual style. Child components inherit the variant automatically.
-
-<Flavored radix={<AccordionRadixSamples.AccordionVariantsSample />} base={<AccordionVariantsSample />} />
-
-```tsx
-// Default - border-bottom separator
-<Accordion type="single" collapsible variant="default">
-  <AccordionItem value="item-1">
-    <AccordionTrigger>...</AccordionTrigger>
-    <AccordionContent>...</AccordionContent>
-  </AccordionItem>
-</Accordion>
-
-// Outline - bordered container
-<Accordion type="single" collapsible variant="outline">
-  <AccordionItem value="item-1">
-    <AccordionTrigger>...</AccordionTrigger>
-    <AccordionContent>...</AccordionContent>
-  </AccordionItem>
-</Accordion>
-
-// Ghost - separated cards
-<Accordion type="single" collapsible variant="ghost">
-  <AccordionItem value="item-1">
-    <AccordionTrigger>...</AccordionTrigger>
-    <AccordionContent>...</AccordionContent>
-  </AccordionItem>
-</Accordion>
-```
-
-### Multiple Items Open
-
-Use `type="multiple"` to allow multiple items to be open simultaneously.
-
-<Flavored radix={<AccordionRadixSamples.AccordionMultipleSample />} base={<AccordionMultipleSample />} />
-
-```tsx
-<Accordion type="multiple">
-  <AccordionItem value="item-1">
-    <AccordionTrigger>First Section</AccordionTrigger>
-    <AccordionContent>Content 1</AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="item-2">
-    <AccordionTrigger>Second Section</AccordionTrigger>
-    <AccordionContent>Content 2</AccordionContent>
-  </AccordionItem>
-</Accordion>
-```
-
-### With Icons
-
-Add icons or custom elements inside the trigger.
-
-<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" 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" base={<AccordionFAQSample />}>
-  <AccordionRadixSamples.AccordionFAQSample />
-</PreviewCode>
-
-## API Reference
-
-### Composable API
-
-| Component | Description |
-|-----------|-------------|
-| `Accordion` | The root component that manages accordion state and variant. |
-| `AccordionItem` | A single collapsible section container. |
-| `AccordionTrigger` | The clickable header that toggles content visibility. |
-| `AccordionContent` | The collapsible content panel. |
-
-### Accordion
-
-The root component that manages accordion state. Set `variant` here to style all child components.
-
-<ParametersTable
-  type="AccordionProps"
-  parameters={[
-    {
-      name: "type",
-      type: '"single" | "multiple"',
-      required: true,
-      description: "Whether only one or multiple items can be open at once.",
-    },
-    {
-      name: "collapsible",
-      type: "boolean",
-      default: "false",
-      description: "When type is 'single', allows closing the open item by clicking it again.",
-    },
-    {
-      name: "defaultValue",
-      type: "string | string[]",
-      description: "The default open item(s) (uncontrolled).",
-    },
-    {
-      name: "value",
-      type: "string | string[]",
-      description: "The controlled open item(s).",
-    },
-    {
-      name: "onValueChange",
-      type: "(value: string | string[]) => void",
-      description: "Callback when the open item(s) change.",
-    },
-    {
-      name: "variant",
-      type: '"default" | "outline" | "ghost"',
-      default: '"default"',
-      description: "The visual style of the accordion. Child components inherit this automatically.",
-    },
-    {
-      name: "className",
-      type: "string",
-      description: "Additional CSS classes.",
-    },
-  ]}
-/>
-
-### AccordionItem
-
-A single collapsible section container.
-
-<ParametersTable
-  type="AccordionItemProps"
-  parameters={[
-    {
-      name: "value",
-      type: "string",
-      required: true,
-      description: "A unique identifier for this item.",
-    },
-    {
-      name: "disabled",
-      type: "boolean",
-      description: "Whether the item is disabled.",
-    },
-    {
-      name: "className",
-      type: "string",
-      description: "Additional CSS classes.",
-    },
-  ]}
-/>
-
-### AccordionTrigger
-
-The clickable header that toggles content visibility.
-
-<ParametersTable
-  type="AccordionTriggerProps"
-  parameters={[
-    {
-      name: "className",
-      type: "string",
-      description: "Additional CSS classes.",
-    },
-  ]}
-/>
-
-### AccordionContent
-
-The collapsible content panel.
-
-<ParametersTable
-  type="AccordionContentProps"
-  parameters={[
-    {
-      name: "className",
-      type: "string",
-      description: "Additional CSS classes.",
-    },
-  ]}
-/>
-
-### Style Variants (CVA)
-
-| Export | Description |
-|--------|-------------|
-| `accordionVariants` | Styles for the accordion container. |
-
-```tsx
-import { accordionVariants } from "@/components/assistant-ui/accordion";
-
-<div className={accordionVariants({ variant: "outline" })}>
-  Custom Accordion Container
-</div>
-```