Your First AI Project

Complete walkthrough from signup to deployed AI app in 30 minutes.

Overview

This guide walks you through:

• ✅ Getting your first recommendation (5 min)
• ✅ Setting up accounts (10 min)
• ✅ Running locally (5 min)
• ✅ Deploying to production (10 min)

Total time: ~30 minutes

Step 1: Get Your First Recommendation

1.1 Sign Up for ArchitectGBT

1. Go to architectgbt.com
2. Click Get Started
3. Sign up with email, Google, or GitHub
4. You'll land on the dashboard

1.2 Describe What You Want to Build

In the prompt box, be specific:

Good examples:

"Customer support chatbot for SaaS product, handles 1000+ daily conversations, needs to integrate with Stripe API"

"Content writing assistant for blog posts, generates 500-1000 word articles, budget $50/month"

"Code review assistant for JavaScript, processes 10K lines per day, needs fast responses"

Not specific enough:

"I need a chatbot"
"AI for my app"  
"Help me write code"

Click Analyze and wait ~10 seconds.

1.3 Review Recommendations

You'll see 3 AI models recommended with:

• Match score (why it fits your use case)
• Cost breakdown (per request and monthly estimate)
• Pros & cons for your specific needs

Click Compare to see side-by-side comparison table.

1.4 Select a Model

• Budget conscious? Choose the highest score in "Budget Option"
• Quality critical? Choose "Best Match"
• Balanced? Choose "Alternative"

Click Select on your chosen model (you can always change it later).

Step 2: Set Up Required Accounts

Before downloading, let's get API keys ready. Open these in new tabs:

2.1 Clerk (Authentication)

1. Go to clerk.com
2. Sign up (free account)
3. Create Application
   • Name it (e.g., "My AI App")
   • Choose sign-in methods: Email, Google (recommended)
4. Go to API Keys in sidebar
5. Copy these keys (keep tab open):
   • NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
   • CLERK_SECRET_KEY

⏱️ Time: 3 minutes

2.2 Supabase (Database)

1. Go to supabase.com
2. Sign up (free account)
3. New Project
   • Name: "my-ai-app"
   • Database password: Save this somewhere safe!
   • Region: Choose closest to you
   • Wait ~2 minutes for setup
4. Go to Settings → API
5. Copy these keys (keep tab open):
   • Project URL (as NEXT_PUBLIC_SUPABASE_URL)
   • anon public key (as NEXT_PUBLIC_SUPABASE_ANON_KEY)
   • service_role key (as SUPABASE_SERVICE_ROLE_KEY)

⏱️ Time: 5 minutes

2.3 AI Provider (Your Choice)

Choose the provider for your selected model:

If you chose GPT or OpenAI model:

1. Go to platform.openai.com
2. Sign up / Sign in
3. Billing → Add $5-10 credit (pay-as-you-go)
4. API Keys → Create new secret key
5. Copy as OPENAI_API_KEY

If you chose Claude or Anthropic model:

1. Go to console.anthropic.com
2. Sign up / Sign in
3. Plans & Billing → Add credits
4. API Keys → Create key
5. Copy as ANTHROPIC_API_KEY

If you chose Gemini or Google model:

1. Go to aistudio.google.com/app/apikey
2. Sign in with Google
3. Get API Key
4. Copy as GOOGLE_API_KEY

⏱️ Time: 3 minutes

2.4 Vercel (Deployment) - Optional for now

1. Go to vercel.com
2. Sign up with GitHub (recommended for easy deployments)
3. That's it for now! We'll use this later.

⏱️ Time: 1 minute

Step 3: Download & Run Your Project

3.1 Download Project

Back in ArchitectGBT dashboard:

1. Click Download Project button
2. Give it a name (e.g., "my-ai-chatbot")
3. Click Generate & Download
4. Wait ~30 seconds
5. Save ZIP file

3.2 Extract and Open

# Extract the ZIP
# Right-click → Extract All (Windows)
# or double-click (Mac)

# Navigate to folder
cd my-ai-chatbot

# Open in VS Code (or your editor)
code .

3.3 Install Dependencies

npm install

