hirajanwin / nextjs-chat-1

Next.js AI Chatbot with Supabase

An open-source AI chatbot app template built with Next.js, the Vercel AI SDK, OpenAI, and Vercel KV.

Features

• 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.

Deploy your own

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.

1. 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');

2. Add the environment variables to .local.env
3. Run npm install
4. Run npm run dev

Your app template should now be running on localhost:3000.

Credit

This library is created by Vercel and Next.js team members, with contributions from:

• Jared Palmer (@jaredpalmer) - Vercel
• Shu Ding (@shuding_) - Vercel
• shadcn (@shadcn) - Vercel