Quick Links

IntroductionFirst StepsDashboardWorkflowIntegrationsDeploy

Using the Dashboard

Complete guide to using your ArchitectGBT dashboard - from getting recommendations to deploying your project.

Dashboard Overview

After signing in, you'll land on the dashboard where you can:

  • Get AI model recommendations
  • Compare different models
  • Download project code
  • Deploy directly to Vercel
  • Track your usage and costs

Step 1: Get AI Recommendations

Describe Your Project

  1. Find the prompt input box at the top of the dashboard
  2. Describe what you want to build in natural language:

Examples:

"I need a customer support chatbot for my e-commerce store"
"Building a content writing assistant for marketing teams"
"AI-powered code review tool for developers"
"Personalized workout plan generator"
  1. Click Analyze or press Enter

What Happens Next

ArchitectGBT's AI analyzes your description and considers:

  • Use case complexity - Simple chat vs advanced reasoning
  • Speed requirements - Real-time vs batch processing
  • Budget constraints - Cost per million tokens
  • Context needs - How much conversation history
  • Special features - Code generation, multilingual, etc.

Within seconds, you'll get personalized recommendations!

Step 2: Review Recommendations

Understanding the Cards

Each recommended model shows:

Model Name & Provider

  • Example: Claude 3.5 Sonnet (Anthropic)
  • GPT-4 Turbo (OpenAI)
  • Gemini 2.0 Flash (Google)

Why This Model?

  • Brief explanation of why it fits your use case
  • Best suited for: [specific scenarios]

Pricing

  • Input cost: $X per 1M tokens
  • Output cost: $X per 1M tokens
  • Estimated monthly cost based on usage

Match Score

  • Percentage showing how well it fits your needs
  • Based on your project requirements

Top 3 Recommendations

You'll typically see 3 models ranked by fit:

  1. Best Match - Highest score, optimal for your use case
  2. Alternative - Good balance of cost/performance
  3. Budget Option - Most cost-effective choice

Step 3: Compare Models

Side-by-Side Comparison

All recommendations are displayed together, making it easy to compare:

Cost Comparison

  • See pricing differences at a glance
  • Calculate potential monthly savings
  • Understand cost vs quality tradeoffs

Feature Comparison

  • Context length (how much text it can process)
  • Speed (tokens per second)
  • Special capabilities (vision, function calling, etc.)
  • Multilingual support

Use Case Fit

  • Read why each model was recommended
  • Understand strengths and weaknesses
  • Make informed decision

Switching Models

Want to try a different model? Simply:

  1. Click on any other recommended card
  2. The selection updates automatically
  3. Download/deploy buttons reflect your new choice

Step 4: Download Your Project

Once you've chosen a model:

Click "Download Project"

A modal appears with:

Project Name

  • Auto-generated from your prompt
  • Edit to your preference (e.g., my-ai-chatbot)
  • Uses kebab-case format

Selected Model

  • Confirms which model you chose
  • Shows pricing info again

What You Get

  • Complete Next.js 16 project
  • TypeScript configured
  • Tailwind CSS setup
  • Authentication (Clerk) integrated
  • Database (Supabase) ready
  • API routes for your chosen AI model
  • Environment variable templates

Click "Generate & Download"

  1. ArchitectGBT generates your project (~30 seconds)
  2. ZIP file downloads automatically
  3. Extract to your workspace
  4. Follow Installation Guide

Step 5: Deploy to Vercel

You have two deployment options from the dashboard:

Option A: Quick Deploy (Beginner-Friendly)

Direct deployment via API:

  1. After downloading, click Deploy to Vercel
  2. Enter your Vercel API Token
  3. ✅ Check "Save token for future deploys"
  4. Click Continue to Deploy
  5. Wait ~2 minutes for deployment
  6. Get your live URL!

Pros:

  • ✅ Fastest way to go live
  • ✅ No Git knowledge needed
  • ✅ One-click deployment

Cons:

  • ❌ No version control
  • ❌ Hard to update later
  • ❌ No team collaboration

Option B: Git + Vercel (Recommended)

Professional workflow with Git:

  1. Download your project
  2. Extract and open in code editor
  3. Initialize Git:
git init
git add .
git commit -m "Initial commit from ArchitectGBT"
  1. Push to GitHub:
# Create repo on GitHub first
git remote add origin https://github.com/you/your-repo.git
git push -u origin main
  1. Connect Vercel to GitHub:
    • Go to vercel.com
    • Click Add New → Project
    • Import your GitHub repository
    • Add environment variables
    • Deploy!

