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
🛠 设置和安装
先决条件
安装依赖项
环境配置
创建一个 .env 前端根目录中的文件包含：
VITE_BASE_URL=http://localhost:5000
开发服务器
为生产而建
预览生产版本
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.
