An open-source AI marketing chatbot app template built with Next.js, the Vercel AI SDK, OpenAI, LangChain, and MongoDB.
Forked from NextJs AI Chatbot
- Next.js App Router
- React Server Components (RSCs), Suspense, and Server Actions
- Vercel AI SDK for streaming chat UI
- LangChain framework to interact with OpenAI model
- shadcn/ui
- Styling with Tailwind CSS
- Radix UI for headless component primitives
- Icons from Phosphor Icons
- MongoDB: Chat History, User Chat list
- NextAuth.js for authentication
- Mongoose: ORM for mongoose
- Vercel KV: Rate limiting
- Authentication provider
- Github, Google, Twitter
- Credentials
MongoDB Collections | Description |
---|---|
memory | stores each chat data |
userChatList | stores all chat IDs related to a user |
Representing the entity relationship diagram informally:
erDiagram UserChatList }|--|| Chat : includes UserChatList
{
string userId
array chats
} Chat || -- || ChatMemory : has Chat
{
string id
updatedAt time
} ChatMemory }| -- || Msgs : includes ChatMemory
{
string chatId
string userId
string title
array messages
string path
string shared
time createdAt
} Msgs
{
string role
string content
}
Create .env
file. You will need to use the environment variables defined in .env.example
to run the Marketing Chatbot.
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.
๐จ When configuring Github's OAuth App. Homepage URL and authorization callback URL should look something like the following:
Homepage URL: http://localhost:3000
Authorization callback URL: http://localhost:3000/api/auth/callback/github
npm i --legacy-peer-deps
npm run dev
Your app template should now be running on localhost:3000 ๐๐๐