AI导哈

对话数据聊天原型

这是一个集成MCP和Looker的对话聊天系统原型，主要用于演示前端功能，使用模拟数据模拟外部服务集成。

  • by deo-rlk
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 deo-rlk/conversational_data_chat

使用说明

对话数据聊天 - 原型

这是一个集成了MCP（模型上下文协议）和Looker的会话聊天系统的示范原型。原型是 前端优先 并使用模拟来模拟与外部服务的集成。

⚠️ 重要： 示范原型

这是一个企业示范原型，而不是生产。 所有的端点和集成都是模拟。在生产中，实施真正的身份验证、安全后端和真正的 Looker/MCP 集成至关重要。

🚀 如何旋转

先决条件

  • Node.js 18+instalado
  • npm瓯纱

安装

  1. 安装依赖关系 ：
npm install
  1. 运行开发服务器 ：
npm run dev
  1. 访问 http://localhost:3000 在浏览器中

构建用于生产

npm run build
npm start

🎮 如何使用

登录

  1. 在登录屏幕上，输入任何电子邮件（例如： usuario@example.com)
  2. 系统模拟 Google OAuth 身份验证
  3. 登录后，您将被重定向到加载屏幕

Dev Toggle（开发）

登录后，您将在左下角看到一个按钮（仅限开发模式），允许您在角色之间切换：

  • 用户聊天限制：每天10个问题
  • 管理员全方位访问 + 管理面板，每天限 25 个问题

聊天

  • 在聊天中提问（最多300个字符）
  • 查看剩余问题计数器（ 右上角）
  • 由 MCP 模拟器模拟答案
  • 管理员：显示调试信息（使用 explore）

管理面板 （只有管理员）

  1. 管理员主页 (/admin聊天和配置按钮
  2. 配置环境 (/admin/configure/environments):
    • 配置的环境列表
    • 创建新环境
    • 打开环境详情
    • 删除环境（ 只有创建者才能删除）
  3. 新环境 (/admin/configure/environments/new):
    • 填写数据：名称，URL查找器，客户端ID，客户机密
    • 选择探索（多选择）
    • 测试连接（ 模拟）
    • 拯救环境
  4. 环境细节 (/admin/configure/environments/[id]):
    • 关联用户列表
    • 添加新用户
    • 删除用户（仅限管理员创建者）

📁 项目结构

├── app/                      # Next.js App Router
│   ├── (auth)/              # Rotas de autenticação
│   ├── admin/               # Rotas administrativas
│   ├── api/mock/            # API routes mock
│   ├── chat/                # Página do chat
│   ├── loading/             # Tela de carregamento
│   └── layout.tsx           # Layout raiz
├── components/              # Componentes React
│   ├── admin/               # Componentes admin
│   ├── auth/                # Componentes de autenticação
│   ├── chat/                # Componentes do chat
│   ├── layout/              # Layout components
│   ├── loading/             # Componentes de loading
│   └── ui/                  # Componentes UI base
├── contexts/                # React Contexts
├── hooks/                   # Custom hooks
├── lib/                     # Utilitários e helpers
├── types/                   # TypeScript types
└── data/                    # Dados de exemplo (seed)

🔧 堆栈技术

  • Next.js 14 （应用路由器）
  • 反应18
  • TypeScript
  • TailwindCSS
  • 帧运动 （动画）
  • 本地存储 （数据持久性 - 仅用于演示）

📋 验收清单（QA Demo）

  • [x] 电话 /login com OAuth谷歌模拟切换角色开发
  • [x] /loading 具有动画和模拟阶段
  • [x] /chat 功能：提交问题，查看模拟答案，查看剩余问题计数器，300字符限制
  • [x] /admin 聊天 / 配置 按钮
  • [x] /admin/configure/environments 与列表，创建新的环境与域和测试连接模拟
  • [x] /admin/configure/environments/[id] 用户列表和流添加用户加载和确认
  • [x] 所有动作都有友好的祝贺/错误和确认模式
  • [x] 干净的代码，组织成可重复使用的组件

🔐 安全 - 重要说明

⚠️ 这个原型不安全生产！

咨询 SECURITY.md 完整的待生产点列表。

主要要点：

  1. 认证：Mockada无前端-开发服务器实现无后端
  2. 客户端密钥永远不要存储在前端 - 在后端使用环境变量
  3. 角色验证: 前端模拟 - 必须在后端验证
  4. 问题计数存储于 localStorage - 必须通过每日重置在后端进行管理
  5. Looker/MCP 集成: Mocks - 必须在后端实现

📝 许可证

这是一个内部示范原型。

相关 MCP