轻量级DevOps MCP前端
一个现代的、响应式的web应用程序，通过模型上下文协议（MCP）集成为自主DevOps操作提供直观的界面。基于Next.js 15、TypeScript和Descope身份验证构建，为企业环境提供实时监控、部署管理和基于角色的访问控制。
团队信息
团队名称： （5879）
团队成员： \[阿布舍克·兰詹\]
黑客马拉松主题/挑战
主题： \[主题2\]
应对的挑战： 构建一个自主的DevOps平台，使AI代理能够通过标准化的模型上下文协议（MCP）接口执行复杂的DevOps操作，并为企业环境提供集成的安全、监控和基于角色的访问控制。
项目部署地点
\[https://light-devops-mcp-nextjs.vercel.app\]
演示视频链接
\[此处将添加演示视频\]
Github回购链接
\[https://github.com/abhishekrnjn/light-devops-mcp-nextjs\]
我们建造了什么
我们构建了一个全面的、生产就绪的DevOps门户，作为自主DevOps操作的前端界面。该平台具有以下特点：
核心功能
- 现代Web界面：Next.js 15，带有App Router、TypeScript和Tailwind CSS
- 模型上下文协议（MCP）集成：与后端MCP服务器无缝通信
- 企业身份验证：使用JWT令牌管理的基于描述的身份验证
- 实时监控：日志、指标、部署和回滚的实时仪表板
- 基于角色的访问控制：基于用户权限和角色的动态UI
- 响应式设计：移动优先设计，带可折叠侧边栏和移动导航
关键组件
- 仪表板布局：简洁、现代的界面，带有标签式导航和侧边栏
- MCP服务层：具有自动重试和错误处理功能的强大通信层
- 验证系统：通过自动令牌刷新实现安全的用户管理
- 权限管理：基于用户角色的动态功能可见性
- 错误处理：具有身份验证错误检测功能的全面错误处理
- 数据可视化：实时数据显示，显示加载状态和错误边界
用户体验
- 直觉导航：标签界面，便于访问不同的DevOps功能
- 实时更新：使用加载指示器自动刷新数据
- 移动响应：完全支持移动设备，配有汉堡包菜单和触摸友好界面
- 错误恢复：优雅的错误处理，用户友好的错误消息
- 会话管理：自动令牌刷新和会话验证
如何运行它
先决条件
- Node.js 18+
- npm或纱线
- 描述帐户和项目设置
- OpenAI API密钥
- MCP服务器正在运行（后端）
地方发展设置
- 再进行:
npm install- 环境配置:
创建 .env.local 包含以下变量的文件：
# Descope Configuration
NEXT_PUBLIC_DESCOPE_PROJECT_ID=your_descope_project_id_here
NEXT_PUBLIC_DESCOPE_BASE_URL=https://api.descope.com
# MCP Server Configuration
NEXT_PUBLIC_MCP_SERVER_URL=http://localhost:8001
# OpenAI Configuration
OPENAI_API_KEY=your_openai_api_key_here
OPENAI_MODEL=gpt-4o-mini
# Next.js Configuration
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_nextauth_secret_here- 启动开发服务器:
npm run dev- 访问应用程序:
生产部署
- 部署到Vercel:
npm i -g vercel
vercel- 配置环境变量 在Vercel仪表板中
- 重新部署 添加环境变量后
使用的技术栈
前端框架
- Next.js 15 -带有App Router和服务器组件的React框架
- 反应19 -最新的React具有并发功能和改进的性能
- TypeScript 5 -具有严格类型检查的类型安全开发
- 顺风CSS 4 -实用程序优先的CSS框架，具有现代功能
身份验证和安全
- Descope Next.js SDK -企业身份验证平台集成
- JWT代币 -通过自动刷新实现安全的会话管理
- 基于角色的访问控制 -基于动态权限的功能访问
- 会话管理 -自动令牌刷新和验证
后端集成
- MCP服务层 -模型上下文协议通信的定制服务
- HTTP客户端 -获取带有重试逻辑和错误处理的API
- 令牌刷新服务 -自动会话管理和续订
- 误差边界 -全面的错误处理和恢复
状态管理和钩子
- React挂钩 -useState、useEffect、useContext用于状态管理
- 定制挂钩 -使用权限、使用MCPConnection、使用令牌刷新
- 上下文API -ChatContext用于全球状态管理
- 地方国家 -UI交互的组件级状态
UI/UX组件
- 响应式设计 -具有断点管理的移动优先方法
- 侧边栏导航 -可折叠侧边栏，带移动汉堡菜单
- 选项卡式界面 -不同DevOps功能之间的清晰导航
- 加载状态 -骨架装载机和进度指示器
- 误差边界 -通过用户友好的消息进行优雅的错误处理
开发工具
- ESLint -使用Next.js配置进行代码跳转
- TypeScript -静态类型检查和IntelliSense
- PostCSS -CSS处理和优化
- Next.js开发工具 -内置开发和调试工具
所需依赖关系
- Node.js 18+ -JavaScript运行时
- 现代网络浏览器 -Chrome、Firefox、Safari、Edge浏览器
- 描述帐户 -身份验证服务
- MCP服务器后端 -后端API服务器
我们会用更多的时间做什么
增强的用户体验
- 实时更新：用于实时数据流的WebSocket集成
- 高级仪表板：带有拖放小部件的可定制仪表板
- 深色模式：通过系统偏好检测进行主题切换
- 键盘快捷键：高级用户键盘导航
- 渐进式Web应用程序：离线支持和移动应用程序般的体验
高级数据可视化
- 交互式图表：D3.js或Chart.js集成，用于复杂数据可视化
- 日程表视图：部署时间表和回滚历史的甘特图
- 热图：用于系统监控的性能热图
- 提升自订控件：用户定义的监控小部件和警报
人工智能集成
- 聊天界面：用于DevOps运营的AI聊天助手
- 自然语言查询：使用自然语言查询日志和指标
- 预测分析：人工智能驱动的故障预测和建议
- 智能通知：具有上下文感知通知的智能警报
企业功能
- 多租户支持：不同团队/项目的隔离环境
- 审计日志：具有可搜索历史记录的全面审计跟踪
- 自定义工作流：用于复杂操作的可视化工作流生成器
- 集成中心：流行DevOps工具的预构建连接器