feat: llama3 chat completion example.

Author: thorwebdev

app/chat/[id]/page.tsx

@@ -49,5 +49,11 @@ export default async function ChatPage({ params }: ChatPageProps) {
     notFound()
   }
 
-  return <Chat id={chat.id} initialMessages={chat.messages} />
+  return (
+    <Chat
+      id={chat.id}
+      initialMessages={chat.messages}
+      supaAccessToken={session.access_token}
+    />
+  )
 }

app/page.tsx

@@ -1,10 +1,14 @@
+import { auth } from '@/auth'
+import { cookies } from 'next/headers'
 import { nanoid } from '@/lib/utils'
 import { Chat } from '@/components/chat'
 
 export const runtime = 'edge'
 
-export default function IndexPage() {
+export default async function IndexPage() {
   const id = nanoid()
+  const cookieStore = cookies()
+  const session = await auth({ cookieStore })
 
-  return <Chat id={id} />
+  return <Chat id={id} supaAccessToken={session?.access_token ?? ''} />
 }

components/chat.tsx

@@ -25,9 +25,15 @@ const IS_PREVIEW = process.env.VERCEL_ENV === 'preview'
 export interface ChatProps extends React.ComponentProps<'div'> {
   initialMessages?: Message[]
   id?: string
+  supaAccessToken: string
 }
 
-export function Chat({ id, initialMessages, className }: ChatProps) {
+export function Chat({
+  id,
+  initialMessages,
+  supaAccessToken,
+  className
+}: ChatProps) {
   const [previewToken, setPreviewToken] = useLocalStorage<string | null>(
     'ai-token',
     null
@@ -36,6 +42,8 @@ export function Chat({ id, initialMessages, className }: ChatProps) {
   const [previewTokenInput, setPreviewTokenInput] = useState(previewToken ?? '')
   const { messages, append, reload, stop, isLoading, input, setInput } =
     useChat({
+      api: 'http://127.0.0.1:54321/functions/v1/vercel-ai-chat', // Route chat to supabase edge function
+      headers: { Authorization: `Bearer ${supaAccessToken}` }, // Auth header to secure the function invocation
       initialMessages,
       id,
       body: {