Repolode
Submit
frontman-ai

frontman-ai/frontman

An open-source AI coding agent that runs in the browser, letting you click an element in your running app and have it edit the source code.

Open-source alternative to:CursorGitHub Copilotv0

View on GitHubWebsite
Stars
719
Forks
50
Open issues
241
Last commit
16 hours ago

What is it?

Frontman is an AI coding agent that works from the running page rather than from source files alone. You click an element in your local app, describe the change in plain English, and it edits the matching source file and hot reloads the result. It reads the live DOM, component tree, computed CSS, routes, source maps, and server logs to find which component owns the UI.

The main target is small frontend fixes such as copy, spacing, colors, and layout issues that would otherwise wait on a developer. Designers and product managers can make edits in a browser overlay, and the resulting diff goes through the team's normal review process. Setup is a single command for Next.js, Astro, or Vite, and the integration runs only in development mode, so production bundles are unchanged.

Frontman uses a bring-your-own-key model with several LLM providers, including OpenAI, Anthropic, OpenRouter, and Fireworks AI. The framework integrations and client libraries are Apache 2.0, while the server is AGPL-3.0.

Key features

  • 01Click any element in the running app to select it and describe a change.
  • 02Edits the source files behind the rendered UI and triggers hot reload.
  • 03Uses live DOM, computed CSS, component tree, and source maps for context.
  • 04Works with Next.js (App and Pages Router), Astro, and Vite (React, Vue, Svelte).
  • 05Exposes the dev server as an MCP server for the AI agent.
  • 06Bring-your-own-key support for multiple LLM providers.

Use cases

  • Letting designers or product managers fix copy and spacing without opening an IDE.
  • Fixing a UI bug on a specific internal page by clicking the broken element.
  • Making a cross-app text or layout change and reviewing the diff before merging.
  • Giving an AI assistant frontend-specific context beyond source files.

Quick start

  1. 1

    Install Frontman into a Next.js project

    npx @frontman-ai/nextjs install
  2. 2

    Move proxy.ts into src/ if your project uses src/

    mv proxy.ts src/proxy.ts
  3. 3

    Start the dev server

    npm run dev
  4. 4

    Open http://localhost:3000/frontman in your browser

Things to know

  • Requires a paid or BYOK API key from an LLM provider to use the AI editing features.
  • Official hosted and self-hosting packaging is still evolving.
  • Supports only specific frameworks; Remix, Nuxt, SolidStart, Qwik and Phoenix LiveView are not yet supported.
  • Uses a split license (Apache 2.0 for libraries, AGPL-3.0 for the server), so the server carries copyleft obligations.

Topics

#ai-agent#frontend#react#vue#svelte#vite#nextjs#astro#visual-editing#llm

FAQ

What is frontman?
An open-source AI coding agent that runs in the browser, letting you click an element in your running app and have it edit the source code. Frontman is an AI coding agent that works from the running page rather than from source files alone. You click an element in your local app, describe the change in plain English, and it edits the matching source file and hot reloads the result. It reads the live DOM, component tree, computed CSS, routes, source maps, and server logs to find which component owns the UI.
Is frontman free to use? What license does it have?
frontman is open source under the Other license. Check the license terms before using it in commercial products.
Is frontman still maintained?
Actively maintained. The last commit to frontman was on Oct 20, 2026.
What can I use frontman for?
Letting designers or product managers fix copy and spacing without opening an IDE. Fixing a UI bug on a specific internal page by clicking the broken element. Making a cross-app text or layout change and reviewing the diff before merging. Giving an AI assistant frontend-specific context beyond source files.
How do I install frontman?
Install Frontman into a Next.js project: npx @frontman-ai/nextjs install Move proxy.ts into src/ if your project uses src/: mv proxy.ts src/proxy.ts Start the dev server: npm run dev Open http://localhost:3000/frontman in your browser
Where can I get frontman?
The source code and installation instructions are on GitHub: https://github.com/frontman-ai/frontman

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects