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. For monorepos, pass --app-name and --app-dir to register a specific app; re-run the command to register additional apps in the same repo.

Verify

npx iterate doctor

Runs preflight checks: registered apps resolve, the daemon port is free, env files parse, package managers are installed, and so on. Fix any ✗ items before continuing.

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-ui-mcp"]
    }
  }
}

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