[opensourcedex]

Frontman is a free, open source ai assisted coding project written in ReScript and released under a custom open-source licence. It has 698 GitHub stars, 51 forks and 236 open issues, and was last pushed 5 hours ago. On this registry it ranks #23 of 24 tracked projects in AI Assisted Coding, with 5 head-to-head comparisons available. It gained 3 stars over the last 6 tracked days.

What is Frontman?

Frontman is an open-source AI coding agent that runs inside your browser and edits your project's real source files from a live view of the running application, built for product managers, designers, and frontend developers who need small frontend fixes without opening an IDE.

What it is

Frontman is an open-source agent that lives in your framework and browser. A developer adds it to a project, and anyone on the team then opens the app at localhost/frontman to get a chat interface alongside a live view of the app. The agent is built in ReScript and works as a browser overlay backed by framework middleware, with integrations for Next.js, Astro, and Vite. The framework integration turns the local dev server into an MCP server. Where most AI coding tools start from source files and never see the running application, Frontman starts from the browser and works backward to the source, reading the live DOM, the component tree, computed CSS, routes, source maps, and server logs.

The problem it solves is the handoff that costs more than the change itself. Small frontend work — a broken element across browsers and devices, a button on an internal sub-page, empty-state copy across the app, mobile card spacing that does not match desktop — tends to get stuck in design QA, product review, or internal tooling backlogs, waiting for a developer to open an IDE. Frontman replaces that round trip. Instead of guessing which file owns a rendered element, a teammate clicks the element, describes the change in plain English, and the agent resolves the component through source maps and rendered context, edits the correct source file, and hot-reloads. The generated diff can be reviewed before it lands, so the change still flows through the normal review process.

Key capabilities

  • Click any element in the running app, describe the change in plain English, and Frontman edits the actual source files with instant hot reload.
  • Reads live DOM, component tree, computed CSS, routes, source maps, and server logs rather than relying only on static source files.
  • Exposes a chat interface alongside a live view of the app at localhost/frontman.
  • Framework integration turns the local dev server into an MCP server, following the Model Context Protocol.
  • Works with Next.js, Astro, and Vite through framework middleware.
  • Produces a generated diff that can be reviewed before the change lands.
  • Available as an OpenClaw skill, installed with the command openclaw skill install frontman-dev, adding component tree awareness, computed CSS, source map resolution, and hot reload feedback that a general browser tool does not have.

Who uses it and how

  • Product managers and designers fix copy, spacing, colors, layout issues, and internal UI polish without waiting for a developer to open an IDE.
  • Frontend developers who want richer context than terminal-based AI tools get, because Frontman reads the rendered page and knows what CSS computes to and which component renders each DOM node.
  • Teams where the handoff costs more than the actual change: a teammate makes the edit in the browser and sends the diff through the normal review process.
  • Developers who already use Cursor or Copilot for backend work and general refactoring, then switch to Frontman when they need to see what they are editing in the browser.
  • OpenClaw users who want general-purpose automation from OpenClaw and precise visual editing in their codebase from Frontman.

Getting started

A developer adds Frontman to the project with one command, with support for Next.js, Astro, and Vite; the docs at frontman.sh cover the exact command per framework. Once installed, anyone opens the app and navigates to localhost/frontman to reach the chat interface and live view. OpenClaw users can instead run openclaw skill install frontman-dev.

How it compares

Frontman's README compares it against Cursor, GitHub Copilot, and v0 on context, editing interface, what gets edited, whether the tool sees rendered output, and open-source status. Frontman is the only one of the four marked open source, under Apache 2.0 / AGPL-3.0, and the only one that sees rendered output through framework middleware; Cursor and Copilot work from source files in an IDE, and v0 generates new code in its own sandboxed preview. The README treats these tools as complementary rather than replacements: many developers use Cursor or Copilot for backend work and general refactoring, then switch to Frontman for visual frontend editing and designer or PM collaboration.

When to use it — and when not to

A self-hoster has to run the project's own local dev server with the Frontman framework middleware in place, since the agent edits the existing codebase rather than a hosted sandbox. It is not the right pick for backend work, general refactoring, or generating new UI from scratch, where the README points to Cursor, Copilot, and v0 respectively. Two caveats are worth checking before adopting: the registry metadata records the licence as NOASSERTION while the README states Apache 2.0 / AGPL-3.0, and the repository carries 236 open issues, so the project is worth evaluating against its own docs before it goes into a team workflow.

project readme (upstream, from github) — read inline

Frontman

Let product and design ship frontend fixes without opening an IDE

CI License npm version Discord

Frontman is an open-source AI coding agent that lives in your browser. Click any element in your running app, describe the change in plain English, and Frontman edits the actual source files with instant hot reload. It sees the live DOM, component tree, computed CSS, routes, source maps, and server logs, so non-technical teammates can make precise frontend fixes without guessing which file owns the UI.

Docs · Next.js · Astro · Vite · Discord · Demo

What You Can Ask Frontman

Frontman is built for small frontend changes that usually get stuck in design QA, product review, or internal tooling backlogs:

  • "Fix this element across all browsers and devices" — select the broken UI, explain the issue, and Frontman uses browser context plus source maps to update the right component or styles.
  • "Fix this button on an internal sub-page" — navigate to the exact route, click the button, and Frontman edits the source behind that rendered element.
  • "Change the empty-state copy across the app" — describe the messaging change once and review the generated diff before it lands.
  • "Make the mobile cards match desktop spacing" — Frontman reads computed CSS and layout context instead of relying only on static source files.

