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	One install for Cursor or Claude Code: skills, rules, velt-expert agent, and MCP servers for SDK setup and feature work
MCP Installer	Guided Velt setup that scans your codebase, proposes a plan, and walks through install steps
UI Customization Plugin	Turns a Figma design into verified Velt UI customization (comments + notifications)
Skills	Implementation rules and patterns your agent follows when writing Velt code
CLI	Terminal scaffolding for Next.js (no AI agent required)
Velt 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

Installation Plugin (Recommended)

Full package for Cursor or Claude Code. Installs skills, rules, MCP servers, and the velt-expert agent persona for SDK setup.

MCP Installer

AI-guided setup with codebase scanning. Works with Claude Code, Cursor, Windsurf, and Claude Desktop.

UI Customization Plugin

Figma → verified Velt UI customization for Cursor or Claude Code. Builds CSS, wireframes, or primitives and checks each surface in a live browser.

Agent Skills

Install 282 implementation rules for any AI agent. Works with Claude Code, Cursor, GitHub Copilot, and more.

Velt Docs MCP

Search Velt documentation from Claude, Claude Code, Cursor, or VS Code.

CLI

Non-interactive, flag-driven scaffolding for Next.js. No AI agent required.

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. 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.