Pros:

  • ✅ Full version control
  • ✅ Easy updates (git push = deploy)
  • ✅ Preview deployments for PRs
  • ✅ Easy rollbacks
  • ✅ Team collaboration

Cons:

  • ⏱️ Takes 5-10 extra minutes initially

See: Workflow & Git Guide for detailed steps

Step 6: Configure Environment Variables

After Deployment

Whether you used Option A or B, you need to add API keys:

In Vercel Dashboard:

  1. Go to your project → Settings → Environment Variables
  2. Add required keys:
# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_live_...
CLERK_SECRET_KEY=sk_live_...

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

# Your chosen AI provider
ANTHROPIC_API_KEY=sk-ant-...  # If you chose Claude
# OR
OPENAI_API_KEY=sk-...          # If you chose GPT
# OR
GOOGLE_API_KEY=...             # If you chose Gemini
  1. Click Save
  2. Redeploy for changes to take effect

See: Integration Guides for getting each API key

Dashboard Features

Track Your Usage

Query History

  • See all your past recommendations
  • Reuse prompts you liked
  • Track which models you've tried

Cost Tracking (Coming Soon)

  • Monitor API usage
  • See actual costs vs estimates
  • Set budget alerts

Saved Projects

Project Library (Coming Soon)

  • Save favorite configurations
  • Quick re-download
  • Clone existing projects

Team Features (Pro Plan)

Collaboration (Coming Soon)

  • Share recommendations with team
  • Collaborative project selection
  • Team billing and usage

Common Workflows

Scenario 1: "I want to test locally first"

  1. Get recommendations
  2. Download project
  3. Extract and install:
npm install
cp .env.example .env.local
# Add test API keys
npm run dev
  1. Test at localhost:3000
  2. When ready, deploy via Git + Vercel

Scenario 2: "I need to go live ASAP"

  1. Get recommendations
  2. Download project
  3. Click "Deploy to Vercel"
  4. Enter API token
  5. Wait 2 minutes
  6. Add environment variables
  7. Live! 🚀

Scenario 3: "I'm building with a team"

  1. Get recommendations
  2. Download project
  3. Push to GitHub
  4. Add team members to repo
  5. Connect Vercel to GitHub
  6. Everyone can contribute
  7. Auto-deploys on merge

Scenario 4: "I want to compare costs"

  1. Enter same prompt
  2. Review all 3 recommendations
  3. Note pricing differences:
    • GPT-4 Turbo: $10/1M input
    • Claude Sonnet: $3/1M input
    • Gemini Flash: $0.075/1M input
  4. Calculate for your expected volume:
    • 10M tokens/month
    • GPT-4: $100/month
    • Claude: $30/month
    • Gemini: $0.75/month
  5. Choose based on budget vs quality needs

Tips for Best Results

Writing Good Prompts

Be Specific:

❌ "I need a chatbot"
✅ "Customer support chatbot for SaaS product, handles billing questions, integrates with Stripe"

Include Context:

❌ "AI for my app"
✅ "Real-time code review assistant for JavaScript, needs fast responses, processes 100K lines daily"

Mention Constraints:

❌ "Best AI model"
✅ "Most accurate model for legal document analysis, budget $500/month, needs 32K context"

Selecting the Right Model

Choose GPT-4/Claude Opus if:

  • Quality is critical
  • Complex reasoning needed
  • Budget allows premium pricing
  • Enterprise/production use

Choose Claude Sonnet/GPT-4 Turbo if:

  • Good balance needed
  • Moderate budget
  • General purpose use
  • Production ready quality

Choose Gemini Flash if:

  • High volume/low cost
  • Simple tasks
  • Speed is priority
  • Prototyping/testing

Troubleshooting

"Recommendations don't match my needs"

  • Be more specific in your prompt
  • Mention your constraints explicitly
  • Try rephrasing your use case

"Download doesn't start"

  • Check pop-up blocker settings
  • Try different browser
  • Check console for errors

"Deployment failed"

  • Verify Vercel token is correct
  • Check you have Vercel account
  • Review error message in modal
  • Try Git + Vercel method instead

"Project doesn't run locally"

  • Ensure Node.js 18+ installed
  • Run npm install first
  • Check .env.local has all keys
  • See Installation Guide

Video Tutorial

Coming soon: Step-by-step video walkthrough

Need Help?

Next Steps: