标签：#preview

Inside the NEXUS AI App Builder: an agentic full-stack workspace, not a code generator Published: August 4, 2026 Category: AI Builder Reading time: 11 minutes Author: NEXUS AI Team Most "AI app builders" do one thing well: turn a prompt into a first draft. Ask for a second change, a real database, or a form that actually submits, and the illusion breaks. You are back in a normal editor, debugging code nobody on your team wrote. The NEXUS AI App Builder is built around a different assumption: the first draft is the easy part. The workspace has to survive edit five, edit fifty, a broken build, a schema change, and a handoff to a teammate or another AI agent, without you ever leaving the conversation. This post walks through how the Builder actually works: the agentic edit loop, the two ways to preview a change, visual iteration, sharing and remixing, the MCP handoff that lets coding agents use it directly, and how a Builder project becomes a deployed production app. What most AI builders actually give you Tool type Generates Stops short of One-shot text-to-code A first draft from a single prompt Verifying it runs, fixing its own errors, a second coherent edit Chat-based code snippets Functions and components you copy in Anything outside the snippet: routing, schema, deployment Visual UI builders A styled interface Real backend logic, a database, form submission that persists data NEXUS AI App Builder A real Next.js and Prisma app, verified, previewed, shareable, deployable Nothing on this list. It is the full loop, in one workspace. The pattern in the first three rows is the same: something hands you code, then the responsibility for making it actually work lands back on you. The Builder is built to keep that responsibility on the agent for as long as possible. It edits files and verifies its own work The Builder is not a single prompt-to-code call. It is an agent with bounded file tools that reads and edits your actual project files, the same way a developer would. Y

When you wire up a payload cms live preview , you’re not just plumbing a URL—you’re building a contract between the admin panel and your Next.js App Router. The goal is keystrokes-ago fidelity: editors click Preview, land on your front end, and see exactly what’s in the draft, even when the public site is cached to the hilt. Our implementation at techpotions settled on one preview route, one shared secret, and one shared URL builder. Here’s every decision that made it work. One /next/preview route for the entire site The admin panel’s preview button doesn’t need to know about your page structure. It calls a single /next/preview route with a secret query param and a slug search param that points to the document being previewed. // app/(payload)/next/preview/route.ts import { draftMode } from ' next/headers ' import { redirect } from ' next/navigation ' export async function GET ( request : Request ) { const { searchParams } = new URL ( request . url ) const secret = searchParams . get ( ' secret ' ) const slug = searchParams . get ( ' slug ' ) if ( secret !== process . env . PREVIEW_SECRET ) { return new Response ( ' Invalid token ' , { status : 401 }) } const draft = await draftMode () draft . enable () redirect ( slug ?? ' / ' ) } That’s the entire route. No collection-specific logic, no second-guessing which page type is involved. The redirect lands on the actual page, which reads draftMode().isEnabled and fetches accordingly. This is the pattern the Payload CMS preview documentation expects: a function that resolves to a string with additional URL parameters pointing to your app. The preview-URL builder lives in one shared lib Here’s where most implementations drift apart. The admin config, the preview route, and each page component all need to agree on how a preview URL is constructed. Store that logic in one place—a single getPreviewUrl utility imported everywhere—or you’ll be chasing 404s in production when someone renames a collection slug. // lib/getPreviewU