【亲测免费】 Chatbot UI 项目安装和配置指南

1. 项目基础介绍和主要编程语言

Chatbot UI 是一个开源的 AI 聊天应用项目，旨在为所有人提供一个易于使用的聊天机器人界面。该项目的主要编程语言是 JavaScript，使用了 Node.js 作为运行环境。Chatbot UI 的设计目标是简单易用，适合开发者快速搭建自己的聊天机器人应用。

2. 项目使用的关键技术和框架

Chatbot UI 项目使用了以下关键技术和框架：

• Node.js: 作为项目的运行环境，提供了 JavaScript 的运行时。
• React: 用于构建用户界面的 JavaScript 库，提供了高效的组件化开发方式。
• Next.js: 一个基于 React 的服务器端渲染框架，提供了更好的 SEO 和性能优化。
• Supabase: 一个开源的后端即服务（BaaS）平台，提供了数据库、身份验证等功能。
• Tailwind CSS: 一个实用优先的 CSS 框架，提供了丰富的预定义样式类，方便快速开发。

3. 项目安装和配置的准备工作和详细安装步骤

准备工作

在开始安装和配置 Chatbot UI 项目之前，请确保你的开发环境满足以下要求：

• Node.js: 建议使用 Node.js 18 或更高版本。
• npm: Node.js 的包管理工具，通常随 Node.js 一起安装。
• Docker: 用于在本地运行 Supabase 服务。
• Git: 用于克隆项目代码。

详细安装步骤

步骤 1：克隆项目代码

首先，你需要从 GitHub 上克隆 Chatbot UI 项目的代码到本地。打开终端并运行以下命令：

git clone https://github.com/mckaywrigley/chatbot-ui.git

步骤 2：安装项目依赖

进入项目目录并安装项目所需的依赖包。运行以下命令：

cd chatbot-ui
npm install

步骤 3：安装和配置 Supabase

Chatbot UI 项目使用 Supabase 作为后端服务。你需要在本地安装并配置 Supabase。

1. 安装 Docker：如果你还没有安装 Docker，请先安装 Docker。Docker 是一个容器化平台，用于在本地运行 Supabase。

2. 安装 Supabase CLI：在终端中运行以下命令来安装 Supabase CLI：

   • MacOS/Linux:

     brew install supabase/tap/supabase
     

   • Windows:

     scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
     scoop install supabase
     

3. 启动 Supabase：在项目根目录下运行以下命令来启动 Supabase：

   supabase start
   

4. 配置环境变量：复制项目中的环境变量示例文件并填充实际值：

   cp .env.local.example .env.local
   

   获取 Supabase 的配置值：

   supabase status
   

   将获取到的值填充到 .env.local 文件中。

5. 配置 SQL 数据库：在 supabase/migrations/20240108234540_setup.sql 文件中，替换以下两个值：

   • project_url（第 53 行）：使用 Supabase 状态中的 API URL。
   • service_role_key（第 54 行）：使用 Supabase 状态中的服务角色密钥。

步骤 4：安装 Ollama（可选）

如果你计划在本地使用 Ollama 模型，请按照 Ollama 的安装指南进行安装。

步骤 5：运行项目

在项目根目录下运行以下命令来启动项目：

npm run chat

项目将在 http://localhost:3000 上运行。你可以通过浏览器访问该地址来查看你的本地 Chatbot UI 实例。

总结

通过以上步骤，你已经成功安装并配置了 Chatbot UI 项目。你可以根据自己的需求进一步定制和扩展该项目，或者将其部署到云端以供更多人使用。