better-chatbot

Keinsaas Navigator - A better open-source AI chatbot for individuals and teams.

Originally created by Choi Sung Keun.

.+At+least+one+LLM+provider+API+key+(OpenAI,+Claude,+or+Google)+is+required,+but+you+can+add+all+of+them.+See+the+link+below+for+details.&envLink=https://github.com/cgoinglove/better-chatbot/blob/main/.env.example&demo-title=better-chatbot&demo-description=An+Open-Source+Chatbot+Template+Built+With+Next.js+and+the+AI+SDK+by+Vercel.&products=[{"type":"integration","protocol":"storage","productSlug":"neon","integrationSlug":"neon"},{"type":"integration","protocol":"storage","productSlug":"upstash-kv","integrationSlug":"upstash"},{"type":"blob"}]>)

🚀 Live Demo | See the experience in action in the preview below!

Demo Chats

• MCP Tools Demo: Chat with Tools
• Image Generation Demo: Chat with Image Generation

Quick Start 🚀

Get your app running in minutes! No installation or payment required.

You only need one AI Provider API Key (OpenAI, Claude, Gemini, etc.). Everything else runs on free tiers - database, file storage, and hosting.

👉 Click this guide to deploy your site with just a few clicks

---

Keinsaas Navigator - A better open-source AI chatbot for individuals and teams, inspired by ChatGPT, Claude, Grok, and Gemini.

• Multi-AI Support - Integrates all major LLMs: OpenAI, Anthropic, Google, xAI, Ollama, and more
• Powerful Tools - MCP protocol, web search, JS/Python code execution, data visualization
• Image Generation - Create and edit images with AI models (OpenAI, Google Gemini, xAI)
• Automation - Custom agents, visual workflows, artifact generation
• Collaboration - Share agents, workflows, and MCP configurations with your team
• Voice Assistant - Realtime voice chat with full MCP tool integration
• Intuitive UX - Instantly invoke any feature with @mention
• Quick Start - Deploy free with Vercel Deploy button

Built with Vercel AI SDK and Next.js, combining the best features of leading AI services into one platform.

Table of Contents

• Table of Contents
• Preview
  • 🧩 Browser Automation with Playwright MCP
  • 🔗 Visual Workflows as Custom Tools
  • 🤖 Custom Agents
  • 🎙️ Realtime Voice Assistant + MCP Tools
  • ⚡️ Quick Tool Mentions (@) & Presets
  • 🧭 Tool Choice Mode
  • 🛠️ Default Tools
    • 🌐 Web Search
    • ⚡️ JS,PYTHON Executor
    • 📊 Data Visualization Tools
• Getting Started
  • Quick Start (Docker Compose Version) 🐳
  • Quick Start (Local Version) 🚀
  • Environment Variables
• 📘 Guides
  • 🔌 MCP Server Setup & Tool Testing
  • 🐳 Docker Hosting Guide
  • ▲ Vercel Hosting Guide
  • 🗂️ File Storage Drivers
  • 🎯 System Prompts & Chat Customization
  • 🔐 OAuth Sign-In Setup
  • 🕵🏿 Adding openAI like providers
  • 🧪 E2E Testing Guide
• 💡 Tips
  • 💬 Temporary Chat Windows
• 🗺️ Roadmap
• 🙌 Contributing
• 💬 Join Our Discord

This project is evolving at lightning speed! ⚡️ We're constantly shipping new features and smashing bugs. Star this repo to join the ride and stay in the loop with the latest updates!

Preview

Get a feel for the UX — here's a quick look at what's possible.

🧩 Browser Automation with Playwright MCP

Example: Control a web browser using Microsoft's playwright-mcp tool.

• The LLM autonomously decides how to use tools from the MCP server, calling them multiple times to complete a multi-step task and return a final message.

Sample prompt:

1. Use the @tool('web-search') to look up information about “modelcontetprotocol.”

2. Then, using : @mcp("playwright")
   - navigate Google (https://www.google.com)
   - Click the “Login” button
   - Enter my email address (neo.cgoing@gmail.com)
   - Clock the "Next"  button
   - Close the browser

🔗 Visual Workflows as Custom Tools

Example: Create custom workflows that become callable tools in your chat conversations.

• Build visual workflows by connecting LLM nodes (for AI reasoning) and Tool nodes (for MCP tool execution)
• Publish workflows to make them available as @workflow_name tools in chat
• Chain complex multi-step processes into reusable, automated sequences

🤖 Custom Agents

Example: Create specialized AI agents with custom instructions and tool access.

• Define custom agents with specific system prompts and available tools
• Easily invoke agents in chat using @agent_name
• Build task-specific assistants like a GitHub Manager agent with issue/PR tools and project context

For instance, create a GitHub Manager agent by:

• Providing GitHub tools (issue/PR creation, comments, queries)
• Adding project details to the system prompt
• Calling it with @github_manager to manage your repository

🎙️ Realtime Voice Assistant + MCP Tools

<video src="https://github.com/user-attachments/assets/e2657b8c-ce0b-40dd-80b6-7