Frontman Dev

Detect the user's framework and install Frontman:

Next.js:

npx @frontman-ai/nextjs install

Astro:

npx astro add @frontman-ai/astro

Vite (React, Vue, Svelte):

npx @frontman-ai/vite install

Start the dev server normally:

npm run dev

Open Frontman in the browser:

• Next.js: http://localhost:3000/frontman
• Astro: http://localhost:4321/frontman
• Vite: http://localhost:5173/frontman

How It Works

Frontman installs as a framework plugin (one line in the config). It creates a browser-side MCP server that exposes:

• Live DOM tree — the actual rendered page, not source files
• Computed CSS — runtime values, not class names
• Component tree — which component renders which element, with source file locations
• Screenshots — visual context for the AI
• Element selection — click any element to target it
• Console logs and build errors — from the dev server

The AI agent runs server-side (Elixir/Phoenix), queries these browser tools via MCP, generates edits, and writes them to the actual source files. The framework's HMR handles live reloading.

Usage with OpenClaw

Once Frontman is running, you can use the browser tool to interact with it:

1. Open the Frontman URL in the browser tool
2. Click elements to select them
3. Use the chat interface to describe changes
4. Changes are written to source files and hot-reloaded

Frontman handles the visual editing loop. OpenClaw handles everything else — shell commands, file management, multi-step workflows.

Key Details

• Open source: Apache 2.0 (client) / AGPL-3.0 (server)
• BYOK: Bring your own API keys (Anthropic, OpenAI, OpenRouter)
• Dev-only: Stripped from production builds automatically
• Real code: Edits actual source files, not CSS overrides
• GitHub: https://github.com/frontman-ai/frontman
• Docs: https://frontman.sh/docs/