Project Structure

ContentAI follows a standard Next.js App Router layout. Here is what you'll find when you open the project:

ai-content-generator/
├── app/
│   ├── (dashboard)/           # Authenticated app routes
│   │   ├── dashboard/         # Overview & stats
│   │   ├── templates/         # Browse all AI templates
│   │   ├── generate/          # Template-based generation UI
│   │   ├── editor/            # Document editor with AI actions
│   │   ├── history/           # Past generations
│   │   ├── settings/          # API keys & model selection
│   │   └── layout.tsx         # Sidebar layout
│   ├── api/
│   │   └── generate/
│   │       └── route.ts       # The single AI endpoint
│   ├── globals.css            # Tailwind + shadcn theme
│   ├── layout.tsx             # Root layout + metadata
│   └── page.tsx               # Marketing landing page
├── components/
│   ├── ui/                    # shadcn/ui primitives
│   ├── app-sidebar.tsx        # Main nav
│   └── page-header.tsx        # Reusable page title
├── lib/
│   ├── store.ts               # Zustand store (api keys, generations, docs)
│   ├── templates.ts           # All 35+ templates + categories
│   └── utils.ts               # cn() and helpers
├── public/                    # Static assets
├── package.json
├── tsconfig.json
├── next.config.ts
└── components.json            # shadcn registry config

Key files to know

lib/templates.ts

The heart of the product. Every template is defined here as a plain object with:

• id, name, description, category, icon
• prompt — the system prompt sent to the AI with {field} placeholders
• fields — the inputs shown to the user on the Generate page

Adding a new template is as simple as appending to the templates array. See Customizing Templates.

lib/store.ts

Centralized Zustand store, persisted to localStorage under the key contentai-store. Holds:

• apiKeys — one per provider
• activeProvider — which provider is currently active
• selectedModels — the chosen model per provider
• generations — history of AI outputs
• documents — saved documents for the editor
• totalWords, totalGenerations — lifetime counters

The store is versioned. If you change its shape, bump version and add a migrate function so existing users don't lose data.

app/api/generate/route.ts

The only server-side code in the app. This route:

1. Reads the API key for the chosen provider from the request body
2. Instantiates the matching AI SDK client via createModel()
3. Calls generateText() with the prompt
4. Returns either the content or a parsed error message

Because keys are sent from the client with each request, no API keys ever touch your server's disk or environment variables. See Security for more.

components/app-sidebar.tsx

Left navigation shown on every dashboard route. Edit this to change the navigation structure or branding.

app/globals.css

Contains the Tailwind v4 @theme block with CSS custom properties for colors, radii, fonts. This is where you customize the theme — see Theming.

What's stored where

Where to add features

Next: Architecture Overview →