feat: migrate kv to postgres.

Author: thorwebdev

.env.example

@@ -2,12 +2,6 @@
 ## Then get your OpenAI API Key here: https://platform.openai.com/account/api-keys
 OPENAI_API_KEY=XXXXXXXX
 
-# Instructions to create kv database here: https://vercel.com/docs/storage/vercel-kv/quickstart and 
-KV_URL=XXXXXXXX
-KV_REST_API_URL=XXXXXXXX
-KV_REST_API_TOKEN=XXXXXXXX
-KV_REST_API_READ_ONLY_TOKEN=XXXXXXXX
-
 # Update these with your Supabase details from your project settings > API
 # https://app.supabase.com/project/_/settings/api
 # In local dev you can get these by running `supabase status`.

README.md

@@ -4,7 +4,7 @@
 </a>
 
 <p align="center">
-  An open-source AI chatbot app template built with Next.js, the Vercel AI SDK, OpenAI, and Vercel KV.
+  An open-source AI chatbot app template built with Next.js, the Vercel AI SDK, OpenAI, and Supabase Auth and Postgres DB.
 </p>
 
 <p align="center">
@@ -27,7 +27,7 @@
   - Styling with [Tailwind CSS](https://tailwindcss.com)
   - [Radix UI](https://radix-ui.com) for headless component primitives
   - Icons from [Phosphor Icons](https://phosphoricons.com)
-- Chat History, rate limiting, and session storage with [Vercel KV](https://vercel.com/storage/kv)
+- Chat History with [Supabase Postgres DB](https://supabase.com)
 - [Supabase Auth](https://supabase.com/auth) for authentication
 
 ## Model Providers
@@ -41,12 +41,6 @@ You can deploy your own version of the Next.js AI Chatbot to Vercel with one cli
 TODO: update button with supabase integration
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?demo-title=Next.js+Chat&demo-description=A+full-featured%2C+hackable+Next.js+AI+chatbot+built+by+Vercel+Labs&demo-url=https%3A%2F%2Fchat.vercel.ai%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F4aVPvWuTmBvzM5cEdRdqeW%2F4234f9baf160f68ffb385a43c3527645%2FCleanShot_2023-06-16_at_17.09.21.png&project-name=Next.js+Chat&repository-name=nextjs-chat&repository-url=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-chatbot&from=templates&skippable-integrations=1&env=OPENAI_API_KEY%2CAUTH_GITHUB_ID%2CAUTH_GITHUB_SECRET&envDescription=How+to+get+these+env+vars&envLink=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-chatbot%2Fblob%2Fmain%2F.env.example&teamCreateStatus=hidden&stores=[{"type":"kv"}]) -->
 
-## Creating a KV Database Instance
-
-Follow the steps outlined in the [quick start guide](https://vercel.com/docs/storage/vercel-kv/quickstart#create-a-kv-database) provided by Vercel. This guide will assist you in creating and configuring your KV database instance on Vercel, enabling your application to interact with it.
-
-Remember to update your environment variables (`KV_URL`, `KV_REST_API_URL`, `KV_REST_API_TOKEN`, `KV_REST_API_READ_ONLY_TOKEN`) in the `.env` file with the appropriate credentials provided during the KV database setup.
-
 ## Running locally
 
 You will need to use the environment variables [defined in `.env.example`](.env.example) to run Next.js AI Chatbot. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/concepts/projects/environment-variables) for this, but a `.env` file is all that is necessary.

app/actions.ts

@@ -1,120 +1,97 @@
 'use server'
 
+import { createServerActionClient } from '@supabase/auth-helpers-nextjs'
+import { cookies } from 'next/headers'
+import { Database } from '@/lib/db_types'
 import { revalidatePath } from 'next/cache'
 import { redirect } from 'next/navigation'
-import { kv } from '@vercel/kv'
 
-import { auth } from '@/auth'
 import { type Chat } from '@/lib/types'
+import { auth } from '@/auth'
+
+const supabase = createServerActionClient<Database>({ cookies })
 
 export async function getChats(userId?: string | null) {
   if (!userId) {
     return []
   }
 
   try {
-    const pipeline = kv.pipeline()
-    const chats: string[] = await kv.zrange(`user:chat:${userId}`, 0, -1, {
-      rev: true
-    })
-
-    for (const chat of chats) {
-      pipeline.hgetall(chat)
-    }
+    const { data } = await supabase
+      .from('chats')
+      .select('payload')
+      .order('payload->createdAt', { ascending: false })
+      .throwOnError()
 
-    const results = await pipeline.exec()
-
-    return results as Chat[]
+    return (data?.map(entry => entry.payload) as Chat[]) ?? []
   } catch (error) {
     return []
   }
 }
 
-export async function getChat(id: string, userId: string) {
-  const chat = await kv.hgetall<Chat>(`chat:${id}`)
-
-  if (!chat || (userId && chat.userId !== userId)) {
-    return null
-  }
+export async function getChat(id: string) {
+  const { data } = await supabase
+    .from('chats')
+    .select('payload')
+    .eq('id', id)
+    .maybeSingle()
 
-  return chat
+  return (data?.payload as Chat) ?? null
 }
 
 export async function removeChat({ id, path }: { id: string; path: string }) {
-  const session = await auth()
-
-  if (!session) {
-    return {
-      error: 'Unauthorized'
-    }
-  }
-
-  const uid = await kv.hget<string>(`chat:${id}`, 'userId')
+  try {
+    await supabase.from('chats').delete().eq('id', id).throwOnError()
 
-  if (uid !== session?.user?.id) {
+    revalidatePath('/')
+    return revalidatePath(path)
+  } catch (error) {
     return {
       error: 'Unauthorized'
     }
   }
-
-  await kv.del(`chat:${id}`)
-  await kv.zrem(`user:chat:${session.user.id}`, `chat:${id}`)
-
-  revalidatePath('/')
-  return revalidatePath(path)
 }
 
 export async function clearChats() {
-  const session = await auth()
-
-  if (!session?.user?.id) {
+  try {
+    const session = await auth()
+    await supabase
+      .from('chats')
+      .delete()
+      .eq('user_id', session?.user.id)
+      .throwOnError()
+    revalidatePath('/')
+    return redirect('/')
+  } catch (error) {
+    console.log('clear chats error', error)
     return {
       error: 'Unauthorized'
     }
   }
-
-  const chats: string[] = await kv.zrange(`user:chat:${session.user.id}`, 0, -1)
-  if (!chats.length) {
-  return redirect('/')
-  }
-  const pipeline = kv.pipeline()
-
-  for (const chat of chats) {
-    pipeline.del(chat)
-    pipeline.zrem(`user:chat:${session.user.id}`, chat)
-  }
-
-  await pipeline.exec()
-
-  revalidatePath('/')
-  return redirect('/')
 }
 
 export async function getSharedChat(id: string) {
-  const chat = await kv.hgetall<Chat>(`chat:${id}`)
-
-  if (!chat || !chat.sharePath) {
-    return null
-  }
-
-  return chat
+  const { data } = await supabase
+    .from('chats')
+    .select('payload')
+    .eq('id', id)
+    .not('payload->sharePath', 'is', null)
+    .maybeSingle()
+
+  return (data?.payload as Chat) ?? null
 }
 
 export async function shareChat(chat: Chat) {
-  const session = await auth()
-
-  if (!session?.user?.id || session.user.id !== chat.userId) {
-    return {
-      error: 'Unauthorized'
-    }
-  }
-
   const payload = {
     ...chat,
     sharePath: `/share/${chat.id}`
   }
 
-  await kv.hmset(`chat:${chat.id}`, payload)
+  await supabase
+    .from('chats')
+    .update({ payload: payload as any })
+    .eq('id', chat.id)
+    .throwOnError()
 
   return payload
 }

app/api/chat/route.ts

@@ -1,6 +1,8 @@
-import { kv } from '@vercel/kv'
 import { OpenAIStream, StreamingTextResponse } from 'ai'
 import { Configuration, OpenAIApi } from 'openai-edge'
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
+import { cookies } from 'next/headers'
+import { Database } from '@/lib/db_types'
 
 import { auth } from '@/auth'
 import { nanoid } from '@/lib/utils'
@@ -14,6 +16,7 @@ const configuration = new Configuration({
 const openai = new OpenAIApi(configuration)
 
 export async function POST(req: Request) {
+  const supabase = createRouteHandlerClient<Database>({ cookies })
   const json = await req.json()
   const { messages, previewToken } = json
   const userId = (await auth())?.user.id
@@ -55,11 +58,8 @@ export async function POST(req: Request) {
           }
         ]
       }
-      await kv.hmset(`chat:${id}`, payload)
-      await kv.zadd(`user:chat:${userId}`, {
-        score: createdAt,
-        member: `chat:${id}`
-      })
+      // Insert chat into database.
+      await supabase.from('chats').upsert({ id, payload }).throwOnError()
     }
   })
 

app/chat/[id]/page.tsx

@@ -23,7 +23,7 @@ export async function generateMetadata({
     return {}
   }
 
-  const chat = await getChat(params.id, session.user.id)
+  const chat = await getChat(params.id)
   return {
     title: chat?.title.toString().slice(0, 50) ?? 'Chat'
   }
@@ -36,7 +36,7 @@ export default async function ChatPage({ params }: ChatPageProps) {
     redirect(`/sign-in?next=/chat/${params.id}`)
   }
 
-  const chat = await getChat(params.id, session.user.id)
+  const chat = await getChat(params.id)
 
   if (!chat) {
     notFound()

app/share/[id]/opengraph-image.tsx

@@ -90,7 +90,7 @@ export default async function Image({ params }: ImageProps) {
             <div tw="flex text-[1.8rem] ml-4 text-[#9b9ba4]">
               Built with{' '}
               <div tw="flex text-[#eaeaf0] ml-2 mr-2">Vercel AI SDK</div> &
-              <div tw="flex text-[#eaeaf0] ml-2">KV</div>
+              <div tw="flex text-[#eaeaf0] ml-2">Supabase Auth & DB</div>
             </div>
           </div>
           <div tw="text-[1.8rem] ml-auto text-[#9b9ba4]">chat.vercel.ai</div>

components/empty-screen.tsx

@@ -29,10 +29,7 @@ export function EmptyScreen({ setInput }: Pick<UseChatHelpers, 'setInput'>) {
         <p className="mb-2 leading-normal text-muted-foreground">
           This is an open source AI chatbot app template built with{' '}
           <ExternalLink href="https://nextjs.org">Next.js</ExternalLink> and{' '}
-          <ExternalLink href="https://vercel.com/storage/kv">
-            Vercel KV
-          </ExternalLink>
-          .
+          <ExternalLink href="https://supabase.com">Supabase</ExternalLink>.
         </p>
         <p className="leading-normal text-muted-foreground">
           You can start a conversation here or try the following examples:

components/footer.tsx

@@ -14,10 +14,7 @@ export function FooterText({ className, ...props }: React.ComponentProps<'p'>) {
     >
       Open source AI chatbot built with{' '}
       <ExternalLink href="https://nextjs.org">Next.js</ExternalLink> and{' '}
-      <ExternalLink href="https://vercel.com/storage/kv">
-        Vercel KV
-      </ExternalLink>
-      .
+      <ExternalLink href="https://supabase.com">Supabase</ExternalLink>.
     </p>
   )
 }