Who Is This For?

Product managers and designers who need to fix copy, spacing, colors, layout issues, and internal UI polish without waiting for a developer to open an IDE.

Frontend developers who want richer context than terminal-based AI tools provide. Frontman reads the rendered page, not just source files, so it knows what your CSS computes to and which component renders each DOM node.

Teams where the handoff costs more than the actual change. Frontman lets teammates make the edit in-browser, then send the diff through your normal review process.

How Frontman Compares to Other AI Coding Tools

Most AI coding tools work from source files and never see the running application. Frontman takes the opposite approach — it starts from the browser and works backward to the source.

Frontman Cursor GitHub Copilot v0
Context Live DOM, computed CSS, component tree, server logs Source files in IDE Source files in IDE Sandboxed preview
Editing interface Browser overlay IDE (VS Code fork) IDE extension Web app
What it edits Your existing codebase Your existing codebase Your existing codebase Generates new code
Sees rendered output Yes (framework middleware) No No Own sandbox only
Open source Yes (Apache 2.0 / AGPL-3.0) No No No
Best for Visual frontend editing, designer/PM collaboration Full-stack IDE replacement Autocomplete, code review Generating new UI from scratch

Frontman and these tools are complementary. Many developers use Cursor or Copilot for backend work and general refactoring, then switch to Frontman when they need to see what they're editing in the browser.

Works with OpenClaw

Frontman is available as an OpenClaw skill. Install it to give your AI agent specialized frontend editing capabilities — component tree awareness, computed CSS, source map resolution, and hot reload feedback that OpenClaw's general browser tool doesn't have.

openclaw skill install frontman-dev

Use OpenClaw for general-purpose automation (shell, messaging, files). Use Frontman for precise visual editing in your codebase. Read the comparison.

How It Works

  1. A developer adds Frontman to the project — one command, works with Next.js, Astro, and Vite.
  2. Anyone on the team opens the app in their browser — navigate to localhost/frontman to get a chat interface alongside a live view of your app.
  3. Click any element and describe the change — Frontman sees the element's position in the component tree, its computed styles, and the server-side context. It edits the right source file and hot-reloads.

The framework integration turns your local dev server into an MCP server that the AI agent queries for both client-side context (DOM tree, computed CSS, screenshots, element selection) and server-side context (routes, server logs, query timing, compiled modules).

Quickstart

Next.js

npx @frontman-ai/nextjs install
# If your project uses src/: mv proxy.ts src/proxy.ts
npm run dev
# Open http://localhost:3000/frontman

Works with App Router and Pages Router. Compatible with Turbopack.

See the Next.js integration guide for details.

Astro

npx astro add @frontman-ai/astro
npm run dev
# Open http://localhost:4321/frontman

Compatible with Astro 5, 6, and 7 on Node.js 22.19 or newer. Listed on the Astro integration registry. Understands Islands architecture, content collections, and SSR/hybrid modes.

See the Astro integration guide for details.

Vite (React, Vue, Svelte)

npx @frontman-ai/vite install
npm run dev
# Open http://localhost:5173/frontman

Auto-detects your framework from vite.config. Works with React, Vue, and Svelte — including SvelteKit.

See the Vite integration guide for details.

Need setup help? Join the Discord or open a GitHub issue.

Supported Stacks

Status Frameworks
Supported now Next.js App Router, Next.js Pages Router, Astro, Vite, React, Vue, Svelte, SvelteKit
Coming soon Remix, Nuxt, SolidStart, Qwik, Phoenix LiveView

Framework integrations run in development mode only. Production builds strip Frontman out, so your deployed bundle is identical whether Frontman is installed or not.

AI Model Support

Frontman uses BYOK (bring your own key). Connect any LLM provider:

  • OpenAI — GPT and Codex models
  • Anthropic — Claude Pro/Max models
  • OpenRouter — Claude, GPT, Gemini, Kimi, MiniMax, and hundreds of other models
  • Fireworks AI, NVIDIA, Google, and xAI

You pay your LLM provider directly at their standard rates. Self-hosting remains free under the project's open-source licenses; hosted Frontman service plans are moving to paid subscriptions.

Self-Hosting and License

Frontman is open source and can be self-hosted from source. Official hosted and self-hosting packaging is still evolving.

The project uses a split license model:

You can use Frontman in commercial apps. The AGPL applies to the server so hosted services built on top of Frontman stay open.

Architecture

┌─────────────────────────────────────────────────┐
│ Browser                                         │
│ ┌─────────────────┐  ┌────────────────────────┐ │
│ │ Your Running App│  │ Frontman Overlay        │ │
│ │                 │  │ (chat + live preview)   │ │
│ └────────┬────────┘  └───────────┬────────────┘ │
│          │                       │              │
│  ┌───────▼───────────────────────▼──────────┐   │
│  │ Browser-side MCP Server                  │   │
│  │ DOM tree, computed CSS, screenshots,     │   │
│  │ element selection, console logs

readme truncated — read the full docs on github

Frequently asked questions

Is Frontman free to use?

Frontman is open source. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does Frontman do?

AI coding agent that sees your live app and edits code

What is Frontman written in?

Frontman is primarily written in ReScript. Its source is publicly available at https://github.com/frontman-ai/frontman, and it has 698 GitHub stars.