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

package/.docs/raw/docs/{(docs)/guides → guides}/mentions.mdx

@@ -1,6 +1,7 @@
 ---
 title: Mentions
 description: Let users @-mention tools or custom items in the composer to guide the LLM.
+platforms: ["react"]
 ---
 
 Mentions let users type `@` in the composer to open a popover picker, select an item (e.g. a tool), and insert a directive into the message text. The LLM can then use the directive as a hint.
@@ -82,6 +83,63 @@ const myAdapter: Unstable_TriggerAdapter = {
 };
 ```
 
+### Async Mention Search
+
+The adapter interface is synchronous, but the data it reads can come from any async source. Load results into React state (or a query cache) and read the current snapshot inside the adapter methods. The adapter re-creates on each render, so the popover always sees the latest results.
+
+**With React state and `useEffect`:**
+
+```tsx
+import { useState, useEffect, useMemo } from "react";
+import type { Unstable_TriggerAdapter } from "@assistant-ui/core";
+
+function useUserMentionAdapter(query: string) {
+  const [users, setUsers] = useState<{ id: string; name: string }[]>([]);
+
+  useEffect(() => {
+    if (!query) return;
+    let cancelled = false;
+    fetchUsers(query).then((results) => {
+      if (!cancelled) setUsers(results);
+    });
+    return () => { cancelled = true; };
+  }, [query]);
+
+  const adapter: Unstable_TriggerAdapter = useMemo(() => ({
+    categories: () => [],
+    categoryItems: () => [],
+    search: () =>
+      users.map((u) => ({ id: u.id, type: "user", label: u.name })),
+  }), [users]);
+
+  return adapter;
+}
+```
+
+`query` here is the text the user typed after `@`. You can read it from `unstable_useTriggerPopoverScopeContext` if you need it inside the component tree, or pass it as state from a controlled input.
+
+**With React Query:**
+
+```tsx
+import { useQuery } from "@tanstack/react-query";
+import type { Unstable_TriggerAdapter } from "@assistant-ui/core";
+
+function useMentionAdapter(query: string): Unstable_TriggerAdapter {
+  const { data = [] } = useQuery({
+    queryKey: ["mention-search", query],
+    queryFn: () => fetchUsers(query),
+    enabled: query.length > 0,
+  });
+
+  return useMemo(() => ({
+    categories: () => [],
+    categoryItems: () => [],
+    search: () =>
+      data.map((u) => ({ id: u.id, type: "user", label: u.name })),
+  }), [data]);
+}
+```
+
 Pass the adapter to `TriggerPopover` and declare a `Directive` sub-primitive to bind the insertion behavior:
 
 ```tsx
@@ -333,27 +391,7 @@ import { LexicalComposerInput } from "@assistant-ui/react-lexical";
 
 ## Rendering Mentions in Messages
 
-Use `DirectiveText` as the `Text` component for user messages so directives render as inline chips instead of raw syntax:
-
-```tsx
-import { DirectiveText } from "@/components/assistant-ui/directive-text";
-
-<MessagePrimitive.Parts
-  components={{
-    Text: DirectiveText,
-  }}
-/>
-```
-
-For assistant messages, keep using your markdown renderer (e.g. `MarkdownText`) — the LLM typically does not emit directive syntax.
-
-For a custom formatter, use `createDirectiveText`:
-
-```tsx
-import { createDirectiveText } from "@/components/assistant-ui/directive-text";
-
-const MyDirectiveText = createDirectiveText(myFormatter);
-```
+Use `DirectiveText` as the `Text` component for user messages so directives render as inline chips instead of raw syntax. See the [Directive Text](/docs/ui/directive-text) guide for setup and customization.
 
 ## Processing Mentions on the Backend
 
@@ -467,74 +505,11 @@ Use the trigger popover primitives to build a fully custom popover:
 
 ### Primitives Reference
 
