How to Build an AI App with Next.js, Supabase & OpenAI (2026 Guide)

1Set Up the Project

Create a new Next.js app and install the AI SDK, OpenAI provider, and Supabase client.

npx create-next-app@latest my-ai-app --typescript --tailwind --app
cd my-ai-app
npm install ai @ai-sdk/openai @supabase/supabase-js

2Configure OpenAI

Add your OpenAI API key to .env.local and use the AI SDK's OpenAI provider. GPT-5 Mini is the cheapest capable model ($0.25/1M input, $2/1M output); use GPT-5.2 for harder tasks.

// .env.local
OPENAI_API_KEY=sk-...

// lib/openai.ts (optional wrapper)
import { createOpenAI } from '@ai-sdk/openai';
export const openai = createOpenAI({ apiKey: process.env.OPENAI_API_KEY });

3Build a Chat Interface

Use the Vercel AI SDK useChat hook for chat UIs. It handles message history, loading state, and streaming automatically.

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

export function Chat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
    api: '/api/chat',
  });
  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>{m.role}: {m.content}</div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} disabled={isLoading} />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

4Create the API Route

Use streamText from the AI SDK for streaming. Streaming is critical for UX — users see output immediately instead of waiting for the full response.

// app/api/chat/route.ts
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: openai('gpt-4o-mini'), // or 'gpt-5-mini' when available
    system: 'You are a helpful assistant.',
    messages,
  });
  return result.toDataStreamResponse();
}

5Add Supabase for Persistence

Store conversations and user history in Supabase. Create tables for conversations and messages, and optionally track token usage for cost management.

// After each completed response, save to Supabase
const { data, error } = await supabase
  .from('messages')
  .insert({ conversation_id, role: 'assistant', content: fullContent, user_id });

6Implement RAG with pgvector

Enable the pgvector extension in Supabase. Generate embeddings with OpenAI text-embedding-3-small ($0.02/1M tokens). Store document chunks and their embeddings, then run similarity search and inject the top results into the prompt.

-- Enable pgvector in Supabase SQL editor
create extension if not exists vector;

create table documents (
  id uuid primary key default gen_random_uuid(),
  content text,
  embedding vector(1536)  -- dimension for text-embedding-3-small
);

-- Query similar chunks
select content from documents
order by embedding <-> $1::vector
limit 5;

7Add Authentication

Protect API routes and track per-user usage. Use Supabase Auth or Clerk; both integrate cleanly with Next.js. Validate the session in your chat API route and attach user_id to conversations.

// In API route: get user from Supabase or Clerk
const session = await getSession(req);
if (!session?.user) return new Response('Unauthorized', { status: 401 });
// Then use session.user.id for conversations and rate limits

8Rate Limiting & Cost Control

Protect your API budget with per-user limits. Use Upstash Redis or in-memory rate limiting. Track token usage from the AI SDK response and set spending limits in the OpenAI dashboard.

// Example: check rate limit before calling OpenAI
const key = `ratelimit:${userId}`;
const { success } = await ratelimit.limit(key);
if (!success) return new Response('Too many requests', { status: 429 });

9Deploy to Vercel

Add environment variables (OpenAI, Supabase, Clerk if used) in Vercel. Edge functions work well for streaming AI responses. Push to your connected repo to deploy.

// vercel.json or next.config – optional edge for chat route
export const runtime = 'edge';  // in route.ts for lower latency

OpenAI API Pricing (2026)

Batch API: 50% discount for async processing.

Cost Optimization Tips

• Use GPT-5 Mini for simple tasks; reserve GPT-5.2 for complex reasoning.
• Set spending limits in the OpenAI dashboard and enable usage alerts.
• Track token usage from usage in the AI SDK response and log per user.
• Use the Batch API for non-real-time jobs (e.g. nightly embedding runs) to cut costs 50%.

Going Further

Add multi-model support (e.g. OpenAI + Anthropic) via the AI SDK. Use function calling (tools) for structured outputs and actions. Explore agents and multi-step reasoning for more advanced flows. The same patterns — streaming, persistence, rate limiting — apply as you scale.

FAQ