@assistant-ui/mcp-docs-server 0.1.29 → 0.1.31

package/.docs/raw/docs/ui/directive-text.mdx

@@ -0,0 +1,114 @@
+---
+title: Directive Text
+description: Render mention directives as inline chips in user messages.
+platforms: ["react"]
+---
+
+import { DirectiveTextSample } from "@/components/docs/samples/directive-text";
+
+<DirectiveTextSample />
+
+`DirectiveText` parses the directive syntax written by [`ComposerTriggerPopover`](/docs/ui/composer-trigger-popover) (default: `:type[label]{name=id}`) and renders each segment as an inline chip. Use it as the `Text` component in user messages so the raw directive syntax never shows up.
+
+## Getting Started
+
+<Steps>
+  <Step>
+
+### Add `directive-text`
+
+<InstallCommand shadcn={["directive-text"]} />
+
+This adds `/components/assistant-ui/directive-text.tsx` with `DirectiveText` and the `createDirectiveText(formatter, options?)` factory.
+
+  </Step>
+  <Step>
+
+### Use in user messages
+
+Pass `DirectiveText` as the `Text` component in `MessagePrimitive.Parts`:
+
+```tsx title="components/assistant-ui/thread.tsx"
+import { DirectiveText } from "@/components/assistant-ui/directive-text";
+
+const UserMessage = () => (
+  <MessagePrimitive.Root>
+    <MessagePrimitive.Parts components={{ Text: DirectiveText }} />
+  </MessagePrimitive.Root>
+);
+```
+
+Keep your markdown renderer (e.g. `MarkdownText`) for assistant messages — assistants rarely emit directive syntax.
+
+  </Step>
+</Steps>
+
+## Icons per Directive Type
+
+`DirectiveText` ships icon-free by default — every parsed segment renders as a plain label chip regardless of its `type`. To add icons, use the `createDirectiveText` factory and pass an `iconMap` that routes each `type` string to an icon component, plus an optional `fallbackIcon` for unmapped types:
+
+```tsx
+import { createDirectiveText } from "@/components/assistant-ui/directive-text";
+import { unstable_defaultDirectiveFormatter } from "@assistant-ui/core";
+import { FileTextIcon, SparklesIcon, UserIcon, WrenchIcon } from "lucide-react";
+
+const DirectiveTextWithIcons = createDirectiveText(
+  unstable_defaultDirectiveFormatter,
+  {
+    iconMap: {
+      tool: WrenchIcon,
+      user: UserIcon,
+      file: FileTextIcon,
+    },
+    fallbackIcon: SparklesIcon,
+  },
+);
+
+<MessagePrimitive.Parts components={{ Text: DirectiveTextWithIcons }} />;
+```
+
+A matching `iconMap` / `fallbackIcon` option is accepted by [`ComposerTriggerPopover`](/docs/ui/composer-trigger-popover), where it routes `item.metadata.icon` strings instead of `type` — keeping icon configuration consistent across the composer and the rendered message.
+
+## Custom Formatter
+
+The default format is `:type[label]{name=id}`. For a different format, build a custom `Unstable_DirectiveFormatter` and wrap it with `createDirectiveText`:
+
+```tsx
+import type { Unstable_DirectiveFormatter } from "@assistant-ui/core";
+import { createDirectiveText } from "@/components/assistant-ui/directive-text";
+
+const slashFormatter: Unstable_DirectiveFormatter = {
+  serialize: (item) => `/${item.id}`,
+  parse: (text) => {
+    /* return alternating text / mention segments */
+  },
+};
+
+const SlashDirectiveText = createDirectiveText(slashFormatter);
+```
+
+Pass the **same formatter** to the composer trigger's `directive={{ formatter }}` (or `action={{ formatter }}`) so insertion and rendering stay consistent.
+
+## Customizing the Chip
+
+Because `directive-text.tsx` is copied into your project, you can also edit it directly — swap the chip styling, read `data-directive-id` to link to a detail page, or replace the chip wrapper entirely.
+
+## API Reference
+
+### `DirectiveText`
+
+A `TextMessagePartComponent` that parses `:type[label]{name=id}` directives and renders them as inline chips. Uses the default formatter from `@assistant-ui/core` and renders chips without icons. For per-type icons, build a component with `createDirectiveText(formatter, { iconMap })`.
+
+### `createDirectiveText(formatter, options?)`
+
+Factory that returns a `TextMessagePartComponent` bound to a custom `Unstable_DirectiveFormatter`.
+
+| Option | Type | Description |
+| --- | --- | --- |
+| `iconMap` | `Record<string, ComponentType<{ className?: string }>>` | Maps a directive segment's `type` to an icon rendered inside the chip |
+| `fallbackIcon` | `ComponentType<{ className?: string }>` | Icon used when no `iconMap` entry matches. When neither option resolves, the chip renders without an icon. |
+
+## Related
+
+- [Composer Trigger Popover](/docs/ui/composer-trigger-popover) — the picker that inserts directives
+- [Mentions guide](/docs/guides/mentions) — directive format, backend parsing

