Frontman for React: Visual AI Editing Inside Your Next.js Dev Server

What Frontman brings to React and Next.js development in 2026

If you have ever stared at a rendered React component and wondered which file actually controls the spacing, typography, or copy on screen, you already understand the gap that most AI coding tools leave open. Cursor, GitHub Copilot, and terminal agents are excellent at reading source files. They are much weaker at understanding what those files produce in a running browser — computed CSS, component boundaries, server logs, and route timing all live in runtime context that never reaches a plain text prompt.

Frontman, an open-source AI coding agent from frontman.sh, takes the opposite approach. Instead of starting in your IDE, it lives inside your framework dev server as middleware. You open /frontman in the browser, click an element in your live app, describe the change in plain English, and Frontman edits the real source files with instant hot reload. For React teams on Next.js or Vite, that workflow collapses the loop between “what I see” and “what I change” — without generating throwaway sandbox code or asking designers to learn your monorepo layout.

Frontman is trending in early 2026 because it sits at a practical intersection: visual editing for non-engineers, deep framework integration for engineers, and a bring-your-own-key model that keeps LLM costs under your existing Anthropic, OpenAI, or OpenRouter accounts. The project ships client libraries under Apache 2.0 and the Elixir/Phoenix server under AGPL-3.0, which matters if your platform team evaluates self-hosting versus using the hosted service at api.frontman.sh.

This guide walks through hands-on setup for Next.js and Vite, explains what the dev-server middleware actually does, and covers production guardrails so you can adopt Frontman without accidentally widening your attack surface.

How Frontman differs from IDE-first AI coding tools

Most AI development assistants optimize for file-level reasoning. You highlight a function, ask for a refactor, and hope the suggestion compiles. That model works well for backend services, test suites, and greenfield components. It struggles when the task is inherently visual: “move this CTA 8px lower,” “make the hero headline match the Figma weight,” or “this modal overlaps the nav on mobile but I cannot tell which wrapper is wrong.”

Frontman wires into the browser and dev server simultaneously. On the client, it inspects the DOM tree, computed styles, screenshots, and — for React — fiber nodes that reveal component hierarchy, props, and state. On the server, Next.js or Vite middleware exposes routes, compiled modules, build errors, and a rolling log buffer. The AI agent orchestrator queries both sides through MCP-style tools before writing edits. You get suggestions grounded in rendered reality, not just static analysis.

Tooling comparison at a glance

The tools are complementary, not mutually exclusive. Many teams keep Cursor for TypeScript refactors and reach for Frontman when the feedback loop needs a pixel-level anchor in the running app.

Architecture: dev-server middleware as an MCP bridge

Understanding Frontman’s architecture helps you reason about security boundaries and debug failures when WebSocket connections stall or tool calls time out. At a high level, three layers cooperate: the browser overlay, framework middleware in your dev server, and the Frontman server that orchestrates the AI agent.

When you navigate to http://localhost:3000/frontman on Next.js (or port 5173 on Vite), the middleware intercepts /frontman/* requests. UI assets load the chat interface and live preview. Tool endpoints accept POST calls for discrete operations — reading files, editing source, querying logs — and SSE streams for long-running responses. On the browser side, a client-side MCP server exposes DOM inspection, element selection, and console output.

The framework integration effectively turns your local dev server into an MCP server the agent can query. That is a meaningful design choice for teams already standardizing agent tooling around the Model Context Protocol. Server-side tools see Next.js route manifests, Vite HMR output, and filesystem operations scoped to projectRoot. Client-side tools see what users actually click. The agent stitches those signals together before calling edit_file on the correct path.

Browser-side and server-side context

• Client context: DOM tree, computed CSS, screenshots, selected elements, React fiber hierarchy, console logs.
• Server context: discovered routes, dev server logs, build/HMR messages, optional OpenTelemetry spans on Next.js.
• Agent loop: query tools, propose edits, write files, verify via hot reload and post-edit log checks.

Frontman only activates in development. Production builds strip the integration out. Your deployment artifact is identical whether the package is installed or not — a critical guarantee we expand on in the guardrails section.

Hands-on setup: Frontman with Next.js

Next.js is the most common entry point for React teams evaluating Frontman. Requirements are straightforward: Node.js 18+, Next.js 13.2 or later (including 14, 15, and 16). The installer detects your version and writes the correct middleware file.

From your project root, run the official installer:

npx @frontman-ai/nextjs install
npm run dev
# Open http://localhost:3000/frontman

The CLI adds @frontman-ai/nextjs as a dev dependency and creates middleware scaffolding. Works with App Router and Pages Router, and is compatible with Turbopack. If you prefer manual setup, install the package and wire middleware yourself — the integration API differs slightly between Next.js 13–15 and Next.js 16+.

Next.js middleware configuration

For Next.js 13 through 15, create or update middleware.ts at the project root (or src/middleware.ts):

import { createMiddleware } from '@frontman-ai/nextjs';
import { type NextRequest, NextResponse } from 'next/server';