-| Primitive | Description |
-| --- | --- |
-| `Unstable_TriggerPopoverRoot` | Root provider — groups one or more triggers, manages plugin registry |
-| `Unstable_TriggerPopover` | Declares a trigger (id, char, adapter) and renders the popover container |
-| `Unstable_TriggerPopover.Directive` | Behavior sub-primitive — inserts a formatted directive into the composer on selection |
-| `Unstable_TriggerPopover.Action` | Behavior sub-primitive — runs a callback on selection; inserts a chip by default |
-| `Unstable_TriggerPopoverCategories` | Render-function for the top-level category list |
-| `Unstable_TriggerPopoverCategoryItem` | Button that drills into a category (`role="option"`, auto `data-highlighted`) |
-| `Unstable_TriggerPopoverItems` | Render-function for items within the active category or search results |
-| `Unstable_TriggerPopoverItem` | Button that selects an item (`role="option"`, auto `data-highlighted`) |
-| `Unstable_TriggerPopoverBack` | Button that navigates back from items to categories |
-
-See the [Composer API reference](/docs/api-reference/primitives/composer) for full prop details.
+See the [Composer Primitives](/docs/primitives/composer) reference for the full list of trigger popover primitives and their props.
 
 ## Combining with Slash Commands
 
-Mentions and [slash commands](/docs/guides/slash-commands) coexist on the same composer — they're both just triggers on the shared `TriggerPopoverRoot`:
-
-```tsx
-<ComposerPrimitive.Unstable_TriggerPopoverRoot>
-  <ComposerPrimitive.Root>
-    <ComposerPrimitive.Input placeholder="Type @ to mention, / for commands..." />
-    <ComposerPrimitive.Send />
-
-    {/* Mention popover (shows on @) */}
-    <ComposerPrimitive.Unstable_TriggerPopover
-      char="@"
-      adapter={mention.adapter}
-    >
-      <ComposerPrimitive.Unstable_TriggerPopover.Directive {...mention.directive} />
-      <ComposerPrimitive.Unstable_TriggerPopoverCategories>
-        {(categories) => categories.map((cat) => (
-          <ComposerPrimitive.Unstable_TriggerPopoverCategoryItem key={cat.id} categoryId={cat.id}>
-            {cat.label}
-          </ComposerPrimitive.Unstable_TriggerPopoverCategoryItem>
-        ))}
-      </ComposerPrimitive.Unstable_TriggerPopoverCategories>
-      <ComposerPrimitive.Unstable_TriggerPopoverItems>
-        {(items) => items.map((item) => (
-          <ComposerPrimitive.Unstable_TriggerPopoverItem key={item.id} item={item}>
-            {item.label}
-          </ComposerPrimitive.Unstable_TriggerPopoverItem>
-        ))}
-      </ComposerPrimitive.Unstable_TriggerPopoverItems>
-    </ComposerPrimitive.Unstable_TriggerPopover>
-
-    {/* Slash command popover (shows on /) */}
-    <ComposerPrimitive.Unstable_TriggerPopover
-      char="/"
-      adapter={slashAdapter}
-    >
-      <ComposerPrimitive.Unstable_TriggerPopover.Action
-        formatter={unstable_defaultDirectiveFormatter}
-        onExecute={(item) => commandHandlers[item.id]?.()}
-      />
-      <ComposerPrimitive.Unstable_TriggerPopoverItems>
-        {(items) => items.map((item, index) => (
-          <ComposerPrimitive.Unstable_TriggerPopoverItem key={item.id} item={item} index={index}>
-            {item.label}
-          </ComposerPrimitive.Unstable_TriggerPopoverItem>
-        ))}
-      </ComposerPrimitive.Unstable_TriggerPopoverItems>
-    </ComposerPrimitive.Unstable_TriggerPopover>
-  </ComposerPrimitive.Root>
-</ComposerPrimitive.Unstable_TriggerPopoverRoot>
-```
-
-Each `TriggerPopover` declares its own scope — its popover UI reads state only from that declaration, so `@` and `/` never collide.
+Mentions and slash commands coexist on the same composer. See [Combining Slash Commands and Mentions](/docs/guides/slash-commands#combining-with-mentions) for the full pattern.
 
 ## Related
 

package/.docs/raw/docs/{(docs)/guides → guides}/message-timing.mdx

@@ -1,10 +1,15 @@
 ---
 title: Message Timing
 description: Display stream timing metadata like duration, tokens per second, and time to first token.
+platforms: ["react"]
 ---
 
 Display stream performance metrics — duration, tokens per second, TTFT — on assistant messages.
 
+<Callout type="warn">
+  This feature is experimental. The `useMessageTiming()` API and the set of tracked fields may change in future versions.
+</Callout>
+
 <Callout type="info">
   The [`MessageTiming`](/docs/ui/message-timing) registry component provides a ready-made badge + popover UI. This guide covers the underlying `useMessageTiming()` hook for custom implementations and runtime-specific setup.
 </Callout>
@@ -67,14 +72,15 @@ const AssistantMessage: FC = () => {
 
 | Runtime | Supported | Notes |
 |---------|:-:|-------|
-| DataStream | Yes | Automatic via `AssistantMessageAccumulator` |
+| [Data Stream](/docs/runtimes/custom/data-stream) | Yes | Automatic via `AssistantMessageAccumulator` |
 | AI SDK (`useChatRuntime`) | Yes | Automatic via client-side tracking |
 | Local (`useLocalRuntime`) | Yes | Pass timing in `ChatModelRunResult.metadata` |
 | ExternalStore | Yes | Pass timing in `ThreadMessageLike.metadata` |
 | LangGraph | No | Not yet implemented |
 | AG-UI | No | Not yet implemented |
+| OpenCode | No | Not yet implemented |
 
-### DataStream
+### Data Stream
 
 Timing is tracked automatically inside `AssistantMessageAccumulator`. No setup required.
 

package/.docs/raw/docs/{(docs)/guides → guides}/multi-agent.mdx

@@ -1,6 +1,7 @@
 ---
 title: Multi-Agent
 description: Render sub-agent conversations inside tool call UIs.
+platforms: ["react"]
 ---
 
 In a multi-agent (orchestrator) architecture, a main agent invokes sub-agents via tool calls. Each sub-agent may produce its own conversation (user/assistant messages, tool calls, etc.). assistant-ui supports rendering these nested conversations using the `MessagePartPrimitive.Messages` primitive.
@@ -51,7 +52,10 @@ const ResearchAgentToolUI = makeAssistantToolUI({
 
 ### Provide the Messages from the Backend
 
-Your backend must populate the `messages` field on the tool call result. For example, with the AI SDK:
+Your backend must populate the `messages` field on the tool call result.
+
+<Tabs items={["AI SDK", "LangGraph"]}>
+<Tab value="AI SDK">
 
 ```ts title="api/chat/route.ts"
 tools: {
@@ -62,7 +66,6 @@ tools: {
       const subAgentMessages = await runResearcherAgent(query);
       return {
         answer: subAgentMessages.at(-1)?.content,
-        // The messages field is picked up by assistant-ui
         messages: subAgentMessages,
       };
     },
@@ -70,9 +73,53 @@ tools: {
 },
 ```
 
+</Tab>
+<Tab value="LangGraph">
+
+With `@assistant-ui/react-langgraph`, use `unstable_createLangGraphStream` and set `unstable_allowCancellation: true` to wire up the stop button. When your graph runs a subgraph, the subgraph's messages appear on `ToolCallMessagePart.messages` automatically once you handle the `onSubgraphValues` / `onSubgraphUpdates` events.
+
+```ts title="runtime.ts"
+import {
+  useLangGraphRuntime,
+  unstable_createLangGraphStream,
+} from "@assistant-ui/react-langgraph";
+
+const runtime = useLangGraphRuntime({
+  unstable_allowCancellation: true,
+  stream: unstable_createLangGraphStream({
+    client,
+    assistantId,
+    // "custom" is required for generative UI; "updates" for subgraph events
+    streamMode: ["messages", "updates", "custom"],
+    // abort the run server-side when the user clicks stop
+    onDisconnect: "cancel",
+  }),
+  eventHandlers: {
+    onSubgraphValues: (namespace, values) => {
+      // namespace = e.g. "tools:call_abc" — the sub-agent's node path
+      // values contains the subgraph state, including its messages array
+    },
+    onSubgraphUpdates: (namespace, updates) => {
+      // incremental state updates from the subgraph
+    },
+    onSubgraphError: (namespace, error) => {
+      // error scoped to the subgraph; does not mark the parent message failed
+    },
+    onMessageChunk: (chunk, metadata) => {
+      // metadata.namespace is set when the chunk originates from a subgraph
+      // use it to attribute the chunk to the correct sub-agent
+    },
+  },
+});
+```
+
+See [LangGraph Streaming](/docs/runtimes/langgraph/streaming) for the full event handler reference.
+
+</Tab>
+</Tabs>
+
 <Callout type="info">
-  The exact mechanism for populating `messages` depends on your backend
-  framework. The key requirement is that the tool result's corresponding
+  The key requirement is that the tool result's corresponding
   `ToolCallMessagePart` includes a `messages` array of `ThreadMessage` objects.
 </Callout>
 
@@ -95,6 +142,17 @@ function App() {
   </Step>
 </Steps>
 
+## Subgraph Namespace Events
+
+When using LangGraph, subgraph events carry a `namespace` that identifies which sub-agent emitted them. This lets you attribute messages and state to specific sub-agents without polling or manual coordination.
+
+- `onSubgraphValues(namespace, values)` fires when a subgraph emits a full state snapshot. Use the `values.messages` array to populate `ToolCallMessagePart.messages` for that sub-agent.
+- `onSubgraphUpdates(namespace, updates)` fires for incremental state patches from a subgraph.
+- `onSubgraphError(namespace, error)` fires when a subgraph fails. The parent message is not marked incomplete; only top-level errors trigger that.
+- `onMessageChunk(chunk, metadata)` includes `metadata.namespace` when the chunk originates from a subgraph. Use this to display per-sub-agent streaming indicators.
+
+The `namespace` value mirrors the pipe-separated suffix on the LangGraph event name (e.g. `values|tools:call_abc` gives `"tools:call_abc"`).
+
 ## Recursive Sub-Agents
 
 If a sub-agent's tool calls also have nested messages, the same pattern applies recursively:
@@ -172,3 +230,5 @@ function SubConversation({
 - [Generative UI](/docs/guides/tool-ui) — Creating tool call UIs
 - [MessagePartPrimitive](/docs/api-reference/primitives/message-part) — API reference for message part primitives
 - [Sub-Agent Model Tracking](/docs/cloud/ai-sdk#sub-agent-model-tracking) — Track delegated model usage and costs in the Cloud dashboard
+- [LangGraph Streaming](/docs/runtimes/langgraph/streaming) — Event handlers, subgraph events, and message metadata
+- [LangGraph Generative UI](/docs/runtimes/langgraph/generative-ui) — Structured UI components emitted by your graph

package/.docs/raw/docs/{(docs)/guides → guides}/quoting.mdx

@@ -1,6 +1,7 @@
 ---
 title: Quote Selected Text
 description: Let users select and quote text from messages. Full guide including backend handling and programmatic API.
+platforms: ["react"]
 ---
 
 import { QuoteComposerSample } from "@/components/docs/samples/quote-composer";
@@ -9,17 +10,11 @@ import { QuoteComposerSample } from "@/components/docs/samples/quote-composer";
 
 ## Get Started
 
-The **[Quote](/docs/ui/quote)** registry component gives you everything you need out of the box, including a floating selection toolbar, composer quote preview, and inline quote display.
+Install and wire up the `quote` registry component by following the [Quote component page](/docs/ui/quote). It covers the install command, component placement, and the `injectQuoteContext` helper for forwarding quote data to the LLM.
 
-<InstallCommand shadcn={["quote"]} />
-
-It ships three composable pieces:
-
-- **QuoteBlock** renders quoted text inline in user messages
-- **SelectionToolbar** is a floating toolbar that appears on text selection
-- **ComposerQuotePreview** shows the pending quote inside the composer
-
-See the [Quote component page](/docs/ui/quote) for full setup steps and API reference.
+<Callout type="warn">
+  **Limitations:** only one quote can be active at a time. `setQuote` replaces the previous quote instead of appending. The floating toolbar only appears when the selection is entirely within a single message part; cross-message and cross-part selections are ignored.
+</Callout>
 
 ---
 
@@ -132,7 +127,7 @@ function CustomQuoteDisplay() {
 
 ## Programmatic API
 
-Set or clear quotes via the composer runtime:
+Set or clear quotes via `useAui` from `@assistant-ui/react`. Call `aui.thread().composer().setQuote()` when your component is rendered outside of a specific thread context, or `aui.composer().setQuote()` when it is rendered inside a thread:
 
 ```tsx
 import { useAui } from "@assistant-ui/react";
@@ -162,12 +157,10 @@ function MyComponent() {
 
 ## Design Notes
 
-- **Single quote:** `setQuote` replaces the current quote instead of appending. Only one quote can be active at a time.
-- **Snapshot text:** The selected text is captured when the quote is created and is not linked to the source message afterward.
-- **Cross-message selection:** The toolbar only appears when the selection stays within a single message.
-- **Streaming messages:** The toolbar still works while a message is streaming because it relies on the captured selection rather than message status.
-- **`isEmpty` unchanged:** A quote by itself does not make the composer non-empty. The user still needs to type a reply.
-- **Scroll hides toolbar:** The toolbar hides on scroll because its position would otherwise become stale.
+- **snapshot text:** the selected text is captured when the quote is created and is not linked to the source message afterward.
+- **streaming messages:** the toolbar still works while a message is streaming because it relies on the captured selection rather than message status.
+- **`isEmpty` unchanged:** a quote by itself does not make the composer non-empty; the user still needs to type a reply.
+- **scroll hides toolbar:** the toolbar hides on scroll because its position would otherwise become stale.
 
 ## Related
 

package/.docs/raw/docs/{(docs)/guides → guides}/slash-commands.mdx

@@ -1,6 +1,7 @@
 ---
 title: Slash Commands
 description: Let users type / in the composer to trigger predefined actions from a popover picker.
+platforms: ["react"]
 ---
 
 Slash commands let users type `/` in the composer to open a popover, browse available commands, and execute one. Unlike [mentions](/docs/guides/mentions) (which only insert a directive into the message), slash commands additionally fire an **action callback** at the moment of selection.
@@ -89,6 +90,17 @@ function MyComposer() {
 
 The label defaults to `/${id}`; override via `label` on the command. Icons are strings that your `iconMap` on the picker UI resolves to components (see [ComposerTriggerPopover](/docs/ui/composer-trigger-popover)).
 
+### `unstable_useSlashCommandAdapter` options
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `commands` | `Unstable_SlashCommand[]` | — | Command definitions — each has `id`, optional `label`, `description`, `icon`, and an `execute` callback (required) |
+| `removeOnExecute` | `boolean` | `false` | When `true`, strips the trigger text from the composer after executing instead of leaving a directive chip |
+| `iconMap` | `Record<string, IconComponent>` | — | Maps `metadata.icon` / category `id` strings to React icon components; forwarded to `ComposerTriggerPopover` |
+| `fallbackIcon` | `IconComponent` | — | Fallback when no `iconMap` entry matches; forwarded to `ComposerTriggerPopover` |
+
+The hook returns `{ adapter, action, iconMap?, fallbackIcon? }` — spread directly into `<ComposerTriggerPopover char="/" {...slash} />` for one-line wiring.
+
 ### 2. Controlling the Chip
 
 By default, a selected `/summarize` is converted into a directive chip (`:command[/summarize]{name=summarize}`) in the composer text and the command's `execute` fires. This keeps an audit trail of which commands were invoked.
@@ -236,57 +248,111 @@ Slash commands and mentions live under the same `TriggerPopoverRoot`. Declare on
 
 Each `TriggerPopover` is its own scope — the `@` popover and the `/` popover read state from their own declaration and never collide. Keyboard events route to whichever popover is currently active.
 
-## Keyboard Navigation
+## Commands with Arguments
+
+Some commands accept inline arguments typed after the command word — for example `/translate en` or `/ask what is TypeScript`. Because the adapter's `search` method receives the full text after `/`, you can split on the first space to separate the command from its arguments:
 
-Same keyboard bindings as mentions:
+```tsx
+const SLASH_COMMANDS: readonly Unstable_SlashCommand[] = [
+  {
+    id: "translate",
+    description: "Translate to a language, e.g. /translate en",
+    execute: () => {/* arguments extracted separately, see below */},
+  },
+  {
+    id: "ask",
+    description: "Ask about a topic, e.g. /ask what is TypeScript",
+    execute: () => {/* arguments extracted separately, see below */},
+  },
+];
 
-| Key | Action |
-| --- | --- |
-| <Kbd>ArrowDown</Kbd> | Highlight next item |
-| <Kbd>ArrowUp</Kbd> | Highlight previous item |
-| <Kbd>Enter</Kbd> | Execute highlighted command / drill into category |
-| <Kbd>Escape</Kbd> | Close popover |
-| <Kbd>Backspace</Kbd> | Go back to categories (when query is empty) |
+function MyComposer() {
+  const composerRef = useRef<HTMLTextAreaElement>(null);
+  const slash = unstable_useSlashCommandAdapter({
+    commands: SLASH_COMMANDS.map((cmd) => ({
+      ...cmd,
+      execute: () => {
+        // Read the full composer text to extract arguments
+        const raw = composerRef.current?.value ?? "";
+        // Match "/<id> <args>" at start of input
+        const match = raw.match(new RegExp(`^\\/${cmd.id}\\s+(.*)`));
+        const args = match?.[1]?.trim() ?? "";
+        handleCommand(cmd.id, args);
+      },
+    })),
+    removeOnExecute: true,
+  });
 
-## Trigger Popover Architecture
+  return (
+    <ComposerPrimitive.Unstable_TriggerPopoverRoot>
+      <ComposerPrimitive.Root>
+        <ComposerPrimitive.Input ref={composerRef} placeholder="Type / for commands..." />
+        <ComposerPrimitive.Unstable_TriggerPopover char="/" adapter={slash.adapter}>
+          <ComposerPrimitive.Unstable_TriggerPopover.Action {...slash.action} />
+          <ComposerPrimitive.Unstable_TriggerPopoverItems>
+            {(items) => items.map((item, i) => (
+              <ComposerPrimitive.Unstable_TriggerPopoverItem key={item.id} item={item} index={i}>
+                <strong>{item.label}</strong>
+                {item.description && <span>{item.description}</span>}
+              </ComposerPrimitive.Unstable_TriggerPopoverItem>
+            ))}
+          </ComposerPrimitive.Unstable_TriggerPopoverItems>
+        </ComposerPrimitive.Unstable_TriggerPopover>
+        <ComposerPrimitive.Send>Send</ComposerPrimitive.Send>
+      </ComposerPrimitive.Root>
+    </ComposerPrimitive.Unstable_TriggerPopoverRoot>
+  );
+}
+```
+
+`removeOnExecute: true` strips the `/translate en` text from the composer so the argument is consumed by the handler rather than sent to the LLM.
+
+## Async Command Loading
 
-Both mentions and slash commands are built on a generic **trigger popover** system:
+The adapter interface is synchronous, but the command list can come from any async source. Load commands into state (or a query cache) and pass the current snapshot to the hook. Because `unstable_useSlashCommandAdapter` re-runs on every render, the adapter always reflects the latest list.
 
-- `ComposerPrimitive.Unstable_TriggerPopoverRoot` — root provider that groups triggers and owns the input plugin registry
-- `ComposerPrimitive.Unstable_TriggerPopover` — declares one trigger (id, char, adapter) and renders its popover container
-- Behavior sub-primitives — exactly one per `TriggerPopover`:
-  - `Unstable_TriggerPopover.Directive` — writes a formatted directive on selection ("mention" path)
-  - `Unstable_TriggerPopover.Action` — fires a callback on selection ("slash" path); inserts a chip by default, strip with `removeOnExecute`
-- Shared sub-primitives (`TriggerPopoverCategories`, `TriggerPopoverItems`, `TriggerPopoverBack`) live inside a `TriggerPopover`
+**With React state:**
 
-You can declare any number of triggers under one root and mix behavior types.
+```tsx
+function MyComposer() {
+  const [commands, setCommands] = useState<Unstable_SlashCommand[]>([]);
 
-### ComposerInput Plugin Protocol
+  useEffect(() => {
+    fetchAvailableCommands().then(setCommands);
+  }, []);
 
-Under the hood, each `TriggerPopover` registers a **ComposerInputPlugin** with the composer input. This is a generic protocol that decouples the input from any specific trigger:
+  const slash = unstable_useSlashCommandAdapter({ commands });
 
-```ts
-type ComposerInputPlugin = {
-  handleKeyDown(e: KeyboardEvent): boolean;
-  setCursorPosition(pos: number): void;
-};
+  return (/* ... */);
+}
+```
+
+**With React Query:**
+
+```tsx
+function MyComposer() {
+  const { data: commands = [] } = useQuery({
+    queryKey: ["slash-commands"],
+    queryFn: fetchAvailableCommands,
+  });
+
+  const slash = unstable_useSlashCommandAdapter({ commands });
+
+  return (/* ... */);
+}
 ```
 
-The input iterates over registered plugins for keyboard events and cursor changes. This is what enables multiple triggers to coexist without conflict.
+## Keyboard Navigation
+
+See [ComposerTriggerPopover keyboard navigation](/docs/ui/composer-trigger-popover#keyboard-navigation) for the full key bindings table.
+
+## Trigger Popover Architecture
+
+Both mentions and slash commands are built on a generic trigger popover system where each `Unstable_TriggerPopover` declares one trigger character, an adapter, and exactly one behavior sub-primitive (`Directive` or `Action`). Multiple triggers coexist under a single `Unstable_TriggerPopoverRoot`. See the [Composer Primitives](/docs/primitives/composer) reference for the complete API.
 
 ## Primitives Reference
 
-| Primitive | Description |
-| --- | --- |
-| `Unstable_TriggerPopoverRoot` | Root — groups triggers, provides input plugin registry |
-| `Unstable_TriggerPopover` | Declares a trigger and renders its popover container |
-| `Unstable_TriggerPopover.Directive` | Behavior sub-primitive — inserts a formatted directive on selection |
-| `Unstable_TriggerPopover.Action` | Behavior sub-primitive — runs `onExecute` on selection; chip-by-default |
-| `Unstable_TriggerPopoverCategories` | Render-function for the top-level category list |
-| `Unstable_TriggerPopoverCategoryItem` | Button that drills into a category (`role="option"`, auto `data-highlighted`) |
-| `Unstable_TriggerPopoverItems` | Render-function for items within the active category or search results |
-| `Unstable_TriggerPopoverItem` | Button that selects an item (`role="option"`, auto `data-highlighted`) |
-| `Unstable_TriggerPopoverBack` | Button that navigates back from items to categories |
+See the [Composer Primitives](/docs/primitives/composer) reference for the full list of trigger popover primitives and their props.
 
 ## Related