Stop waiting on dev tickets to fix a button color. Frontman lets you click any element in your live product, describe what you want, and watch the change happen — no code, no handoff, no waiting.
Frontman is an AI agent that lives inside your framework's dev server as middleware. It sees the live DOM, component tree, CSS styles, routes, and server logs — the full runtime context that file-level agents miss. Supports Next.js, Astro, and Vite (React, Vue, Svelte). Open-source core (Apache 2.0 / AGPL-3.0) with BYOK pricing — bring your own API key or use ours.
const theme = primary: "#A259FF", radius: "8px", No more pixel-pushing in code you didn't write. Frontman understands your components, your design tokens, and your layout conventions — so every edit stays on-brand.
Spot a misaligned element? A color that feels off? Point at it, describe what you see, and Frontman refines the source to match your vision. No redlines, no handoff gaps, no compromises.
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.
For JavaScript frameworks (Next.js, Astro, Vite), 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 supports Next.js, Astro, Vite, and WordPress. For JavaScript frameworks it integrates as middleware, turning your local dev server into an MCP server. For WordPress it installs as a plugin that exposes WordPress-specific tools alongside PHP-native file editing capabilities.
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.
Yes — unlike the JavaScript framework integrations which are development-only, the WordPress plugin can run on a live site. WordPress sites are often edited directly in production, and the plugin respects that workflow. That said, this is experimental software. Use it with care: start on a staging site, keep backups, and review changes before relying on it in production.
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.
