Project Structure
Understand the project structure of the codebase
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:
/app/(apps)/chat: Advanced AI assistant with generative UI, smart browsing, and document management/app/(apps)/pdf: chat with a PDF app using OpenAI, LangChain, Cloudflare R2, and Supabase/app/(apps)/audio: transcribe and summarize audio demo app using Whisper & LLaMA 3/app/(apps)/gpt: demo app using GPT & GPT-4o/vision/app/(apps)/dalle: demo app using DALL·E/app/(apps)/vision: demo app using OpenAI’s vision capabilities/app/(apps)/llama: demo app using LLaMA 3/app/(apps)/sdxl: demo app using Stable Diffusion XL (SDXL)/app/(apps)/claude: demo app using Claude 3.5 Sonnet/app/(apps)/grok: demo app using xAI`s Grok model/app/(apps)/voice: demo app using Elevenlabs’s voice capabilities
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/uiandmagicuicomponents- Demo-specific components (e.g., chat with PDF, audio transcription, general chat)
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.).