An open-source AI chatbot app template built with Next.js, the Vercel AI SDK, OpenAI, and Vercel KV.
- Next.js App Router
- React Server Components (RSCs), Suspense, and Server Actions
- Vercel AI SDK for streaming chat UI
- Support for OpenAI (default), Anthropic, Cohere, Hugging Face, or custom AI chat models and/or LangChain
- shadcn/ui
- Styling with Tailwind CSS
- Radix UI for headless component primitives
- Icons from Phosphor Icons
- Supabase as backend.
You will need to use the environment variables defined in .env.example
to run Next.js AI Chatbot. It's recommended you use Vercel Environment Variables for this, but a .env
file is all that is necessary.
Note: You should not commit your
.env
file or it will expose secrets that will allow others to control access to your various OpenAI and authentication provider accounts.
- Create a Supabase project and run the following queries:
To create chats table:
-- Create the chats table with an added share_path column
CREATE TABLE chats (
id TEXT PRIMARY KEY,
userId UUID NOT NULL,
title TEXT,
path TEXT UNIQUE NOT NULL,
share_path TEXT UNIQUE, -- This column is added to store a unique sharing identifier
messages JSONB NOT NULL,
createdAt TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);
-- Enable RLS on the chats table
ALTER TABLE chats ENABLE ROW LEVEL SECURITY;
-- Create a policy to allow users to select (view) their own chats
CREATE POLICY select_own_chats ON chats
FOR SELECT
USING (userId = auth.uid());
-- Create a policy to allow users to insert (create) new chats
-- Ensures the userId in the new row matches the current user's ID and allows specifying createdAt
CREATE POLICY insert_own_chats ON chats
FOR INSERT
WITH CHECK (userId = auth.uid());
-- Update the insert_own_chats policy if you need to enforce specific rules for the createdAt or share_path columns
-- Create a policy to allow users to update their own chats
CREATE POLICY update_own_chats ON chats
FOR UPDATE
USING (userId = auth.uid())
WITH CHECK (userId = auth.uid()); -- Ensure updates can only be made if the userId matches
-- Create a policy to allow users to delete their own chats
CREATE POLICY delete_own_chats ON chats
FOR DELETE
USING (userId = auth.uid());
To create profiles table:
-- Create a table for public profiles
create table profiles (
id uuid references auth.users on delete cascade not null primary key,
updated_at timestamp with time zone,
username text unique,
full_name text,
avatar_url text,
website text,
constraint username_length check (char_length(username) >= 3)
);
-- Set up Row Level Security (RLS)
-- See https://supabase.com/docs/guides/auth/row-level-security for more details.
alter table profiles
enable row level security;
create policy "Public profiles are viewable by everyone." on profiles
for select using (true);
create policy "Users can insert their own profile." on profiles
for insert with check (auth.uid() = id);
create policy "Users can update own profile." on profiles
for update using (auth.uid() = id);
-- This trigger automatically creates a profile entry when a new user signs up via Supabase Auth.
-- See https://supabase.com/docs/guides/auth/managing-user-data#using-triggers for more details.
create function public.handle_new_user()
returns trigger as $$
begin
insert into public.profiles (id, full_name, avatar_url)
values (new.id, new.raw_user_meta_data->>'full_name', new.raw_user_meta_data->>'avatar_url');
return new;
end;
$$ language plpgsql security definer;
create trigger on_auth_user_created
after insert on auth.users
for each row execute procedure public.handle_new_user();
-- Set up Storage!
insert into storage.buckets (id, name)
values ('avatars', 'avatars');
-- Set up access controls for storage.
-- See https://supabase.com/docs/guides/storage#policy-examples for more details.
create policy "Avatar images are publicly accessible." on storage.objects
for select using (bucket_id = 'avatars');
create policy "Anyone can upload an avatar." on storage.objects
for insert with check (bucket_id = 'avatars');
- Add the environment variables to .local.env
- Run
npm install
- Run
npm run dev
Your app template should now be running on localhost:3000.
This library is created by Vercel and Next.js team members, with contributions from: