The Problem
Every AI coding tool I've used has the same blind spot: it edits source files without ever seeing the running application.
You describe a layout bug. The AI reads your JSX, guesses what the DOM looks like, and generates a fix. You switch to the browser. It's wrong — the AI didn't know about the inherited padding, the conditional render that adds a third child, or the CSS variable that resolves differently at this breakpoint. You switch back, describe it again with more detail, and repeat.
This loop — describe, edit, check, re-describe — is where a surprising amount of AI-assisted development time actually goes. Not on the AI generating code. On you being the bridge between the AI's understanding of the source and the application's actual behavior.
The same thing happens on the server side. Your AI edits a Next.js API route but doesn't know what middleware is active, what the compiled module graph looks like, or what's in the server logs. It's guessing about the runtime from the source alone.
What I Built
Frontman is an open-source AI coding agent that lives inside your browser. Instead of working from source files alone, it hooks into your framework's dev server as middleware and sees both sides of the application:
Client side: the rendered DOM, component tree, computed styles, layout geometry, console output, click targets.
Server side: registered routes, compiled module graph, server logs, middleware state, framework-specific context (Astro island hydration, Next.js server/client component boundaries, Vite's HMR state).
The workflow: open your app in the browser, click any element, describe what you want changed in plain English. Frontman maps the runtime element back to the source file and line number, gives the AI the full runtime context, and applies the edit. Hot reload shows you the result immediately.
It supports Next.js, Astro, and Vite (React, Vue, Svelte). You bring your own AI key — Claude, OpenAI, or OpenRouter. No subscription, no prompt limits, no account required.
frontman-ai
/
frontman
The AI agent that lives in your framework/browser
Ship frontend changes from your browser — no code editor needed
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).
Who Is This For?
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…
How It Works
The key architectural decision: Frontman installs as actual middleware inside your framework's dev server, not as an external proxy or browser extension.
This matters because the dev server already knows everything about both sides of your application. Next.js knows its route table and server/client component boundaries. Vite knows its HMR module graph and compiled output. Astro knows which islands hydrated. By running inside the framework, Frontman gets native access to all of this without reimplementing it.
npx @frontman-ai/nextjs install # for Next.js
astro add @frontman-ai/astro # for Astro
npx @frontman-ai/vite install # for Vite (React/Vue/Svelte)
One import in your framework config, start the dev server, and the agent is available in the browser.
Both client-side and server-side context are exposed via MCP (Model Context Protocol), so the AI agent works with structured runtime data rather than parsing HTML strings or grepping server logs.
Source Mapping
The hardest part isn't getting runtime data — it's mapping it back to source code. "This <div> with these computed styles" needs to become "this component at src/components/Card.tsx:47." Frontman uses a combination of sourcemaps, React/Vue/Svelte fiber/instance metadata, and framework-specific component registries to make this connection. It's not perfect — deeply abstracted component libraries can break the mapping — but for most application code it's reliable.
Tradeoffs (The Honest Part)
What works well:
- CSS and layout fixes — the AI can see computed styles, so it knows why something looks wrong, not just that you say it does
- Visual debugging — click the broken element instead of describing it
- Server-side debugging — the AI sees the actual error in server logs alongside the component that triggered it
- Onboarding — "what component renders this section?" is answered instantly
- Designer/PM collaboration — non-engineers can click elements and describe changes without opening an IDE
What doesn't work well (yet):
- Complex state management changes — the visual output doesn't tell you if the logic is correct
- Performance optimization — Frontman sees the DOM and server state, not render cycles or bundle sizes
- Large refactors — runtime context helps with surgical edits, not architectural changes
- Unsupported frameworks — if you're on Angular, Remix, or SvelteKit (without Vite), there's no middleware adapter yet
Compared to alternatives:
- Stagewise has more polish and ~6,500 stars, but uses a proxy architecture (less server-side visibility), requires an account, and limits free usage to ~10 prompts/day (EUR 20/month for more). Frontman is fully free with no prompt limits.
- Tidewave has deep backend integration for Phoenix/Rails/Django like ours, but not fully Open Source.
- Chrome DevTools MCP is browser-only — no server-side context.
Frontman is early-stage. There are rough edges. The documentation could be better. Some framework-specific features are incomplete. I'm not going to pretend otherwise.
Why Open Source
Frontman is licensed as Apache 2.0 (client libraries) and AGPL-3.0 (server). The client libs are permissively licensed so you can include them in any project without concern. The server is AGPL to keep the core open.
The BYOK model means your code and your AI interactions stay between you and your AI provider. Nothing routes through our servers. There's nothing to route through — there are no servers.
This isn't altruism. Open source is the only credible model for a tool that sits inside your dev server and sees your source code. If I can't read the code that has access to my codebase, I'm not installing it. I assume you feel the same way.
Try It
# Next.js
npx @frontman-ai/nextjs install
# Astro
astro add @frontman-ai/astro
# Vite (React, Vue, or Svelte)
npx @frontman-ai/vite install
Full setup instructions: frontman.sh
Source code: github.com/frontman-ai/frontman
frontman-ai
/
frontman
The AI agent that lives in your framework/browser
Ship frontend changes from your browser — no code editor needed
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).
Who Is This For?
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…
What's Next
- More frameworks: Remix, SvelteKit (standalone), Angular are on the list
- Performance tools: Expose render timing and bundle analysis to the agent
- Test generation: Use runtime state to generate more accurate test cases
- Better source mapping: Improve component resolution for deeply abstracted UI libraries
If you run into issues or have ideas, open an issue on GitHub or find me in the comments here. Contributions are welcome — the codebase is TypeScript and the architecture is documented in the repo.
Frontman is at frontman.sh and GitHub. I built it because the describe-check-fix loop was eating my productivity and I couldn't find an open-source tool that solved it properly.
Top comments (0)