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):

- 配置的环境列表 - 创建新环境 - 打开环境详情 - 删除环境（ 只有创建者才能删除）

1. 新环境 (/admin/configure/environments/new):

- 填写数据：名称，URL查找器，客户端ID，客户机密 - 选择探索（多选择） - 测试连接（ 模拟） - 拯救环境

1. 环境细节 (/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 - 必须在后端实现

📝 许可证

这是一个内部示范原型。