nsoybean / chatbot-ui

Marketing Chatbot built with Next.js, the Vercel AI SDK, OpenAI, LangChain, and MongoDB 💬

Marketing App Chatbot

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

Authors

• Jared Palmer (@jaredpalmer) - Vercel
• Shu Ding (@shuding_) - Vercel
• shadcn (@shadcn) - Vercel

Features

• 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

Coming Soon

• Mongoose: ORM for mongoose
• Vercel KV: Rate limiting
• Authentication provider
  • Github, Google, Twitter
  • Email
  • Credentials

Architecture

Data Model

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
}

Loading

Running locally

Env File

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.

Configuring GitHub's OAuth

🚨 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

Running the app

npm i --legacy-peer-deps
npm run dev

Your app template should now be running on localhost:3000 🎉🎉🎉