Rivet

Rivet is a visual editor for your web app that works directly with Claude Code. Select elements in your browser, make visual changes, and send them to Claude as structured code instructions — no copy-pasting, no describing what you see.

How it works

Rivet runs as an MCP server alongside Claude Code. When you open a session:

1. Rivet opens your running app in a visual editor in your browser
2. You select elements and make design changes — colors, spacing, text, layout
3. Click Send to Claude and Rivet sends the changes as structured instructions
4. Claude applies them to your source files directly
5. Your dev server hot-reloads and you see the result instantly

You can make multiple rounds of changes in the same session. Rivet tracks each one and sends them cleanly.

Install

Option 1 — CLI (recommended)

claude mcp add --transport stdio --scope user rivet -- npx -y rivet-design@latest mcp --editor claude

Option 2 — Run Rivet’s installer (adds Rivet globally via Claude Code CLI)

npx rivet-design install

No global install required. npx pulls the latest version each time.

Usage

Once installed, ask Claude to open the visual editor:

"Open Rivet so I can make some design changes"

Claude will:

1. Detect your project framework and dev server port
2. Open Rivet in your browser
3. Wait for you to make changes and click Send to Claude
4. Apply the changes to your source files

Make as many rounds of edits as you need. When you're done, tell Claude to close the session.

Supported frameworks

• Next.js
• Vite
• Create React App
• Remix
• SvelteKit

Your dev server needs to be running before opening Rivet. Claude will give you the start command if it isn't.

MCP tools

Rivet exposes these tools to Claude Code:

| Tool | Description | | --------------------- | ------------------------------------------------------------------------- | | detect_project | Detects framework, package manager, and whether the dev server is running | | open_visual_editor | Opens Rivet in the browser and starts a session | | watch_for_changes | Blocks until you click Send to Claude, then returns your changes | | get_pending_changes | Non-blocking check for pending changes | | close_visual_editor | Ends the session and cleans up |

Requirements

• Node.js 18+
• A running local dev server (Vite, Next.js, etc.)
• Claude Code

License

MIT