Frontman Quickstart: First UI Edit

Written by Danni Friedland, Co-founder, Frontman on

Last updated:

tutorialgetting-started

By the end of this tutorial, you will have installed Frontman, signed in, connected an AI provider, selected a button in your running app, and asked Frontman to edit its source code.

Prerequisites

Step 1: Install Frontman

Stop your dev server, then run the command for your framework from the project root.

Next.js:

Terminal window
npx @frontman-ai/nextjs install

Vite (React, Vue, or Svelte):

Terminal window
npx @frontman-ai/vite install

Astro:

Terminal window
npx astro add @frontman-ai/astro

These commands install the framework-specific package and wire Frontman into the development server. The files changed depend on the framework:

Framework Files added or updated
Next.js 16 package.json, your lockfile, proxy.ts or src/proxy.ts, and instrumentation.ts or src/instrumentation.ts
Next.js 13-15 package.json, your lockfile, middleware.ts or src/middleware.ts, and instrumentation.ts or src/instrumentation.ts
Vite package.json, your lockfile, and vite.config.ts, .js, .mts, or .mjs
Astro package.json, your lockfile, and astro.config.mjs or equivalent

Run git diff after installation and review these changes before continuing.

These compatibility ranges describe the current packages published to npm. Repository support can land before a new package release, so use the published package metadata as the source of truth.

Step 2: Restart Your Dev Server

Start your project as usual:

Terminal window
npm run dev

After installation, open /frontman on the same origin as your app:

Frontman opens as a full-page workspace with chat on the left and a live preview of your app on the right. If your dev server uses another port, keep that port and append /frontman.

Step 3: Sign In

On your first visit, Frontman shows a welcome dialog and redirects you to sign in. Complete GitHub or Google OAuth. After authentication, you return to the /frontman workspace.

Step 4: Connect an AI Provider

Frontman requires a provider before chat is enabled. In the provider setup dialog, click Connect AI provider. The Providers settings tab supports:

Connect one provider, then choose an available model in the chat composer. Provider credentials are saved to your Frontman account; they are not written into your project files.

Step 5: Select and Change a Button

In the chat composer, click Select. The control changes to Selecting… and your cursor becomes a crosshair over the live preview. Click a button in the preview. Frontman adds the selected element to your prompt with its DOM, source, style, and screenshot context when available.

Now type:

Make this button use our primary color

Send the prompt. Frontman inspects the selected element and project context, edits the relevant source file, and lets your framework’s hot reload update the preview.

The exact diff depends on your project. A Tailwind button change might look like this:

<button className="bg-gray-600 text-white px-4 py-2 rounded">
<button className="bg-primary text-white px-4 py-2 rounded">
  Get Started
</button>

The diff is in your working tree. Run git diff to see it. This is a normal code change — your team reviews it like any other PR.

Step 6: Iterate or Commit

If the result is not quite right, describe what is off:

Use the darker shade — primary-700

Frontman applies the correction. Keep iterating until it looks right, then commit the change.

What Just Happened

You selected a live UI element inside the /frontman workspace, described a change in plain English, and Frontman:

  1. Captured the selected element and its rendered context
  2. Resolved source and component information exposed by your framework
  3. Used your connected provider to plan and apply the edit
  4. Wrote the change to your normal working tree
  5. Let your framework’s hot reload show the result

The result is real source code that goes through your normal review process.

Next Steps