AI导哈

DevOps操作界面

一个现代化的响应式Web应用程序，通过模型上下文协议（MCP）集成提供直观的DevOps操作界面，支持实时监控、部署管理和基于角色的访问控制，适用于企业环境。

  • by abhishekrnjn
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 abhishekrnjn/light-devops-mcp-nextjs

使用说明

轻量级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服务器正在运行（后端）

地方发展设置

  1. 再进行:

    npm install

  2. 环境配置: 创建 .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

  3. 启动开发服务器:

    npm run dev

  4. 访问应用程序: 打开 http://localhost:3000

生产部署

  1. 部署到Vercel:

    npm i -g vercel
vercel

  2. 配置环境变量 在Vercel仪表板中

  3. 重新部署 添加环境变量后

使用的技术栈

前端框架

  • 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工具的预构建连接器

相关 MCP