@assistant-ui/mcp-docs-server 0.1.19 → 0.1.21

package/.docs/raw/docs/(docs)/cli.mdx

@@ -56,6 +56,26 @@ This command uses `create-next-app` with assistant-ui starter templates.
 | `langgraph` | LangGraph integration | `npx assistant-ui create -t langgraph` |
 | `mcp` | Model Context Protocol support | `npx assistant-ui create -t mcp` |
 
+**Available Examples**
+
+Use `--example` to create a project from one of the monorepo examples with full feature demonstrations:
+
+| Example | Description | Command |
+|---------|-------------|---------|
+| `with-ai-sdk-v6` | Vercel AI SDK v6 integration | `npx assistant-ui create my-app -e with-ai-sdk-v6` |
+| `with-langgraph` | LangGraph agent with custom tools | `npx assistant-ui create my-app -e with-langgraph` |
+| `with-cloud` | Assistant Cloud persistence | `npx assistant-ui create my-app -e with-cloud` |
+| `with-ag-ui` | AG-UI protocol integration | `npx assistant-ui create my-app -e with-ag-ui` |
+| `with-assistant-transport` | Custom backend via Assistant Transport | `npx assistant-ui create my-app -e with-assistant-transport` |
+| `with-external-store` | External message store | `npx assistant-ui create my-app -e with-external-store` |
+| `with-custom-thread-list` | Custom thread list UI | `npx assistant-ui create my-app -e with-custom-thread-list` |
+| `with-react-hook-form` | React Hook Form integration | `npx assistant-ui create my-app -e with-react-hook-form` |
+| `with-ffmpeg` | FFmpeg video processing tool | `npx assistant-ui create my-app -e with-ffmpeg` |
+| `with-elevenlabs-scribe` | ElevenLabs voice transcription | `npx assistant-ui create my-app -e with-elevenlabs-scribe` |
+| `with-parent-id-grouping` | Message part grouping | `npx assistant-ui create my-app -e with-parent-id-grouping` |
+| `with-react-router` | React Router v7 integration | `npx assistant-ui create my-app -e with-react-router` |
+| `with-tanstack` | TanStack Start integration | `npx assistant-ui create my-app -e with-tanstack` |
+
 **Examples**
 
 ```bash
@@ -65,6 +85,9 @@ npx assistant-ui@latest create my-app
 # Create with cloud template
 npx assistant-ui@latest create my-app -t cloud
 
+# Create from an example
+npx assistant-ui@latest create my-app --example with-langgraph
+
 # Create with specific package manager
 npx assistant-ui@latest create my-app --use-pnpm
 
@@ -84,6 +107,7 @@ Arguments:
 
 Options:
   -t, --template <template>  template to use (default, cloud, langgraph, mcp)
+  -e, --example <example>    create from an example (e.g., with-langgraph)
   --use-npm                  explicitly use npm
   --use-pnpm                 explicitly use pnpm
   --use-yarn                 explicitly use yarn
@@ -262,6 +286,48 @@ Options:
   -h, --help             display help for command
 ```
 
