Get Started

meraSaaS Starter Kit Documentation

Note: This documentation will help you set up, customize, and deploy your AI-powered SaaS using the meraSaaS Starter Kit powered by Google Gemini AI.

Getting Started

The Gemini AI SaaS Starter Kit is a complete boilerplate for building AI-powered SaaS applications. It includes everything you need to launch a subscription-based service with Gemini AI integration.

What's Included

  • Next.js 14 App Router - Modern React framework with server components
  • TypeScript - Type-safe JavaScript
  • Tailwind CSS - Utility-first CSS framework
  • PostgreSQL + Prisma ORM - Database setup with automated migrations
  • NextAuth.js - Authentication with Google OAuth
  • Stripe Integration - Subscription payments and billing portal
  • Google Gemini AI SDK - Google's multimodal AI capability
  • Vercel Integration - One-click deployment

Prerequisites

Before you begin, make sure you have the following:

  • Node.js v18.0.0 or newer
  • npm v9.0.0 or newer
  • Git
  • PostgreSQL database
  • Google Cloud account (for OAuth and Gemini API)
  • Stripe account
  • Vercel account (optional, for deployment)

Installation

Follow these steps to get your SaaS up and running locally:

1. Clone the Repository

git clone https://github.com/yourusername/merasaas-starter-kit.git
cd merasaas-starter-kit

2. Install Dependencies

npm install

3. Set Up Environment Variables

Create a .env file in the root directory based on the .env.example template:

# Copy the example env file
cp .env.example .env

# Then edit the .env file to add your credentials

4. Initialize the Database

# Run Prisma migrations
npx prisma migrate dev

5. Start the Development Server

npm run dev

Your application should now be running at http://localhost:3000.

Configuration

The starter kit requires several environment variables to be properly configured:

Database Configuration

# PostgreSQL connection string
DATABASE_URL="postgresql://username:password@localhost:5432/database?schema=public"

Authentication Variables

# Google OAuth
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"

# NextAuth
NEXTAUTH_SECRET="your-nextauth-secret"
NEXTAUTH_URL="http://localhost:3000"

Stripe Variables

# Stripe API keys
STRIPE_SECRET_KEY="your-stripe-secret-key"
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="your-stripe-publishable-key"
STRIPE_WEBHOOK_SECRET="your-stripe-webhook-secret"

App & Gemini Variables

# App URL
NEXT_PUBLIC_APP_URL="http://localhost:3000"

# Gemini API key
GEMINI_API_KEY="your-gemini-api-key"

Authentication Setup

Setting Up Google OAuth

To enable Google authentication:

  1. Go to the Google Cloud Console
  2. Create a new project or select an existing one
  3. Navigate to "APIs & Services" > "Credentials"
  4. Click "Create Credentials" and select "OAuth client ID"
  5. Set the application type to "Web application"
  6. Add authorized JavaScript origins: http://localhost:3000 (and your production URL)
  7. Add authorized redirect URIs: http://localhost:3000/api/auth/callback/google (and your production equivalent)
  8. Save your credentials and note the Client ID and Client Secret
  9. Add these credentials to your .env file

NextAuth Configuration

The starter kit comes pre-configured with NextAuth.js for Google OAuth. You can customize the authentication in app/api/auth/[...nextauth]/route.ts.

Stripe Integration

Setting Up Stripe

To set up Stripe payments:

  1. Create a Stripe account if you don't have one
  2. Get your API keys from the Stripe Dashboard
  3. Add these keys to your .env file

Subscription Tiers

The starter kit comes with two subscription tiers:

  • Free Plan: Text-only chat with Gemini AI
  • Premium Plan: Full multimodal capabilities (text, image, video)

You can customize the pricing and subscription details in lib/stripe.ts.

Testing Webhooks Locally

To test Stripe webhooks during development:

# Install the Stripe CLI
# Then run:
stripe listen --forward-to localhost:3000/api/webhooks/stripe

Google Gemini AI Integration

Getting a Gemini API Key

To integrate with Google's Gemini AI:

  1. Go to Google AI Studio
  2. Create an account or sign in with your Google account
  3. Navigate to "API Keys" and create a new API key
  4. Add this key to your .env file as GEMINI_API_KEY

AI Functionality

The starter kit includes two main AI integration points:

  • Text-only chat: Available on the free plan
  • Multimodal chat: Process text, images, and videos (premium plan)

The AI implementation can be found in lib/gemini.ts, which provides utility functions for interacting with the Google Gemini API.

Deployment

Deploying to Vercel

The easiest way to deploy your SaaS is with Vercel:

  1. Create a Vercel account if you don't have one
  2. Install the Vercel CLI: npm i -g vercel
  3. Run vercel from the project directory
  4. Follow the prompts to link to your Vercel account and project
  5. Configure your environment variables in the Vercel dashboard

Production Database

For production, you'll need a PostgreSQL database. Options include:

Setting Up Production Webhooks

After deployment, set up your Stripe webhook endpoint:

  1. Go to the Stripe Dashboard > Developers > Webhooks
  2. Add a new endpoint: https://your-domain.com/api/webhooks/stripe
  3. Select events to listen for: checkout.session.completed, customer.subscription.updated, and customer.subscription.deleted
  4. Get the webhook signing secret and add it to your environment variables

Customization

Styling

The starter kit uses Tailwind CSS for styling. You can customize the design by:

  • Modifying the tailwind.config.js file to change the theme
  • Editing component styles in their respective files
  • Adding global styles in app/globals.css

Subscription Pricing

To modify the subscription pricing:

  1. Update the pricing displayed on the homepage (app/page.tsx)
  2. Modify the price in the Stripe checkout session creation (lib/stripe.ts)

Adding Features

To add new features to the subscription tiers:

  1. Update the feature list in components/subscription-status.tsx
  2. Modify access control in the relevant API routes or server components

Modifying the Chat Interface

The chat interface can be customized in components/chat-ui.tsx. You can:

  • Change the appearance of messages
  • Add new input types
  • Modify the prompt handling

Troubleshooting

Common Issues

Database Connection Problems

If you're having trouble connecting to your database:

  • Verify your DATABASE_URL is correct
  • Ensure your database server is running
  • Check for network restrictions or firewall settings

Authentication Errors

If Google OAuth isn't working:

  • Verify your Google Cloud project has the OAuth consent screen configured
  • Check that your redirect URIs are correctly set up
  • Ensure your GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET are correct

Stripe Integration Issues

If payments aren't processing:

  • Check your Stripe API keys are correct
  • Ensure webhooks are properly configured
  • Test with Stripe's test mode before going live

Gemini API Problems

If AI responses aren't working:

  • Verify your Gemini API key is correct
  • Check the API usage quotas in your Google AI Studio dashboard
  • Ensure your requests are properly formatted

Getting Help

If you're still experiencing issues, you can:

  • Check the GitHub repository issues section
  • Review relevant documentation for each technology
  • Contact support at support@merasaas.com if you've purchased the starter kit