Lab 1: Environment Setup & Project Introduction

Lab Overview

What You'll Do: Create accounts for the services we need, install coding tools on your computer, and get the AI receptionist app running on your machine

Lab Collaborators:

• Edward Lampoh - Software Developer & Collaborator
• Oluwafemi Adebayo, PhD - Academic Professor & Collaborator

This lab has 3 main parts. Complete each part fully before moving to the next.

Part A: Create Your Accounts

1. GitHub Setup

Create Account:

1. Go to github.com and click "Sign up"
2. Use your student email if available (gets you free GitHub Pro features!)
3. Choose a professional username (you'll use this publicly)
4. Verify your email address

Connect Git to GitHub:

Quick Setup Commands:

# Tell Git your name (use your real name)
git config --global user.name "Your Full Name"

# Tell Git your email (use the SAME email as your GitHub account)
git config --global user.email "your.email@example.com"

Test Your Connection:

# This should show your name and email
git config --global --list

2. Google Gemini API

What You Need: A Gmail or Google account (most people already have this!)

Get Your AI Key:

1. Search "google gemini api" in your browser
2. Click on the "Google AI Studio" link that appears
3. Sign in with your Google account
4. Click "Get Started"
5. Click "Get a new API key"
6. Follow the instructions to create your key
7. Copy and save this key somewhere safe

3. AWS Account

Sign Up:

1. Go to aws.amazon.com
2. Click "Create a Free Account"
3. You'll need to verify your phone number and add a payment method (but you won't be charged)
4. Choose "Basic Support - Free" when asked

4. Neon Database

Sign Up:

1. Go to neon.tech
2. Click "Sign up with GitHub" (easiest option)
3. Create a new project and name it: "ai-receptionist-lab"
4. Copy the connection string - it looks like:

postgresql://neondb_owner:abc123@ep-cool-name-123456.us-east-1.aws.neon.tech/neondb?sslmode=require

Save this entire string - you'll paste it into your .env file next

5. Resend Email Service

Sign Up:

1. Go to resend.com
2. Sign up for a free account
3. Once logged in, get your API key from the dashboard
4. Save this key

Part B: Install Development Tools

1. Node.js Installation

All Platforms:

1. Go to nodejs.org
2. Download LTS version (v18 or v20)
3. Install with default settings

Verify:

node --version
npm --version

2. Python Installation

Windows:

1. Go to python.org/downloads
2. Download Python 3.9 or newer
3. Check "Add Python to PATH" during installation

macOS:

brew install python@3.9

Linux (Ubuntu/Debian):

sudo apt update
sudo apt install python3 python3-pip python3-venv

Verify:

python --version  # or python3 --version
pip --version      # or pip3 --version

3. Git Installation

Windows:

1. Download from git-scm.com
2. Install with default settings

macOS:

# Git usually comes pre-installed, if not:
brew install git

Linux:

sudo apt install git

Verify:

git --version

4. Code Editor (Recommended)

Visual Studio Code:

1. Download from code.visualstudio.com
2. Install helpful extensions:
   • • Python
   • • JavaScript ES6 code snippets
   • • Prettier - Code formatter

Part C: Project Setup

1. Fork Repository

Why Fork? You need your own copy to make changes throughout the course.

1. Go to: https://github.com/edielam/ai-solutions-lab
2. Click the "Fork" button (top-right corner)
3. This creates your personal copy at https://github.com/YOUR_USERNAME/ai-solutions-lab

2. Clone Your Fork

# Replace YOUR_USERNAME with your actual GitHub username
git clone https://github.com/YOUR_USERNAME/ai-solutions-lab.git
cd ai-solutions-lab

3. Install Dependencies

Frontend (Next.js):

npm install

Backend (Python):
No backend setup needed for Lab 1 - we'll do this in later labs.

4. Environment Configuration

Create .env file in the root directory:

# Database (from Neon)
DATABASE_URL=your_neon_connection_string_here

# AI API (from Google)
GOOGLE_GENERATIVE_AI_API_KEY=your_gemini_api_key_here

# Email Service (from Resend) - NOTE: Not yet implemented, placeholder for future
RESEND_API_KEY=your_resend_api_key_here

# App Settings
NEXT_PUBLIC_APP_URL=http://localhost:3000
SECRET_KEY=change_this_to_something_secure
DEBUG=true

5. Run the Application

Start Frontend:

npm run dev

Open Browser:
Go to http://localhost:3000

6. Test the Complete Flow

1. Landing Page: Click "TRY IT FREE - NO SIGNUP"
2. Business Setup:
   • • Enter business name and description
   • • Choose a brand color
   • • Click "Continue to Documents"
3. Document Upload:
   • • Skip for now or upload a sample document
   • • Click "Continue"
4. Generated URL:
   • • Copy your unique chat URL
   • • Click "Try Your AI Receptionist"
5. Chat Interface:
   • • Test asking questions
   • • Try booking an appointment
   • • Verify emails are sent (check spam folder)

Troubleshooting & Next Steps

Common Issues

Prepare for Lab 2

• Keep all your API keys handy
• Familiarize yourself with the chat interface
• Try uploading different business documents
• Think about how the AI decides when to book appointments

Pro Tips

• Save your API keys securely - never commit them to Git
• Use meaningful commit messages when pushing code
• Test thoroughly - the free trial flow is what your users will experience