✨ Chat Button
A chat button that, when clicked, opens a chat window calling the OpenAI API. Use or modify it to build AI-powered chatbots that users can ask questions to.
Behind the scenes, it makes use of the useChat() hook from the Vercel AI SDK, which calls the /api/chat endpoint.
This endpoint runs an edge function to stream the LLM response back to the user with low latency, and then uploads the chat messages to the Supabase chats table.
import ChatButton from "@/components/ChatButton";
...
<ChatButton />You can customize the styling of the button and chat window by editing the Tailwind styles of ChatButton and ChatWindow
⚠️ Make sure you've followed the steps to set up the text generation feature before using this component, in particular setting an OpenAI API Key
The /api/chat endpoint can only be called by authenticated users.
You can disable that by commenting-out the authentication check in
@/app/api/chat/route.ts
Last Updated: March 5