rivet-design 0.12.2 → 0.12.3

package/README.md

@@ -1,18 +1,15 @@
 # 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.
+Rivet helps you explore multiple design directions for your web app. It generates parallel variants you can compare side by side, refine with precision, and share or implement — all from your coding agent.
 
 ## How it works
 
-Rivet runs as an MCP server alongside Claude Code. When you open a session:
+Rivet runs as an MCP server alongside your coding agent (Claude Code, Cursor, etc.).
 
-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.
+1. **Start from your agent.** Use `/rivet` in Claude Code, or tell your agent "Use Rivet variants" or "Explore with Rivet" along with your design request.
+2. **Connect design references** (optional). Click **Connect design references** in the editor to link your Pinterest or Are.na account. Include relevant pins or boards and Rivet will extract design context from them to inform the variants it generates.
+3. **Refine with the comment tool.** Select any part of the UI and use the comment tool to make more precise variants of that section, or leave comments describing what you'd like to change within a variant.
+4. **Share or implement.** When you're happy, click the **Share** button to get a shareable link you can send to a collaborator — or share it back to your coding agent to implement the chosen direction.
 
 ## Install
 
@@ -22,7 +19,7 @@ You can make multiple rounds of changes in the same session. Rivet tracks each o
 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)
+**Option 2 — Run Rivet's installer** (adds Rivet globally via Claude Code CLI)
 
 ```bash
 npx rivet-design install
@@ -32,20 +29,15 @@ No global install required. `npx` pulls the latest version each time.
 
 ## Usage
 
-Once installed, ask Claude to open the visual editor:
+Once installed, tell your agent what you want to explore:
 
 ```
-"Open Rivet so I can make some design changes"
+"Use Rivet variants to explore hero section designs"
+"Explore with Rivet — show me options for the navigation"
+"/rivet redesign the pricing page"
 ```
 
-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.
+Your agent will open Rivet, generate parallel design directions, and let you compare them side by side in the browser. Use the comment tool to refine, connect Pinterest or Are.na boards for design context, and share or implement when you're ready.
 
 ### Supported frameworks
 
@@ -55,25 +47,13 @@ Make as many rounds of edits as you need. When you're done, tell Claude to close
 - 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                                            |
+Your dev server needs to be running before opening Rivet. Your agent will give you the start command if it isn't.
 
 ## Requirements
 
 - Node.js 18+
 - A running local dev server (Vite, Next.js, etc.)
-- Claude Code
+- Claude Code, Cursor, or another MCP-compatible agent
 
 ## License
 

package/README.npm.md

@@ -1,18 +1,15 @@
 # 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.
+Rivet helps you explore multiple design directions for your web app. It generates parallel variants you can compare side by side, refine with precision, and share or implement — all from your coding agent.
 
 ## How it works
 
-Rivet runs as an MCP server alongside Claude Code. When you open a session:
+Rivet runs as an MCP server alongside your coding agent (Claude Code, Cursor, etc.).
 
-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.
+1. **Start from your agent.** Use `/rivet` in Claude Code, or tell your agent "Use Rivet variants" or "Explore with Rivet" along with your design request.
+2. **Connect design references** (optional). Click **Connect design references** in the editor to link your Pinterest or Are.na account. Include relevant pins or boards and Rivet will extract design context from them to inform the variants it generates.
+3. **Refine with the comment tool.** Select any part of the UI and use the comment tool to make more precise variants of that section, or leave comments describing what you'd like to change within a variant.
+4. **Share or implement.** When you're happy, click the **Share** button to get a shareable link you can send to a collaborator — or share it back to your coding agent to implement the chosen direction.
 
 ## Install
 
@@ -22,7 +19,7 @@ You can make multiple rounds of changes in the same session. Rivet tracks each o
 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)
+**Option 2 — Run Rivet's installer** (adds Rivet globally via Claude Code CLI)
 
 ```bash
 npx rivet-design install
@@ -32,20 +29,15 @@ No global install required. `npx` pulls the latest version each time.
 
 ## Usage
 
-Once installed, ask Claude to open the visual editor:
+Once installed, tell your agent what you want to explore:
 
 ```
-"Open Rivet so I can make some design changes"
+"Use Rivet variants to explore hero section designs"
+"Explore with Rivet — show me options for the navigation"
+"/rivet redesign the pricing page"
 ```
 
-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.
+Your agent will open Rivet, generate parallel design directions, and let you compare them side by side in the browser. Use the comment tool to refine, connect Pinterest or Are.na boards for design context, and share or implement when you're ready.
 
 ### Supported frameworks
 
@@ -55,25 +47,13 @@ Make as many rounds of edits as you need. When you're done, tell Claude to close
 - 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                                            |
+Your dev server needs to be running before opening Rivet. Your agent will give you the start command if it isn't.
 
 ## Requirements
 
 - Node.js 18+
 - A running local dev server (Vite, Next.js, etc.)
-- Claude Code
+- Claude Code, Cursor, or another MCP-compatible agent
 
 ## License