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

Contains various functionalities used throughout the app. This is further subdivided into lib/hooks, lib/services, lib/types and lib/utils.

​
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.).

Chat with PDF app

Build your own Chat with a PDF app.

Transcribe audio

Build your own audio transcription app.

Set up email

Set up your first email funnel using Loops.

Set up storage

Set up S3 compatible storage using Cloudflare R2.

Get startedSupabase