MCP Client Chatbot

Keinsaas Navigator——面向个人和团队的更优秀开源 AI 聊天机器人。

最初由 Choi Sung Keun 创建。

🚀 在线演示 | 在下方的预览中体验实际效果！

演示对话

• MCP 工具演示：与工具对话
• 图像生成演示：与图像生成对话

快速开始 🚀

几分钟内即可启动应用！无需安装或付费。

你只需要一个 AI 服务提供商的 API 密钥（OpenAI、Claude、Gemini 等）。其他所有服务都可使用免费套餐运行，包括数据库、文件存储和托管。

👉 点击此指南，只需几步即可部署网站

---

Keinsaas Navigator——受 ChatGPT、Claude、Grok 和 Gemini 启发，为个人和团队打造的更优秀开源 AI 聊天机器人。

• 多 AI 支持——集成所有主流大模型：OpenAI、Anthropic、Google、xAI、Ollama 等
• 强大工具——MCP 协议、网页搜索、JS/Python 代码执行、数据可视化
• 图像生成——使用 AI 模型（OpenAI、Google Gemini、xAI）创建和编辑图像
• 自动化——自定义 Agent、可视化工作流、工件生成
• 协作——与团队共享 Agent、工作流和 MCP 配置
• 语音助手——实时语音聊天，全面集成 MCP 工具
• 直观的用户体验——使用 @mention 即可快速调用任意功能
• 快速开始——通过 Vercel 部署按钮免费部署

本项目基于 Vercel AI SDK 和 Next.js 构建，将领先 AI 服务的优势融于一体，打造统一平台。

目录

• 目录
• 预览
  • 🧩 使用 Playwright MCP 自动化浏览器
  • 🔗 将可视化工作流作为自定义工具
  • 🤖 自定义 Agent
  • 🎙️ 实时语音助手 + MCP 工具
  • ⚡️ 快速提及工具（@）& 预设
  • 🧭 工具选择模式
  • 🛠️ 默认工具
    • 🌐 网络搜索
    • ⚡️ JS,PYTHON 执行器
    • 📊 数据可视化工具
• 开始使用
  • 快速开始（Docker Compose 版本）🐳
  • 快速开始（本地版本）🚀
  • 环境变量
• 📘 指南
  • 🔌 MCP 服务设置与工具测试
  • 🐳 Docker 托管指南
  • ▲ Vercel 托管指南
  • 🗂️ 文件存储驱动
  • 🎯 系统提示词与聊天自定义
  • 🔐 OAuth 登录设置
  • 🕵🏿 添加类似 OpenAI 的提供商
  • 🧪 E2E 测试指南
• 💡 提示
  • 💬 临时聊天窗口
• 🗺️ 路线图
• 🙌 参与贡献
• 💬 加入我们的 Discord

这个项目正以惊人的速度不断发展！⚡️ 我们持续推出新功能、修复各种 Bug。为此仓库点个 Star，加入我们的旅程，及时了解最新动态！

预览

了解一下用户体验——快速看看可以实现哪些功能。

🧩 使用 Playwright MCP 自动化浏览器

示例： 使用 Microsoft 的 playwright-mcp 工具控制 Web 浏览器。

• 大模型会自主决定如何使用 MCP 服务中的工具，并多次调用它们来完成多步骤任务，最后返回一条消息。

示例提示词：

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 ([email protected])
   - Clock the "Next"  button
   - Close the browser

🔗 将可视化工作流作为自定义工具

示例： 创建自定义工作流，让它们成为聊天对话中可调用的工具。

• 连接大模型节点（用于 AI 推理）和工具节点（用于执行 MCP 工具），构建可视化工作流
• 发布工作流，使其在聊天中作为 @workflow_name 工具供人使用
• 将复杂的多步骤流程串联成可重复使用的自动化序列

🤖 自定义 Agent

示例： 创建带有自定义指令和工具访问权限的专用 AI Agent。

• 定义具有特定系统提示词和可用工具的自定义 Agent
• 在聊天中使用 @agent_name 轻松调用 Agent
• 构建针对特定任务的助手，例如可使用问题/PR 工具并了解项目上下文的 GitHub 管理 Agent

例如，按以下步骤创建 GitHub 管理 Agent：

• 提供 GitHub 工具（创建问题/PR、发表评论、查询）
• 在系统提示词中添加项目详情
• 使用 @github_manager 调用它来管理你的代码仓库

### 🎙️ 实时语音助手 + MCP 工具

此演示展示了一个基于 OpenAI 全新 Realtime API 构建的实时语音聊天助手，现已扩展为完整集成 MCP 工具。 自然地与助手交谈，观看它实时执行工具。

