# AI-Assisted Development
URL: /docs/llm

Use AI tools to build with assistant-ui faster. AI-accessible documentation, Claude Code skills, and MCP integration.

***

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.