About & Architecture

PromptLab AI uses a layered pipeline with a clean provider abstraction that makes swapping the mock engine for a real Claude or OpenAI API a one-line change.

AI Pipeline

Input

AIProviderInput — originalPrompt + taskType

Weakness Analyzer

Detects vague language, missing context, hallucination risks → WeaknessItem[]

Variant Generator

Produces Balanced, Detailed Expert, Short Efficient → PromptVariant[]

Heuristic Scorer

Scores 4 dimensions (Clarity, Context, Specificity, OutputControl) → PromptScores

Comparator

Ranks variants by overall score, picks the winner → ScoredVariant[]

OptimizationResult

Assembled result saved to localStorage history

Each stage corresponds to a TypeScript interface. The pipeline runs entirely client-side with the mock provider — no server needed.

Architecture

Provider Abstraction

All AI logic sits behind an AIProvider interface. Swapping the mock provider for Claude or OpenAI requires changing exactly one line in src/lib/ai/index.ts.

// src/lib/ai/base-provider.ts
export interface AIProvider {
  readonly name: string;
  analyze(input: AIProviderInput): Promise<AIProviderResponse>;
}

// src/lib/ai/index.ts
export const activeProvider: AIProvider = new MockProvider();
// Swap in ClaudeProvider here for real AI

MockProvider — built-inClaudeProvider — plug-in readyOpenAIProvider — plug-in ready

Scoring Algorithm

Each prompt is scored across 4 heuristic dimensions. Every dimension uses a base score with additive bonuses capped at 100. overall = mean(clarity, context, specificity, outputControl)

Dimension	Base	Key bonuses
Clarity	50	Imperative opener, no fillers, ≥2 sentences, structured output
Context	30	Word count ≥30/60, domain keywords, audience mention, examples
Specificity	40	Quantifiers, technical terms, scope constraints, named entities
Output Control	20	Format specified, length constraint, tone/style, role assignment

Score color thresholds: Red < 50 · Amber 50–74 · Green ≥ 75

Tech Stack

Next.js 16

Framework

App Router, Server Components, file-based routing

TypeScript 5

Language

Strict mode, discriminated unions, full type safety

Tailwind CSS v4

Styling

CSS-first configuration, dark mode via class strategy

shadcn/ui + Base UI

Components

Accessible headless components built on Radix primitives

Framer Motion

Animation

Pipeline animations, score bar entrances, page transitions

next-themes

Theming

SSR-safe dark/light mode with system preference detection

nanoid

Utility

Compact, URL-safe unique IDs for results and history entries

localStorage

Storage

Versioned JSON schema, SSR-safe, max 50 entries

What's next

Phase 7: Real Claude API integration via ClaudeProvider
Prompt version diffing — compare your original vs optimized side-by-side
Batch optimization — submit multiple prompts at once
Export to PDF or Markdown
User accounts with cloud sync (Supabase)