How Senior Engineers Actually Build With AI in 2026 | Build a Full Stack Systems Architecture App

Tech/product concept summary (Ghost AI + “spec-driven” agentic full-stack build)

• Core premise (senior engineering mindset in 2026): Senior engineers spend more effort on system design and architecture decisions than on typing code. The video argues that the biggest failure mode of AI-assisted coding is architecture drift: agents may implement features initially well, but later changes break earlier assumptions. The fix is to externalize architectural thinking and give the agent a stable execution plan.

Ghost AI product being built

• A real-time collaborative system design workspace
• Users describe systems in plain English
• An AI agent maps the system into a shared canvas (live multi-user)
• Collaborators edit the design together; when ready, the app generates a technical spec (Markdown) intended to be build-ready
• The “demo stack” is geared for production-grade app development and agent workflows

What makes the tutorial different (vs typical AI coding tutorials)

Specs-first methodology

Before writing any code, the builder creates:

1. Architecture + project plan as documents (“6-file context system”)
2. Per-feature specs (“feature spec” units) that define:
   • goal
   • scope
   • dependencies
   • invariants
   • a verification checklist
3. Then those specs are given to the AI coding agent, in small scoped units to prevent contradictions

Six-file context system (agent memory + discipline across sessions)

Context files used to keep reasoning consistent across sessions:

• project overview (what the product is + goals + core flows + explicit out-of-scope)
• architecture (tech stack, layer boundaries, invariants)
• code standards (rules to keep outputs consistent: TS conventions, Next.js patterns, Tailwind token usage, etc.)
• AI workflow rules (behavior rules like “work one unit/subsystem at a time”)
• UI context (design tokens + component conventions)
• progress tracker (continuously updated state so the agent doesn’t “forget” where it left off)

Plus: an agents.md instruction file that tells the coding agent which context files to read (and to update the progress tracker after changes).

Per-feature spec workflow (unit-by-unit)

• Break work into concrete units small enough to implement in a focus session
• Each unit gets its own spec file and results in:
  • code
  • checklist verification
• If something breaks, the builder writes focused corrective prompts for that specific issue (not broad “fix everything”)

Key implementation features showcased

1) Full-stack production stack (as described)

• Next.js / React (App Router)
• Real-time collaboration canvas:
  • Liveblocks + React Flow (collaborative multiplayer room)
• Auth + user management:
  • Clerk (sign-in/sign-up, route protection, user button)
  • Emphasis on explicitly configuring protected/public routes and matching Next.js middleware naming (proxy.ts for newer Next.js)
• Database:
  • Prisma + Postgres
  • Models for project, project collaborator, and later task runs for trigger tasks
  • plus project spec (for generated spec persistence)
• Background jobs + long AI calls:
  • Trigger.dev (durable tasks so long AI generation doesn’t time out)
• File storage:
  • Vercel Blob (private storage for canvas snapshots + generated spec markdown)

2) Realtime collaboration and canvas editing

Supported canvas features:

• Multi-user shared room syncing (nodes/edges + presence)
• Node shapes (SVG-based variants)
• Drag/drop from a shape panel into canvas
• Node resizing and inline label editing
• Node color toolbars with palette and contrast-aware text color
• Custom edges:
  • handles on multiple sides (top/right/bottom/left)
  • inline label editing on edges
• Canvas ergonomics:
  • zoom controls and undo/redo keyboard shortcuts
  • removing mini-map (preference)
• Starter templates:
  • import predefined diagrams into the shared canvas

3) Collaboration presence + avatars/cursors

• Presence indicators show other collaborators:
  • cursor position + names + color
  • top-right avatar stack
• Separately, an AI activity indicator:
  • shows when the AI is generating
  • disables relevant UI during generation

4) Project management UI with real data

• Editor layout includes:
  • navbar and sidebar shells
  • create/rename/delete project dialogs
  • project list actions restricted by ownership vs collaborator role
• Data flow:
  • UI starts with mock project data, then wires to:
    • CRUD REST endpoints for projects (GET list, POST create, PATCH rename, DELETE)
  • server-side access control checks:
    • only authenticated users can access
    • only project owners can mutate/rename/delete

5) Secure workspace routing + access control

• Workspace pages:
  • redirect unauthenticated users to sign-in
  • show “access denied” for non-access users or non-existent projects
• Collaborator flow:
  • share dialog lets owners invite collaborators by email
  • permissions verified server-side (Clerk + database model)
  • invite/remove permissions enforced for roles

6) AI generation inside the app (Trigger.dev + Liveblocks)

• Why not run AI generation inside API routes: long-running steps require durable background jobs, streaming status updates, and avoiding request timeouts.

• Design generation flow:

  • user sends an architecture prompt from an in-app AI sidebar
  • app triggers a Trigger.dev task (design agent)
  • task uses Gemini to generate a structured list of canvas actions
  • actions are applied into Liveblocks shared storage, so all users see updates in real time

• Important engineering detail (tool-calling fix):

  • the video documents schema failures with structured output
  • fix: switch from “structured JSON output” to a tool-calling style, where each canvas action is its own tool for schema-accurate execution

7) AI spec generation + persistence + download

After generating canvas designs, the app generates a Markdown spec using the same async pattern:

• Trigger.dev task generates markdown from:
  • canvas state
  • chat history
• Markdown is stored in Vercel Blob (private)
• Prisma stores blob URL/path in a project spec model
• Secure download route:
  • authenticates user
  • verifies project access
  • fetches blob and returns markdown for download/preview

Tutorials / guides referenced as free resources

• Mentions a free “6-file context system” guide (link in description)
• Mentions a broader “spec-driven agentic development course” (newsletter/waitlist)

Review / debugging workflow highlighted

• CodeRabbit integration used repeatedly:
  • PR-based review and inline VS Code comments
  • example issues caught:
    • accessibility fixes (e.g., accessibility names for icon buttons)
    • spec mismatches (missing props like onClose)
    • edge cases (slug validation)
    • security issue: accidentally publishing current issues.md containing JWT/handshake secrets
      • fixed by adding to .gitignore and removing from repo
    • React/Next behavior issues (e.g., Strict Mode double effects breaking save logic)
• Agent skill usage:
  • installing framework-specific skills for tools:
    • Clerk skills
    • Prisma skills
    • Liveblocks skills
    • Trigger.dev skills
  • emphasis: when debugging tool-specific behavior, ensure relevant agent skills exist and ask the agent to consult “best practices” for that tool

Main speakers / sources (as implied by the subtitles)

• Primary speaker: the video author/instructor (refers to themself repeatedly; mentions services like “Ghost AI” and “specdriven agentic development course”)
• Tool/vendor sources mentioned throughout:
  • Clerk, Liveblocks, Trigger.dev, Vercel (Blob), Prisma (Postgres), Next.js/React Flow, Gemini (Google AI Studio), CodeRabbit