frontman ai/frontman

Frontman is an open-source AI coding agent that lives in your browser. It hooks into your dev server as middleware and sees the live DOM, component tree, CSS styles, routes, and server logs. Click any element in your running app, describe what you want changed in plain English, and Frontman edits the actual source files with instant hot reload. It supports Next.js, Astro, and Vite (React, Vue, Svelte). Free and open-source — Apache 2.0 (client libraries) / AGPL-3.0 (server). Bring your own API keys (Claude, ChatGPT, or OpenRouter).

Who Is This For?

Frontend developers who want richer context than terminal-based AI tools provide. Frontman reads the rendered page, not just the source files, so it knows what your CSS actually computes to and which component renders which DOM node.

Designers and product managers who want to change copy, adjust spacing, fix colors, or explore layout ideas without opening an IDE. They click the element they want to change, describe the edit, and the source code updates. The diff goes through your team's normal review process.

Teams where the back-and-forth between design and engineering costs more time than the actual change. Frontman lets anyone on the team iterate on the frontend directly.

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 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 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.

How It Works

1. A developer adds Frontman to the project — one command, works with Next.js, Astro, and Vite.
2. Anyone on the team opens the app in their browser — navigate to localhost/frontman to get a chat interface alongside a live view of your app.
3. Click any element and describe the change — Frontman sees the element's position in the component tree, its computed styles, and the server-side context. It edits the right source file and hot-reloads.

The framework integration turns your local dev server into an MCP server 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).

Frontman only runs in development mode. Production builds strip it out. Your deployment bundle is identical whether Frontman is installed or not.

Quickstart

Next.js

npx @frontman-ai/nextjs install
npm run dev
# Open http://localhost:3000/frontman

Works with App Router and Pages Router. Compatible with Turbopack.

See the Next.js integration guide for details.

Astro

astro add @frontman-ai/astro
astro dev
# Open http://localhost:4321/frontman

Listed on the Astro integration registry. Understands Islands architecture, content collections, and SSR/hybrid modes.

See the Astro integration guide for details.

Vite (React, Vue, Svelte)

npx @frontman-ai/vite install
npm run dev
# Open http://localhost:5173/frontman

Auto-detects your framework from vite.config. Works with React, Vue, and Svelte — including SvelteKit.

See the Vite integration guide for details.

AI Model Support

Frontman uses BYOK (bring your own key). Connect any LLM provider:

• Anthropic (Claude) — direct API key or OAuth with your Claude subscription
• OpenAI (ChatGPT) — direct API key or OAuth with your ChatGPT subscription
• OpenRouter — access to Claude, GPT, Llama, Mistral, and hundreds of other models

You pay your LLM provider directly at their standard rates. There are no prompt limits, usage caps, or subscription fees from Frontman.

Architecture

┌─────────────────────────────────────────────────┐
│ Browser                                         │
│ ┌─────────────────┐  ┌────────────────────────┐ │
│ │ Your Running App│  │ Frontman Overlay        │ │
│ │                 │  │ (chat + live preview)   │ │
│ └────────┬────────┘  └───────────┬────────────┘ │
│          │                       │              │
│  ┌───────▼───────────────────────▼──────────┐   │
│  │ Browser-side MCP Server                  │   │
│  │ DOM tree, computed CSS, screenshots,     │   │
│  │ element selection, console logs          │   │
│  └──────────────────┬───────────────────────┘   │
└─────────────────────┼───────────────────────────┘
                      │
┌─────────────────────┼───────────────────────────┐
│ Dev Server          │                           │
│  ┌──────────────────▼───────────────────────┐   │
│  │ Framework Middleware                     │   │
│  │ (Next.js / Astro / Vite plugin)         │   │
│  │ Routes, server logs, compiled modules,  │   │
│  │ source maps, build errors               │   │
│  └──────────────────┬───────────────────────┘   │
└─────────────────────┼───────────────────────────┘
                      │
┌─────────────────────┼───────────────────────────┐
│ Frontman Server     │  (Elixir/Phoenix)         │
│  ┌──────────────────▼───────────────────────┐   │
│  │ AI Agent Orchestrator                    │   │
│  │ Queries MCP tools, generates edits,      │   │
│  │ writes source files, triggers hot reload │   │
│  └──────────────────────────────────────────┘   │
└─────────────────────────────────────────────────┘

Contributing

Contributions are welcome! Please read the Contributing Guide to get started.

License

This project uses a split license model:

• Client libraries and framework integrations (libs/) — Apache License 2.0
• Server (apps/frontman_server/) — GNU Affero General Public License v3

See the respective LICENSE files for details.

Star History

Links

• Website
• GitHub Pages
• Documentation
• Integrations
• Comparisons — Frontman vs OpenClaw, Cursor, Copilot, v0, Stagewise
• Changelog
• Issues
• Discord