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

package/.docs/raw/docs/ui/mcp-config.mdx

@@ -1,107 +0,0 @@
----
-title: MCP Config Dialog
-description: Drop-in shadcn dialog that lists MCP connectors and custom servers, with inline OAuth/bearer auth controls and an add form.
-platforms: ["react"]
----
-
-`McpConfigDialog` is a shadcn template that wraps the [`@assistant-ui/react-mcp`](/docs/tools/user-managed-mcp) primitives. Render it anywhere inside an `McpManagerResource`-mounted client and your users get a styled MCP server panel — no manual primitive composition.
-
-## Getting Started
-
-<Steps>
-  <Step>
-
-### Install the package and the component
-
-<InstallCommand npm={["@assistant-ui/react-mcp"]} />
-
-<InstallCommand shadcn={["mcp-config"]} />
-
-  </Step>
-  <Step>
-
-### Mount the manager
-
-```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"] },
-  }),
-];
-
-export function Providers({ children }: { children: React.ReactNode }) {
-  const aui = useAui();
-  const config = AuiConfig({ mcp: McpManagerResource({ connectors }) });
-  return (
-    <AuiProvider extends={aui} config={config}>
-      {children}
-    </AuiProvider>
-  );
-}
-```
-
-  </Step>
-  <Step>
-
-### Drop the dialog in
-
-```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>
-  );
-}
-```
-
-That's it. The default trigger is an outline `"🔌 MCP servers"` button. Click it to open the dialog, which renders a **Connectors** list (your app-defined presets with connect/authorize/disconnect controls), a **Custom servers** list (user-added entries with the same controls plus a remove button), and an inline **Add server** form for URL + name + auth selection.
-
-  </Step>
-  <Step>
-
-### Override the trigger (optional)
-
-Pass children to swap the default button for your own:
-
-```tsx
-<McpConfigDialog>
-  <Button variant="ghost">Servers</Button>
-</McpConfigDialog>
-```
-
-  </Step>
-  <Step>
-
-### Wire up the OAuth callback
-
-Required for any OAuth-enabled connector or custom server. See the [OAuth callback section in the react-mcp guide](/docs/tools/user-managed-mcp#handle-the-oauth-callback) for the route handler.
-
-  </Step>
-</Steps>
-
-## Related
-
-<Cards>
-  <Card
-    title="User-managed MCP servers"
-    description="Full @assistant-ui/react-mcp guide — connectors, custom servers, OAuth, storage, custom primitives."
-    href="/docs/tools/user-managed-mcp"
-  />
-  <Card
-    title="Server-side MCP"
-    description="App-developer-controlled MCP servers wired into the API route."
-    href="/docs/tools/mcp"
-  />
-</Cards>

package/.docs/raw/docs/ui/mermaid.mdx

@@ -1,92 +0,0 @@
----
-title: "Mermaid Diagrams"
-description: Render Mermaid diagrams in chat messages with streaming support.
-platforms: ["react"]
----
-
-import { MermaidSample } from "@/components/docs/samples/mermaid";
-
-<MermaidSample />
-
-## Getting Started
-
-<Steps>
-  <Step>
-
-### Add `mermaid-diagram` component
-
-<InstallCommand shadcn={["mermaid-diagram"]} />
-
-This will install the required dependencies and add the component to your project.
-
-  </Step>
-  <Step>
-
-### Add it to `componentsByLanguage` in `markdown-text.tsx`
-
-```tsx title="/components/assistant-ui/markdown-text.tsx"
-import { MermaidDiagram } from "@/components/assistant-ui/mermaid-diagram"; // [!code ++]
-
-const MarkdownTextImpl = () => {
-  return (
-    <MarkdownTextPrimitive
-      remarkPlugins={[remarkGfm]}
-      className="aui-md"
-      components={defaultComponents}
-      componentsByLanguage={{               // [!code ++]
-        mermaid: {                          // [!code ++]
-          SyntaxHighlighter: MermaidDiagram // [!code ++]
-        },                                  // [!code ++]
-      }}                                    // [!code ++]
-    />
-  );
-};
-
-export const MarkdownText = memo(MarkdownTextImpl);
-```
-
-  </Step>
-</Steps>
-
-## Configuration
-
-Configure rendering options in `mermaid-diagram.tsx`:
-
-```tsx title="/components/assistant-ui/mermaid-diagram.tsx"
-renderMermaidSVG(code, {
-  bg: "var(--background)",
-  fg: "var(--foreground)",
-  muted: "var(--muted-foreground)",
-  border: "var(--border)",
-  accent: "var(--foreground)",
-  transparent: true,
-});
-```
-
-The palette follows your theme's background, foreground, and shadcn color tokens, so diagrams match light and dark mode automatically.
-
-## Streaming Performance
-
-The `MermaidDiagram` component is optimized for streaming scenarios:
-
-- **Skeleton while streaming**: Shows a placeholder skeleton until the response finishes streaming, then renders the diagram synchronously
-- **Raw source fallback**: Invalid or unsupported diagrams fall back to displaying the raw source
-
-
-## Supported Diagram Types
-
-The component renders these diagram types:
-
-- Flowcharts and decision trees
-- Sequence diagrams
-- Class diagrams
-- State diagrams
-- Entity relationship diagrams
-- XY charts (bar, line, combined)
-
-Other mermaid diagram types fall back to displaying the raw source. See the [Mermaid documentation](https://mermaid.js.org/) for syntax reference.
-
-## Related Components
-
-- [Markdown](/docs/ui/markdown) - Rich text rendering where mermaid is integrated
-- [Syntax Highlighting](/docs/ui/syntax-highlighting) - Code highlighting for other languages

package/.docs/raw/docs/ui/message-timing.mdx

@@ -1,93 +0,0 @@
----
-title: Message Timing
-description: Display streaming performance stats — TTFT, total time, tok/s, and chunk count — as a badge with hover popover.
-platforms: ["react"]
----
-
-import { MessageTimingSample } from "@/components/docs/samples/message-timing";
-
-<MessageTimingSample />
-
-<Callout type="warn">
-  This component is experimental. The API and displayed metrics may change in future versions. When used with the Vercel AI SDK, token counts and tok/s are **estimated** client-side and may be inaccurate — see [Accuracy](#accuracy) below.
-</Callout>
-
-## Getting Started
-
-<Steps>
-  <Step>
-
-### Add `message-timing`
-
-<InstallCommand shadcn={["message-timing"]} />
-
-This adds a `/components/assistant-ui/message-timing.tsx` file to your project.
-
-  </Step>
-  <Step>
-
-### Use in your application
-
-Place `MessageTiming` inside `ActionBarPrimitive.Root` in your `thread.tsx`. It will inherit the action bar's auto-hide behaviour and only renders after the stream completes.
-
-```tsx title="/components/assistant-ui/thread.tsx" {2,12}
-import { ActionBarPrimitive } from "@assistant-ui/react";
-import { MessageTiming } from "@/components/assistant-ui/message-timing";
-
-const AssistantActionBar: FC = () => {
-  return (
-    <ActionBarPrimitive.Root
-      hideWhenRunning
-      autohide="not-last"
-    >
-      <ActionBarPrimitive.Copy />
-      <ActionBarPrimitive.Reload />
-      <MessageTiming />
-    </ActionBarPrimitive.Root>
-  );
-};
-```
-
-  </Step>
-</Steps>
-
-## What It Shows
-
-The badge displays `totalStreamTime` inline and reveals a popover on hover with the full breakdown:
-
-| Metric | Description |
-|--------|-------------|
-| **First token** | Time from request start to first text chunk (TTFT) |
-| **Total** | Total wall-clock time from start to stream end |
-| **Speed** | Output tokens per second (hidden for very short messages) |
-| **Chunks** | Number of stream chunks received |
-
-## Accuracy
-
-Timing accuracy depends on how your backend is connected.
-
-### Data Stream (accurate)
-
-When using the [Data Stream](/docs/runtimes/custom/data-stream) protocol on the backend (via `assistant-stream`), token counts come directly from the model's usage data sent in `step-finish` chunks. The `tokensPerSecond` metric is exact whenever your backend reports `outputTokens`.
-
-### Vercel AI SDK (estimated)
-
-When using the AI SDK integration (`useChatRuntime`), token counts are **estimated** client-side using a 4 characters per token approximation. This can overcount significantly for short messages.
-
-## API Reference
-
-### `MessageTiming` component
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | — | Additional class names on the root element |
-| `side` | `"top" \| "right" \| "bottom" \| "left"` | `"right"` | Side of the tooltip relative to the badge |
-
-Renders `null` until `totalStreamTime` is available (i.e., while streaming or for user messages).
-
-For the underlying `useMessageTiming()` hook, field definitions, and runtime-specific setup (LocalRuntime, ExternalStore, etc.), see the [Message Timing guide](/docs/guides/message-timing).
-
-## Related
-
-- [Message Timing guide](/docs/guides/message-timing) — `useMessageTiming()` hook, runtime support table, and custom timing UI
-- [Thread](/docs/ui/thread) — The action bar context that `MessageTiming` is typically placed inside