> ## Documentation Index
> Fetch the complete documentation index at: https://velt-claude-ui-customization-docs-review-m7hwcn.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Use AI coding agents to build with Velt. Understand how the installation plugin, UI customization plugin, MCP installer, skills, CLI, and Velt Docs MCP work together.

Velt gives your AI coding agent the knowledge and tools to set up the SDK, add features, and customize the UI correctly the first time. Pick the path that matches what you're doing:

| Tool                                                                | What it does                                                                                                              |
| ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| **[Installation Plugin](/get-started/installation-plugin)**         | One install for Cursor or Claude Code: skills, rules, `velt-expert` agent, and MCP servers for SDK setup and feature work |
| **[MCP Installer](/get-started/mcp-installer)**                     | Guided Velt setup that scans your codebase, proposes a plan, and walks through install steps                              |
| **[UI Customization Plugin](/get-started/ui-customization-plugin)** | Turns a Figma design into verified Velt UI customization (comments + notifications)                                       |
| **[Skills](/get-started/skills)**                                   | Implementation rules and patterns your agent follows when writing Velt code                                               |
| **[CLI](/get-started/cli)**                                         | Terminal scaffolding for Next.js (no AI agent required)                                                                   |
| **[Velt Docs MCP](/get-started/docs-mcp)**                          | Live docs search when skills don't cover a question                                                                       |

## How They Fit Together

```
Set up Velt in your app
├── Installation Plugin   → full package (recommended)
│   ├── MCP Installer     → guided install plan
│   ├── Skills            → correct SDK patterns
│   ├── CLI               → optional scaffolding
│   └── Docs MCP          → fallback docs search
└── or MCP Installer + Skills / CLI on their own

Customize Velt UI to match your design
└── UI Customization Plugin   → Figma → plan → build → verify
    (requires Velt already installed and rendering)
```

Start with the **Installation Plugin** to get Velt into your app. When the default UI is working, use the **UI Customization Plugin** to match a Figma design. Each piece also works standalone if you only need part of the stack.

## Choose Your Path

<CardGroup cols={2}>
  <Card title="Installation Plugin (Recommended)" icon="box" href="/get-started/installation-plugin" color="#7CE38B" iconType="light">
    Full package for Cursor or Claude Code. Installs skills, rules, MCP servers, and the velt-expert agent persona for SDK setup.
  </Card>

  <Card title="MCP Installer" icon="wand-magic-sparkles" href="/get-started/mcp-installer" color="#77BDFB" iconType="light">
    AI-guided setup with codebase scanning. Works with Claude Code, Cursor, Windsurf, and Claude Desktop.
  </Card>

  <Card title="UI Customization Plugin" icon="palette" href="/get-started/ui-customization-plugin" color="#DB61A2" iconType="light">
    Figma → verified Velt UI customization for Cursor or Claude Code. Builds CSS, wireframes, or primitives and checks each surface in a live browser.
  </Card>

  <Card title="Agent Skills" icon="book" href="/get-started/skills" color="#FAA356" iconType="light">
    Install 282 implementation rules for any AI agent. Works with Claude Code, Cursor, GitHub Copilot, and more.
  </Card>

  <Card title="Velt Docs MCP" icon="magnifying-glass" href="/get-started/docs-mcp" color="#A371F7" iconType="light">
    Search Velt documentation from Claude, Claude Code, Cursor, or VS Code.
  </Card>

  <Card title="CLI" icon="terminal" href="/get-started/cli" color="#D5D5D5" iconType="light">
    Non-interactive, flag-driven scaffolding for Next.js. No AI agent required.
  </Card>
</CardGroup>

## When to Use What

| Scenario                                     | Use                                              |
| -------------------------------------------- | ------------------------------------------------ |
| First time setting up Velt with an AI editor | **Installation Plugin**                          |
| Already set up, adding a new feature         | **Skills** (included in the installation plugin) |
| Matching Velt UI to a Figma design           | **UI Customization Plugin**                      |
| Editor without plugin support                | **MCP Installer** + **Skills** separately        |
| Terminal-only setup, no AI agent             | **CLI**                                          |
| Agent can't find the answer in skills        | **Velt Docs MCP**                                |

## What Each Component Provides

### Installation Plugin

Bundles skills, rules, an agent persona, and MCP servers into a single install for Cursor or Claude Code. Use it to set up and extend the Velt SDK. Includes 2 slash-command skills (`/install-velt`, `/velt-help`), 14 bundled agent-skill packages (282 rules), 6 embedded best-practice rules, 1 agent persona (`velt-expert`), and 2 MCP servers.

### MCP Installer

An MCP server that your AI agent uses to run guided Velt setup. It scans your codebase, detects your auth system and document structure, generates an implementation plan, and executes the plan with your approval. Supports both guided mode and CLI-only mode.

### UI Customization Plugin

A separate Cursor / Claude Code plugin that turns a Figma Loop into working Velt UI customization (comments + notifications). It plans per surface, builds CSS / wireframes / primitives, and verifies each result against the design in a live browser. See [UI Customization Plugin](/get-started/ui-customization-plugin). Requires Velt already installed and rendering in your app.

### Skills

Structured knowledge packages containing prioritized rules with correct and incorrect code patterns, verification checklists, and source pointers. Available for 14 Velt feature areas: Setup, Comments, CRDT, Notifications, Recorder, Single Editor Mode, Self-Hosting Data, Activity Logs, Presence, Cursors, Huddle, REST APIs, Proxy Server, and AI Rewriter.

### CLI

A terminal command (`npx @velt-js/add-velt`) that scaffolds Velt into a Next.js project. Installs dependencies, generates components, and wires `VeltProvider` into your app layout. Supports feature flags for comments, notifications, presence, cursors, and CRDT.

### Velt Docs MCP

An MCP server that searches Velt's documentation. Use it as a fallback when skills don't cover your specific question. Available for Claude, Claude Code, Cursor, and VS Code. See [Velt Docs MCP](/get-started/docs-mcp).