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.