MCP AI助手-前端
MCP AI Assistant平台的React+Vite前端。此应用程序连接到后端API，以支持聊天、身份验证和人工智能辅助工作流。
______________________________________________________________________
📁 项目结构
a i- agent- mcp-frontend/
├── public/ # Static assets and favicon
├── src/
│ ├── api/ # API helper functions
│ │ └── api.js
│ ├── assets/ # Image and media files
│ ├── components/ # Reusable UI components
│ │ ├── ChatAssistant.jsx
│ │ ├── ConfirmationModal.jsx
│ │ ├── HowToUse.jsx
│ │ └── ProtectedRoute.jsx
│ ├── pages/ # Route pages
│ │ ├── Chat.jsx
│ │ ├── HowToUsePage.jsx
│ │ ├── LandingPage.jsx
│ │ └── Login.jsx
│ ├── App.css # Application styles
│ ├── App.jsx # Route definitions and layout
│ ├── index.css # Global styles and Tailwind imports
│ └── main.jsx # React DOM entry point
├── .env # Environment variables
├── .gitignore # Git ignore rules
├── eslint.config.js # ESLint configuration
├── index.html # HTML entry point
├── package.json # Project dependencies and scripts
├── vite.config.js # Vite config
└── README.md # This file______________________________________________________________________
📄 文件描述
根文件
| 文件 | 目的 |
|---|---|
.env | 前端环境变量 |
.gitignore | git忽略的文件和文件夹 |
index.html | React应用程序的HTML入口点 |
package.json | npm脚本和依赖关系 |
vite.config.js | Vite bundler配置 |
eslint.config.js | 过梁规则和设置 |
源文件(src/)
| 文件 | 目的 |
|---|---|
main.jsx | 挂载React应用程序 |
App.jsx | 定义应用程序路由和页面 |
App.css | 应用范围样式 |
index.css | 全球CSS和顺风设置 |
API帮助人员(src/api/)
| 文件 | 目的 |
|---|---|
api.js | 用于聊天、身份验证和深度搜索的后端API助手 |
页面(src/pages/)
| 文件 | 目的 |
|---|---|
LandingPage.jsx | 应用程序的登录屏幕 |
Login.jsx | 谷歌登录和身份验证流程页面 |
Chat.jsx | 主聊天界面页面 |
HowToUsePage.jsx | 使用指南和说明页面 |
组件(src/components/)
| 组件 | 目的 |
|---|---|
ChatAssistant.jsx | 带有消息传递、markdown渲染和会话处理的聊天UI组件 |
ConfirmationModal.jsx | 用于确认敏感动作的模式 |
HowToUse.jsx | 用户帮助/说明面板 |
ProtectedRoute.jsx | 受保护视图的路由包装器（如果使用） |
______________________________________________________________________
🚀 主要特点
- 实时AI聊天界面
- Google OAuth身份验证流集成
- 后台API请求聊天、注销和用户数据
- 助理消息的Markdown渲染
- 采用Vite的顺风CSS样式
- 使用React Router的基于路由的UI
______________________________________________________________________
🛠 设置和安装
先决条件
- Node.js（v16或更高版本）
- npm或纱线
安装依赖项
npm install环境配置
创建一个 .env 前端根目录中的文件包含：
VITE_BASE_URL=http://localhost:5000开发服务器
npm run dev为生产而建
npm run build预览生产版本
npm run previewLint代码
npm run lint______________________________________________________________________
🔧 技术栈
- 反应19
- 维特
- Tailwind CSS
- React路由器DOM
- React Markdown
- 埃斯林特
______________________________________________________________________
💡 用法
- 从启动后端
ai-agent-mcp-backend/ - 以以下方式启动前端
npm run dev - 打开
http://localhost:5173 - 使用AI助手聊天界面
- 登录并与基于聊天的工作流交互
______________________________________________________________________
📝 备注
- 前端使用
import.meta.env.VITE_BASE_URL以调用后端API。 src/api/api.js处理聊天、注销、当前用户和未来的深度搜索请求。App.jsx定义路线/,/login,/chat，以及/how-to-use.- 会话ID在聊天请求标头中传递
x-session-id.