How to Integrate OpenAI API into Your SaaS Product (Step-by-Step)

Why OpenAI API is the Default Choice for AI SaaS in 2025

OpenAI's GPT-4o offers the best balance of capability, speed, and ecosystem support. With the Vercel AI SDK, integrating it into a Next.js SaaS takes less than a day. This guide walks you through every step — from API key setup to production-grade streaming with cost controls.

Step 1: Get Your OpenAI API Key

Go to platform.openai.com → API Keys → Create new secret key. Store it immediately — it won't be shown again. Add billing and set a monthly usage limit (start with $50 for development).

Add to your .env.local:

OPENAI_API_KEY=sk-proj-your-key-here

Step 2: Install the Vercel AI SDK

npm install ai @ai-sdk/openai zod

The Vercel AI SDK is the recommended way to use OpenAI in Next.js. It handles streaming, error boundaries, and supports multiple providers (Anthropic, Google, etc.) with a unified API.

Step 3: Create Your AI API Route

In app/api/chat/route.ts:

import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';
import { auth } from '@/lib/auth';
import { checkRateLimit } from '@/lib/rate-limit';

export async function POST(req: Request) {
  const session = await auth();
  if (!session) return new Response('Unauthorized', { status: 401 });

  const { allowed } = await checkRateLimit(session.user.id);
  if (!allowed) return new Response('Rate limit exceeded', { status: 429 });

  const { messages } = await req.json();

  const result = streamText({
    model: openai('gpt-4o'),
    system: 'You are a helpful assistant for [Your SaaS Name]. Help users with [specific task].',
    messages,
    maxTokens: 2048,
    temperature: 0.7,
  });

  return result.toDataStreamResponse();
}

Step 4: Add Streaming UI on the Frontend

'use client';
import { useChat } from 'ai/react';

export default function ChatInterface() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
    api: '/api/chat',
    onError: (error) => console.error('Chat error:', error),
  });

  return (
    <div>
      {messages.map((m) => (
        <div key={m.id} className={m.role === 'user' ? 'user-msg' : 'ai-msg'}>
          {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
        <button type="submit" disabled={isLoading}>Send</button>
      </form>
    </div>
  );
}

Step 5: Implement Rate Limiting

Without rate limiting, one user can exhaust your OpenAI budget. Use Upstash Redis:

import { Ratelimit } from '@upstash/ratelimit';
import { Redis } from '@upstash/redis';

const ratelimit = new Ratelimit({
  redis: Redis.fromEnv(),
  limiter: Ratelimit.slidingWindow(20, '1 h'), // 20 requests per hour
});

export async function checkRateLimit(userId: string) {
  const { success } = await ratelimit.limit(userId);
  return { allowed: success };
}

Step 6: Track Token Usage & Costs

Log usage per request to your database to enforce credit limits and show usage dashboards:

const result = streamText({
  model: openai('gpt-4o'),
  messages,
  onFinish: async ({ usage }) => {
    await db.insert(usageLogs).values({
      userId: session.user.id,
      promptTokens: usage.promptTokens,
      completionTokens: usage.completionTokens,
      totalTokens: usage.totalTokens,
      cost: (usage.totalTokens / 1_000_000) * 5, // GPT-4o pricing
    });
  },
});

Prompt Engineering Best Practices

• Be specific in your system prompt — tell the AI exactly who it is and what it should/shouldn't do
• Add user context — include the user's plan tier, history, and preferences in the system prompt
• Use structured outputs — for data extraction, use generateObject with Zod schemas
• Test with adversarial inputs — try prompt injection attacks and jailbreaks before launch

Production Cost Estimates

GPT-4o pricing (May 2025): $5 per million input tokens, $15 per million output tokens. For a typical AI SaaS with 1,000 active users doing 20 requests/day at 500 tokens each, expect $150–300/month in API costs. Plan your pricing model accordingly.