Mr-Sure / joychat

your beautiful, customizable AI chatbot

JoyChat

A beautiful, customizable, personal AI chatbot built with Next.js, Vercel AI SDK, OpenAI, and Supabase.

Stacks · Model Providers · Deploy Your Own · Running locally · Thanks

Usage

👋 Hey there, you can use joychat.io for Free as long as my OpenAI key quota allows it. If it exceeds what I can afford later, I will consider limiting frequency of use. My goal is to build a beautiful, helpful personal AI assistant, feel free to start a conversation and give feedback.

Stacks

• Next.js App Router
• Local browser storage or Supabase for Database
• Vercel AI SDK for streaming chat UI
• Support for OpenAI (default), Anthropic, Cohere, Hugging Face, or custom AI chat models and/or LangChain
• Styling with shadcn/ui and Tailwind CSS
• NextAuth.js for authentication

Model Providers

This chatbot ships with OpenAI gpt-4o as the default. However, you can switch LLM providers to Anthropic, Cohere, Hugging Face, or using LangChain with just a few lines of code.

Deploy Your Own

You can deploy your own version AI Chatbot to Vercel with one click:

Running locally

You will need to use the environment variables defined in .env.example to run this Chatbot. It's recommended you use Vercel Environment Variables for this, but a .env file is all that is necessary.

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.

1. Install Vercel CLI: npm i -g vercel
2. Link local instance with Vercel and GitHub accounts (creates .vercel directory): vercel link
3. Download your environment variables: vercel env pull

pnpm install
pnpm dev

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

Data Storage

You can configure how your chat data is stored by setting the NEXT_PUBLIC_STORAGE_MODE environment variable in your .env file:

• local: This mode saves chat data directly in your browser's local storage.
• cloud: This mode syncs chat data to Supabase, a cloud-based PostgreSQL database.

Example:

# Data storage mode: "local" for browser storage, "cloud" for Supabase storage
NEXT_PUBLIC_STORAGE_MODE="local"

To use Supabase for cloud storage, change the mode to "cloud":

NEXT_PUBLIC_STORAGE_MODE="cloud"

If you choose the cloud mode, you need to configure the corresponding database table structure on Supabase. For detailed instructions, refer to this documentation.

Thanks

The initial version of JoyChat is based on ai-chatbot created by the team behind Vercel. Thanks for providing this awesome ai chatbot template!

License

MIT