Wait ~1-2 minutes for installation.

3.4 Add Your API Keys

# Create environment file
cp .env.example .env.local

Open .env.local and paste all the keys you copied earlier:

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxx
CLERK_SECRET_KEY=sk_test_xxx

# Supabase Database
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJxxx
SUPABASE_SERVICE_ROLE_KEY=eyJxxx

# AI Provider (use the one for your chosen model)
OPENAI_API_KEY=sk-xxx
# OR
ANTHROPIC_API_KEY=sk-ant-xxx
# OR
GOOGLE_API_KEY=xxx

Pro tip: Triple-check there are no extra spaces or quotes!

3.5 Run Locally

npm run dev

Open http://localhost:3000

You should see:

• ✅ Landing page loads
• ✅ "Sign In" button appears
• ✅ Click it → Clerk auth modal shows
• ✅ Sign up → Redirects to dashboard

If something's wrong, see Troubleshooting below

Step 4: Deploy to Production

Option A: Quick Deploy (5 minutes)

Use this if: You want to go live ASAP

1. In ArchitectGBT dashboard (after downloading)
2. Click Deploy to Vercel
3. Get Vercel token:
   • Go to vercel.com/account/tokens
   • Create token → Copy it
4. Paste token, check "Save for future"
5. Click Deploy
6. Wait ~2 minutes
7. Get your live URL!

Then add environment variables in Vercel:

1. Go to vercel.com/dashboard
2. Click your project
3. Settings → Environment Variables
4. Add all your .env.local keys one by one
5. Click Redeploy from Deployments tab

Option B: Git + Vercel (15 minutes, recommended)

Use this if: You plan to update your app later

1. Initialize Git:

git init
git add .
git commit -m "Initial commit from ArchitectGBT"

1. Create GitHub repo:

   • Go to github.com/new
   • Name: "my-ai-app"
   • Public or Private
   • Don't initialize with README
   • Click Create

2. Push to GitHub:

git remote add origin https://github.com/YOUR-USERNAME/my-ai-app.git
git branch -M main
git push -u origin main

1. Deploy via Vercel:
   • Go to vercel.com
   • Click Add New → Project
   • Import your GitHub repo
   • Click your repository
   • Add environment variables (paste all from .env.local)
   • Click Deploy
   • Wait ~2 minutes
   • Your app is live!

Future updates: Just git push and Vercel auto-deploys! 🚀

See Workflow Guide for full Git workflow.

Step 5: Test Your Live App

1. Go to your Vercel URL
2. Click Sign In
3. Create an account (real email this time!)
4. Test the AI functionality
5. Verify everything works

What's Next?

Customize Your App

• Change colors: Edit Tailwind config and components
• Add features: Modify React components
• Adjust AI prompts: Update API route logic
• Add pages: Create new files in /app directory

Learn More

• Dashboard Guide - Full feature walkthrough
• Integration Guides - Deep dive into each service
• Workflow Guide - Git best practices

Get Help

• 📖 Full Documentation
• 🐛 Report bugs on GitHub
• ✉️ Email support@architectgbt.com

Troubleshooting

"Module not found" errors

rm -rf node_modules package-lock.json
npm install

Clerk modal doesn't show

• Verify both Clerk keys in .env.local
• Check for typos or extra spaces
• Restart dev server (Ctrl+C, then npm run dev)

Supabase connection errors

• Ensure URL has no trailing slash
• Check all 3 Supabase keys are correct
• Verify project isn't paused (check Supabase dashboard)

AI API errors

• Verify correct API key for your chosen model
• Check billing is set up (OpenAI, Anthropic need credits)
• Try test API key first

Vercel deployment failed

• Check all environment variables are added
• Ensure no syntax errors in code
• Check build logs in Vercel dashboard

Port 3000 already in use

# Windows
netstat -ano | findstr :3000
taskkill /PID <PID> /F

# Mac/Linux  
lsof -ti:3000 | xargs kill -9

# Or use different port
npm run dev -- -p 3001

🎉 Congratulations! You've built and deployed your first AI-powered app with ArchitectGBT!

Next: Explore advanced features or customize your project.