Frontloop instruments your running dev app in the browser. Click any element, describe the change, and structured DOM context — selector, computed styles, React component hierarchy, **exact source file + line**, and page URL — streams to your coding agent over WebSocket. The agent opens the right file at the right line and edits it directly. Hot reload delivers the result.
Why · How it compares · Install · Skills · Security · Requirements · Roadmap
Want a hosted, no-setup version? Check out frontloop.dev.
- 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
grepand 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.
| ✅ Best for | Iterating on existing UI — running app, dev server, want fast visual changes |
| Greenfield layout work, pure logic changes, or projects without hot reload |
- 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.
/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.
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.
employee-submenu-demo-2x-cut2.mov
Other visual editing tools give the agent the rendered page. Frontloop gives it the component tree.
{
"id": "a3f9bc12",
"type": "dom-fix",
"prompt": "make this card background light grey and increase padding to 24px",
"element": {
"selector": "#employee-card > div.header",
"tag": "div",
"html": "<div class=\"header\">...</div>",
"text": "Employee Card",
"styles": { "background": "rgb(255,255,255)", "padding": "16px" },
"componentHierarchy": "EmployeeCard (EmployeeList > AppRoot)",
"sourceLocation": "components/employee/EmployeeCard.tsx:42"
},
"container": { "title": "Employee Card", "dataKeys": ["Name", "Role"] },
"pageTitle": "Employees — MyApp",
"page": "http://localhost:4300/app/employee",
"consoleErrors": {
"mode": "minimal",
"errors": [
{ "message": "TypeError: Cannot read properties of undefined (reading 'id')", "stack": "", "timestamp": 1747526400000 }
]
}
}New in 0.3:
sourceLocationpinpoints the exact source file and line of the clicked React component — extracted from React fiber internals (_debugStackon React 19,_debugSourceon React 16–18 with Babel). The agent opens the file directly instead of searching. Works automatically with Vite + React; no config needed.
Not a CSS override. A real source edit with full codebase context.
How it works:
- A floating button (FAB) appears in your browser in dev mode
- Hover to expand: the FAB transforms to ✛ Inspect and reveals [] Screenshot and ↩ Undo dial items
- Clicking the FAB starts Inspect mode directly — click an element, describe the fix, orange shimmer appears while the agent works
- In Screenshot mode, drag a box around any area and describe the fix — an indigo shimmer appears
- In Undo mode, the agent reverts the last change and reloads the page
- Both panels include a "Send console errors" checkbox — when checked, captured
console.errorcalls are included in the task payload so the agent can diagnose issues without asking - A local WebSocket server (port 7332) streams the task payload to Claude Code as a real-time notification; a companion HTTP server (port 7333) receives the completion signal back from Claude
- The agent opens the source file at the exact line from
sourceLocation(falling back to component hierarchy when unavailable), makes the edit, runs a TypeScript type check, then sends a completion signal to port 7333 - Shimmer clears, HMR delivers the change. If HMR may not apply, a reload signal is sent instead.
- Both servers shut down when the Claude Code session ends
Framework support:
- ✅ React (Vite)
- ✅ React (CRA / CRACO)
- ✅ Next.js (App Router)
- ✅ Vue 3 (Vite)
- ✅ Angular
/plugin marketplace update frontloop-dev
Auto-update: You can enable automatic updates at startup via /plugin → Marketplaces → select frontloop-dev → Enable auto-update.
⚠️ Auto-update pulls and executes new plugin code at Claude Code startup. Review the CHANGELOG before enabling it so you know what changed. Auto-update is off by default for third-party marketplaces.
Remove the plugin and marketplace from Claude Code:
/plugin uninstall frontloop@frontloop-dev
/plugin marketplace remove frontloop-dev
Removing the marketplace also uninstalls any plugins you installed from it.
Remove the infrastructure from your project (server file, mock files, provider wiring):
/live-ui-generation stop
Frontloop is a dev-only tool. The DOM inspector is gated behind import.meta.env.DEV / NODE_ENV !== 'development' in every framework integration — it is never active in production builds.
What runs locally:
| Component | Port | Binds to | Auth | Lifetime |
|---|---|---|---|---|
| WebSocket server | 7332 | 127.0.0.1 only |
none | Claude Code session |
| HTTP completion server | 7333 | 127.0.0.1 only |
none | Claude Code session |
Both servers bind to 127.0.0.1 — not reachable from other hosts on your network. They start when you invoke /live-ui-generation and stop when the Claude Code session ends. No data is sent to any external host.
What Claude writes:
Clicking an element and submitting a prompt triggers a direct source file edit with no intermediate confirmation step. This is intentional — the workflow is designed for fast iteration. If you want to review before applying, use your version control (git diff) and the built-in Undo action to revert the last edit.
Stopping the servers manually:
If you need to stop the servers without ending the session:
lsof -ti :7332,:7333 | xargs kill 2>/dev/nullDOM data:
The browser script reads the clicked element's selector, outer HTML, computed styles, component hierarchy, and current page URL. No data leaves your machine — everything is sent to localhost only.
- Claude Code
- Node.js 18 or higher
- Dev server running before invoking the skill (for WebSocket connection and DOM context)
Side effects per edit:
- Writes to one source file in your project
- Runs
npx tsc --noEmiton your project to verify no type errors were introduced - Sends
POST http://127.0.0.1:7333/complete/<taskId>to signal completion to the browser
A complete mock backend layer using Mock Service Worker. The agent reads your existing API calls, generates stateful MSW handlers, wires up working auth without touching production code, and verifies every route renders correctly.
Run your frontend entirely offline. Demo without a real backend. Build features before the API exists.
live-ui-generation works with Claude Code today. The WebSocket server and DOM inspector are agent-agnostic — but consuming the task asynchronously requires a tool like Monitor which is currently only available in Claude Code.
Planned: Cursor, GitHub Copilot Workspace, Gemini CLI, Windsurf.
Planned additions: React Native web (Expo), Nuxt, SvelteKit (non-Vite).
New plugins and skills welcome. Fixing bugs, improving docs, and expanding agent or framework support are all great ways to contribute.
Built with ❤️ by Tamal Sen - A bengali coder turned entrepreneur. More about me at Linkedin.