Practical overview
When it fits
Use Frontman when the task is a targeted change to an existing frontend app and seeing the live page helps identify the relevant component or styles. Setup is documented for development projects using Next.js, Astro or Vite.
Who it is for
- Product managers and designers who need to make small frontend copy, spacing, color or layout changes.
- Frontend developers who want an AI agent to use rendered-page context as well as source code.
- Teams that want colleagues to propose frontend edits and pass the resulting diff through their normal review process.
Documented uses
- Select an interface element and describe a targeted frontend change.
- Use component, DOM and computed-style context to locate the source behind a rendered element.
- Make a visual correction on a specific route or adjust copy across an app.
- Use route and server-log context to investigate a frontend issue.
Requirements & limits
The project describes a bring-your-own-key model with listed LLM providers. Users pay their provider directly at standard rates; the repository says five uses are available free without a card. Self-hosting from source is also described.
- The documented framework integrations run in development mode; production builds strip Frontman out.
- The documented workflow edits an existing codebase from the browser rather than generating a new interface in a separate sandbox.
- The repository lists OpenAI, Anthropic, OpenRouter, Fireworks AI, NVIDIA, Google and xAI as model-provider options.
- Frontman is also described as an OpenClaw skill for specialized frontend editing.
Check current requirements in the official documentation. Source-based guidance does not mean OpenViST has run or independently tested this project.
Set up Frontman in a Next.js project
Install the Next.js integration and open Frontman alongside the running app.
Before you start
- An existing Next.js project.
- A project using src/ may need proxy.ts moved into src/ as shown in the quickstart.
Steps
Run npx @frontman-ai/nextjs install in the project.
If the project uses src/, move proxy.ts into src/ with mv proxy.ts src/proxy.ts.
Start the development server with npm run dev.
Open http://localhost:3000/frontman.
Expected outcome
The Frontman chat interface is available alongside the running app for browser-based frontend editing.
Guide limitations
- Framework integrations run in development mode only.
- This setup guide does not cover selecting an element or applying a change.
Set up Frontman with Vite
Install the Vite integration and open Frontman alongside the running app.
Before you start
- An existing Vite project.
Steps
Run npx @frontman-ai/vite install in the project.
Start the development server with npm run dev.
Open http://localhost:5173/frontman.
Expected outcome
The Frontman interface is available alongside the running Vite app.
Guide limitations
- The Vite integration auto-detects the framework from vite.config and is documented for React, Vue and Svelte, including SvelteKit.
- Framework integrations run in development mode only.
Compare options for AI coding assistance
These projects document a common task and share a project role. This is a source-based comparison, not an execution benchmark or a guarantee of interchangeability.
| Project | Documented purpose | Platform | Access and requirements |
|---|---|---|---|
| Frontman | Select an interface element and describe a targeted frontend change. | Browser Extension | The project describes a bring-your-own-key model with listed LLM providers. Users pay their provider directly at standard rates; the repository says five uses are available free without a card. Self-hosting from source is also described. |
| Llmcode | Inspect a project's directory structure with `/tree`. | CLI | The documented setup requires an API key and supports an API base URL and model setting. The project is open source under Apache-2.0. |
| Klaat Code | Open a project directory for terminal-based coding assistance. | CLI, Server | The README provides a global npm installation command and documents browser sign-in with a KlaatAI account. It also identifies the repository as open source under Apache 2.0. |
Sources & review
Source record details
- Source availability
- Active
- Sources checked
- 16 October 2026
- Original website title
- frontman-ai/frontman · Official homepage title · retained in its source language
Related options
Cursor — The repository describes Cursor as an IDE-based AI coding tool and says it can complement Frontman for backend work and general refactoring.
Explore project →GitHub Copilot — The repository describes Copilot as an IDE extension and says it can complement Frontman for autocomplete and code review.
v0 — The repository contrasts v0’s generation of new UI in its own sandbox with Frontman’s browser-based editing of an existing codebase.