The AI agent that lives in your framework/browser
Let product and design ship frontend fixes without opening an IDE
[Frontman](https://frontman.sh) is an open-source AI coding agent that lives in your browser. Click any element in your running app, describe the change in plain English, and Frontman edits the actual source files with instant hot reload. It sees the live DOM, component tree, computed CSS, routes, source maps, and server logs, so non-technical teammates can make precise frontend fixes without guessing which file owns the UI.
Docs ·
Next.js ·
Astro ·
Vite ·
Discord ·
Demo
## What You Can Ask Frontman
Frontman is built for small frontend changes that usually get stuck in design QA, product review, or internal tooling backlogs:
## Who Is This For?
Product managers and designers who need to fix copy, spacing, colors, layout issues, and internal UI polish without waiting for a developer to open an IDE.
Frontend developers who want richer context than terminal-based AI tools provide. Frontman reads the rendered page, not just source files, so it knows what your CSS computes to and which component renders each DOM node.
Teams where the handoff costs more than the actual change. Frontman lets teammates make the edit in-browser, then send the diff through your normal review process.
## How Frontman Compares to Other AI Coding Tools
Most AI coding tools work from source files and never see the running application. Frontman takes the opposite approach — it starts from the browser and works backward to the source.
| Frontman | Cursor | GitHub Copilot | v0 | |
|---|---|---|---|---|
| Context | Live DOM, computed CSS, component tree, server logs | Source files in IDE | Source files in IDE | Sandboxed preview |
| Editing interface | Browser overlay | IDE (VS Code fork) | IDE extension | Web app |
| What it edits | Your existing codebase | Your existing codebase | Your existing codebase | Generates new code |
| Sees rendered output | Yes (framework middleware) | No | No | Own sandbox only |
| Open source | Yes (Apache 2.0 / AGPL-3.0) | No | No | No |
| Best for | Visual frontend editing, designer/PM collaboration | Full-stack IDE replacement | Autocomplete, code review | Generating new UI from scratch |
Frontman and these tools are complementary. Many developers use Cursor or Copilot for backend work and general refactoring, then switch to Frontman when they need to see what they're editing in the browser.
## Works with OpenClaw
Frontman is available as an [OpenClaw](https://openclaw.ai) skill. Install it to give your AI agent specialized frontend editing capabilities — component tree awareness, computed CSS, source map resolution, and hot reload feedback that OpenClaw's general browser tool doesn't have.
openclaw skill install frontman-dev
Use OpenClaw for general-purpose automation (shell, messaging, files). Use Frontman for precise visual editing in your codebase. [Read the comparison](https://frontman.sh/vs/openclaw/).
## How It Works
localhost/frontman to get a chat interface alongside a live view of your app.The framework integration turns your local dev server into an [MCP server](https://modelcontextprotocol.io/) that the AI agent queries for both client-side context (DOM tree, computed CSS, screenshots, element selection) and server-side context (routes, server logs, query timing, compiled modules).
## Quickstart
### Next.js
npx @frontman-ai/nextjs install # If your project uses src/: mv proxy.ts src/proxy.ts npm run dev # Open http://localhost:3000/frontman
Works with App Router and Pages Router. Compatible with Turbopack.
See the [Next.js integration guide](https://frontman.sh/docs/integrations/nextjs/) for details.
### Astro
npx astro add @frontman-ai/astro npm run dev # Open http://localhost:4321/frontman