Framework
Next.js 14 App Router
The project is built on Next.js with the App Router, which gives it a single codebase for frontend UI, route structure, global styling, and server-side API handling.
Main Stack
What powers this AI prompt authoring tool and how the frontend and backend are split.
UI layer
React 18
The interface is a React app composed of focused components for system prompt sections, user prompt sections, examples, output rendering, and information overlays.
Language
TypeScript
The app and its API route are written in TypeScript, which helps structure prompt-building state, file-analysis responses, component props, and utility logic.
Styling
Tailwind CSS
The visual system uses Tailwind and custom global styling to create the premium dark UI, spacing system, and responsive layout rather than a traditional CSS file-per-component approach.
AI integration
Anthropic SDK
The app sends uploaded image data to Claude through the official Anthropic SDK, using an internal API route to generate contextual prompt suggestions from visual references.
Interaction model
Real-time prompt assembly
The main product value is not just static form entry. The app continuously assembles structured prompt output as the user edits sections and augments it with AI-assisted suggestions.
How It Runs
The app combines browser-side prompt editing with server-side image analysis.
1
Next.js serves the app shell
app/page.tsx renders the main interface and mounts the prompt-building experience within the App Router structure.
2
React manages prompt state
The core builder component coordinates prompt sections, examples, uploaded reference files, project naming, and generated output text in client-side state.
3
The browser can upload a visual reference
Users can drag or select images and supporting files, then trigger AI analysis to extract persona, constraints, task, requirements, and tech-stack suggestions.
4
The API route calls Claude
app/api/analyze-image/route.ts receives base64 image data, sends it to Claude Sonnet 4 through the Anthropic SDK, and parses the structured JSON suggestions.
5
The UI incorporates the suggestions
The React frontend receives the generated recommendations and surfaces them back into the builder flow, helping the user create a stronger final prompt.
Architecture Map
This project is a modern full-stack frontend tool rather than a purely static page.
Key folders
app/App Router pages, root layout, global CSS, and the image-analysis API route.
components/Main prompt builder UI, output renderer, file-analysis section, and helper overlays.
lib/Utility helpers for class merging and shared support logic.
public/Static assets like the favicon.
backlog/Roadmap, documentation, and product planning notes.
app/docs/Supporting prompt guidance files and reference material used by the product.
Architecture Analysis
package.json next.config.js tailwind.config.ts tsconfig.json app/page.tsx app/layout.tsx app/globals.css app/api/analyze-image/route.ts components/prompt-builder.tsx components/generated-prompt.tsx components/section-examples.tsx
This project is structurally closer to Card Tracker than to the static calculators, but its value is centered on AI-assisted authoring rather than data dashboards.
Data and AI Layer
The app is primarily about shaping and exporting prompt content, with optional server-side AI assistance.
Client-side authoring
Prompt composition lives in the browser
Users build system and user prompts interactively.
The generated prompt view updates in real time.
Export and copy behavior are client-facing workflow features.
The app is useful even before AI analysis is triggered.
Server-side analysis
Claude is used for visual prompt suggestions
The analyze-image route accepts image data and media type.
Claude returns structured JSON suggestion groups.
The route validates input and handles API-key errors.
The AI layer enriches the authoring flow rather than generating the entire product output by itself.
Run Commands
The normal Next.js local and production workflow applies here.
Scripts
npm install npm run dev npm run build npm start npm run lint
This is a standard Next.js workflow. The AI-assisted image analysis path also requires the Anthropic API key to be configured.
Environment setup
What the app expects
ANTHROPIC_API_KEY for the image-analysis route.
Node.js and npm.
No separate database is required for the current app shape.
The frontend and API route are served from the same Next.js app.
Bottom Line
Prompt Builder is a Next.js + React + TypeScript application with a focused Claude-powered backend route. It combines structured prompt authoring, file-aware workflow, and AI-assisted suggestion generation inside a single App Router product.