What is it?
What it is
Frontman is a browser-based AI coding agent that enables users to make precise frontend edits by interacting with live DOM elements, describing changes in plain English, and automatically updating source files with hot reload.
Why it exists
Frontman exists to bridge the gap between non-technical stakeholders (product managers, designers) and developers by allowing direct in-browser edits without requiring IDE access or manual file navigation.
Who should use it
Product managers, designers, and frontend developers who want to make small visual or copy changes directly in the browser without opening an IDE, and teams that value rapid design‑to‑code handoffs.
Who should avoid it
Backend‑only teams, developers who prefer full IDE integration for large refactors, or users who only need code generation without visual context.
How it works
A quick walkthrough in plain English
How frontman works in 4 steps
Step 1 of 4
Something triggers the flow
A schedule, webhook, or manual click tells frontman to start.
Features
Advantages
- Enables collaboration between designers and developers without IDE access
- Precise edits based on live context (CSS, DOM, routes, logs)
- Hot reload ensures immediate visual feedback
- Open-source and customizable for commercial use
- Supports major frameworks, reducing setup complexity
- Reduces handoff time between teams with in-browser edits
- Leverages multiple LLM providers for flexibility
- Self-hosting option available under open licenses
Disadvantages
- Only functional in development mode (not suitable for production)
- Browser-based interface may limit complex or large-scale changes
- Requires framework-specific setup and integration
- Depends on LLM provider costs and availability
- Still evolving with some features marked as
Installation
native
openclaw skill install frontman-dev
FAQ
How do I add Frontman to a Next.js project?
Run `npx @frontman-ai/nextjs install` in your project root. If you use a `src/` directory, move the generated `proxy.ts` file to `src/proxy.ts`. Then start the dev server with `npm run dev` and open `http://localhost:3000/frontman` to access the chat interface.
Which frameworks and stacks are currently supported by Frontman?
Frontman works with Next.js App Router, Next.js Pages Router, Astro, Vite (React, Vue, Svelte, SvelteKit). Future support is planned for Remix, Nuxt, SolidStart, Qwik, and Phoenix LiveView.
How does Frontman know which source file to edit when I click an element?
Frontman runs a browser‑side MCP server that captures the live DOM, computed CSS, component tree, and source maps. The AI agent queries this context, resolves the element to its originating component or style file, generates a diff, writes the file, and triggers a hot reload.
Can I use my own LLM provider with Frontman?
Yes. Frontman uses a BYOK (bring‑your‑own‑key) model. Connect any LLM provider such as OpenAI, Anthropic, OpenRouter, Fireworks AI, NVIDIA, Google, or xAI. You pay the provider directly at their standard rates.
Is Frontman safe to use in production deployments?
Frontman’s framework integrations run only in development mode. Production builds strip Frontman out, so your deployed bundle is identical whether Frontman is installed or not. The server component is AGPL‑3.0, ensuring that hosted services built on top remain open source.
Featured in Videos
YouTube tutorials and walkthroughs for frontman
Alternatives
Similar projects ranked by category, topics, and text overlap.
