Add Runtime Context to Your AI Coding Workflow (Next.js + Frontman)

This is a practical walkthrough. We'll take a Next.js app with a layout bug, install Frontman, and fix the bug by clicking the broken element in the browser instead of describing it to an AI that can't see it. By the end you'll know whether runtime-aware AI coding actually saves time or is just a debugger with extra steps. (Spoiler: it's both.) Prerequisites A Next.js 14 or 15 project (or npx create-next-app@latest to create one) An API key from Claude, OpenAI, or OpenRouter 5 minutes Step 1: Install Frontman npx @frontman-ai/nextjs install That's it for setup. The installer handles your config automatically. Start your dev server: npm run dev When you open your app in the browser, you'll see a small Frontman toolbar. Click it and enter your AI key (Claude, OpenAI, or OpenRouter). The key is stored locally in your browser — it's never sent anywhere except directly to your AI provider. Step 2: The Bug Let's create a realistic layout bug. Here's a card grid component with a subtle proble