frontman

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

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:

• "Fix this element across all browsers and devices" — select the broken UI, explain the issue, and Frontman uses browser context plus source maps to update the right component or styles.
• "Fix this button on an internal sub-page" — navigate to the exact route, click the button, and Frontman edits the source behind that rendered element.
• "Change the empty-state copy across the app" — describe the messaging change once and review the generated diff before it lands.
• "Make the mobile cards match desktop spacing" — Frontman reads computed CSS and layout context instead of relying only on static source files.

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

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.

Need setup help? Join the Discord or open a GitHub issue.

Supported Stacks

Framework integrations run in development mode only. Production builds strip Frontman out, so your deployed bundle is identical whether Frontman is installed or not.

AI Model Support

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

• OpenAI — GPT and Codex models
• Anthropic — Claude Pro/Max models
• OpenRouter — Claude, GPT, Gemini, Kimi, MiniMax, and hundreds of other models
• Fireworks AI, NVIDIA, Google, and xAI

You pay your LLM provider directly at their standard rates. Self-hosting remains free under the project's open-source licenses; hosted Frontman service plans are moving to paid subscriptions.

Self-Hosting and License

Frontman is open source and can be self-hosted from source. Official hosted and self-hosting packaging is still evolving.

The project uses a split license model:

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

You can use Frontman in commercial apps. The AGPL applies to the server so hosted services built on top of Frontman stay open.

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](./