Platform
Inspect-to-prompt for serious AI software delivery
Click any element in the running app to reference it in your next prompt — so the change lands on the thing you pointed at, not the thing the AI guessed.
Inspect-to-prompt is a Ciao Builder feature that lets you click any element in the live preview — a button, table, chart or form field — and reference it directly in your next prompt. Unlike describing UI in words and hoping the AI counts the same cards you do, inspect-to-prompt makes the target unambiguous, so edits land scoped to the selected component with a small, reviewable diff.
Published 2026-07-03 · Last updated 2026-07-03
Most failed prompts are bad addresses, not bad ideas
"Make the third card smaller" works right up until the AI counts different cards than you do. Describing a user interface in words is a lossy exercise: your "header", the model's "header" and the code's "header" may be three different things. Ambiguity goes in, the wrong edit comes out, and you spend the next three prompts undoing damage to elements you never mentioned.
Inspect-to-prompt removes the addressing problem. The app runs live beside the chat while it is built; click any element in that preview and it is referenced in your next prompt. The Builder knows exactly which component you mean — no counting, no describing, no vocabulary negotiation.
It is a small interaction with outsized consequences. The Builder pairs a conversation with a running application precisely so that pointing is possible — the preview is not a demo pane, it is a shared frame of reference between you and the AI.
How inspect-to-prompt works
The loop takes seconds, and it is the same for a founder polishing a landing page and an engineer adjusting an admin table.
1. Open the live preview
The application runs beside the conversation as it is built — real components, real data structures, real clicks.
2. Click the element you mean
A button, a table column, a chart, a form field, a stray label. Selection works on the running app, not a screenshot.
3. It becomes part of your next prompt
The selected element is referenced directly in the prompt, so the Builder resolves it to the exact component in the code.
4. Describe the change in plain language
"Make this a dropdown", "move this above the summary", "this should only show for admins." The what stays natural; the where is already settled.
5. The edit lands scoped
The change targets the selected component, producing a small diff on a real git branch instead of a speculative rewrite.
6. Verify on the spot
The preview updates beside the chat. If it is still not right, click again — undo and checkpoints make iteration cheap.
Why it matters
Precision compounds. When edits land where you pointed, iterations drop, diffs shrink, and review gets easier — a reviewer confirming "the selected button changed" works faster than one auditing a rewrite. Small, scoped changes are also exactly what Guardrails and QA are best at gating.
It also widens who can direct work. A founder, designer or client does not need CSS vocabulary to say what they mean — they point at the running app. The gap between "person who sees the problem" and "person who can express the fix" closes to a click.
Teams feel the difference most during feedback rounds. A review call where requested changes land while people watch is a different product relationship than a call that produces a ticket list for next week.
Who uses inspect-to-prompt
Anyone who can see the problem can now address it precisely:
- Founders and designers — Polish interfaces by pointing, without learning the difference between padding and margin.
- Agencies — Turn "move that there" client feedback into exact edits during review calls, not after them.
- Product managers — Direct changes to the precise element a stakeholder complained about, with no ticket translation loss.
- Developers — Scope AI edits tightly so diffs stay small and reviews stay fast.
Security and governance notes
Precision does not loosen the rules — pointed changes go through the same gates as typed ones.
- ✓ Scoped edits produce small, reviewable diffs on real git branches.
- ✓ Every change — pointed or typed — passes Guardrails policy review before merge.
- ✓ The append-only audit trail records the prompt and the resulting change together.
- ✓ Undo and checkpoint restore make any misfire recoverable in seconds.
- ✓ Role-based access control governs who can edit and who can merge.
Describing UI changes: words alone vs inspect-to-prompt
The comparison stops being subtle after the first afternoon of working both ways.
| Words alone | Inspect-to-prompt | |
|---|---|---|
| Targeting | Depends on shared vocabulary and counting | Click the exact element in the running app |
| Iterations | Several attempts while descriptions are refined | Fewer — the reference is unambiguous |
| Side effects | Edits can land on lookalike elements | Scoped to the selected component |
| Diff size | Often larger than the request | Small and tied to one element |
| Who can direct work | People fluent in UI vocabulary | Anyone who can point at the problem |
Frequently asked questions
Does inspect-to-prompt work on any part of the app?
You can select elements across the running interface — buttons, tables, charts, forms, labels — because the live preview is the real application, not an image. The selection resolves to the actual component in the generated React and TypeScript code.
Do I need to understand the code to use it?
No. You point at the element and describe the change in plain language. The Builder handles the mapping from the selected element to the component in code, and the diff is there for anyone who does want to read it.
What about changes that affect many elements at once?
Describe the pattern in the prompt — "apply this style to all summary cards" — or queue a sequence of scoped changes with the prompt queue. Inspect-to-prompt is for precision; it does not stop you from making broad changes when you want them.
Is there a record of what was selected and changed?
Yes. Each change is a diff on a git branch, and the append-only audit trail records prompts, merges and deploys. Reviewers can see what was asked and exactly what changed.
Is inspect-to-prompt included in self-serve plans?
Yes — it is a core Builder capability, and individual builders start self-serve with credits. Serious production programs start at USD 10,000 per year.