Providing Context

iterate captures rich, structured context about your UI feedback and provides two ways to hand it to an AI agent. Both workflows produce the same information — they differ only in delivery.

Workflow 1: Submit to agent (MCP)

When you have an MCP-connected agent, changes are visible to the agent automatically via MCP tools:

Make changes — use the select, draw, and move tools to pin-point contextual changes for the agent.
Trigger the agent — in Claude Code, run /iterate:go. The agent fetches changes, reads source files, implements them, and resolves each one.
See results instantly — dev server hot-reloads. Changes transition from pending to resolved in the overlay.

Workflow 2: Copy context

This works with any AI agent — Claude Code, ChatGPT, Cursor, or anything that accepts text input.

Make changes — use the select, draw, and move tools to pin-point contextual changes for the agent.
Copy — click the Copy button. Structured markdown is placed on your clipboard.
Paste — into your agent of choice. The structured context gives it everything it needs.

What gets copied

The Copy button produces structured markdown like this:

# UI Feedback from iterate

**Iteration**: iteration-a

## 1. "Make this button bigger"
- Intent: change | Severity: suggestion
- **Elements** (1):
  - **<Button>** — `src/components/Hero.tsx:42`
    Selector: `.hero-section > button.cta`
    Size: 120×40 at (300, 500)
    Text: "Get Started"
    Styles: font-size: 14px, padding: 8px 16px, ...

## DOM Changes (1)
- **move** on <NavItem> — `src/components/Nav.tsx:15`
  Before: 200×40 at (0, 0) → After: 200×40 at (50, 0)

What context gets captured

For each annotated element, iterate captures:

React component name — injected by the Babel plugin at build time
Source file location — file path and line number (e.g. src/components/Hero.tsx:42)
CSS selector — a unique selector path to the element
Computed styles — font-size, padding, color, background, and other relevant properties
Bounding box — width, height, and position on screen
Text content — the visible text inside the element
Text selections — if you highlighted specific text within an element

Architecture

MCP tools reference

These tools are available to any MCP-connected agent:

Tool	Description
`iterate_list_iterations`	List all active iterations (worktrees with dev servers)
`iterate_create_iteration`	Create a new iteration (git worktree + dev server)
`iterate_pick_iteration`	Pick a winning iteration — merge to base and remove all others
`iterate_remove_iteration`	Remove a specific iteration
`iterate_list_changes`	List all user-submitted changes with elements, components, and status
`iterate_get_dom_context`	Get full DOM context for a specific change
`iterate_start_change`	Mark a change as in-progress
`iterate_implement_change`	Mark a change as implemented with a summary
`iterate_get_pending_changes`	Get all queued changes that need attention
`iterate_get_pending_batch`	Get all queued changes and DOM changes from the latest batch
`iterate_get_command_context`	Get the context for the latest /iterate command
`iterate_connection_status`	Check daemon connection health