⚡️ 快速提及工具（@）和预设

在聊天时输入 @toolname 即可快速调用工具。 无需记忆工具名称——只需输入 @，然后从列表中选择！

工具选择与提及（@）——何时使用哪种方式：

• 工具选择：让常用工具在所有聊天中始终对大模型可用。方便实用，也有助于长期保持上下文一致。
• 提及（@）：仅为当前回复临时绑定被提及的工具。由于只有被提及的工具会发送给大模型，因此可以节省令牌，并提升速度和准确性。

两种方式各有优势——结合使用，平衡效率与性能。

你也可以只选择所需的 MCP 服务或工具来创建工具预设。 只需点击一下即可立即切换预设，非常适合按任务或工作流整理工具。

🧭 工具选择模式

使用工具选择模式控制每次聊天中工具的使用方式——随时按 ⌘P 切换。

• 自动：模型会在需要时自动调用工具。
• 手动：模型会在调用工具前征求你的许可。
• 无：完全禁用工具。

这样，你就可以根据情况灵活选择自主、引导式或不使用工具的交互方式。

🛠️ 默认工具

🌐 网页搜索

由 Exa AI 提供支持的内置网页搜索。通过语义 AI 搜索网络，并在聊天中直接从 URL 提取内容。

• 可选：将 EXA_API_KEY 添加到 .env 以启用网页搜索
• 免费套餐：每月 1,000 次请求，无需付费，也无需信用卡
• 轻松设置：在 dashboard.exa.ai 即刻获取 API 密钥

🎨 图像生成

由 AI 模型提供支持的内置图像生成和编辑功能。在聊天中直接创建、编辑和修改图像。

• 支持的操作：图像生成、编辑和合成
• 当前模型：Gemini Nano Banana、OpenAI

⚡️ JS、PYTHON 执行器

这是一个简单的 JS 执行工具。

📊 数据可视化工具

交互式表格：创建功能丰富的数据表格，支持高级功能：

• 排序与筛选：按任意列排序，并实时筛选数据
• 搜索与高亮：全局搜索并自动高亮文本
• 导出选项：借助按需加载的库导出为 CSV 或 Excel 格式
• 列管理：通过可见性控件显示或隐藏列
• 分页：使用内置分页处理大型数据集
• 数据类型支持：正确格式化字符串、数字、日期和布尔值

图表生成：使用多种图表类型（条形图、折线图、饼图）可视化数据

此外还提供许多其他工具，例如用于 API 请求的 HTTP 客户端等。

……还有更多功能等你探索。 试试看，看看它还能做什么！

入门指南

本项目推荐使用 pnpm 作为包管理器。

# If you don't have pnpm:
npm install -g pnpm

快速开始（Docker Compose 版本）🐳

# 1. Install dependencies
pnpm i

# 2. Enter only the LLM PROVIDER API key(s) you want to use in the .env file at the project root.
# Example: The app works with just OPENAI_API_KEY filled in.
# (The .env file is automatically created when you run pnpm i.)

# 3. Build and start all services (including PostgreSQL) with Docker Compose
pnpm docker-compose:up

快速开始（本地版本）🚀

pnpm i

#(Optional) Start a local PostgreSQL instance
# If you already have your own PostgreSQL running, you can skip this step.
# In that case, make sure to update the PostgreSQL URL in your .env file.
pnpm docker:pg

# Enter required information in the .env file
# The .env file is created automatically. Just fill in the required values.
# For the fastest setup, provide at least one LLM provider's API key (e.g., OPENAI_API_KEY, CLAUDE_API_KEY, GEMINI_API_KEY, etc.) and the PostgreSQL URL you want to use.

pnpm build:local && pnpm start

# (Recommended for most cases. Ensures correct cookie settings.)
# For development mode with hot-reloading and debugging, you can use:
# pnpm dev

替代方案：仅使用 Docker Compose 启动数据库（通过 pnpm 运行应用）

# Start Postgres only via compose
# Ensure your .env includes: POSTGRES_USER, POSTGRES_PASSWORD, POSTGRES_DB matching POSTGRES_URL
docker compose -f docker/compose.yml up -d postgres

# Apply migrations
pnpm db:migrate


# Run app locally
pnpm dev   # or: pnpm build && pnpm start

在浏览器中打开 http://localhost:3000 即可开始使用。

环境变量

pnpm i 命令会生成 .env 文件。请在其中添加 API 密钥。

# === LLM Provider API Keys ===
# You only need to enter the keys for the providers you plan to use
GOOGLE_GENERATIVE_AI_API_KEY=****
OPENAI_API_KEY=****
XAI_API_KEY=****
ANTHROPIC_API_KEY=****
OPENROUTER_API_KEY=****
OLLAMA_BASE_URL=http://localhost:11434/api



