Build an AI chatbot

Build a chatbot with a server-side model integration, protected conversation history and a tested streaming interface.

Categories: chat

Tools that power the Build an AI chatbot stack

OpenAI — AI backbone
Use a currently available OpenAI API model with server-side credentials and usage controls
See all stacks using OpenAI
Supabase — Database
Store chat history and user data
See all stacks using Supabase
Vercel AI SDK — Streaming
Stream AI responses to your frontend
See all stacks using Vercel AI SDK

OpenAI: Create a server-side OpenAI API key and store it in OPENAI_API_KEY, never a public browser environment variable. Choose a currently available model from the provider documentation based on quality and token cost. Set usage limits, validate input, and test a short request without personal data before building conversation history. (Read official instructions)
Supabase: Create a conversations table with an id, user_id, created_at and messages JSONB field. Enable RLS and add authenticated SELECT/DELETE ownership policies using auth.uid() = user_id, an INSERT ownership check, and an UPDATE policy with both USING and WITH CHECK. Keep service-role credentials out of the client. Test with two users that each can access only their own rows. (Read official instructions)
Vercel AI SDK: For the AI SDK with OpenAI directly, install ai and @ai-sdk/openai, import streamText from ai and openai from @ai-sdk/openai, and pass openai(yourModelId) as the model. Keep generation in a server route. Follow the current framework guide for response streaming and the separate UI hook package when needed. Pin compatible versions and test cancellation, errors, and a complete streamed response. (Read official instructions)
Check: Two test users cannot read or alter each other's conversations; streaming, cancellation and provider-error handling work without exposing a secret key.