Skip to main content

​
Prerequisites

Before getting started with AI Studio development, ensure you have the following installed:

​
Quick Start

Get AI Studio running locally in under 5 minutes.
1

Clone the repository

git clone https://github.com/babajidemm/aistudio.git
cd proppi
2

Install dependencies

AI Studio uses pnpm for package management:
pnpm install
3

Set up environment variables

Copy the example environment file:
cp .env.example .env.local
Update .env.local with your credentials. See the Environment Variables guide for details.
4

Initialize the database

Push the database schema to your PostgreSQL instance:
pnpm db:push
This creates all necessary tables using Drizzle ORM.
5

Configure Trigger.dev (Background Jobs)

  1. Create a free account at cloud.trigger.dev
  2. Get your DEV secret key from the API Keys page
  3. Add it to .env.local:
TRIGGER_SECRET_KEY=tr_dev_xxxxxxxxxx
6

Start development servers

AI Studio requires two servers running simultaneously:Terminal 1 - Next.js development server:
pnpm dev
Terminal 2 - Trigger.dev background job processor:
pnpm trigger
Your application will be available at http://localhost:3000

​
Available Commands

AI Studio provides several npm scripts for development and database management:

​
Development

# Start Next.js development server
pnpm dev

# Start Trigger.dev development server (background jobs)
pnpm trigger

# Build for production
pnpm build

# Start production server
pnpm start

# Run ESLint code quality checks
pnpm lint

​
Database Operations

# Push schema changes to database (recommended for development)
pnpm db:push

# Generate migration files from schema changes
pnpm db:generate

# Apply migrations to database
pnpm db:migrate

# Open Drizzle Studio (database GUI)
pnpm db:studio
See the Database Setup guide for more details on database operations.

​
Email Development

# Preview email templates in browser
pnpm email
This starts a preview server for React Email templates located in the emails/ directory.

​
Background Jobs

# Run Trigger.dev workflows locally
pnpm trigger

# Deploy Trigger.dev workflows to production
pnpm trigger:deploy

​
Project Structure

Understanding the codebase organization: 
proppi/
├── app/                    # Next.js App Router
│   ├── api/               # API routes
│   │   ├── auth/         # Better Auth endpoints
│   │   └── edit-photo/   # Fal.ai image processing
│   ├── dashboard/         # Main dashboard pages
│   │   ├── page.tsx      # Projects grid/table view
│   │   ├── settings/     # Workspace & team settings
│   │   └── [id]/         # Project detail pages
│   └── admin/            # Admin panel
│       ├── users/        # User management
│       └── workspaces/   # Workspace oversight
├── components/            # React components
│   ├── ui/               # shadcn/ui base components
│   ├── dashboard/        # Dashboard-specific components
│   ├── projects/         # Project creation workflow
│   ├── settings/         # Settings page components
│   ├── admin/            # Admin panel components
│   └── tables/           # Data tables with virtual scrolling
├── lib/                   # Core utilities
│   ├── db/               # Database client & schema
│   │   ├── index.ts      # Drizzle client configuration
│   │   └── schema.ts     # Database table definitions
│   ├── actions/          # Server Actions
│   ├── auth.ts           # Better Auth configuration
│   ├── style-templates.ts # AI style templates
│   └── siteconfig.ts     # Site configuration
├── hooks/                 # React hooks (use-*.ts)
├── emails/                # React Email templates
├── trigger/               # Trigger.dev workflows
├── public/                # Static assets
└── drizzle/              # Generated migrations

​
Development Workflow

​
File Naming Conventions

  • Components & Routes: kebab-case (e.g., project-detail-content.tsx)
  • Hooks: use-*.ts or use-*.tsx pattern
  • API Routes: route.ts in App Router directories
  • Server Actions: actions.ts in feature directories

​
Coding Standards

  • TypeScript: All code should be TypeScript (.ts or .tsx)
  • Linting: Run pnpm lint before committing
  • Styling: Use Tailwind CSS utility classes
  • Components: Follow existing shadcn/ui patterns

​
Commit Guidelines

AI Studio follows Conventional Commits: 
feat: add video wizard step
fix: handle upload errors
docs: update API documentation
refactor: simplify image processing logic
chore: update dependencies

​
Troubleshooting

​
Port Already in Use

If port 3000 is already in use: 
# Kill the process using port 3000
lsof -ti:3000 | xargs kill -9

# Or run on a different port
pnpm dev -- -p 3001

​
Database Connection Issues

  1. Verify your DATABASE_URL in .env.local
  2. Check PostgreSQL is running: psql -U postgres -c "SELECT version();"
  3. For Supabase, ensure you’re using the Transaction pooler URL (port 6543)

​
Trigger.dev Not Starting

  1. Ensure TRIGGER_SECRET_KEY is set in .env.local
  2. Verify you’re using the DEV key (starts with tr_dev_)
  3. Check your account at cloud.trigger.dev

​
Module Not Found Errors

# Clear node_modules and reinstall
rm -rf node_modules
pnpm install

# Clear Next.js cache
rm -rf .next
pnpm dev

​
Next Steps

Environment Variables

Configure all required environment variables for local development

Database Setup

Learn about database schema, migrations, and Drizzle ORM

API Reference

Explore available API endpoints and server actions

Deployment

Deploy AI Studio to production environments

Build docs developers (and LLMs) love

Get started for freeTalk to us