Project Structure

The AI Feedback Assistant combines components from both the AI UX Kit and SaaS Starter Kit into a single demo application. This guide explains how the project is organized.

Directory Overview

ai-feedback-assistant/
├── app/
│   ├── authentication/         # Root-level auth pages
│   │   ├── login/
│   │   ├── signup/
│   │   ├── forgot-password/
│   │   ├── reset-password/
│   │   └── otp/
│   ├── home/                   # Main application dashboard
│   ├── onboarding/             # First-time user setup
│   ├── notifications/          # Notification center
│   ├── composites/             # Component explorer (28 pages)
│   ├── primitives/             # Component explorer (21+ pages)
│   ├── recipes/
│   │   ├── authentication/     # Auth recipe demos
│   │   ├── settings/           # Settings page demos
│   │   ├── teams/
│   │   ├── notifications/
│   │   ├── prompt-submission/
│   │   ├── refinement/
│   │   ├── citation/
│   │   ├── compare/
│   │   ├── upload/
│   │   ├── voice/
│   │   ├── error-handling/
│   │   └── session/
│   ├── templates/
│   ├── globals.css
│   └── layout.tsx
├── components/
│   └── ui/
│       ├── primitives/         # 23 components
│       ├── composites/         # 27 components
│       ├── recipes/            # 56 components
│       └── templates/          # 30 components
├── hooks/
├── lib/
├── public/
├── components.json
├── next.config.ts
└── package.json

How the Kits Merge

The AI Feedback Assistant starts with the SaaS Starter Kit (which already includes all AI UX Kit components) and adds:

1. Root-Level Authentication

Instead of only having auth pages under /recipes/authentication/, the demo promotes them to root-level routes:

/authentication/login          ← Production-ready route
/recipes/authentication/login  ← Demo/explorer route

This shows how you'd structure auth in a real app.

2. Application Pages

Pages that don't exist in the component kits:

• /home — main dashboard after login
• /onboarding — first-run setup wizard
• /notifications — in-app notification center

3. Additional Template

One extra template component compared to the SaaS Starter Kit (30 vs 29).

Component Counts

Tier	Count
Primitives	23
Composites	27
Recipes	56
Templates	30
Total	136

Key Differences from SaaS Starter Kit

Feature	SaaS Starter Kit	AI Feedback Assistant
Auth pages	Recipe-level only	Root-level + recipe-level
Home page	—	Included
Onboarding	—	Included
Notifications page	Recipe demos only	Full page + recipes
Next.js version	15.x	16.x
Templates	29	30

File Organization Pattern

The demo follows the same four-tier component architecture:

1. Primitives → atomic building blocks
2. Composites → multi-part components
3. Recipes → purpose-built patterns
4. Templates → full page sections

Each tier has both component files (in components/ui/) and demo pages (in app/).