frontman

frontman

The AI agent that lives in your framework/browser

Stars: 113

Visit
 screenshot

Frontman is a framework-integrated AI coding agent that allows users to edit their frontend directly in the browser. It enables users to point at any element in their running app, describe the change they want, and Frontman edits the source code for them without the need for copy-pasting or context switching. The tool supports popular frameworks like Next.js, Astro, and Vite, providing features such as point-and-click editing, real-time streaming of AI-generated edits, and framework-aware context. Frontman also offers an open protocol layer for decoupled and extensible client, server, and framework adapters.

README:

Frontman

Ship frontend changes from your browser — no code editor needed

CI License npm version


Frontman Demo

Open your running app in the browser, click on any element, and describe the change you want — Frontman edits the actual source code in your repo. No sandbox, no copy-paste. Real code changes your team can review and merge.

For designers and PMs who want to tweak UI without waiting on a developer. For developers who want fewer "can you move this 2px" tickets.

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 — an overlay lets you click any element and describe the change you want in plain language.
  3. Frontman edits the source code and hot-reloads — the change appears live in the browser, and the code diff is ready for the team to review.

Unlike screenshot-based AI tools, Frontman hooks into your framework's build pipeline — it understands your components, routes, and compilation errors, so it edits the right file every time.

Quickstart

Next.js

npx @frontman-ai/nextjs@latest init

Astro

npm install @frontman/frontman-astro

See Astro integration docs for configuration.

Vite

npm install @frontman/vite-plugin

See Vite plugin docs for configuration.

Key Capabilities

  • Framework-aware — Understands your components, routes, and build errors. Not just pixel screenshots.
  • Real-time streaming — See edits appear in your editor as they're written, with live preview in the browser.
  • Open protocol — Client, server, and framework adapters are decoupled and extensible. Read the docs.

Contributing

Contributions are welcome! Please read the Contributing Guide to get started.

License

This project uses a split license model:

See the respective LICENSE files for details.

Links

For Tasks:

Click tags to check more tools for each tasks

For Jobs:

Alternative AI tools for frontman

Similar Open Source Tools

For similar tasks

For similar jobs