const frontman = createMiddleware({
  projectRoot: process.cwd(),
});

export async function middleware(req: NextRequest) {
  const response = await frontman(req);
  if (response) return response;
  return NextResponse.next();
}

export const config = {
  runtime: 'nodejs',
  matcher: ['/frontman', '/frontman/:path*', '/:path*/frontman', '/:path*/frontman/'],
};

The matcher is not optional. Without it, Next.js runs middleware on every request, adding overhead across your entire app and often causing confusing 404 behavior for /frontman. Scope the matcher explicitly to Frontman paths only.

Next.js 16 introduced a dedicated proxy mechanism. In that case, create proxy.ts with the same createMiddleware factory and export an async proxy function instead of middleware. The matcher rules remain the same.

Monorepo users should set sourceRoot to the repository root while keeping projectRoot on the Next.js app package so file operations resolve correctly across workspace boundaries.

Optional OpenTelemetry instrumentation

For deeper observability — HTTP spans, per-route render timing, API route execution — add OpenTelemetry peer dependencies and an instrumentation.ts file:

export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    const { setup } = await import('@frontman-ai/nextjs/Instrumentation');
    setup();
  }
}

The NEXT_RUNTIME === 'nodejs' guard is required because OTEL SDKs cannot run in the Edge runtime. When enabled, the get_logs tool returns spans alongside console and build output, which helps the agent diagnose slow server components or failing API routes during visual edits.

Hands-on setup: Frontman with Vite and React

Vite remains the default dev server for React SPAs, internal tools, and SvelteKit projects. Frontman ships @frontman-ai/vite as a plugin that registers Connect middleware during vite dev only. Requirements: Node.js 18+, Vite 5.x or 6.x.

Install with the CLI:

npx @frontman-ai/vite install
npm run dev
# Open http://localhost:5173/frontman

Manual installation adds the plugin to your Vite config:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { frontmanPlugin } from '@frontman-ai/vite';

export default defineConfig({
  plugins: [
    frontmanPlugin(), // register before react()
    react(),
  ],
});

Vite plugin ordering and framework detection

Place frontmanPlugin() before framework-specific plugins so Connect middleware registers first. Frontman auto-detects React, Vue, Svelte, or SolidJS by reading the resolved plugin array — @vitejs/plugin-react maps to React, @vitejs/plugin-vue to Vue, and so on. No manual framework flag is required.

For React specifically, the client inspects fiber nodes to identify which component rendered a clicked element, along with props, state, context providers, and routes from React Router or TanStack Router. That runtime graph is what allows prompts like “reduce padding on this card” to land in the correct TSX file instead of a generic CSS patch in the wrong layer.

SvelteKit projects work without extra setup because SvelteKit uses Vite internally. Load functions, form actions, and SvelteKit routing appear in client context alongside the component tree.

Dev-server middleware: what actually runs locally

Whether you use Next.js middleware or the Vite plugin, the request routing model is consistent. Paths under /frontman/ dispatch to one of three handlers: the Frontman UI (injecting client JS and CSS), JSON tool calls at POST /frontman/tools/call, or an SSE stream at GET /frontman/tools for streaming responses. Non-Frontman requests pass through untouched — your app routes behave normally.

On Next.js, the get_routes tool scans app/ and pages/ for route files, returning dynamic segments and API methods. A circular log buffer (1024 entries) captures console.* output, bundler messages from Webpack or Turbopack, and uncaught exceptions with stack traces. Log capture begins when the middleware module imports; early startup logs may require the instrumentation hook described above.

On Vite, log capture starts when the dev server boots and persists until shutdown. HMR events and compilation errors surface as build-level log entries the agent checks after every edit_file call. If hot reload fails, query get_logs with level: "build" before blaming the model — the fix is often a TypeScript error introduced in the last edit.

Available MCP tools your agent can call

• Filesystem: read_file, edit_file, write_file, search_files, list_files, list_tree, file_exists.
• Next.js-specific: get_routes, get_logs (with optional OTEL spans).
• Vite-specific: get_logs for dev server output.
• Other: lighthouse for performance audits, load_agent_instructions for project docs like AGENTS.md.

File operations respect projectRoot and sourceRoot, which is your first line of defense against agents wandering outside the intended workspace.

Production guardrails every team should enforce

Frontman’s dev-only design is intentional, but guardrails still belong in your engineering policy. Treat Frontman like any powerful local agent: capable, convenient, and dangerous if misconfigured.