package/.docs/raw/docs/ui/file.mdx

@@ -1,6 +1,7 @@
 ---
 title: File
 description: Display file message parts with icon, name, size, and download button.
+platforms: ["react"]
 ---
 
 import { FileSample } from "@/components/docs/samples/file";

package/.docs/raw/docs/ui/image.mdx

@@ -1,6 +1,7 @@
 ---
 title: Image
 description: Display image message parts with preview, loading states, and fullscreen dialog.
+platforms: ["react"]
 ---
 
 import { ImageSample } from "@/components/docs/samples/image";

package/.docs/raw/docs/ui/markdown.mdx

@@ -1,6 +1,7 @@
 ---
 title: Markdown
 description: Display rich text with headings, lists, links, and code blocks.
+platforms: ["react"]
 ---
 
 import { MarkdownSample } from "@/components/docs/samples/markdown";
@@ -30,20 +31,7 @@ This adds a `/components/assistant-ui/markdown-text.tsx` file to your project, w
 
 Pass the `MarkdownText` component to the `MessagePrimitive.Parts` component
 
-```tsx twoslash title="/components/assistant-ui/thread.tsx" {1,7}
-// @filename: /components/assistant-ui/markdown-text.tsx
-import { FC } from "react";
-export const MarkdownText: FC = () => null;
-
-// @filename: ./thread.tsx
-import { FC } from "react";
-import { MessagePrimitive } from "@assistant-ui/react";
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-
-const AssistantActionBar: FC = () => null;
-const BranchPicker: FC<{ className?: string }> = () => null;
-
-// ---cut---
+```tsx title="/components/assistant-ui/thread.tsx" {1,7}
 import { MarkdownText } from "@/components/assistant-ui/markdown-text";
 
 const AssistantMessage: FC = () => {

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

@@ -1,6 +1,7 @@
 ---
 title: "Mermaid Diagrams"
 description: Render Mermaid diagrams in chat messages with streaming support.
+platforms: ["react"]
 ---
 
 import { MermaidSample } from "@/components/docs/samples/mermaid";

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

@@ -1,6 +1,7 @@
 ---
 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";
@@ -65,9 +66,9 @@ The badge displays `totalStreamTime` inline and reveals a popover on hover with
 
 Timing accuracy depends on how your backend is connected.
 
-### assistant-stream (accurate)
+### Data Stream (accurate)
 
-When using `assistant-stream` on the backend, 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`.
+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)
 

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

@@ -1,6 +1,7 @@
 ---
 title: ModelSelector
 description: Model picker with unified overlay positioning and runtime integration.
+platforms: ["react"]
 ---
 
 import { ModelSelectorSample } from "@/components/docs/samples/model-selector";