+## mcp
+
+Use the `mcp` command to install the assistant-ui MCP docs server for your IDE.
+
+```bash
+npx assistant-ui@latest mcp
+```
+
+This command configures the [Model Context Protocol](/docs/llm#mcp) server, giving your AI assistant direct access to assistant-ui documentation.
+
+**Examples**
+
+```bash
+# Interactive - prompts to select IDE
+npx assistant-ui mcp
+
+# Install for specific IDE
+npx assistant-ui mcp --cursor
+npx assistant-ui mcp --windsurf
+npx assistant-ui mcp --vscode
+npx assistant-ui mcp --zed
+npx assistant-ui mcp --claude-code
+npx assistant-ui mcp --claude-desktop
+```
+
+**Options**
+
+```bash
+Usage: assistant-ui mcp [options]
+
+install assistant-ui MCP docs server for your IDE
+
+Options:
+  --cursor          install for Cursor
+  --windsurf        install for Windsurf
+  --vscode          install for VSCode
+  --zed             install for Zed
+  --claude-code     install for Claude Code
+  --claude-desktop  install for Claude Desktop
+  -h, --help        display help for command
+```
+
 ## Common Workflows
 
 ### Starting a new project

package/.docs/raw/docs/(docs)/copilots/make-assistant-tool-ui.mdx

@@ -3,7 +3,6 @@ title: makeAssistantToolUI
 description: Register custom UI components to render tool executions and their status.
 ---
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 
 The `makeAssistantToolUI` utility is used to register a tool UI component with the Assistant.
 

package/.docs/raw/docs/(docs)/copilots/make-assistant-tool.mdx

@@ -3,7 +3,6 @@ title: makeAssistantTool
 description: Create React components that provide reusable tools to the assistant.
 ---
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 
 `makeAssistantTool` creates a React component that provides a tool to the assistant. This is useful for defining reusable tools that can be composed into your application.
 

package/.docs/raw/docs/(docs)/copilots/model-context.mdx

@@ -75,12 +75,12 @@ function Form() {
 The context provider system allows components to contribute to the model context. Here's a typical usage pattern:
 
 ```tsx
-import { useAssistantApi, tool } from "@assistant-ui/react";
+import { useAui, tool } from "@assistant-ui/react";
 import { useEffect } from "react";
 import { z } from "zod";
 
 function MyComponent() {
-  const api = useAssistantApi();
+  const aui = useAui();
 
   // Define tool using the tool() helper
   const myTool = tool({
@@ -95,13 +95,13 @@ function MyComponent() {
 
   useEffect(() => {
     // Register context provider
-    return api.modelContext().register({
+    return aui.modelContext().register({
       getModelContext: () => ({
         system: "You are a helpful search assistant...",
         tools: { myTool },
       }),
     });
-  }, [api]); // Re-register if api changes
+  }, [aui]); // Re-register if api changes
 
   return <div>{/* component content */}</div>;
 }

package/.docs/raw/docs/(docs)/copilots/motivation.mdx

@@ -144,14 +144,14 @@ function SmartTransactionHistory() {
 Finally, let's add dynamic context based on the user's transaction patterns:
 
 ```tsx
-import { useAssistantApi } from "@assistant-ui/react";
+import { useAui } from "@assistant-ui/react";
 import { useEffect } from "react";
 
 function SmartTransactionHistory({ userProfile }) {
-  const api = useAssistantApi();
+  const aui = useAui();
 
   useEffect(() => {
-    return api.modelContext().register({
+    return aui.modelContext().register({
       getModelContext: () => ({
         system: `
           User spending patterns:

package/.docs/raw/docs/(docs)/devtools.mdx

@@ -3,7 +3,6 @@ title: DevTools
 description: Inspect runtime state, context, and events in the browser.
 ---
 
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 
 Hey, the assistant-ui DevTools allows you to debug the assistant-ui state and context, and events without resorting to `console.log`. It's an easy way to see how data flows to the assistant-ui's runtime layer.
 

package/.docs/raw/docs/(docs)/guides/attachments.mdx

@@ -4,7 +4,6 @@ description: Let users attach files, images, and documents to messages.
 ---
 
 import { AttachmentSample } from "@/components/docs/samples/attachment";
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 
 Enable users to attach files to their messages, enhancing conversations with images, documents, and other content.
 
@@ -485,14 +484,14 @@ class ValidatedImageAdapter implements AttachmentAdapter {
 Enable multi-file selection with custom limits:
 
 ```tsx
-const api = useAssistantApi();
+const aui = useAui();
 
 const handleMultipleFiles = async (files: FileList) => {
   const maxFiles = 5;
   const filesToAdd = Array.from(files).slice(0, maxFiles);
 
   for (const file of filesToAdd) {
-    await api.composer().addAttachment({ file });
+    await aui.composer().addAttachment({ file });
   }
 };
 ```