SuperAPI AI Directory
Partner with us中文AI newsFavorites
All toolsAI codingfrontman

frontman

Frontman is an open-source AI coding agent that runs directly in the browser. Users click any element in the running app and describe the desired change in natural language, and Frontman edits the real source code and hot-reloads instantly. It can read the live DOM, component tree, computed CSS, routes, source maps, and server logs, enabling non-technical members such as product managers and designers to complete frontend fixes precisely without opening an IDE. It supports frameworks such as Next.js, Astro, and Vite (React, Vue, Svelte), uses a BYOK model to connect to models such as OpenAI, Anthropic, and OpenRouter, and only takes effect in development mode; production builds strip it out.

Open website

About this tool

Purpose

Frontman is an open-source AI coding agent positioned as "an AI agent that lives in your framework/browser." It is aimed at the small frontend changes that typically get stuck in design reviews, product reviews, or internal tool to-do lists, allowing product and design staff to deliver frontend fixes directly without opening an IDE.

Main Capabilities

  • Click any element in the running app and describe the change in natural language; Frontman will edit the real source files and hot-reload instantly.
  • It can read the live DOM, component tree, computed CSS, routes, source maps, and server logs, so it can locate the source file that actually owns that UI.
  • Typical tasks that can be requested include: fixing an element across browsers and devices, fixing a button on an internal subpage, changing empty-state copy across the app, making mobile card spacing consistent with desktop, and more.
  • The framework integration turns the local development server into an MCP server, allowing AI agents to query client-side context (DOM tree, computed CSS, screenshots, element selection) and server-side context (routes, server logs, query timings, compiled modules).

How to Use

  1. Developers add Frontman to the project—one command, with support for Next.js, Astro, and Vite.
  2. Any team member opens the app in the browser—visit localhost/frontman to get the chat interface and a live view of the app.
  3. Click any element and describe the change—Frontman will see where that element sits in the component tree, its computed styles, and the server-side context, edit the correct source file, and hot-reload.

Use Cases

  • Product managers and designers: need to fix copy, spacing, colors, layout issues, and internal UI polish without waiting for a developer to open an IDE.
  • Frontend developers: want richer context than terminal-style AI tools provide. Frontman reads the rendered page, not just the source files, so it knows what the CSS computes to and which component renders each DOM node.
  • Teams where the handoff cost exceeds the actual change: let teammates make edits in the browser, then submit the diff through the normal review process.

Supported Frameworks

  • Next.js: supports App Router and Pages Router, compatible with Turbopack.
  • Astro: compatible with Astro 5, 6, 7, requires Node.js 22.19 or newer; understand the Islands architecture, content collections, and SSR/hybrid modes.
  • Vite (React, Vue, Svelte): automatically detects the framework from vite.config, supports React, Vue, Svelte, including SvelteKit.

Framework integrations run only in development mode. Production builds strip out Frontman, so the deployed output is exactly the same whether or not Frontman is installed.

AI Model Support

Frontman uses a BYOK (bring your own key) model and can connect to 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. Users pay directly at each LLM provider's standard rates. Frontman Pro offers a 14-day trial, requires a credit card, and then becomes a paid subscription. Self-hosting can be done under the repository's terms.

Relationship with Other AI Programming Tools

Most AI programming tools work from source files and never look at the running app. Frontman takes the opposite path—starting from the browser and tracing back to the source code. Frontman is complementary to these tools: many developers use Cursor or Copilot for backend work and general refactoring, and switch to Frontman when they need to see what they are editing in the browser.

Working with OpenClaw

Frontman can be used as an OpenClaw skill. Once installed, it gives AI agents specialized frontend editing capabilities—component tree awareness, computed CSS, source map resolution, and hot-reload feedback that OpenClaw's general browser tools do not have. You can use OpenClaw for general automation (shell, messaging, files) and Frontman for precise visual editing in the codebase.

Self-Hosting and Licensing

Frontman is an open-source project and can be self-hosted from source. Official hosted and self-hosted packaging is still evolving. The project uses a split licensing model: framework integrations and client libraries (libs/) use the Apache License 2.0; the server (apps/frontman_server/) uses the GNU Affero General Public License v3. You can use Frontman in commercial applications; the AGPL applies to the server, so hosted services built on Frontman must remain open source. Contributions are welcome; please read the contribution guidelines first.

Limitations

  • Framework integrations run only in development mode; production builds strip out Frontman.
  • Official hosted and self-hosted packaging is still evolving.
  • Using AI models requires bringing your own key for each provider and paying their standard rates.
  • More details such as specific pricing and the scope of platform support are not yet available in the materials.

Related tools

Browse category