JoyChat

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

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

Features

• 🔒 Secure: Data stored locally in the browser or in the Cloud.
• 🌟 Beautiful Design: Responsive design and dark mode.
• ✍️ Markdown Support: Includes code highlighting and more.
• 🌐 Provider Flexibility: Supports providers other than OpenAI.
• 🚀 Quick Start: System prompt and quickstart templates available.
• 👥 Shareable: Easily share your chat with friends.
• 📊 Quality Feedback: Measured quality through user feedback (Cloud version).
• 💰 Cost Tracking: Track token usage and costs (Cloud version).
• 🛠️ Tool Integration: Chat with files, compatible with Anthropic and Groq models (🚧 under construction).

Usage

👋 Hey there! You can use joychat.io for Free while my OpenAI key quota lasts. If usage exceeds my budget, I may need to limit the frequency of use.

My original intention is to create a beautiful and helpful personal AI assistant. Feel free to start a conversation and provide feedback. I hope it brings you joy whenever you interact with it.

Stacks

• Next.js App Router
• Supabase for Cloud Database
• Vercel AI SDK for streaming chat UI
• Styling with shadcn/ui and Tailwind CSS
• NextAuth.js for authentication
• LangFuse for metrics and measure token cost

Model Providers

By default, it supports OpenAI gpt-4o. Adaptations for other models such as Anthropic, Cohere, Hugging Face, and those using LangChain are currently being added.

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