Get started

CLI coding agents

A visual UI editor for CLI coding agents

CLI coding agents — Claude Code, Gemini CLI, Codex CLI, opencode, Grok Build, and others — are excellent at reading and writing code from the terminal. But they have no eyes: they cannot see the page your code renders.

Modify is the browser-side companion for that workflow. You make the UI change visually in Chrome; Modify converts it into a structured prompt; your agent applies it to source with exact values, first try.

Install free - give your CLI agent eyes

Free. No credit card required.

Read docs

Visual prompt handoff

Edit the page first.
Then prompt the AI.

Modify is designed for the last-mile UI changes that are obvious on screen but expensive to describe in chat.

Exported prompt includes

Target

Element selector and page context

Change

CSS property or visual operation

Before

Original value from the live page

After

Approved value after visual editing

The blind spot in terminal-first frontend work

When a terminal agent builds UI, verifying the result means switching to the browser — but feeding what you see back into the terminal means describing pixels in prose. "The card is too wide and the button should sit closer to the edge" forces the agent to guess numbers.

Screenshots help the agents that accept them, but a screenshot still makes the agent infer which selector and which CSS property produce the fix. A measured delta removes the inference entirely.

How Modify works with a CLI agent

  1. Step 1

    Open your dev server page (or the deployed site) in Chrome.

  2. Step 2

    Adjust elements visually with Modify: drag, resize, recolor, edit text, tune spacing.

  3. Step 3

    Click Copy AI Prompt to get selectors, old values, new values, and page context as plain text.

  4. Step 4

    Paste it into your terminal session — Claude Code, Gemini CLI, Codex CLI, opencode, or any agent — and it edits the right files.

Works with every agent, because it is just text

There is no plugin to install per agent and no MCP server to configure. The exported prompt is structured plain text, so it works identically in Claude Code, Gemini CLI, Codex CLI, opencode, Grok Build, aider, or a raw chat session.

That also means your workflow survives tool churn: if you switch agents next month, the visual editing layer stays the same.

Tips for terminal workflows

  • Batch related tweaks on one component into a single exported prompt; keep unrelated fixes separate.
  • Tell your agent which directory or component owns the page if the repo is large — the selector plus your hint pins it down fast.
  • After the agent applies the change, hard-refresh and compare; export a follow-up delta only if something is still off.
  • For responsive fixes, make the edit at the breakpoint where it matters and mention the viewport in your paste.

FAQ

Which CLI agents does Modify support?

All of them. Modify outputs plain structured text, so Claude Code, Gemini CLI, Codex CLI, opencode, Grok Build, aider, and any future terminal agent can consume it without integration work.

Why not just paste a screenshot into the agent?

A screenshot shows the problem but not the fix. Modify hands the agent the exact selector, property, and target value, so it does not have to guess measurements from pixels.

Does Modify need access to my repository or terminal?

No. Modify runs entirely in Chrome on the rendered page. Your agent keeps full control of the codebase; Modify only supplies the visual intent.