Integration
Frontman for Next.js
Visual Editing with Full React and Server Context
Frontman is an open-source AI coding agent that lives in your browser. The Next.js integration installs as middleware in your dev server, giving the AI access to the React component tree, server components, API routes, and computed styles.
Click any element in your running Next.js app. Describe what you want to change in plain English. Frontman generates real source code edits with instant hot reload. Designers and PMs can make visual changes directly in the browser without opening an IDE.
60-second install. App Router and Pages Router. Turbopack compatible. Free and unlimited with BYOK.
Get Started in 60 Seconds
Install
npx @frontman-ai/nextjs install Open Frontman
http://localhost:3000/frontman Connect your AI
Enter your API key for any supported provider. That's it.
What Frontman Sees in Your Next.js App
Frontman runs as middleware inside your dev server, which gives it access to runtime information that browser extensions and CLI overlays can't reach.
React Runtime
- Component tree (fiber nodes)
- Props and state for every component
- Context providers and consumers
- Client vs server component boundaries
Next.js Server
- App Router and Pages Router routes
- Server components and their data
- API route handlers
- Middleware chain execution
Styles & Layout
- Computed CSS with full cascade
- CSS Modules, Tailwind, styled-jsx resolution
- Layout shift detection
- Responsive breakpoint context
Dev Server
- Turbopack / Webpack HMR pipeline
- Server-side logs and errors
- Build warnings and type errors
- Hot reload feedback loop
How It Works with Next.js
The @frontman-ai/nextjs package installs a Next.js plugin that hooks into the dev server as middleware. It doesn't proxy your traffic or modify your build output. In production, the middleware is stripped out and your deployment bundle is untouched.
Frontman understands the App Router's conventions: layouts, pages, loading states, error boundaries, and the server/client component boundary. When you click an element rendered by a server component, it recognizes the boundary and generates appropriate server-side edits.
Instead of parsing the DOM and guessing which component rendered an element, Frontman walks the React fiber tree directly. It identifies the exact component, its props, its state, and its position in the hierarchy. Edits land in the right file on the right component, not a sibling or parent.
The server side is visible too. Routes, middleware execution, server logs, and query timing are all available. If a component is slow because of a database query in a server component, the AI can see that. If an API route returns unexpected data, the server-side error shows up alongside the visual result.
Every edit is written to your source files and reflected through Next.js's hot module replacement. You see the change in the browser immediately, without a page reload or state loss. Works with both Turbopack and Webpack.
Who Uses Frontman with Next.js
Frontend developers use it to skip the Figma-to-code round trip. Click a misaligned button, say "fix the padding and match the design system", get a source code edit in the right component file.
Full-stack developers get edits that span the stack. The AI sees both the server-side data flow and the client-side rendering, so you can say "show the user's avatar in the nav, pulling from the session" and get edits across server and client components.
Designers and PMs open the staging site in a browser, click elements, and describe changes in plain English. No IDE or terminal needed. The AI generates a code change that developers review in their normal PR workflow.
Teams already using Cursor or Copilot can run Frontman alongside those tools. Use Cursor for backend logic and refactoring, Frontman for visual frontend editing where seeing the rendered output matters. They all edit the same source files.
How This Compares
Other tools take different approaches to AI-powered frontend editing.
Cursor is an AI-powered IDE with autocomplete and agent mode. Strong for backend code, but it works entirely from source files and never sees the running browser.
Stagewise is a CLI overlay that injects a toolbar into your browser. Zero install friction, but the context is shallower (DOM-level only, no React component tree) and free usage is capped at 10 prompts/day.
v0 generates new UI in a sandbox from text prompts. It's a different use case: v0 creates new components, Frontman edits your existing running application.
See our comparison pages for feature tables and pricing breakdowns.
Frequently Asked Questions
How do I install Frontman in a Next.js project?
Run npx @frontman-ai/nextjs install in your project directory. This adds the Frontman middleware to your Next.js dev server. Then start your dev server normally (npm run dev) and visit localhost:3000/frontman in your browser. The entire setup takes about 60 seconds.
Does Frontman work with the App Router?
Both App Router and Pages Router are supported. Frontman sees server components, client components, and the boundary between them. When you click an element rendered by a server component, it recognizes the boundary and generates server-side edits accordingly.
Does Frontman work with Turbopack?
It works with both Turbopack and Webpack. Frontman hooks into the dev server at the middleware level, so the bundler choice is irrelevant. Edits are reflected instantly through HMR either way.
What AI models can I use with Frontman?
Any LLM provider via BYOK (bring your own key). Connect Claude, ChatGPT, or any OpenAI-compatible API through OpenRouter. You pay your LLM provider directly at their standard rates. There are no prompt limits or usage caps on the Frontman side.
Does Frontman modify my production build?
The middleware only runs in development mode. Production builds strip it out automatically. Your deployment bundle is identical whether Frontman is installed or not.
Can non-technical team members use Frontman?
Designers and PMs can open the running app in a browser, click any element, and describe changes in plain English. They do not need an IDE or terminal access. The AI generates source code edits that developers review in their normal PR workflow.
How is this different from Cursor or Copilot for Next.js development?
Cursor and Copilot work from source code and never see the running application. Frontman works from the browser, where it can read the rendered DOM, computed styles, React component tree, and server-side context. They are complementary: use Cursor/Copilot for backend logic, Frontman for visual frontend work. See our comparison pages for details.
Add Frontman to Your Next.js Project
One command. 60 seconds. No account required.
$ npx @frontman-ai/nextjs install