frontloop

Why · How it compares · Install · Skills · Security · Requirements · Roadmap

Why

• Efficient: The current workflow for making UI changes with coding agents is disjointed and inefficient. You have to switch between your running app (browser), the coding agent and your IDE. You have to describe the element, its styles, and its context in text prompts, which is less precise and more time-consuming than direct interaction. Frontloop sends structured DOM context directly to the agent — selector, computed styles, component hierarchy, and the exact source file and line number — so it opens the right file immediately and makes the edit in one step, no grep required.
• Time & Token saving: When you say "remove the due date column on invoice page", Less context for the agent leads to more back-and-forth using grep and slower iterations. With full DOM context, coding agents can make precise edits in one step, saving tokens and time.
• Intuitive: Faster iterations with real-time feedback enable a more intuitive and efficient workflow. You can see the impact of your changes immediately, make adjustments on the fly, and achieve the desired result in fewer steps.
• Agent-agnostic: The WebSocket server and DOM inspector work with any coding agent that can read from a WebSocket endpoint. Claude Code is supported today. Cursor, Copilot Workspace, Gemini CLI, and Windsurf are planned. Same browser extension, same payload, same workflow.

How it compares

• Cursor's visual editing — sends a screenshot to the agent. Frontloop sends the component tree, selector, and computed styles. The agent locates the right file directly instead of grepping from a pixel description.
• Replit Ghostwriter — click-to-edit exists but you're inside Replit's cloud IDE. Frontloop works with your local codebase and any agent.
• Builder.io / TeleportHQ / Anima — design-to-code or CMS tools. They generate or manage content; they don't edit live source files in response to agent prompts.
• GitHub Copilot — IDE-first. No browser DOM inspector, no WebSocket live context.

Install

Claude Code

/plugin marketplace add tamal-thetaonelab/frontloop
/plugin install frontloop

Other agents (Amp, Antigravity, Cline, Codex, Cursor, Deep Agents, Dexto, Firebender, Gemini CLI, GitHub Copilot, Kimi Code CLI, OpenCode, Warp)

Frontloop utilizes Monitor tool for intercepting incoming requests from the browser annotation but the tool is only available in Claude Code for now. I am waiting for other agents to support similar tools or WebSocket connections to enable integration. Planned additions: Cursor, GitHub Copilot Workspace, Gemini CLI, Windsurf.

Skills

/live-ui-generation

Click any element on your running app. Describe the change. The coding agent receives the full DOM context — selector, outer HTML, computed styles, container context, exact source file + line, and page URL — opens the file directly at the right line, and hot reload delivers the result. Made a mistake? Hit Undo and the agent reverts it.

A shimmer appears over the selected element while the agent works and clears on completion.

https://github.com/user-attachments/assets/ef06260e-0559-4a7f-8f00-5a5f96bd7b5b

Other visual editing tools give the agent the rendered page. Frontloop gives it the component tree.