How Frontman Works

AI coding tools read your source files. They see your component code and class names. What they don't see is the rendered page.

When you ask an AI agent to "fix the hero section overflow on mobile," it reads your component file and guesses which element you mean, which CSS property to change, and what the result will look like. It never opens a browser. It doesn't know that p-4 md:p-8 resolves to 32px at your current viewport width, or that a sibling div's margin is collapsing into the element you're trying to fix.

The information needed to make accurate visual edits exists in the browser's runtime: the DOM tree, computed CSS values, the component hierarchy, viewport dimensions. Source files alone are not enough.

Frontman solves this by putting the AI agent where the information is: inside the browser, connected to the framework's dev server.

This is the core workflow. Here's the exact sequence.

Browser extensions can inspect the DOM. They can read computed styles. They can take screenshots. So why build this as framework middleware?

Start with source maps. When you click a <div>, a browser extension knows it's a div with certain classes. It doesn't know that this div was rendered by ProductCard.tsx at line 23. Source map resolution requires access to the build pipeline, which only the dev server has. The framework plugin provides this.

Then there's the component tree. The browser DOM is flat. It has no concept of React components, Vue reactivity, or Svelte reactive declarations. The framework plugin walks the framework's internal tree (React fiber nodes, Vue component instances, etc.) and maps DOM elements to their component boundaries, props, and state.

Middleware also gives you server-side context. An extension runs in the browser only. Frontman's middleware runs on both sides: it captures server routes, server logs, middleware execution, and database query timing. If a page is slow because of a server component, the AI knows that.

And finally, file operations. A browser extension can't write to your file system (security sandbox). Frontman's framework plugin handles file reads, writes, search, and grep on the dev server, which has file system access by design.

The trade-off is setup time. A browser extension is zero-install. Frontman requires running an installer command (npx @frontman-ai/nextjs install) that adds middleware to your project. This takes about 60 seconds and modifies your dev configuration. Whether that trade-off makes sense depends on how much runtime context your workflow needs.

Frontman is specialized. It is good at visual frontend editing with runtime context. It is not a general-purpose AI coding tool.

• Frontman doesn't provide inline code suggestions. If you want tab completion, use Cursor, Windsurf, or Copilot alongside Frontman.
• Frontman cannot run shell commands, execute tests, or do git operations. For that, use Claude Code or any IDE agent.
• Framework support is limited to Next.js, Astro, and Vite (which covers React, Vue, Svelte, and SolidJS via Vite plugins). Angular, Remix, and standalone SvelteKit are not supported yet.
• Frontman edits existing running apps. It doesn't generate new projects from scratch. For that, use v0, Bolt, or Lovable.
• You need a local dev server running. Frontman doesn't work in StackBlitz, CodeSandbox, or other cloud environments.

For general-purpose AI coding, use Frontman alongside your existing tools. Frontman in the browser for visual frontend work. Your IDE agent for everything else.