Installation

iterate works with React projects using Next.js or Vite. The fastest path is through the Claude Code slash command, but you can also set things up manually.

Claude Code setup

Install the skill:

npx skills add connorwhite-online/iterate

Restart your Claude Code session to load the new slash commands, then run:
```
/iterate
```
You're all set! With your app running, restart your Claude session again to connect the MCP server.

Manual setup

If you prefer to configure things yourself:

Install

npm i iterate-ui

Initialize

npx iterate init

This detects your package manager and dev command, then creates .iterate/config.json.

Next.js

Wrap your config with withIterate 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

Add the iterate() plugin:

vite.config.ts

import { iterate } from 'iterate-ui-vite'

export default defineConfig({
  plugins: [react(), iterate()]
})

What gets created

File	Purpose
`.iterate/config.json`	Project configuration (package manager, dev command, port)
`.mcp.json`	Registers the iterate MCP server with Claude Code
`.claude/settings.json`	Registers the iterate plugin so slash commands are available

MCP configuration

The .mcp.json file registers the MCP server so your agent can interact with iterate:

.mcp.json

{
  "mcpServers": {
    "iterate": {
      "command": "npx",
      "args": ["iterate-mcp"],
      "env": { "ITERATE_DAEMON_PORT": "4000" }
    }
  }
}

If you're using a different MCP-compatible agent, point it at the iterate-mcp binary.

Packages

Package	Description
`iterate-ui-core`	Shared types, WebSocket protocol, batch formatter
`iterate-ui-cli`	CLI commands: init, branch, list, pick, serve, stop
`iterate-ui-daemon`	Fastify server: worktree manager, reverse proxy, WebSocket hub
`iterate-ui-overlay`	React overlay: toolbar, selection panel, annotation badges, move tool
`iterate-ui-mcp`	MCP server for AI agent integration
`iterate-ui-vite`	Vite plugin — auto-injects overlay in dev mode
`iterate-ui-next`	Next.js plugin — auto-injects overlay in dev mode
`iterate-ui-babel-plugin`	Babel plugin — injects component names + source locations