Overview:
Frontman is an open-source AI coding agent that runs in the browser and edits the source files of a running web application. Unlike terminal-based AI tools that operate solely on source code, Frontman hooks into a local dev server as middleware to read the live DOM, computed CSS, component tree, and server logs. Users click an element in the rendered app, describe the desired change in plain English, and Frontman edits the actual source files with hot reload. It is designed for frontend developers who need richer visual context, as well as designers and product managers who want to make UI changes without opening an IDE.
Core Features:
Live DOM & CSS context: Reads the rendered page's DOM tree, computed CSS styles, component tree, and server logs to provide richer context than source-file-only AI tools.
Browser overlay editing interface: Users click any element in the running app to select it, then describe the change in natural language directly from the browser.
Source file editing with hot reload: Edits the actual source files in the codebase and triggers instant hot reload, preserving the existing project structure.
Supports Next.js, Astro, and Vite: Integrates via framework middleware; works with React, Vue, and Svelte, including SvelteKit and Astro's Islands architecture.
BYOK (Bring Your Own Key) model: Connects to Claude, ChatGPT, or OpenRouter using the user's own API key or OAuth subscription; no usage caps or subscription fees from Frontman.
Development-only operation: Only runs in development mode and is stripped out of production builds, ensuring the deployment bundle is unchanged.
Use Cases:
Frontend developers editing visual UI: Developers can click a misaligned element or a broken style in the browser, describe the fix, and let Frontman edit the correct source file with hot reload.
Designers adjusting copy, colors, or spacing: Designers and product managers can change text, fix colors, or adjust layout spacing without opening an IDE or needing to understand the codebase structure.
Teams reducing design-to-engineering handoff time: Teams where back-and-forth between design and engineering is costly can let non-developers iterate on frontend changes directly, with the diff going through the normal review process.
Aligning AI editing with rendered output: Users of Cursor or Copilot for backend work can switch to Frontman when they need to see what they're editing in the browser for visual frontend tasks.
Why It Matters:
Frontman is an open-source tool that provides AI-driven visual frontend editing by starting from the rendered browser state rather than source files alone. It is self-hosted locally (dev server middleware), accepts user API keys, and is licensed under Apache 2.0 (client libraries) or AGPL-3.0 (server). Because it edits the existing codebase and requires no sandbox or generated snippets, it supports an iterative, team-based workflow where designers or PMs can propose UI changes that go through normal code review. The transparency of being open source and operating only in development mode makes its scope of control clear and verifiable.