Frontman
Let product and design people modify the frontend directly in the browser, without opening an IDE — an AI agent edits real source code and hot-reloads.
- Source repo
- frontman-ai/frontman
- Stars
- ★ 719
- Last updated
- today
- License
- NOASSERTION
- Primary language
- ReScript
- FA score
- 63/100 · Some gaps
At a glance
- How it runs
- Works with
- Universal · cross-platformOpenAI API · Claude API
- Cost
- Free software; you pay for model usage
- Setup effort
- Medium · a few setup steps
- You'll need
- Typical use
- A product manager spots a mis-styled button on a subpage of an internal tool, navigates to the route, clicks the element, and describes the issue — fixed without engineer involvement.
- Not a fit if
- Production users: integrations run in dev mode only and are stripped from builds
- Teams on Remix, Nuxt, SolidStart, Qwik, or Phoenix LiveView
- Source review
- 63/100 · Some gaps
What does this agent do, and when should you use it?
Frontman is an open-source AI coding agent (repo frontman-ai/frontman) that runs in the browser rather than the IDE. Users click any element in a running app and describe changes in natural language; Frontman edits the actual source files and hot-reloads instantly. It turns the local dev server into an MCP server via framework middleware, giving AI agents context such as live DOM, computed CSS, component tree, routes, source maps, and server logs. The repo includes Next.js, Astro, and Vite integration packages plus an orchestration server written in Elixir/Phoenix. Framework integrations run only in development mode; production builds strip them, so deployed artifacts are unaffected. The project is dual-licensed: Apache 2.0 for client libraries, AGPL-3.0 for the server, with BYOK access to OpenAI, Anthropic, OpenRouter, and other LLM providers.
Developers add Frontman to a project with one command (e.g., npx @frontman-ai/nextjs install, npx astro add @frontman-ai/astro, npx @frontman-ai/vite install). Team members open localhost/<port>/frontman in the browser to get a chat interface plus a live preview of the app. After clicking any element and describing the change in natural language, Frontman queries MCP tools exposed by framework middleware for DOM tree, computed styles, screenshots, routes, server logs, and compiled modules, locates and edits the correct source file, then triggers hot reload. Changes are presented as diffs for review and can go through normal code review. AI orchestration is handled by the Elixir/Phoenix server, with BYOK model calls using the user's own LLM keys.
- A product manager spots a mis-styled button on a subpage of an internal tool, navigates to the route, clicks the element, and describes the issue — fixed without engineer involvement.
- A designer notices mobile card spacing differs from desktop; Frontman reads computed CSS and layout context to fix alignment.
- A marketer needs consistent empty-state copy site-wide; describe the change once and review the generated diff.
- A frontend developer wants richer context than terminal AI tools, letting the agent make precise fixes based on the rendered page rather than static source.
- Teams shorten delivery of design QA and product review backlogs via in-browser edits plus normal diff review flow.
How do you install or deploy this agent?
Pick one per framework:
Next.js: npx @frontman-ai/nextjs install (if the project uses a src/ directory, run mv proxy.ts src/proxy.ts); supports App Router, Pages Router, and Turbopack.
Astro: npx astro add @frontman-ai/astro, requires Astro 5/6/7 and Node.js 22.19+.
Vite (React/Vue/Svelte, including SvelteKit): npx @frontman-ai/vite install, auto-detects the framework from vite.config.
At runtime, configure a BYOK LLM key (OpenAI, Anthropic, OpenRouter, Fireworks AI, NVIDIA, Google, xAI, etc.). The server is Elixir/Phoenix and can be self-hosted from source.
How do you use this agent?
- Install the framework integration in your project and start the dev server (npm run dev). 2. Open http://localhost:3000/frontman (Next.js), :4321/frontman (Astro), or :5171/frontman (Vite; the source docs write :5173) in the browser. 3. Click the element to modify in the live preview next to the chat interface and describe the change in natural language. 4. Frontman edits the source files and hot-reloads; check the generated diff and proceed through normal code review. You can also install an OpenClaw skill: openclaw skill install frontman-dev, adding frontend editing to general AI agents.
What are this agent's strengths and limitations?
- Uniquely browser-side: the agent reads live DOM, computed CSS, component tree, and server logs — context that file-based tools like Cursor/Copilot lack.
- Non-technical members (PMs, designers) can make precise frontend edits in the browser, with changes landing in the real codebase rather than sandbox-generated code.
- Framework integrations run only in dev mode; production builds strip Frontman, so deployment artifacts are unaffected.
- BYOK supports OpenAI, Anthropic, OpenRouter, and other LLM providers, avoiding vendor lock-in; the server is self-hostable.
- Dev-mode editing only, not usable in production; frameworks limited to Next.js, Astro, Vite (React/Vue/Svelte) — Remix, Nuxt, SolidStart, Qwik, Phoenix LiveView not yet supported.
- Dual licensing: the server is AGPL-3.0, so building hosted services on it requires staying open source — note for commercial evaluation.
- Requires LLM API keys, with costs paid directly to model providers; the hosted service plans to move to paid subscriptions.
- Needs a running local dev server and a bit of initial developer setup (installing integrations, possibly moving proxy.ts) — not a zero-developer solution.
How does this agent compare with similar options?
Key facts side by side with the most closely related agents.
| Agent | Source review | Form / cost | Stars | Updated | Language | Full support on |
|---|---|---|---|---|---|---|
| Frontman This agent | 63 · Some gaps | CLIFree + model costs | ★ 719 | today | ReScript | OpenAI API · Claude API |
| Skybridge MCP Apps Framework | 64 · Some gaps | CLIFreemium | ★ 2.2k | 1d ago | TypeScript | ChatGPT · Claude.ai |
| Code Assistant | 70 · Some gaps | Desktop appFree + model costs | ★ 183 | today | Rust | Claude.ai · OpenAI API · Claude API |
| OrkasVideoStudio | 56 · Major gaps | CLIFree + model costs | ★ 327 | 12d ago | TypeScript | Codex · Claude Code |
How does FollowAgents rate this agent?
Why each dimension lost points
The agent writes source files directly and hot-reloads; the README mentions only 'review the generated diff' — no file-write scope, permission allowlist, or rollback mechanism is documented (deducted on least_privilege and rollback). BYOK key storage/handling is entirely undocumented (deducted on sensitive_data_handling); the architecture diagram clearly shows the browser MCP → middleware → Elixir server flow, but privacy boundaries for what is transmitted (DOM, logs, screenshots) are unstated (deducted on data_flow_transparency). Positive evidence: yarn resolutions explicitly override known-vulnerable transitive deps (qs, glob, yaml, esbuild, postcss), and CI pins actions by commit hash; external effects are confined to dev mode (production builds strip Frontman), as stated; license attribution is clear (Apache-2.0 + AGPL-3.0 split). User confirmation rests solely on the diff-review flow: middle score.
CI shows systematic compatibility testing (Astro 5/6/7 × Node 22.19/24 matrix, daily scheduled runs, packed-consumer tests) and yarn install --immutable for reproducible installs — medium self-consistency and availability. E2E fixtures and a runtime test harness exist, but the sampled test files are skeletal; end-user-facing failure messages and build-error handling lack direct evidence in the provided files (deducted).
Audience and scenarios are thorough: three explicit personas with concrete use cases (full marks). Capability boundaries are supported by a supported-stacks table and the 'dev mode only' declaration; the trigger model (click element + natural language) is well defined, but ambiguity/mis-trigger handling is undocumented (small deduction); environment fit is backed by Node 22.19+, framework version matrices, and auto-detection (adequate).
Information architecture is excellent — layered README with personas, comparison table, architecture diagram, quickstarts, license section (high marks). The split dual license is clearly documented per package, but the NOASSERTION registry metadata conflicts with the actual terms (deducted). Versioning is a standout: a CI gate blocks PRs lacking changeset entries (full marks). Install notes cover three frameworks with a src/ adjustment note, though self-hosting packaging is admitted to be 'still evolving' (small deduction); naming (@frontman-ai/* workspaces) is consistent; known limitations (dev-only, upcoming frameworks) are disclosed; maintenance responsibility is supported by SECURITY.md with timelines, but those timelines are commitments, not verifiable records (small deduction).
Output usability: diff review + hot reload + source attribution is a verifiable output form (adequate). Marginal value: the differentiation (rendered-browser context, non-developer accessibility) is well argued (adequate). Cost/benefit: BYOK cost attribution is explicit and self-hosting is free, but hosted-service pricing is not given (small deduction).
Facts and inference are mostly separable: the supported-stack and compatibility claims cross-corroborate with CI configuration (adequate). However, many core claims (fix quality, model support list, competitor comparisons in the table) point to external site docs and cannot be traced within the repository (deducted); CI configs corroborate README claims (Astro 5/6/7, Node 22.19+) (medium); competitor judgments in the comparison table are marketing inference without in-repo support (small deduction).
- The agent writes source files directly, but the repo documents no write scope, confirmation granularity, or rollback mechanism — use under version control and audit every diff.
- BYOK key transport and storage are undocumented in the provided files; verify whether keys traverse the Frontman server before connecting any provider.
- The tool collects DOM, computed styles, screenshots, and server logs and sends them to the orchestrator; do not enable it in dev environments containing sensitive data without review.
- Registry license metadata is NOASSERTION, conflicting with the Apache-2.0/AGPL-3.0 split in the repo; the server is AGPL — assess copyleft implications before commercial use.
- Hosted-service pricing is 'moving to paid subscriptions'; cost assumptions tied to the hosted path may change without notice.
Recent releases
Latest entries from the project's GitHub Releases. Notes are quoted from upstream as written, not rewritten or tested by FollowAgents.
-
Release notes excerpt
@frontman-ai/client Minor Changes - [#1807](https://github.com/frontman-ai/frontman/pull/1807) [86327f3](https://github.com/frontman-ai/frontman/commit/86327f316ece79a293277172bbc6a88729c8a590) Thanks [@BlueHotDog](https://github.com/BlueHotDog)! - Allow five AI runs before a Frontman trial is required. Users must connect their own AI provider; provider access is validated before a turn is claimed for both subscribers and allowance users. The allowance is shared across projects and does not reset when conversations are deleted. Claimed turns can retry and recover without another …View on GitHub ↗ -
Release notes excerpt
Work on your site - Ask Frontman to fill, replace, or clear text in website forms, including long forms and rich-text fields. You still need to save or submit the form. - Choose from updated AI models, including GPT-6 Sol/Luna and Claude Opus/Sonnet 5.5. Unavailable models now show guidance to help you continue. - Frontman now captures page screenshots without shifting content or missing fixed headers after you scroll. Manage your WordPress site - Organize posts with existing categories and tags as Frontman creates or updates them. …View on GitHub ↗ -
Release notes excerpt
@frontman-ai/client Minor Changes - [#1677](https://github.com/frontman-ai/frontman/pull/1677) [20c6c34](https://github.com/frontman-ai/frontman/commit/20c6c342bb4199d5cc88cc865e072449da5f861f) Thanks [@BlueHotDog](https://github.com/BlueHotDog)! - Include Astro client-routing status in automatic page context. Detect enabled, disabled, and unavailable states from the preview document, and preserve the status in server storage and conversation history. Add conditional lifecycle guidance to agent prompts. …View on GitHub ↗