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

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

@@ -0,0 +1,450 @@
+---
+title: Installation
+description: Get assistant-ui running in 5 minutes with npm and your first chat component.
+---
+
+
+## Quick Start
+
+The fastest way to get started with assistant-ui.
+
+![animated gif showing the steps to create a new project](../../../../../.github/assets/assistant-ui-starter.gif)
+
+<Steps>
+  <Step>
+
+### Initialize assistant-ui
+
+**Create a new project:**
+
+```sh
+npx assistant-ui@latest create
+```
+
+Or choose a template:
+
+```sh
+# Assistant Cloud - with persistence and thread management
+npx assistant-ui@latest create -t cloud
+
+# LangGraph
+npx assistant-ui@latest create -t langgraph
+
+# MCP support
+npx assistant-ui@latest create -t mcp
+```
+
+**Add to an existing project:**
+
+```sh
+npx assistant-ui@latest init
+```
+
+  </Step>
+  <Step>
+
+### Add API key
+
+Create a `.env` file with your API key:
+
+```
+OPENAI_API_KEY="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+```
+
+  </Step>
+  <Step>
+
+### Start the app
+
+```sh
+npm run dev
+```
+
+  </Step>
+</Steps>
+
+## Manual Setup
+
+If you prefer not to use the CLI, you can install components manually.
+
+<Steps>
+  <Step>
+
+### Add assistant-ui
+
+<InstallCommand shadcn={["thread", "thread-list"]} manualSetupInstructions />
+
+  </Step>
+  <Step>
+
+### Setup Backend Endpoint
+
+Install provider SDK:
+
+<Tabs groupId="provider" items={["OpenAI", "Anthropic", "Azure", "AWS", "Gemini", "GCP", "Groq", "Fireworks", "Cohere", "Ollama", "Chrome AI"]}>
+  <Tab>
+    <InstallCommand npm={["ai", "@assistant-ui/react-ai-sdk", "@ai-sdk/openai"]} />
+  </Tab>
+  <Tab>
+    <InstallCommand npm={["ai", "@assistant-ui/react-ai-sdk", "@ai-sdk/anthropic"]} />
+  </Tab>
+  <Tab>
+    <InstallCommand npm={["ai", "@assistant-ui/react-ai-sdk", "@ai-sdk/azure"]} />
+  </Tab>
+  <Tab>
+    <InstallCommand npm={["ai", "@assistant-ui/react-ai-sdk", "@ai-sdk/amazon-bedrock"]} />
+  </Tab>
+  <Tab>
+    <InstallCommand npm={["ai", "@assistant-ui/react-ai-sdk", "@ai-sdk/google"]} />
+  </Tab>
+  <Tab>
+    <InstallCommand npm={["ai", "@assistant-ui/react-ai-sdk", "@ai-sdk/google-vertex"]} />
+  </Tab>
+  <Tab>
+    <InstallCommand npm={["ai", "@assistant-ui/react-ai-sdk", "@ai-sdk/openai"]} />
+  </Tab>
+  <Tab>
+    <InstallCommand npm={["ai", "@assistant-ui/react-ai-sdk", "@ai-sdk/openai"]} />
+  </Tab>
+  <Tab>
+    <InstallCommand npm={["ai", "@assistant-ui/react-ai-sdk", "@ai-sdk/cohere"]} />
+  </Tab>
+  <Tab>
+    <InstallCommand npm={["ai", "@assistant-ui/react-ai-sdk", "ollama-ai-provider-v2"]} />
+  </Tab>
+  <Tab>
+    <InstallCommand npm={["ai", "@assistant-ui/react-ai-sdk", "chrome-ai"]} />
+  </Tab>
+</Tabs>
+
+Add an API endpoint:
+
+<Tabs groupId="provider" items={["OpenAI", "Anthropic", "Azure", "AWS", "Gemini", "GCP", "Groq", "Fireworks", "Cohere", "Ollama", "Chrome AI"]}>
+```ts title="/app/api/chat/route.ts" tab="OpenAI"
+import { openai } from "@ai-sdk/openai";
+import { convertToModelMessages, streamText } from "ai";
+
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+  const result = streamText({
+    model: openai("gpt-4o-mini"),
+    messages: convertToModelMessages(messages),
+  });
+  return result.toUIMessageStreamResponse();
+}
+```
+
+```ts title="/app/api/chat/route.ts" tab="Anthropic"
+import { anthropic } from "@ai-sdk/anthropic";
+import { convertToModelMessages, streamText } from "ai";
+
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+  const result = streamText({
+    model: anthropic("claude-3-5-sonnet-20240620"),
+    messages: convertToModelMessages(messages),
+  });
+  return result.toUIMessageStreamResponse();
+}
+```
+
+```ts title="/app/api/chat/route.ts" tab="Azure"
+import { azure } from "@ai-sdk/azure";
+import { convertToModelMessages, streamText } from "ai";
+
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+  const result = streamText({
+    model: azure("your-deployment-name"),
+    messages: convertToModelMessages(messages),
+  });
+  return result.toUIMessageStreamResponse();
+}
+```
+
+```ts title="/app/api/chat/route.ts" tab="AWS"
+import { bedrock } from "@ai-sdk/amazon-bedrock";
+import { convertToModelMessages, streamText } from "ai";
+
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+  const result = streamText({
+    model: bedrock("anthropic.claude-3-5-sonnet-20240620-v1:0"),
+    messages: convertToModelMessages(messages),
+  });
+  return result.toUIMessageStreamResponse();
+}
+```
+
+```ts title="/app/api/chat/route.ts" tab="Gemini"
+import { google } from "@ai-sdk/google";
+import { convertToModelMessages, streamText } from "ai";
+
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+  const result = streamText({
+    model: google("gemini-2.0-flash"),
+    messages: convertToModelMessages(messages),
+  });
+  return result.toUIMessageStreamResponse();
+}
+```
+
+```ts title="/app/api/chat/route.ts" tab="GCP"
+import { vertex } from "@ai-sdk/google-vertex";
+import { convertToModelMessages, streamText } from "ai";
+
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+  const result = streamText({
+    model: vertex("gemini-1.5-pro"),
+    messages: convertToModelMessages(messages),
+  });
+  return result.toUIMessageStreamResponse();
+}
+```
+
+```ts title="/app/api/chat/route.ts" tab="Groq"
+import { createOpenAI } from "@ai-sdk/openai";
+import { convertToModelMessages, streamText } from "ai";
+
+export const maxDuration = 30;
+
+const groq = createOpenAI({
+  apiKey: process.env.GROQ_API_KEY ?? "",
+  baseURL: "https://api.groq.com/openai/v1",
+});
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+  const result = streamText({
+    model: groq("llama3-70b-8192"),
+    messages: convertToModelMessages(messages),
+  });
+  return result.toUIMessageStreamResponse();
+}
+```
+
+```ts title="/app/api/chat/route.ts" tab="Fireworks"
+import { createOpenAI } from "@ai-sdk/openai";
+import { convertToModelMessages, streamText } from "ai";
+
+export const maxDuration = 30;
+
+const fireworks = createOpenAI({
+  apiKey: process.env.FIREWORKS_API_KEY ?? "",
+  baseURL: "https://api.fireworks.ai/inference/v1",
+});
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+  const result = streamText({
+    model: fireworks("accounts/fireworks/models/firefunction-v2"),
+    messages: convertToModelMessages(messages),
+  });
+  return result.toUIMessageStreamResponse();
+}
+```
+
+```ts title="/app/api/chat/route.ts" tab="Cohere"
+import { cohere } from "@ai-sdk/cohere";
+import { convertToModelMessages, streamText } from "ai";
+
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+  const result = streamText({
+    model: cohere("command-r-plus"),
+    messages: convertToModelMessages(messages),
+  });
+  return result.toUIMessageStreamResponse();
+}
+```
+
+```ts title="/app/api/chat/route.ts" tab="Ollama"
+import { ollama } from "ollama-ai-provider-v2";
+import { convertToModelMessages, streamText } from "ai";
+
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+  const result = streamText({
+    model: ollama("llama3"),
+    messages: convertToModelMessages(messages),
+  });
+  return result.toUIMessageStreamResponse();
+}
+```
+
+```ts title="/app/api/chat/route.ts" tab="Chrome AI"
+import { chromeai } from "chrome-ai";
+import { convertToModelMessages, streamText } from "ai";
+
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+  const result = streamText({
+    model: chromeai(),
+    messages: convertToModelMessages(messages),
+  });
+  return result.toUIMessageStreamResponse();
+}
+```
+
+</Tabs>
+
+Define environment variables:
+
+<Tabs groupId="provider" items={["OpenAI", "Anthropic", "Azure", "AWS", "Gemini", "GCP", "Groq", "Fireworks", "Cohere", "Ollama", "Chrome AI"]}>
+
+```sh title="/.env.local" tab="OpenAI"
+OPENAI_API_KEY="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+```
+
+```sh title="/.env.local" tab="Anthropic"
+ANTHROPIC_API_KEY="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+```
+
+```sh title="/.env.local" tab="Azure"
+AZURE_RESOURCE_NAME="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+AZURE_API_KEY="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+```
+
+```sh title="/.env.local" tab="AWS"
+AWS_ACCESS_KEY_ID="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+AWS_SECRET_ACCESS_KEY="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+AWS_REGION="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+```
+
+```sh title="/.env.local" tab="Gemini"
+GOOGLE_GENERATIVE_AI_API_KEY="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+```
+
+```sh title="/.env.local" tab="GCP"
+GOOGLE_VERTEX_PROJECT="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+GOOGLE_VERTEX_LOCATION="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+GOOGLE_APPLICATION_CREDENTIALS="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+```
+
+```sh title="/.env.local" tab="Groq"
+GROQ_API_KEY="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+```
+
+```sh title="/.env.local" tab="Fireworks"
+FIREWORKS_API_KEY="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+```
+
+```sh title="/.env.local" tab="Cohere"
+COHERE_API_KEY="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+```
+
+```sh tab="Ollama"
+<none>
+```
+
+```sh tab="Chrome AI"
+<none>
+```
+
+</Tabs>
+
+If you aren't using Next.js, you can also deploy this endpoint to Cloudflare Workers, or any other serverless platform.
+
+  </Step>
+
+  <Step>
+
+### Use it in your app
+
+<Tabs items={["Thread", "AssistantModal"]}>
+
+```tsx title="/app/page.tsx" tab="Thread"
+import { AssistantRuntimeProvider } from "@assistant-ui/react";
+import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/react-ai-sdk";
+import { ThreadList } from "@/components/assistant-ui/thread-list";
+import { Thread } from "@/components/assistant-ui/thread";
+
+const MyApp = () => {
+  const runtime = useChatRuntime({
+    transport: new AssistantChatTransport({
+      api: "/api/chat",
+    }),
+  });
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <div>
+        <ThreadList />
+        <Thread />
+      </div>
+    </AssistantRuntimeProvider>
+  );
+};
+```
+
+```tsx title="/app/page.tsx" tab="AssistantModal"
+// run `npx shadcn@latest add https://r.assistant-ui.com/assistant-modal.json`
+
+import { AssistantRuntimeProvider } from "@assistant-ui/react";
+import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/react-ai-sdk";
+import { AssistantModal } from "@/components/assistant-ui/assistant-modal";
+
+const MyApp = () => {
+  const runtime = useChatRuntime({
+    transport: new AssistantChatTransport({
+      api: "/api/chat",
+    }),
+  });
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <AssistantModal />
+    </AssistantRuntimeProvider>
+  );
+};
+```
+
+</Tabs>
+
+</Step>
+</Steps>
+
+## What's Next?
+
+<Cards>
+  <Card
+    title="Pick a Runtime"
+    description="Choose the right runtime for your needs"
+    href="/docs/runtimes/pick-a-runtime"
+  />
+  <Card
+    title="Generative UI"
+    description="Create rich UI components for tool executions"
+    href="/docs/guides/tool-ui"
+  />
+  <Card
+    title="Add Persistence"
+    description="Save and restore chat conversations"
+    href="/docs/cloud/overview"
+  />
+  <Card
+    title="Examples"
+    description="Explore full implementations and demos"
+    href="https://github.com/assistant-ui/assistant-ui/tree/main/examples"
+  />
+</Cards>

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

@@ -0,0 +1,209 @@
+---
+title: "AI-Assisted Development"
+description: Use AI tools to build with assistant-ui faster. AI-accessible documentation, Claude Code skills, and MCP integration.
+---
+
+import { FileText } from "lucide-react";
+
+Build faster with AI assistants that understand assistant-ui. This page covers all the ways to give your AI tools access to assistant-ui documentation and context.
+
+## AI Accessible Documentation
+
+Our docs are designed to be easily accessible to AI assistants:
+
+<Cards>
+  <Card icon={<FileText className="text-blue-300" />} title="/llms.txt" href="/llms.txt" external>
+    Structured index of all documentation pages. Point your AI here for a quick overview.
+  </Card>
+
+  <Card icon={<FileText className="text-green-300" />} title="/llms-full.txt" href="/llms-full.txt" external>
+    Complete documentation in a single file. Use this for full context.
+  </Card>
+
+  <Card icon={<FileText className="text-purple-300" />} title=".mdx suffix">
+    Add `.mdx` to any page's URL to get raw markdown content (e.g., `/docs/installation.mdx`).
+  </Card>
+</Cards>
+
+### Context Files
+
+Add assistant-ui context to your project's `CLAUDE.md` or `.cursorrules`:
+
+```md
+## assistant-ui
+
+This project uses assistant-ui for chat interfaces.
+
+Documentation: https://www.assistant-ui.com/llms-full.txt
+
+Key patterns:
+- Use AssistantRuntimeProvider at the app root
+- Thread component for full chat interface
+- AssistantModal for floating chat widget
+- useChatRuntime hook with AI SDK transport
+```
+
+## Skills
+
+Install assistant-ui skills for AI Tools:
+
+```sh
+npx skills add assistant-ui/skills
+```
+
+| Skill | Purpose |
+|-------|---------|
+| `/assistant-ui` | General architecture and overview guide |
+| `/setup` | Project setup and configuration (AI SDK, LangGraph, custom backends) |
+| `/primitives` | UI component primitives (Thread, Composer, Message, etc.) |
+| `/runtime` | Runtime system and state management |
+| `/tools` | Tool registration and tool UI |
+| `/streaming` | Streaming protocol with assistant-stream |
+| `/cloud` | Cloud persistence and authorization |
+| `/thread-list` | Multi-thread management |
+| `/update` | Update assistant-ui and AI SDK to latest versions |
+
+Use by typing the command in Claude Code, e.g., `/assistant-ui` for the main guide or `/setup` when setting up a project.
+
+## MCP
+
+`@assistant-ui/mcp-docs-server` provides direct access to assistant-ui documentation and examples in your IDE via the Model Context Protocol.
+
+Once installed, your AI assistant will understand everything about assistant-ui - just ask naturally:
+
+- "Add a chat interface with streaming support to my app"
+- "How do I integrate assistant-ui with the Vercel AI SDK?"
+- "My Thread component isn't updating, what could be wrong?"
+
+### Quick Install (CLI)
+
+```bash
+npx assistant-ui mcp
+```
+
+Or specify your IDE directly:
+
+```bash
+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
+```
+
+### Manual Installation
+
+<Tabs items={["Cursor", "Windsurf", "VSCode", "Zed", "Claude Code", "Claude Desktop"]}>
+  <Tab>
+<a href="cursor://anysphere.cursor-deeplink/mcp/install?name=assistant-ui&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIkBhc3Npc3RhbnQtdWkvbWNwLWRvY3Mtc2VydmVyIl19">
+  <img src="https://cursor.com/deeplink/mcp-install-dark.svg" alt="Install in Cursor" className="not-prose" />
+</a>
+
+Or add to `.cursor/mcp.json`:
+
+```json
+{
+  "mcpServers": {
+    "assistant-ui": {
+      "command": "npx",
+      "args": ["-y", "@assistant-ui/mcp-docs-server"]
+    }
+  }
+}
+```
+
+After adding, open Cursor Settings → MCP → find "assistant-ui" and click enable.
+  </Tab>
+  <Tab>
+Add to `~/.codeium/windsurf/mcp_config.json`:
+
+```json
+{
+  "mcpServers": {
+    "assistant-ui": {
+      "command": "npx",
+      "args": ["-y", "@assistant-ui/mcp-docs-server"]
+    }
+  }
+}
+```
+
+After adding, fully quit and re-open Windsurf.
+  </Tab>
+  <Tab>
+Add to `.vscode/mcp.json` in your project:
+
+```json
+{
+  "servers": {
+    "assistant-ui": {
+      "command": "npx",
+      "args": ["-y", "@assistant-ui/mcp-docs-server"],
+      "type": "stdio"
+    }
+  }
+}
+```
+
+Enable MCP in Settings → search "MCP" → enable "Chat > MCP". Use GitHub Copilot Chat in Agent mode.
+  </Tab>
+  <Tab>
+Add to your Zed settings file:
+- macOS: `~/.zed/settings.json`
+- Linux: `~/.config/zed/settings.json`
+- Windows: `%APPDATA%\Zed\settings.json`
+
+Or open via `Cmd/Ctrl + ,` → "Open JSON Settings"
+
+```json
+{
+  "context_servers": {
+    "assistant-ui": {
+      "command": {
+        "path": "npx",
+        "args": ["-y", "@assistant-ui/mcp-docs-server"]
+      }
+    }
+  }
+}
+```
+
+The server starts automatically with the Assistant Panel.
+  </Tab>
+  <Tab>
+```bash
+claude mcp add assistant-ui -- npx -y @assistant-ui/mcp-docs-server
+```
+
+The server starts automatically once added.
+  </Tab>
+  <Tab>
+Add to `~/Library/Application Support/Claude/claude_desktop_config.json` (macOS) or `%APPDATA%\Claude\claude_desktop_config.json` (Windows):
+
+```json
+{
+  "mcpServers": {
+    "assistant-ui": {
+      "command": "npx",
+      "args": ["-y", "@assistant-ui/mcp-docs-server"]
+    }
+  }
+}
+```
+
+Restart Claude Desktop after updating the configuration.
+  </Tab>
+</Tabs>
+
+### Available Tools
+
+| Tool | Description |
+|------|-------------|
+| `assistantUIDocs` | Access documentation: getting started, component APIs, runtime docs, integration guides |
+| `assistantUIExamples` | Browse code examples: AI SDK, LangGraph, OpenAI Assistants, tool UI patterns |
+
+### Troubleshooting
+
+- **Server not starting**: Ensure `npx` is installed and working. Check configuration file syntax.
+- **Tool calls failing**: Restart the MCP server and/or your IDE. Update to latest IDE version.

package/.docs/raw/docs/(reference)/api-reference/context-providers/assistant-runtime-provider.mdx

@@ -3,7 +3,6 @@ title: <AssistantRuntimeProvider />
 description: Root provider that connects your runtime to assistant-ui components.
 ---
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 import { AssistantRuntimeProvider } from "@/generated/typeDocs";
 
 The `AssistantRuntimeProvider` provides data and APIs used by assistant-ui components.

package/.docs/raw/docs/(reference)/api-reference/context-providers/text-message-part-provider.mdx

@@ -3,7 +3,6 @@ title: <TextMessagePartProvider />
 description: Context provider for reusing text components outside of message content.
 ---
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 import { AssistantRuntimeProvider } from "@/generated/typeDocs";
 
 The `TextMessagePartProvider` provides data and APIs for `TextMessagePart` components.