• Dev dependency only: Install @frontman-ai/nextjs or @frontman-ai/vite with --save-dev. Production builds exclude the middleware; verify with next build and inspect that no Frontman routes ship.
• Never expose dev servers publicly: Frontman assumes localhost trust boundaries. Do not tunnel an unauthenticated dev instance to the internet without additional access controls.
• Scope filesystem access: Set projectRoot and sourceRoot explicitly in monorepos. Avoid pointing roots at your entire home directory.
• API keys stay local: Frontman uses BYOK — Anthropic, OpenAI, or OpenRouter keys live in your environment, not in committed config. Rotate keys if a shared demo machine was used.
• All edits flow through git: Frontman writes real files. Enforce branch protection, required reviews, and CI checks. No agent output merges without human approval.
• Document who may prompt: Designers and PMs can change copy and spacing, but structural refactors should stay with engineers who read the diff.
• Self-hosting awareness: Client libraries are Apache 2.0; the server is AGPL-3.0. Legal review matters if you fork and redistribute the orchestrator.

Environment variables worth standardizing: FRONTMAN_HOST to override the default api.frontman.sh endpoint when self-hosting, and PROJECT_ROOT for containerized dev environments where process.cwd() differs from the mounted workspace.

For App Router projects, remember the server/client component boundary. Client components hot-reload immediately; server component edits may trigger a full refresh. Frontman handles the distinction, but your reviewers should still verify that accidental 'use client' promotions do not leak server-only imports.

Team workflow: designers, PMs, and engineers

The highest ROI setup is a one-time engineering bootstrap followed by broad safe usage. An engineer runs npx @frontman-ai/nextjs install or the Vite equivalent, documents the /frontman URL, and connects a shared BYOK provider or individual OAuth accounts. Designers iterate on typography, color, spacing, and marketing copy by clicking elements. PMs adjust CTA labels and layout experiments during review sessions without opening VS Code.

Engineers remain accountable for architecture: data fetching patterns, accessibility, performance budgets, and security-sensitive components. Frontman accelerates the last mile of UI polish; it does not replace system design, API contracts, or cloud infrastructure decisions. When a change touches shared design tokens or component library APIs, keep the conversation in pull requests with Storybook or Chromatic evidence.

Teams using OpenClaw can also install Frontman as a skill (openclaw skill install frontman-dev) for agent automation that needs component-tree awareness beyond a generic browser tool. OpenClaw handles shell, messaging, and file automation; Frontman specializes in precise visual edits inside your codebase.

When visual AI editing pays off—and when it does not

Frontman shines when the task is anchored to rendered output: marketing pages, dashboard layouts, design-system tweaks, and copy changes across routes. It is weaker when source mapping breaks on heavily abstracted component libraries, or when the work is primarily backend — database migrations, auth middleware, queue workers — where IDE agents remain stronger.

Early-stage projects should weigh documentation maturity. The GitHub repository is active and well-architected, but teams should expect rough edges and evolving hosted pricing as the product moves from free self-hosting toward paid service plans. Pilot on a single Next.js or Vite app before rolling out org-wide.

If your workflow is already optimized in Cursor with tight MCP integrations, add Frontman for the subset of tasks where seeing the page beats reading files. If your workflow depends on generating greenfield UI from prompts, tools like v0 still fit better. Frontman’s sweet spot is editing what you already ship.

Summary

Frontman is an open-source AI agent that embeds in your Next.js or Vite dev server, exposes runtime context through MCP-style tools, and lets anyone on your team edit React UI by clicking elements in the browser. Setup is a single CLI command — npx @frontman-ai/nextjs install or npx @frontman-ai/vite install — followed by opening /frontman alongside your app. Middleware handles UI, tool calls, and log capture locally; production builds remain unaffected.

Adopt it with clear guardrails: dev dependencies only, scoped project roots, git review for every change, and localhost-only exposure. Used that way, Frontman closes the gap between visual intent and source code for React teams without replacing your IDE, your CI pipeline, or your cloud DevOps practices.

FAQ

Does Frontman run in production builds?

No. Frontman is development-only. Next.js middleware and the Vite plugin are no-ops in production builds. Your deployment bundle is identical whether Frontman is installed or not.

Which frameworks does Frontman support?

JavaScript frameworks include Next.js, Astro, and Vite (React, Vue, Svelte, SolidJS, including SvelteKit). WordPress is supported via a separate plugin. This article focuses on React with Next.js and Vite.

How do I configure my AI provider?

Frontman uses BYOK. Connect Anthropic (Claude), OpenAI, or OpenRouter through the Frontman UI provider settings. You pay your LLM provider directly at their standard rates; self-hosting the open-source stack remains free aside from model usage.

Can non-developers use Frontman safely?

Yes, with guardrails. Designers and PMs can adjust visual properties and copy by clicking elements. Engineers should enforce git review, branch protection, and scoped projectRoot settings so prompts cannot modify arbitrary repositories.

What happens if Frontman introduces a compilation error?

Edits run a post-edit log check. Use the get_logs tool or your terminal to surface build-level errors. Fix the TypeScript or JSX issue manually or prompt the agent with the error output. HMR resumes once the project compiles again.

How does Frontman relate to MCP and OpenClaw?

Framework middleware exposes dev-server and browser context as MCP tools the agent queries. OpenClaw users can install the frontman-dev skill for specialized frontend editing with component-tree and computed CSS awareness beyond generic browser automation.