Build a Chatbot with Next.js, LangChain, OpenAI, and Supabase Vector

In this demo[0] we showcase how to build an AI chatbot using Next.js, LangChain with OpenAI and Supabase Vector[1], Supabase Auth, and Supabase Realtime!
This demo is a fork of the Pinecone chatbot demo[2], the details about its architecture and workings can be found in their blogpost[3].
[0] github.com/supabase-community...
[1] js.langchain.com/docs/modules...
[2] github.com/pinecone-io/chatbo...
[3] www.pinecone.io/learn/javascr...
In this video we’re showing you exactly, step by step how to build a chatbot using Next.js and LangChain, powered by Supabase Vector. We’ll also show you how to integrate advanced AI capabilities in your app so you can interact dynamically with documents.
What you'll learn:
✅ How to set up a Chatbot: Learn how to set up a multi-user chatbot that interacts with documents, with LangChain JS and Next.js.
✅ Supabase as a Full-Stack Solution: See how Supabase Vector can replace multiple services like Pinecone, Ably, and CockroachDB, simplifying your tech stack.
✅ Indexing and Querying with LangChain: Understand the process of generating embeddings, indexing them using Supabase Vector, and querying these embeddings to fetch relevant information.
✅ Real-Time Interaction: Implement Supabase real-time features to stream responses back to the user so interaction is fluid.
✅ Securing with Row Level Security: Apply Supabase's row level security to ensure that queries are only accessible to authenticated users.
By the end of this video, you'll have a fully functional chatbot that not only understands user queries but also fetches and streams relevant answers using Supabase's robust infrastructure.
This is the EASIEST way to use Next.js, LangChain, and Supabase to create powerful AI-driven chatbots for your app.
Chapters
00:00 Intro
00:08 Demo preview
00:52 Demo architecture
03:06 LangChain & Supabase Vector
03:27 Clone the repo and run it locally
04:35 Enable RLS for LangChain
06:07 Start Supabase locally
06:30 Crawl a website and store embeddings
09:00 Inspecting the crawler code
11:02 Testing email signup verification locally with Inbucket
11:57 Chatbot demo
12:55 Inspecting the chat code
16:16 Using Supabase Realtime Broadcast to stream responses
💻 Videos to watch next:
▶ Monitor database Queries in Next.js: • Monitor Database Queri...
▶ Build your own ChatGPT with Next.js & OpenAI: • Build your own ChatGPT...
▶ All Next.js Supabase videos: • Next.js with Supabase
👇 Learn more about Supabase 👇
🕸 Website: supabase.com/
🏁 Get started: app.supabase.com/
📄 Docs: supabase.com/docs
🔔 Subscribe for more tutorials and feature updates from Supabase: / @supabase
📱 Connect with Us:
🐙 Github: www.github.com/supabase
💬 Discord: www.discord.supabase.com/
🐦 Twitter: / supabase
▶ Instagram (follow for memes): / supabasecom
ABOUT SUPABASE:
Supabase is the open source Firebase alternative. Supabase provides a full Postgres database for every project with pgvector, backups, realtime, and more. Add and manage email and password, passwordless, OAuth, and mobile logins to your project through a suite of identity providers and APIs.
Build in a weekend, scale to millions.
#Supabase #AppDevelopment #RealtimeApps #DeveloperTools

[@stonedizzleful]

Great video thanks for sharing this.

[@dariusdbbowser6329]

I have a chatbot already via Vercel AI and OpenAI, but want to add in a Vector DB via Supabase for conversational memory, grounding and multiple users like your example. This takes the AI bot to another level and there's so much you can do with it when these things are added. This is what separates an 'ok' AI bot from a 'really good' AI bot

[@AssBlasterChan]

this doesn't work when deployed to vercel? The AI doesn't respond and the entry on supabase is just NULL... it still charges my openAI account too so it looks like somethings happening?

[@kirso]

can we have a Sveltekit tutorial at some point? :)

[@Supabase]

There is some really good SvelteKit content by @JamesQQUick, e.g. kzbin.info/www/bejne/j6KsqniKbL1-f7M . Is there anything specific you'd like to see?

[@rossanobr]

Please make a video about embedding PDF files, supabase and next js!!

[@Supabase]

You might find this open source project useful: twitter.com/mckaywrigley/status/1674416524659138565?s=20

[@tloulehlohonolo06]

@@Supabase can yo tell me about this vercel , how do you install it ?

[@xingwei3488]

Great job! I've rebuilt it successfully on my local windows machine. Why the chat response takes VERY LONG time( 2+ minutes) ?

[@thorwebdev]

Yah, unfortunately this example summarizes the articles every time a query is made which is taking the bulk of time here. The main intention here was to showcase how to replace Pinecone with pgvector when using LangChain. I think it will need quite some refactor though for this to become production ready!

[@xingwei3488]

@@thorwebdev I see. Thanks a bundle!😀

[@nytrek]

This project only works locally. Do not attempt to use it in prod as I have seen no evidence of it being deployable

[@greendsnow]

Why does he need realtime database? The answers are coming from a server on demand, it's not like we have to subscribe and wait for ai to start typing after dinner.

[@michaelholmes4178]

Is supabase vector different from pgvector?

[@Supabase]

No, Supabase Vector is using pgvector: supabase.com/vector

[@brayancuenca6925]

configuring this is a pain..

[@namaefumei]

Wow a video about Nextjs again! Always Nextjs. Supabase can only be used with Nextjs guys. You can't use it with anything else. It looks like so from the videos posted here. Nextjs only.

[@Supabase]

Sorry that this video doesn't meet your needs. Supabase is fully framework and even language agnostic (anything that can do HTTP can talk to Supabase). That being said, a large portion of our user base is working with Next.js, therefore we create a lot of Next.js focused content. What other technologies would you like to see covered?

[@namaefumei]

@@Supabase Thanks for the reply. Maybe just Typescript or Vue or Svelte or Nuxt?

[@itsyourboyt4683]

It works with other framework too.

[@jjets8775]

@@Supabase I'm loving the Next.js. Please more. Love the channel. This is the perfect stack. 🎊🎊