What is Rivet?
Most coding agents give you one answer. You ask for a new hero section, the agent builds its best guess, and if it misses you start over. Rivet gives you options instead. Ask for variants and Rivet builds several different takes on a screen, section, or component. Each one is working code, built in its own copy of your project. You compare them side by side in your browser, refine the ones with promise, and keep the winner. Rivet works with the agents you already use: Cursor, Claude Code, Claude Desktop, and OpenAI Codex CLI.Install Rivet
Set up Rivet for your coding agent in about a minute.
How it works
1
Describe what to explore
In your agent’s chat: “Give me 3 variants of the hero section. One editorial, one brutalist, one minimal.”
2
Rivet builds each direction
Every direction gets its own isolated copy of your project, and Rivet builds them all in parallel. Your own files are never touched while variants build.
3
Compare live previews
A browser window opens where each direction runs as a live preview of your real app. Every card has a short title and subtitle so you can tell the directions apart at a glance.
4
Refine and commit
Give feedback on a direction, regenerate it, or commit your favorite. The winner lands in your project as a normal code change you can review like any other.
What’s running on your machine
Everything is local. Installing therivet-design npm package gives you three things:
- The
rivetcommand, which your agent uses to start runs and commit winners. - A local server that manages variants, previews, and your project’s files.
- The browser UI where you watch progress and compare directions.
Next steps
Install & set up
Install the CLI and connect it to your coding agent.
Your first designs
Generate, compare, and commit your first set of variants.
Design context
Point Rivet at Pinterest boards, websites, and videos.
Reference
CLI commands and MCP tools, for agents and engineers.