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

​
Overview

The project is organized into several main directories, with a special focus on modularity and separation of concerns. Each demo application is designed to be independent and easily extractable from the main codebase.

​
Core Directories

​
1. /app

The main application directory containing:

  • /app/(apps): All demo applications
  • /app/(landing-pages): Landing pages consolidated in one place
  • /app/api: API endpoints and routes
  • /app/auth: Authentication and session management
  • /app/blog: Blog pages and content

​
2. /components

UI components organized as:

  • /components/(ui-components): Shared UI components (heroes, navbars, etc.)
  • /components/(apps): App-specific components
  • Built on shadcn/ui and magicui

​
3. /lib

Core utilities and shared functionality:

  • /lib/ai: AI-related utilities and configurations
  • /lib/db: Database operations
  • /lib/clients: API clients and integrations
  • /lib/hooks: Custom React hooks
  • /lib/utils: Helper functions
  • /lib/types: TypeScript definitions

​
4. /blog

Blog post content and related assets.

​
5. config.ts

Core configuration file for website settings.

​
Demo Applications

Each demo application in /app/(apps) is structured consistently across three locations:

  1. Frontend pages & config: /app/(apps)/*
  2. UI components: /components/(apps)/*
  3. API routes: /app/api/(apps)/*

Current demo apps include:

  • Chat: Advanced AI assistant with generative UI
  • PDF: Chat with PDF capabilities using OpenAI and LangChain
  • Audio: Transcription using Whisper & LLaMA 3
  • GPT: GPT-4 and GPT-4V integration
  • DALL·E: Image generation
  • Vision: OpenAI vision capabilities
  • LLaMA: LLaMA 3 integration
  • SDXL: Stable Diffusion XL
  • Claude: Claude 3.5 Sonnet integration
  • Grok: xAI’s Grok model
  • Voice: Elevenlabs voice capabilities

​
Working with Demo Apps

​
Extracting Individual Apps

You can easily extract any demo app from the codebase. For example, to use just the chat app:

  1. Keep these folders:

    • /app/(apps)/chat
    • /components/(apps)/chat
    • /app/api/(apps)/chat

  2. Retain necessary shared components from:

    • /components/(ui-components)
    • /lib utilities

  3. Remove other app folders as needed

This modular structure allows you to maintain only the features you need while keeping your codebase clean and focused.

Demo applications

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