Skip to main content

​
Get Up and Running Fast

This quickstart guide will have you running Ai Studio locally in under 10 minutes. For a comprehensive production setup, see the Installation Guide.

​
Prerequisites

Before you begin, make sure you have:

Node.js 18+

Download from nodejs.org

Firebase Account

Sign up at firebase.google.com

Gemini API Key

Get your key at aistudio.google.com

Git

Install from git-scm.com
New to these services? The free tiers are perfect for getting started and testing Ai Studio.

​
Setup Steps

1

Clone and Install

Clone the repository and install dependencies:
git clone <your-ai-studio-repo-url>
cd ai-studio
npm install
This will install all required packages including React, Firebase, and the Google Gemini SDK.
2

Create Firebase Project

Set up your Firebase project:
  1. Go to the Firebase Console
  2. Click Create a project
  3. Enter your project name (e.g., “ai-studio-dev”)
  4. Enable Google Analytics (optional)
  5. Click Create project
Once created, you’ll need to get your Firebase configuration.
3

Get Firebase Configuration

From your Firebase project:
  1. Click the gear icon → Project settings
  2. Scroll to Your apps section
  3. Click Web app icon (</>)
  4. Register your app with a nickname
  5. Copy the firebaseConfig object
You’ll need these values:
  • apiKey
  • authDomain
  • projectId
  • storageBucket
  • messagingSenderId
  • appId
  • measurementId
4

Enable Firestore Database

Enable Firestore for data storage:
  1. In Firebase Console, go to Build → Firestore Database
  2. Click Create database
  3. Choose Start in test mode (for development)
  4. Select your region
  5. Click Enable
Test mode allows unrestricted access. Switch to production rules before deploying!
5

Get Gemini API Key

Obtain your Google Gemini API key:
  1. Visit Google AI Studio
  2. Sign in with your Google account
  3. Click Get API key
  4. Create a new API key or use an existing one
  5. Copy the key
The free tier includes 15 requests per minute, perfect for development.
6

Configure Environment Variables

Create your environment configuration:
cp .env.example .env.local
Open .env.local and fill in your credentials:
.env.local
# Gemini AI Configuration
GEMINI_API_KEY=your_gemini_api_key_here

# Firebase Configuration
VITE_FIREBASE_API_KEY=your_firebase_api_key
VITE_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id
VITE_FIREBASE_MEASUREMENT_ID=G-XXXXXXXXXX

# Optional: App URL for QR code generation
VITE_APP_URL=http://localhost:3000
  • GEMINI_API_KEY: From Google AI Studio (Step 5)
  • VITE_FIREBASE_*: From Firebase Project Settings (Step 3)
  • VITE_APP_URL: Your app’s URL (use localhost for development)
7

Start Development Server

Launch the application:
npm run dev
The app will start at http://localhost:3000
The development server includes hot module replacement (HMR) for instant updates.

​
Verify Your Setup

Once the server is running, verify everything works:

​
1. Access the Application

Open your browser and navigate to http://localhost:3000 You should see the Ai Studio interface with the main dashboard.

​
2. Test the AI Assistant

1

Open Chat

Click the chat icon to open the “Slice” AI assistant
2

Ask a Question

Try: “What’s on the menu today?”The AI should respond with menu information
3

Test Order Flow

Say: “I’d like to order a pizza for pickup”Follow the conversation to complete a test order

​
3. Test Order Management

Try creating a test order: 
You: I'd like to order for pickup
Slice: Great! What would you like to order?
You: One Muzzarella pizza
Slice: Perfect! One Muzzarella pizza. Can I have your name and phone number?
You: John Doe, 555-1234
Slice: Will you pay with cash or credit?
You: Cash
Slice: Your order: 1 Pizza Muzzarella. Pay with Cash. Total: $9200. Confirm?
You: Yes, confirm
The order should appear in the admin dashboard with status Pending.

​
4. Test Reservation System

Try making a reservation:
1

Start Reservation

In chat, say: “I’d like to make a reservation”
2

Provide Details

Follow the prompts:
  • Number of guests: 4
  • Date: Tomorrow
  • Time: 7:00 PM
  • Name and phone number
3

Confirm

The AI will summarize and ask for confirmation
4

Check Dashboard

The reservation appears in the admin interface

​
Common Issues

Error: API_KEY not found or Failed to get response from assistantSolution:
  1. Verify GEMINI_API_KEY is set in .env.local
  2. Restart the dev server: npm run dev
  3. Check the key is valid in Google AI Studio
Error: Firebase: Error (auth/invalid-api-key)Solution:
  1. Double-check all VITE_FIREBASE_* values in .env.local
  2. Ensure Firestore is enabled in Firebase Console
  3. Verify your Firebase project is active
Error: Port 3000 is already in useSolution:
# Use a different port
PORT=3001 npm run dev
Or kill the process using port 3000:
# On macOS/Linux
lsof -ti:3000 | xargs kill -9

# On Windows
netstat -ano | findstr :3000
taskkill /PID <PID> /F
Error: Cannot find module 'X'Solution:
# Clear cache and reinstall
rm -rf node_modules package-lock.json
npm install
Error: TypeScript or build errorsSolution:
  1. Ensure TypeScript version is ~5.8.2
  2. Clear Vite cache: rm -rf node_modules/.vite
  3. Restart dev server

​
Next Steps

Now that you have Ai Studio running locally, explore these areas:

Configure Your Menu

Add your restaurant’s products, categories, and pricing

Set Up Tables

Configure your seating layout and reservation rules

Customize Schedule

Define your business hours and special schedules

Test Order Flows

Understand the complete order lifecycle

Explore AI Assistant

Customize the Slice assistant’s behavior

Deploy to Production

Follow the complete installation guide for deployment

​
Development Tips

Hot Reload: Changes to React components reload automatically. Changes to .env.local require a server restart.

​
Useful Commands

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Type checking
npx tsc --noEmit

# Format code
npx prettier --write .

​
Project Structure

ai-studio/
├── components/        # React components
├── services/          # Firebase & Gemini services
│   ├── firebase.ts    # Firestore configuration
│   ├── geminiService.ts # AI chat logic
│   └── ...
├── types.ts           # TypeScript definitions
├── App.tsx            # Main application
├── vite.config.ts     # Vite configuration
└── .env.local         # Your environment variables

​
Need Help?

Full Documentation

Learn about all features and capabilities

API Reference

Explore the service layer and data models

Report Issues

Found a bug? Let us know!

Contributing

Help improve Ai Studio

Build docs developers (and LLMs) love

Get started for freeTalk to us