# Secret for Better Auth (generate with: npx @better-auth/cli@latest secret)
BETTER_AUTH_SECRET=****

# (Optional)
# URL for Better Auth (the URL you access the app from)
BETTER_AUTH_URL=

# === Database ===
# If you don't have PostgreSQL running locally, start it with: pnpm docker:pg
POSTGRES_URL=postgres://your_username:your_password@localhost:5432/your_database_name

# (Optional)
# === Tools ===
# Exa AI for web search and content extraction (optional, but recommended for @web and research features)
EXA_API_KEY=your_exa_api_key_here


# Whether to use file-based MCP config (default: false)
FILE_BASED_MCP_CONFIG=false

# === File Storage ===
# Vercel Blob is the default storage driver (works in both local dev and production)
# Pull the token locally with `vercel env pull`
FILE_STORAGE_TYPE=vercel-blob
FILE_STORAGE_PREFIX=uploads
BLOB_READ_WRITE_TOKEN=

# -- S3 (coming soon) --
# FILE_STORAGE_TYPE=s3
# FILE_STORAGE_PREFIX=uploads
# FILE_STORAGE_S3_BUCKET=
# FILE_STORAGE_S3_REGION=

# (Optional)
# === OAuth Settings ===
# Fill in these values only if you want to enable Google/GitHub/Microsoft login

#GitHub
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=

#Google
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
# Set to 1 to force account selection
GOOGLE_FORCE_ACCOUNT_SELECTION=


# Microsoft
MICROSOFT_CLIENT_ID=
MICROSOFT_CLIENT_SECRET=
# Optional Tenant Id
MICROSOFT_TENANT_ID=
# Set to 1 to force account selection
MICROSOFT_FORCE_ACCOUNT_SELECTION=

# Set this to 1 to disable user sign-ups.
DISABLE_SIGN_UP=

# Set this to 1 to disallow adding MCP servers.
NOT_ALLOW_ADD_MCP_SERVERS=

📘 指南

帮助你逐步设置并运行 better-chatbot 的指南。

🔌 MCP 服务设置与工具测试

• 如何在环境中添加和配置 MCP 服务

🐳 Docker 托管指南

• 如何使用 Docker 自托管聊天机器人，包括环境配置。

▲ Vercel 托管指南

• 通过简单的设置步骤将聊天机器人部署到 Vercel，以供生产环境使用。

🗂️ 文件存储驱动程序

• 使用基于云的 Vercel Blob（默认）进行文件存储，在开发和生产环境中均可无缝上传。即将支持 S3。

🎯 系统提示词与聊天自定义

• 通过自定义系统提示词、用户偏好设置和 MCP 工具说明，打造个性化的聊天机器人体验

🔐 OAuth 登录设置

• 配置 Google、GitHub 和 Microsoft OAuth，以支持安全的用户登录。

🕵🏿 添加类似 openAI 的提供商

• 添加类似 openAI 的 AI 提供商

🧪 端到端测试指南

• 使用 Playwright 进行全面的端到端测试，包括多用户场景、Agent 可见性测试和 CI/CD 集成
  

💡 提示

💬 临时聊天窗口

• 打开轻量级弹出聊天窗口，快速询问其他问题或进行测试，与主对话线程分开。

🗺️ 路线图

better-chatbot 即将推出的计划功能：

• 文件上传与存储（集成 Vercel Blob）
• 图像生成
• 协作文档编辑（类似 OpenAI Canvas：用户与助手共同编辑）
• RAG（检索增强生成）
• 基于 Web 的计算（集成 WebContainers）

💡 如果你有建议或需要特定功能，请创建一个 issue！

💖 支持

如果本项目对你有所帮助，请考虑支持其开发：

• ⭐ 为此仓库点星
• 🐛 报告错误并提出功能建议
• 💰 成为赞助者，支持项目持续开发

你的支持有助于维护和改进本项目。谢谢！🙏

🙌 参与贡献

欢迎所有贡献！错误报告、功能创意、代码改进——一切都有助于我们打造最出色的本地 AI 助手。

⚠️ 提交 Pull Request 或 Issue 前，请先阅读我们的 贡献指南。 这有助于我们更高效地协作，也能为大家节省时间。

有关详细的贡献指南，请参阅我们的 贡献指南。

语言翻译： 添加新的语言翻译，帮助更多用户使用聊天机器人。请参阅 language.md，了解如何贡献翻译。

让我们携手打造 🚀

💬 加入我们的 Discord

加入我们的官方 Discord 服务，与社区交流、提问并获得支持！