At a Glance:
Frontman is an open-source AI coding agent that runs in the browser as dev server middleware, letting you click any element in a running app and describe changes in plain English to edit actual source files with hot reload for Next.js, Astro, and Vite.
Overview:
Frontman is an AI-powered frontend editing agent that operates directly in the browser. It integrates as middleware into a local development server for Next.js, Astro, or Vite (React, Vue, Svelte) projects. Instead of working from source files alone, Frontman reads the live DOM, component tree, computed CSS, routes, and server logs to understand the running application. Users click an element in their rendered app, describe the desired change, and Frontman edits the correct source file, which then hot-reloads instantly. It is designed for developers who need richer context than terminal-based tools provide, as well as for designers and product managers who want to iterate on copy, spacing, or layout without opening an IDE, with all diffs going through the team’s normal review process.
Key Decision Points:
Runs as dev server middleware: Frontman hooks into the local Next.js, Astro, or Vite dev server and only operates in development mode; it is stripped from production builds, so deployment bundles remain unchanged.
Browser-based editing interface: All interactions happen through a chat overlay at
localhost/frontmanwhere users click elements and describe changes, rather than working inside a code editor or IDE.Reads rendered output, not just source files: The agent queries live DOM, computed CSS, component tree, and server logs, allowing it to understand what the browser actually displays.
Bring-your-own-key model support: Users connect directly to Anthropic (Claude), OpenAI (ChatGPT), or OpenRouter and pay their LLM provider directly; self-hosting is free under the Apache 2.0 (client) / AGPL-3.0 (server) licenses.
Works alongside other AI tools: Frontman is positioned as complementary to tools like Cursor, GitHub Copilot, and v0, focused specifically on visual frontend editing from the browser rather than IDE-based coding or code generation.
Core Features:
Element-click editing: Click any element in the running application, describe changes in plain English, and Frontman identifies the source file to edit.
Live context ingestion: Reads the DOM tree, computed CSS styles, component tree, server-side routes, and server logs from the dev server.
Instant hot reload: Edited source files are updated with hot module replacement so changes appear immediately.
Framework integration: Provides specific middleware for Next.js (App Router and Pages Router, including Turbopack), Astro (Islands architecture, content collections, SSR/hybrid), and Vite (auto-detects React, Vue, or Svelte).
OpenClaw skill: Available as an installable skill for OpenClaw, adding component tree awareness, computed CSS, source map resolution, and hot reload feedback to that agent.
LLM provider flexibility: Supports direct API keys or OAuth for Anthropic and OpenAI, plus OpenRouter for access to models like Claude, GPT, Llama, and Mistral.
Use Cases:
Frontend developers: Get richer context for AI-assisted edits by working from the live rendered page and component tree rather than source files alone.
Designers and product managers: Adjust copy, spacing, colors, or layout directly in the browser without opening a code editor, with all changes submitted as standard diffs.
Teams with design-to-engineering handoffs: Anyone on the team can iterate on the frontend visually, reducing back-and-forth over small visual adjustments.
Open-Source Alternative Value:
Frontman provides an open-source, browser-first model for AI-assisted frontend editing that is distinct from IDE-based or sandboxed tools. Its value lies in reading the actual rendered application state—DOM, computed CSS, and server context—rather than relying solely on source files. The project is self-hosted and free under Apache 2.0 (client libraries) and AGPL-3.0 (server) licenses, with a bring-your-own-key approach that lets users connect their own LLM provider. It also surfaces its approach as complementary to other AI coding tools, offering an editing interface that can be used alongside tools like Cursor, GitHub Copilot, or v0 when visual, in-browser editing is needed.