# 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)**

```bash
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)

```bash
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
