ViewGraph: See a UI Bug, Fix It in Seconds with AI | Kiro IDE

ViewGraph is the UI context layer for AI coding agents. Click a broken element in the browser, describe what's wrong, and your AI agent fixes the code with full DOM context.

This demo shows the complete workflow:
- A broken login page with obvious visual bugs
- Click the ViewGraph extension to start annotating
- Click elements, describe what's wrong, set severity
- Send annotations to the AI agent
- Kiro IDE reads the annotations and fixes the code inline
- Reload - everything fixed

What the agent receives with each annotation:
- Exact CSS selector and computed styles
- Bounding box and layout position
- Accessibility state (ARIA roles, labels)
- Network errors and console warnings
- Your comment describing what to fix

No screenshots with arrows. No copy-pasting from DevTools. The agent sees what you see in the browser.

Works with Kiro, Claude Code, Cursor, Windsurf, Cline, and any MCP-compatible agent.

---

🔗 Links:
- Documentation: https://chaoslabz.gitbook.io/viewgraph
- Tutorial: https://chaoslabz.gitbook.io/viewgraph/tutorials/accessibility-audit
- Kiro Power Commands: https://chaoslabz.gitbook.io/viewgraph/features/kiro-power
- GitHub: https://github.com/sourjya/viewgraph
- npm: https://www.npmjs.com/package/@viewgraph/core

🧩 Extensions:
- Firefox: https://addons.mozilla.org/en-US/firefox/addon/viewgraph-capture
- Chrome: Pending Approval

Part of the "Evolving with AI" series - tools, workflows, and ideas for the AI-native developer

Видео ViewGraph: See a UI Bug, Fix It in Seconds with AI | Kiro IDE канала Evolving with AI