AI导哈

聊天机器人界面

一个基于React和Tailwind CSS的现代ChatGPT风格聊天机器人界面，支持会话历史、实时响应和响应式设计。

  • by KostasChar
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 KostasChar/react-chat-ui_mcp_gemini

使用说明

MCP + 双子座聊天机器人用户界面

为您的MCP + Gemini AI聊天机器人打造一个现代的、ChatGPT风格的网页界面。该界面采用React构建，并使用Tailwind CSS进行样式设计。

特点/功能

  • 🎨（彩绘/艺术创作） 现代暗色主题 - 受ChatGPT启发的设计
  • 💬（表示对话或评论的符号，无实际文字含义） 对话历史 - 在您的会话期间，消息会持续保留
  • 🔄 翻译成中文是：🔄（这个符号本身在中文中没有特定含义，但通常表示“循环”或“重新开始”的意思，类似于英文中的“🔄”或“↺”。如果需要一个更具体的翻译，可以根据上下文来解释，比如“循环进行”、“重新开始”等。） 实时响应 - 顺畅的加载动画
  • 📱 表示“手机”或“移动设备”的符号。 响应式设计 - 适用于桌面和移动设备
  • 🎯（目标） 可折叠侧边栏 - 简洁、有序的界面
  • ⚡（闪电符号，无直接对应中文翻译，可表示“闪电”或在网络语境中用作表情符号） 快速且轻便 - 性能优化

屏幕截图

主聊天界面

  • 用户和AI回复的简洁消息气泡
  • 用于视觉区分的渐变头像
  • 平滑滚动到最新消息

侧边栏

  • 快速访问新对话
  • 对话历史记录显示
  • 包含AI助手信息的品牌专区

先决条件

在开始之前，请确保您已具备：

  • Node.js (v14 或更高版本) - 在此下载
  • npm （随Node.js一起提供）
  • 后端API 在……上运行 http://localhost:9009/{endpoint}

检查你的 Node.js 版本：

node --version

安装

1. 克隆或创建项目

如果从头开始：

npx create-react-app my-chatbot
cd my-chatbot

2. 安装依赖项

npm install lucide-react
npm install -D tailwindcss@3.3.0 postcss autoprefixer

3. 配置 Tailwind CSS

创造 tailwind.config.js 在你的项目根目录中：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

创建 postcss.config.js 在你的项目根目录中：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

4. 更新CSS

替换内容为 src/index.css：

@tailwind base;
@tailwind components;
@tailwind utilities;

5. 替换应用组件

将聊天机器人代码复制到 src/App.js

6. 启动开发服务器

npm start

该应用将在 http://localhost:3000

后端设置

这个用户界面需要一个运行在（指定地址）的后端API http://localhost:9009/query

API端点要求

POST（邮政） /query

  • 请求体: { "query": "your question here" }
  • 回应： { "response": "AI response here" }

使用 Node.js/Express 的示例：

app.post('/query', async (req, res) => {
  const { query } = req.body;
  // Process with your MCP + Gemini backend
  const aiResponse = await processQuery(query);
  res.json({ response: aiResponse });
});

项目结构

my-chatbot/
├── public/
│   └── index.html
├── src/
│   ├── App.js           # Main chat component
│   ├── index.js         # React entry point
│   └── index.css        # Tailwind imports
├── package.json
├── tailwind.config.js
└── postcss.config.js

定制化

改变颜色

编辑渐变颜色 App.js:

// Current: Purple to Pink gradient
className="bg-gradient-to-br from-purple-500 to-pink-500"

// Change to: Blue to Cyan
className="bg-gradient-to-br from-blue-500 to-cyan-500"

更改后端URL

更新fetch URL handleSubmit 功能：

const res = await fetch("YOUR_BACKEND_URL/query", {
  // ...
});

修改品牌标识

更改标题和描述：

<h1 className="text-lg font-semibold">Your App Name</h1>

故障排除

问题：“react-scripts 未被识别”

解决方案跑 npm install 首先

问题：用户界面显示的是未加样式的纯HTML

解决方案Tailwind CSS 未配置。请按照上述 Tailwind 设置步骤进行操作。

问题：后端连接错误

解决方案：

  1. 确保后端在9009端口上运行
  2. 检查你后端的CORS设置
  3. 验证API端点URL

问题：npm 缓存错误

解决方案:

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

可用脚本

npm start

在开发模式下运行应用程序，位于 http://localhost:3000

npm run build

为生产环境构建应用程序到 build 文件夹

npm test

启动测试运行器

npm run eject

警告：此操作不可逆！ 从 Create React App 中导出。

所使用的技术

  • React 18+ - 用户界面框架
  • Tailwind CSS - 实用优先的样式设计
  • Lucide React（可译为“Lucide反应”或根据上下文具体含义调整，但直接翻译保持为“Lucide React”以保留原名） - 图标库
  • Fetch API - HTTP 请求

功能路线图

  • [ ] 会话持久化（保存到数据库）
  • [ ] 导出聊天记录
  • [ ] 支持多文件上传
  • [ ] 语音输入
  • [ ] 切换深色/浅色主题
  • [ ] 用于AI回复的Markdown渲染
  • [ ] 代码语法高亮

贡献；做出贡献

欢迎随时提交问题和增强请求！

许可证

MIT 许可证 - 欢迎自由使用此项目来开发您自己的应用程序。

支持

如果您遇到问题：

  1. 查看上面的故障排除部分
  2. 确保所有依赖项都已安装
  3. 确认您的后端正在运行且可访问
  4. 检查浏览器控制台中的错误

致谢

  • 受ChatGPT启发的设计
  • 使用 Create React App 构建
  • 由Lucide设计的图标

相关 MCP