Chameleon

Prerequisites

System requirements and setup before you begin

Prerequisites

Before you start building with Chameleon, ensure you have the following tools and services ready.

System Requirements

Required Software

Node.js 18 or later

  • Used for running the development server and building the application
  • Recommended version: Node.js 22+ for best performance

Check your version:

node -v
# Should output: v22.2.0 or higher

pnpm Package Manager

  • Faster and more efficient than npm
  • Required for installing dependencies

Install pnpm:

npm install -g pnpm

Check your version:

pnpm -v
# Should output: 9.15.0 or higher

Git Version Control

  • For cloning the repository and version management
  • Required for deployment workflows

Check your version:

git --version
# Should output: git version 2.x or higher

Recommended Tools

Code Editor

Browser

  • Chrome, Firefox, or Edge with developer tools
  • For testing and debugging

Terminal

  • macOS/Linux: Built-in terminal
  • Windows: PowerShell, CMD, or WSL2

Cloud Services (Optional)

While you can develop locally without any cloud services, you'll need these for a full production deployment:

Database

Required for production, optional for development

Choose one:

Vercel Postgres (Recommended)

  • Serverless PostgreSQL
  • 256MB free tier
  • Integrates seamlessly with Vercel deployments
  • Get started →

Neon

  • Serverless PostgreSQL with generous free tier
  • 3GB storage free
  • Good for all platforms
  • Get started →

Railway

  • PostgreSQL, MySQL, and more
  • $5/month for full database
  • Simple setup
  • Get started →

Supabase

  • PostgreSQL with built-in auth and storage
  • 500MB database free
  • Extra features included
  • Get started →

Authentication (Optional)

For Google OAuth:

For GitHub OAuth:

Payment Processing (Optional)

Stripe

  • For accepting payments
  • Free account, pay per transaction
  • Test mode available for development
  • Get started →

Creem

File Storage (Optional)

AWS S3 or Compatible Service

  • For storing user uploads and generated AI content
  • Options: AWS S3, Cloudflare R2, Backblaze B2
  • Free tiers available

Analytics (Optional)

Google Analytics

OpenPanel

Plausible

AI Provider API Keys (Optional)

If you plan to use AI features, you'll need API keys from one or more providers:

Image Generation

Video Generation

Text Generation

Note: You don't need all AI providers! Start with one or two based on your needs. You can add more later through the admin panel.

Development Environment Setup

macOS

  1. Install Homebrew (if not already installed)

    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

  2. Install Node.js with fnm

    brew install fnm
fnm install 22
fnm use 22

  3. Install pnpm

    npm install -g pnpm

  4. Install Git

    brew install git

Windows

  1. Install Node.js

    • Download from nodejs.org
    • Choose LTS version (22.x)
    • Run installer

  2. Install pnpm

    npm install -g pnpm

  3. Install Git

    • Download from git-scm.com
    • Run installer
    • Choose "Git from the command line and also from 3rd-party software"

  4. Optional: Install WSL2

Linux

  1. Install Node.js with nvm or fnm

    curl -fsSL https://fnm.vercel.app/install | bash
fnm install 22
fnm use 22

  2. Install pnpm

    npm install -g pnpm

  3. Install Git

    # Ubuntu/Debian
sudo apt-get install git

# Fedora
sudo dnf install git

Editor Setup

VS Code / Cursor Extensions

Install these recommended extensions:

  1. ESLint - JavaScript linting
  2. Prettier - Code formatting
  3. Tailwind CSS IntelliSense - Tailwind autocomplete
  4. TypeScript - Built-in, but ensure it's enabled
  5. REST Client - For testing APIs

Install all at once:

code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension bradlc.vscode-tailwindcss
code --install-extension humao.rest-client

Editor Settings

Add to your .vscode/settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "typescript.tsdk": "node_modules/typescript/lib"
}

Verification Checklist

Before proceeding, verify your setup:

  • Node.js 18+ installed and working
  • pnpm installed globally
  • Git installed and configured
  • Code editor installed with extensions
  • (Optional) Database provider account created
  • (Optional) OAuth providers configured
  • (Optional) Stripe account created
  • (Optional) AI provider API keys obtained

Troubleshooting

Node.js version issues

If you have the wrong Node.js version:

# With fnm
fnm install 22
fnm use 22

# With nvm (macOS/Linux)
nvm install 22
nvm use 22

pnpm not found

If pnpm command doesn't work after installation:

# Reinstall pnpm
npm install -g pnpm

# Or use corepack (Node.js 16.9+)
corepack enable
corepack prepare pnpm@latest --activate

Git authentication issues

For GitHub SSH access:

# Generate SSH key
ssh-keygen -t ed25519 -C "your_email@example.com"

# Add to ssh-agent
ssh-add ~/.ssh/id_ed25519

# Copy public key
cat ~/.ssh/id_ed25519.pub
# Add this to GitHub: Settings → SSH and GPG keys

Windows-specific issues

If you encounter path or permission issues on Windows:

  • Run terminal as Administrator
  • Use Git Bash instead of CMD
  • Consider using WSL2 for better compatibility

Next Steps

Once you've completed the prerequisites:

  1. Quick Start Guide - Clone and run Chameleon
  2. Environment Variables - Configure your setup
  3. Deployment - Deploy to production

Need Help?

Ready to start? Head to the Quick Start Guide! 🚀