What is 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).
Quick Start — Get Running in 60 Seconds
npx @frontman-ai/nextjs install
npm run dev
Open http://localhost:3000/frontman in your browser.
astro add @frontman-ai/astro
astro dev
Open http://localhost:4321/frontman in your browser.
npx @frontman-ai/vite install
npm run dev
Open http://localhost:5173/frontman in your browser.
Why Frontman?
Live Context
Frontman sees the rendered DOM, computed CSS, and component tree — not just source files.
Browser Overlay
Click any element and describe changes in plain English. No need to open your IDE.
Instant Hot Reload
AI edits source files and your app hot-reloads automatically. See changes instantly.
Open Source
Apache 2.0 / AGPL-3.0 licensed. Bring your own API keys. No usage limits.
How It Compares
| Feature | Frontman | Cursor | GitHub Copilot |
|---|---|---|---|
| Sees live DOM & computed CSS | ✓ | ✗ | ✗ |
| Browser-based editing | ✓ | ✗ | ✗ |
| Open source | ✓ | ✗ | ✗ |
| Free (BYOK) | ✓ | ✗ | ✗ |
Supported Frameworks
Next.js
App Router & Pages Router. Compatible with Turbopack.
Astro
Islands architecture, content collections, SSR/hybrid.
Vite + React
Full React support with HMR.
Vite + Vue
Vue 3 with composition API support.
Vite + Svelte
Svelte & SvelteKit support.
OpenClaw Skill
Available as an OpenClaw skill for agent workflows.