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

package/.docs/raw/docs/tools/openui.mdx

@@ -0,0 +1,175 @@
+---
+title: OpenUI
+description: Render streaming OpenUI Lang interfaces in an assistant-ui conversation with @openuidev/assistant-ui, the integration package published by OpenUI.
+platforms: ["react"]
+---
+
+[OpenUI](https://www.openui.com) is a generative UI system in which the model writes **OpenUI Lang**, a streaming markup language, and an OpenUI renderer turns it into interactive React components. [`@openuidev/assistant-ui`](https://www.npmjs.com/package/@openuidev/assistant-ui) connects that renderer to assistant-ui: it ships a ready-made toolkit, model instructions generated from the OpenUI component library, and Tool UI renderers that stream, handle interactions, and replay.
+
+<Callout type="info">
+  `@openuidev/assistant-ui` is a third-party package. OpenUI owns the package, its [documentation](https://www.openui.com/docs/api-reference/assistant-ui), and its releases; assistant-ui does not ship or version any OpenUI code. Use OpenUI's reference for the package API and OpenUI Lang itself; this page covers the assistant-ui side of the wiring.
+</Callout>
+
+The integration rides entirely on the [Tool UI](/docs/tools/tool-ui) lifecycle, so assistant-ui stays in charge of the conversation, streaming, and tool calls. The toolkit registers two standalone tools:
+
+- `present_openui` is a **frontend tool** for display-only interfaces (cards, tables, charts). It completes as soon as the streamed `ui` argument is available, and the turn ends there.
+- `prompt_openui` is a **human tool** for forms and choices. It completes only when the user submits an OpenUI `@ToAssistant(...)` action, and the submitted values continue the conversation.
+
+## How it relates to the `present` tool
+
+assistant-ui's first-party [Generative UI](/docs/tools/generative-ui) follows the same shape: one tool, a component vocabulary, and a model that composes an interface at runtime. The difference is the representation and who owns it. `present` takes a JSON tree validated against a schema generated from a vocabulary you ship and restyle; `present_openui` takes an OpenUI Lang program rendered by OpenUI's component kit, taught to the model through instructions. Pick `present` when you want the interface built from your own components on assistant-ui's append-only surface, and OpenUI when you are already invested in the OpenUI ecosystem or want its renderer and component library.
+
+## Quick start
+
+The complete setup below runs in [`examples/with-openui`](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-openui). To scaffold a standalone copy, run `npx assistant-ui create my-app --example with-openui`.
+
+<Steps>
+
+<Step>
+
+### Install the packages
+
+Alongside an existing `@assistant-ui/react` setup, add the integration and its OpenUI peer dependencies:
+
+<InstallCommand npm={["@openuidev/assistant-ui", "@openuidev/react-ui", "@openuidev/react-lang", "@openuidev/react-headless", "zustand@^4.5.5"]} />
+
+The package also expects `zod` and React 18 or 19, which an assistant-ui app already has. The current OpenUI peers support AI SDK 6 and 7 and require Zustand 4.
+
+</Step>
+
+<Step>
+
+### Load the OpenUI stylesheet
+
+Import the layered stylesheet once, for example in `app/globals.css`:
+
+```css
+@import "@openuidev/react-ui/layered/styles/index.css";
+```
+
+</Step>
+
+<Step>
+
+### Register the toolkit and instructions
+
+`openuiIntegration` bundles a toolkit and an instruction string created from the same OpenUI component library, so the model and the renderer share one vocabulary. Register the toolkit with [`Tools`](/docs/api-reference/tools) and mount `OpenUIInstructions` so the vocabulary reaches the model as assistant instructions:
+
+```tsx title="app/page.tsx"
+"use client";
+
+import {
+  AssistantRuntimeProvider,
+  AuiConfig,
+  Tools,
+} from "@assistant-ui/react";
+import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
+import { OpenUIInstructions, openuiIntegration } from "@openuidev/assistant-ui";
+import { shouldContinueAfterOpenUIPrompt } from "@openuidev/assistant-ui/ai-sdk";
+import { Thread } from "@/components/assistant-ui/thread";
+
+export default function Home() {
+  const runtime = useChatRuntime({
+    sendAutomaticallyWhen: shouldContinueAfterOpenUIPrompt,
+  });
+
+  const config = AuiConfig({
+    tools: Tools({ toolkit: openuiIntegration.toolkit }),
+  });
+
+  return (
+    <AssistantRuntimeProvider config={config} runtime={runtime}>
+      <OpenUIInstructions />
+      <Thread />
+    </AssistantRuntimeProvider>
+  );
+}
+```
+
+`sendAutomaticallyWhen` is the continuation gate. OpenUI's predicate continues the run only after `prompt_openui` has received a submitted result, so a display-only `present_openui` call ends the turn instead of triggering an empty follow-up request.
+
+<Callout type="info">
+  `sendAutomaticallyWhen` is a single slot. OpenUI's predicate is a strict refinement of `lastAssistantMessageIsCompleteWithToolCalls` (the predicate the other guides in this section use), so it replaces it cleanly when OpenUI's tools are the only ones that resume the run. If your app mixes in other tools whose flows must also resume, write one predicate that decides by tool name; a naive `||` with the generic predicate collapses to the generic predicate alone and re-enables the empty follow-up after display-only calls.
+</Callout>
+
+</Step>
+
+<Step>
+
+### Forward the tools in your API route
+
+The default `AssistantChatTransport` forwards the registered instructions and both frontend tool schemas to the backend, so the route stays generic:
+
+```ts title="app/api/chat/route.ts"
+import { openai } from "@ai-sdk/openai";
+import { frontendTools } from "@assistant-ui/react-ai-sdk";
+import {
+  type JSONSchema7,
+  streamText,
+  convertToModelMessages,
+  type UIMessage,
+  createUIMessageStreamResponse,
+  toUIMessageStream,
+} from "ai";
+
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const {
+    messages,
+    system,
+    tools,
+  }: {
+    messages: UIMessage[];
+    system?: string;
+    tools?: Record<string, { description?: string; parameters: JSONSchema7 }>;
+  } = await req.json();
+
+  const result = streamText({
+    model: openai("gpt-5.6-luna"),
+    messages: await convertToModelMessages(messages),
+    ...(system ? { system } : {}),
+    tools: frontendTools(tools ?? {}),
+  });
+
+  return createUIMessageStreamResponse({
+    stream: toUIMessageStream({ stream: result.stream }),
+  });
+}
+```
+
+</Step>
+
+</Steps>
+
+## Interaction and replay
+
+When the user submits a `prompt_openui` form or choice, the integration reports the action, message, parameters, and form state through the standard human-tool `addResult`, and `sendAutomaticallyWhen` resumes the run with that result. On replay of a persisted thread, the stored result hydrates the submitted form state back into the renderer, so completed forms render as submitted instead of resetting.
+
+<Callout type="tip">
+  The core integration is runtime-agnostic: the toolkit, renderers, and instructions work with any assistant-ui runtime that forwards tool schemas and results. Only the `shouldContinueAfterOpenUIPrompt` helper on the `/ai-sdk` subpath is AI SDK-specific.
+</Callout>
+
+## Customization
+
+`createOpenUIIntegration` keeps a custom component library, tool names, and renderer options aligned across the toolkit and the instructions:
+
+```tsx
+import { createOpenUIIntegration } from "@openuidev/assistant-ui";
+import { library } from "./library";
+
+const openui = createOpenUIIntegration({
+  library,
+  presentToolName: "show_panel",
+  promptToolName: "ask_panel",
+});
+```
+
+The result exposes `toolkit`, `instructions`, and the resolved `toolNames`. See [OpenUI's integration reference](https://www.openui.com/docs/api-reference/assistant-ui) for the full option surface, including custom descriptions, prompt options, renderer props, and error handling.
+
+## Related
+
+- [`examples/with-openui`](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-openui): the runnable setup from this page
+- [OpenUI assistant-ui integration reference](https://www.openui.com/docs/api-reference/assistant-ui): the canonical package documentation
+- [Generative UI](/docs/tools/generative-ui): the first-party `present` tool this integration sits alongside
+- [Tool UI](/docs/tools/tool-ui): the lifecycle both OpenUI tools build on

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

@@ -21,8 +21,7 @@ Tool UIs in assistant-ui allow you to create custom interfaces that appear when
 
 This guide demonstrates building tool UIs with the **Vercel AI SDK**.
 
-For composing UI from a JSON spec and component allowlist (display-only layouts),
-see the [Generative UI primitive guide](/docs/tools/generative-ui).
+To let the model compose UI from a vocabulary instead of binding one component per tool, see [Generative UI](/docs/tools/generative-ui).
 
 ## Creating Tool UIs
 

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

@@ -24,6 +24,10 @@ AuiConfig({ mcp: McpManagerResource({ connectors }) })
 
 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>
@@ -341,7 +345,7 @@ Three modes, declared per-connector or per-custom-record:
 }
 ```
 
-The OAuth provider implements the MCP SDK's `OAuthClientProvider`. The SDK handles discovery (RFC 8414), DCR (RFC 7591), 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.
+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
 

package/.docs/raw/docs/ui/attachment.mdx

@@ -7,6 +7,11 @@ 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";
+import { PreviewCode } from "@/components/docs/preview-code.server";
+import { AttachmentComposerSample } from "@/components/docs/samples/attachment/composer-attachments";
+import * as AttachmentComposerRadixSample from "@/components/docs/samples/attachment/composer-attachments.radix";
+import { AttachmentMessageContextSample } from "@/components/docs/samples/attachment/message-attachments";
+import * as AttachmentMessageRadixSample from "@/components/docs/samples/attachment/message-attachments.radix";
 
 <FlavorSwitcher />
 
@@ -35,6 +40,8 @@ This adds a `/components/assistant-ui/attachment.tsx` file to your project, whic
 
 ### Use in your application
 
+Add `ComposerAttachments` and `ComposerAddAttachment` to your composer:
+
 ```tsx title="/components/assistant-ui/thread.tsx" {1-4,9-10}
 import {
   ComposerAttachments,
@@ -59,6 +66,8 @@ const Composer: FC = () => {
 };
 ```
 
+Add `UserMessageAttachments` to your user message:
+
 ```tsx title="/components/assistant-ui/thread.tsx" {1,8}
 import { UserMessageAttachments } from "@/components/assistant-ui/attachment";
 
@@ -82,6 +91,24 @@ const UserMessage: FC = () => {
   </Step>
 </Steps>
 
+## Examples
+
+### Composer
+
+In the composer, each attachment tile shows a remove button that deletes the attachment from the composer. Use the plus button to add your own files.
+
+<PreviewCode file="components/docs/samples/attachment/composer-attachments" name="ComposerWithAttachments" base={<AttachmentComposerSample />}>
+  <AttachmentComposerRadixSample.AttachmentComposerSample />
+</PreviewCode>
+
+### User Message
+
+Message attachments are read-only. The same tile in a sent user message does not show a remove button.
+
+<PreviewCode file="components/docs/samples/attachment/message-attachments" name="UserMessageWithAttachments" base={<AttachmentMessageContextSample />}>
+  <AttachmentMessageRadixSample.AttachmentMessageContextSample />
+</PreviewCode>
+
 ## API Reference
 
 ### Composer Attachments

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

@@ -22,7 +22,7 @@ import { FileSample } from "@/components/docs/samples/file";
 
 ### Use in your application
 
-Pass `File` to `MessagePrimitive.Parts`:
+The shipped `Thread` component renders `file` parts through `File` by default, in both assistant and user messages. In a custom thread, pass `File` to `MessagePrimitive.Parts`:
 
 ```tsx title="/components/assistant-ui/thread.tsx" {1,8}
 import { File } from "@/components/assistant-ui/file";

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

@@ -22,7 +22,7 @@ import { ImageSample } from "@/components/docs/samples/image";
 
 ### Use in your application
 
-Pass `Image` to `MessagePrimitive.Parts`:
+The shipped `Thread` component renders `image` parts through `Image` by default, in both assistant and user messages. In a custom thread, pass `Image` to `MessagePrimitive.Parts`:
 
 ```tsx title="/components/assistant-ui/thread.tsx" {1,8}
 import { Image } from "@/components/assistant-ui/image";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/mcp-docs-server",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "MCP server for assistant-ui documentation and examples",
   "keywords": [
     "mcp",
@@ -38,10 +38,10 @@
   },
   "devDependencies": {
     "@modelcontextprotocol/core": "^2.0.0",
-    "@types/node": "^26.1.2",
-    "tsx": "^4.23.10",
+    "@types/node": "^26.2.0",
+    "tsx": "^4.23.12",
     "vitest": "^4.1.10",
-    "@assistant-ui/x-buildutils": "0.0.22"
+    "@assistant-ui/x-buildutils": "0.0.23"
   },
   "publishConfig": {
     "access": "public",