by frontman-ai
The AI agent that lives in your framework/browser
# Add to your Claude Code skills
git clone https://github.com/frontman-ai/frontmanLast scanned: 5/15/2026
{
"issues": [],
"status": "PASSED",
"scannedAt": "2026-05-15T06:58:16.601Z",
"semgrepRan": false,
"npmAuditRan": false,
"pipAuditRan": true
}No comments yet. Be the first to share your thoughts!
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).
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.
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 | | Pricing | Free self-hosting (BYOK); hosted service moving to paid plans | $20/mo Pro | $10/mo Pro | $20/mo Premium | | 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.
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.
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 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.
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 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.
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.
Frontman uses BYOK (bring your own key). Connect any LLM provider:
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.
┌─────────────────────────────────────────────────┐
│ 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 │ │
│ └──────────────────────────────────────────┘ │
└─────────────────────────────────────────────────┘
Contributions are welcome! Please read the Contributing Guide to get started.
This project uses a split license model:
libs/) — Apache License 2.0apps/frontman_server/) — GNU Affero General Public License v3See the respective LICENSE files for details.