Open Source • Apache 2.0 • Free Beta Your project. Your codebase. Frontman lives in your browser and lets you refine the UI directly. Point at any element, describe the change, and see it happen.
Frontman is an open-source AI coding agent that hooks into your dev server as middleware. It sees the live DOM, component tree, CSS styles, routes, and server logs. It supports Next.js, Astro, and Vite (React, Vue, Svelte). Free with BYOK — Apache 2.0 / AGPL-3.0.
Dev Server
Client
This isn't another "generate an app from scratch" tool. Frontman plugs into the project you're already building — your components, your styles, your design system.
See something that needs tweaking? Point at it, describe the change, and Frontman updates your actual source files. No redlines, no handoff friction, no waiting for the next sprint.
Select a component directly in your browser — a button, a card, an entire section. Describe the change in plain English. No file hunting, no line numbers, no IDE.
Pro tip: use the up and down arrows to move between components and divs
No more alt-tabbing between editor and browser. Frontman updates your code as you describe changes — and you see the results live, instantly. When you're happy, commit and push to Git without ever leaving your browser.
Frontman reads your agents.md, claude.md, or custom rule files at the start of each session. Your stack, conventions, and coding standards are baked into every prompt — before the AI writes a single line.
The only AI coding tool with direct access to your running application
| Feature | Frontman | Claude Desktop | Cursor | Copilot |
|---|---|---|---|---|
| Sees live DOM & styles | ||||
| Edits code in-place | ||||
| Designer/PM friendly | ||||
| Framework-aware | ||||
| Open source | ||||
| Works in the browser | ||||
| Visual component selection |
One command to install, one URL to open, one AI to connect. That's it.
Run one command in your project folder
npx @frontman-ai/nextjs install Visit localhost/frontman in your browser
http://localhost:3000/frontman Connect to your preferred AI model subscription
FAQ
Everything you need to know about Frontman — the AI agent that lives inside your app.
Frontman is an AI agent that lives inside your app, not your editor. It plugs into your framework, giving anyone on your team a chat interface alongside a live view of your app. Describe what you want to change, and the agent makes it happen — outputting real code your team can review and merge.
Cursor and Claude Code work at the file level — they read your code but don't understand your running application. Frontman is wired into your app's runtime. It sees your component tree, routes, server logs, query performance, and everything happening live. That deep context means better results, faster.
Frontend developers who want faster iteration with richer context than terminal-based AI tools. But also designers, product managers, and other semi-technical teammates who need to make changes — from tweaking copy and structure to exploring entirely new feature ideas — without opening an IDE.
Yes. Frontman is fully open source under the Apache 2.0 license. The entire codebase is on GitHub at github.com/frontman-ai/frontman. Every prompt, every tool call, every piece of context the agent uses is visible in the source.
Implement a design change from a Figma mockup. Explore a new feature idea end to end. Tweak page structure or copy. Fix styling issues. Anything involving your frontend and fullstack application — described in natural language, executed as real code.
Navigate to localhost/frontman in your browser. You get a chat interface on the left and a live view of your app on the right. No terminal, no IDE — just a conversation with an agent that understands your entire system.
Frontman runs in development only — never in production. Every change produces a standard code diff that goes through your team's normal review process. Nothing gets merged without an engineer approving it.
Frontman currently supports Next.js, Astro, and Vite. It integrates at the framework level as an integration, turning your local dev server into an MCP server that our agent connects to for both client-side and server-side context.
When you install Frontman, a lightweight integration hooks into your framework and exposes tools via MCP — client-side tools (component tree, performance, logs, click targets) and server-side tools (routes, server logs, query timing, compiled modules). Our agent connects to your local dev server and queries this context in real time, so it always knows what's actually happening in your app.
Your AI finally sees what you see. Click an element, describe what you want, and watch it happen — no more alt-tabbing, no more hallucinated layouts, no more broken diffs.