iterate-ui
v0.1.20
Published
Explore multiple versions of your app simultaneously with agents from a minimal toolbar overlay in your browser
Maintainers
connorwhiteReadme
Explore multiple versions of your app simultaneously with agents from a minimal toolbar overlay in your browser.
How it works
- Create iterations (worktrees) from the press of a button, or enter /iterate:prompt in a Claude session followed by whatever you want to riff on.
- Explore iterations instantly from the toolbar tabs.
- Add context — use the select, draw, and move tools by pointing at elements and areas to add feedback, or moving them around in real-time.
- Pick a direction and merge changes back to your base branch with a single click.
- Repeat as needed whenever you need to riff on an idea!
Quick Start
With Claude Code skills:
npx skills add connorwhite-online/iterateThen in Claude Code, run /iterate — it detects your framework, installs the adapter, and configures everything.
Manual setup
npm i iterate-ui
npx iterate initNext.js
Wrap your config and add the <Iterate /> component to your root layout:
// next.config.mjs
import { withIterate } from 'iterate-ui-next'
export default withIterate(nextConfig)// app/layout.tsx
import { Iterate } from "iterate-ui-next/devtools"
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<Iterate />
</body>
</html>
)
}
#### Vite
```ts
// vite.config.ts
import { iterate } from 'iterate-ui-vite'
export default defineConfig({ plugins: [react(), iterate()] })Docs
Read the full documentation here: iterate-ui.com
License
MIT