Spend time getting familiar with the folder structure. It will help you move faster!

Folder Structure

1. /app

All pages are under the /app folder, including:

  • /app/api: API endpoints for AI generations, retrieval, authentication, file uploads, payments, vector embeddings, etc.
  • /app/auth: authentication and session confirmation
  • /app/page.tsx: landing page
  • /app/blog/*: blog-related pages
  • /app/home: home page for logged-in users
  • /app/thanks: thank you page after successful purchase

Demo applications:

Each demo app has a toolConfig file for metadata, AI model, themes, form fields, etc. Some apps also have prompt.ts & schema.ts for prompts and JSON schema.

Demo applications

2. /components

Contains all UI components for the app and demo applications:

  • Heros, navbars, footers, feature sections, FAQs, etc.
  • shadcn/ui and magicui components
  • Demo-specific components (e.g., chat with PDF, audio transcription, general chat)
Check out the design section for more information!

Design

Build beautiful web apps using TailwindCSS, daisyUI, shadcn/ui & magicui.

3. /blog

All blog posts go here. Each file is one post and will be automatically added to your blog section and sitemap.

4. /lib

Core functionality and utilities:

  • /lib/ai: AI-related utilities, prompts, and model configurations
  • /lib/db: Database operations and cached queries
  • /lib/clients: API clients and service integrations
  • /lib/hooks: Custom React hooks
  • /lib/utils: Helper functions and utilities
  • /lib/types: TypeScript type definitions

5. config.ts

The core configuration file of your project. It contains your website’s title, description, logo, URL, theme, etc.

You can find more details regarding the different demo applications on their respective documentation page. The same goes for the different services used throughout the codebase (payments, auth, storage, etc.).