🌌 裂隙
通过操作复杂性产生裂痕
由DigitalOcean Graduate AI+模型上下文协议支持的自主基础设施编排和修复。
这是一个Vibe编码的项目,我只是在黑客马拉松周末玩得很开心,因为我喜欢这个想法。
打开裂缝以创造,闭合裂缝以修复——所有这些都以机器速度进行。
  
______________________________________________________________________
📋 目录
______________________________________________________________________
🎯 什么是Rift?
Rift是一个基于人工智能的基础设施编排器 自主检测、诊断和修复基础设施问题 使用多代理系统和模型上下文协议(MCP)。
问题
- DevOps工程师花费 40%的时间 关于常规基础设施事故
- 平均事件响应时间: 2-4小时
- 手动修复容易出错且不一致
- 随叫随到的疲劳会导致倦怠
解决方案
FixBot使用三个专门的AI代理:
- 监视器代理 -通过DigitalOcean MCP+Prometheus在几秒钟内检测问题
- 诊断代理 -使用RAG从知识库中分析根本原因
- 补救剂 -通过Terraform+MCP自动修复问题
结果: 事件响应时间从数小时缩短到 约90秒,完全自主。
______________________________________________________________________
📁 项目结构
fixbot/
│
├── frontend/ # 🎨 Next.js Dashboard (Pre-built)
│ ├── app/
│ │ ├── page.tsx # Main dashboard
│ │ ├── layout.tsx # Root layout
│ │ ├── globals.css # Dark punk theme styles
│ │ └── favicon.ico
│ │
│ ├── components/
│ │ ├── ui/ # shadcn/ui components
│ │ │ ├── button.tsx
│ │ │ ├── card.tsx
│ │ │ └── badge.tsx
│ │ │
│ │ ├── StatusCard.tsx # Agent status display
│ │ ├── IncidentFeed.tsx # Real-time event stream
│ │ ├── AgentStatus.tsx # Agent health monitor
│ │ ├── MetricsChart.tsx # System metrics visualization
│ │ ├── TraceViewer.tsx # AI decision traceability
│ │ └── Terminal.tsx # Terminal-style output
│ │
│ ├── lib/
│ │ ├── api.ts # Backend API client
│ │ ├── websocket.ts # WebSocket connection
│ │ └── utils.ts # Utility functions
│ │
│ ├── public/
│ │ └── fixbot-logo.svg
│ │
│ ├── package.json
│ ├── tsconfig.json
│ ├── tailwind.config.ts # Dark punk theme
│ ├── next.config.js
│ ├── .env.local # Configure this!
│ └── README.md
│
└── backend/ # 🔧 Python Backend (Build this!)
├── agents/
│ ├── base_agent.py # Base agent class
│ ├── monitor_agent.py # Monitoring logic
│ ├── diagnostic_agent.py # Diagnosis with RAG
│ └── remediation_agent.py # Auto-remediation
│
├── mcp_clients/
│ ├── do_mcp.py # DigitalOcean MCP
│ ├── terraform_mcp.py # Terraform MCP
│ └── prometheus_mcp.py # Custom Prometheus MCP
│
├── orchestrator/
│ └── coordinator.py # Agent coordination
│
├── models/
│ └── incident.py # Pydantic models
│
├── terraform/
│ ├── main.tf
│ └── modules/
│
├── demo/
│ └── failure_injection.py # Demo scenarios
│
├── knowledge-base/
│ ├── do-docs.md
│ ├── runbooks.md
│ └── past-incidents.json
│
├── main.py # FastAPI backend
├── requirements.txt
├── .env # Configure this!
└── README.md目录职责
前端(fixbot/frontend/):
- ✅ 预构建并随时可用 -快跑
npm install并配置.env.local - Next.js 14+,带应用路由器
- 带有WebSocket更新的实时仪表板
- Dark Punk专业主题 -赛博朋克美学与彭博终端相遇
- TypeScript+顺风CSS+shadcn/ui
- 所需配置最少
后端(fixbot/backend/):
- ⚠️ 你在黑客马拉松期间建造了这个
- Python快速API应用程序
- AI代理(监控、诊断、补救)
- MCP服务器集成
- 用于实时更新的WebSocket服务器
- 基础设施即代码(Terraform)
______________________________________________________________________
🎨 前端设置
前端是 预建 以专业的黑暗朋克为主题。你只需要安装和配置它。
先决条件
- Node.js 18+和npm 9+
- 正在运行的后端API(请参阅后端设置)
快速开始
# Navigate to frontend directory
cd fixbot/frontend
# Install dependencies
npm install
# Configure environment variables
cp .env.example .env.local编辑 .env.local:
# Backend API endpoint
NEXT_PUBLIC_API_URL=http://localhost:8000
# WebSocket endpoint
NEXT_PUBLIC_WS_URL=ws://localhost:8000/ws# Run development server
npm run dev
# Open browser
open http://localhost:3000前端技术栈
- 框架: Next.js 14(应用路由器)
- 语言: TypeScript
- 造型: Tailwind CSS
- 组件: shadcn/ui
- 国家: React挂钩
- 实时: WebSocket客户端
- API客户: 获取带有错误处理的API
______________________________________________________________________
🔧 后端设置
后端是你将在黑客马拉松期间构建的东西。
先决条件
- Python 3.11+
- 使用API令牌的DigitalOcean帐户
- 渐变AI平台访问
- Terraform已安装
- Docker(用于MCP服务器)
快速开始
# Navigate to backend directory
cd fixbot/backend
# Create virtual environment
python3 -m venv venv
source venv/bin/activate # Windows: venv\Scripts\activate
# Install dependencies
pip install -r requirements.txt
# Configure environment variables
cp .env.example .env编辑 .env:
# DigitalOcean
DO_API_TOKEN=your_do_token_here
DO_SPACES_KEY=your_spaces_key
DO_SPACES_SECRET=your_spaces_secret
# Gradient AI
GRADIENT_AI_API_KEY=your_gradient_key
MONITOR_AGENT_ID=agent_xxx
DIAGNOSTIC_AGENT_ID=agent_yyy
REMEDIATION_AGENT_ID=agent_zzz
# MCP Servers
DO_MCP_URL=http://localhost:3000
TERRAFORM_MCP_URL=http://localhost:3001
PROMETHEUS_URL=http://your-prometheus:9090# Start MCP servers (in separate terminals)
# See MCP Integration section in full guide
# Run FastAPI backend
python main.py
# Backend should start on http://localhost:8000后端技术栈
- 框架: 快速API
- 人工智能平台: 数字海洋梯度AI
- 协议: 模型上下文协议(MCP)
- IaC: 地形
- 监控: 普罗米修斯
- 语言: Python 3.11+
______________________________________________________________________
🚀 运行完整系统
开发模式
终端1:后端API
cd fixbot/backend
source venv/bin/activate
python main.py
# Runs on http://localhost:8000终端2:前端仪表板
cd fixbot/frontend
npm run dev
# Runs on http://localhost:3000终端3:监控日志(可选)
cd fixbot/backend
tail -f logs/fixbot.log验证一切正常
# Check backend health
curl http://localhost:8000/agents/health
# Check frontend loads
curl http://localhost:3000
# Open dashboard in browser
open http://localhost:3000 # macOS
xdg-open http://localhost:3000 # Linux您应该看到:
- ✅ 所有三个代理状态卡均显示“活动”,并带有绿色指示灯
- ✅ 显示正常值的系统指标
- ✅ 实时连接指示灯显示“已连接”
- ✅ 空事件提要(尚未发生事件)
______________________________________________________________________
🎨 设计系统(Dark Punk专业主题)
主题哲学
“职业赛博朋克” -高科技运营中心的美学。思考: 《银翼杀手》与彭博终端相遇深色、光滑,带有霓虹色调,传达出紧迫感和精确性。
调色板
/* Background & Surfaces */
--background: #0a0e17; /* Deep space black */
--surface: #111827; /* Card/panel background */
--surface-elevated: #1f2937; /* Elevated elements */
/* Brand Colors (Neon Accents) */
--primary: #00ff9f; /* Neon green - success/active */
--secondary: #00d4ff; /* Cyber blue - info */
--accent: #ff00ff; /* Neon magenta - alerts */
/* Status Colors */
--success: #00ff9f; /* Neon green */
--warning: #ffaa00; /* Electric amber */
--danger: #ff3366; /* Hot pink red */
/* Text */
--text-primary: #e5e7eb; /* Almost white */
--text-secondary: #9ca3af; /* Muted gray */
--text-muted: #6b7280; /* Very muted */
/* Borders */
--border: #1f2937; /* Subtle borders */
--border-bright: #374151; /* Highlighted borders */排版
字体:
- 标题:
"JetBrains Mono"或"Space Mono"(单空间,技术感) - 主体:
"Inter"或"DM Sans"(干净、可读) - 代码/终端:
"Fira Code"或"Cascadia Code"(用绑带)
指导方针:
- 使用 大写字母 用于标签和状态指示器
- 使用 等宽字体 适用于任何技术(ID、时间戳、指标)
- 使用 大中型 重要信息(记住:投影仪演示!)
- 使用 颜色 传达意义(绿色=良好,红色=关键,蓝色=信息)
组件示例
状态卡(代理显示)
{/* Active indicator - pulsing green dot */}
{/* Agent name - monospace, uppercase, neon green */}
Monitor Agent
{/* Status info - secondary text */}
Status: Active • Last check: 2s ago
终端/控制台输出
●
14:32:15 | FixBot detected high CPU (95%)
●
14:32:18 | Analyzing root cause...
●
14:33:45 | ✅ RESOLVED - Droplet resized
指标显示
CPU Usage
42%
{/* Progress bar with gradient */}
动画指南
谨慎而专业地使用:
/* Pulse for active states */
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
/* Glow effect on hover */
.hover-glow:hover {
box-shadow: 0 0 20px rgba(0, 255, 159, 0.3);
}
/* Subtle scan line (optional) */
@keyframes scan {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
}做:
- ✅ 活动/活动状态的脉冲指示器
- ✅ 平滑过渡(0.2-0.3秒)
- ✅ 悬停效果(发光、边框颜色更改)
- ✅ 通知淡入/淡出
不要:
- ❌ 动画过多
- ❌ 持续运动
- ❌ 演示期间的分心效果
- ❌ 闪烁的过渡
布局原则
仪表板网格(桌面):
┌─────────────────────────────────────────────────┐
│ 🤖 FixBot [●] LIVE │
├─────────────────────────────────────────────────┤
│ │
│ [Monitor] [Diagnostic] [Remediation] │ ← Agent status cards
│ │
├─────────────────────────────────────────────────┤
│ │
│ 📊 System Metrics │ ← Metrics display
│ CPU | Memory | Disk │
│ │
├─────────────────────────────────────────────────┤
│ │
│ 🔴 Live: Incident Timeline │ ← Real-time feed
│ [Scrolling event stream...] │
│ │
└─────────────────────────────────────────────────┘间距:
- 使用
gap-4(1rem)或gap-6(1.5雷姆) - 卡片内部填充物丰富:
p-6或p-8 - 一致的利润率:
my-4或my-6
______________________________________________________________________
🎬 演示指南
演示前检查表
演示前5分钟:
- 启动后端:
cd fixbot/backend && python main.py- 启动前端:
cd fixbot/frontend && npm run dev- 打开仪表板:
open http://localhost:3000- 验证状态:
- 所有代理均显示绿色“活动” - 系统指标显示正常 - 实时指示器显示“已连接”
- 准备故障注入:
cd fixbot/backend/demo
# Have terminal ready with injection command演示脚本(7分钟)
\[0:00-0:30\]挂钩+仪表板简介
YOU: "Infrastructure breaks. That's a fact of life.
But what if you had a bot that fixed things automatically -
before they wake up your on-call engineer at 3 AM?
That's FixBot."
[Show dashboard on screen - point to it]
"This is FixBot's operations center.
Three AI agents monitoring our infrastructure 24/7."\[0:30-1:00\]建筑详解
[Point to each agent card]
YOU: "Three specialized agents:
Monitor Agent - detects issues via DigitalOcean MCP and Prometheus
Diagnostic Agent - uses RAG to analyze root causes
Remediation Agent - fixes problems automatically via Terraform
All powered by DigitalOcean Gradient AI with Model Context Protocol."\[1:00-4:00\]现场演示:CPU峰值
# Run in terminal (don't show this to judges, just run it)
python failure_injection.py --inject cpu --target web-app[FOCUS ON DASHBOARD - this is the star]
YOU: "Let me trigger a real incident. I'm overloading our web server..."
[Dashboard comes alive:]
- Monitor Agent: Status changes to "⚠ DETECTING..."
- Incident feed starts scrolling:
"14:32:15 | 🔴 ALERT: High CPU detected (95%)"
[CPU metric bar turns red, shows 95%]
YOU: "Three seconds. FixBot detected it."
[Diagnostic Agent activates:]
"14:32:18 | 🔍 Analyzing root cause..."
"14:32:22 | 💡 Root cause: Undersized droplet"
"14:32:22 | 📋 Recommended: Resize to s-2vcpu-4gb"
YOU: "Now it's using RAG - querying our knowledge base of past incidents,
DigitalOcean documentation, best practices..."
[Remediation Agent executes:]
"14:32:25 | 🔧 Executing: Terraform resize"
"14:32:30 | ⚙️ Applying infrastructure changes..."
"14:33:45 | ✅ RESOLVED: Droplet resized"
[CPU drops to 42%, turns green]
[All agents return to "Active" status]
YOU: "90 seconds total. From detection to resolution.
Completely autonomous. No human intervention."
[Pause for impact]\[4:00-5:00\]显示可追溯性
[Click on resolved incident in feed]
[Opens trace viewer panel]
YOU: "Here's what makes this special - full traceability.
[Point to trace view showing:]
- Input metrics and system state
- RAG retrieval results from knowledge base
- Decision logic and confidence scores
- Terraform config generated
- Success validation
"Every decision the AI makes is auditable.
This isn't a black box. You can see exactly why FixBot chose this solution."\[5:00-6:00\]快速第二次演示(如果时间)
python failure_injection.py --inject disk --target api-serverYOU: "One more. Disk full on API server..."
[Faster walkthrough on dashboard]
- Detect (5s)
- Diagnose (15s)
- Attach new volume (45s)
- Resolved
YOU: "Same pattern. Different problem. Fixed automatically."\[6:00-7:00\]结束
[Return to clean dashboard - all green]
YOU: "FixBot - the infrastructure fixer that never sleeps.
Key features:
• Detects issues in seconds using DigitalOcean MCP
• Diagnoses with AI-powered RAG
• Fixes automatically via Terraform
• Full traceability of every decision
• Built entirely on DigitalOcean Gradient AI
This is the future of infrastructure management.
No more 3 AM wake-up calls.
No more manual emergency fixes.
Just autonomous, intelligent infrastructure.
Questions?"
[Confident smile, pause]演示技巧
做:
- ✅ 演示期间保持仪表板全屏显示
- ✅ 说话缓慢而清晰
- ✅ 在关键影响点后暂停
- ✅ 在解释时指向屏幕元素
- ✅ 表现出热情——这是很酷的技术!
- ✅ 如果现场演示失败,请备份视频
不要:
- ❌ 不断在终端和浏览器之间切换
- ❌ 快速浏览演示
- ❌ 迷失在技术细节中
- ❌ 为延误道歉(这很正常)
- ❌ 背对着观众
______________________________________________________________________
🏗️ 建筑
┌──────────────────────────────────────────────────────────────┐
│ USER INTERFACE │
│ (Next.js Dashboard) │
│ │
│ • Dark Punk Professional Theme │
│ • Real-time WebSocket Updates │
│ • Agent Status Monitoring │
│ • Incident Timeline │
│ • Decision Traceability │
└────────────────┬────────────────────────────────────────────┘
│
│ WebSocket + REST API
│
┌────────────────▼────────────────────────────────────────────┐
│ FASTAPI BACKEND │
│ (Orchestrator) │
│ │
│ Endpoints: │
│ • POST /incidents/detect │
│ • POST /incidents/diagnose │
│ • POST /incidents/remediate │
│ • GET /status │
│ • GET /agents/health │
│ • WS /ws (WebSocket for real-time) │
└────────────────┬────────────────────────────────────────────┘
│
│ Agent API Calls
│
┌────────────────▼────────────────────────────────────────────┐
│ DIGITALOCEAN GRADIENT AI PLATFORM │
│ (Multi-Agent System) │
│ │
│ ┌──────────┐ ┌──────────────┐ ┌────────────────┐ │
│ │ MONITOR │──│ DIAGNOSTIC │──│ REMEDIATION │ │
│ │ AGENT │ │ AGENT │ │ AGENT │ │
│ │ │ │ │ │ │ │
│ │ • Detect │ │ • RAG Query │ │ • Terraform │ │
│ │ • Alert │ │ • Analyze │ │ • DO API │ │
│ │ • Triage │ │ • Recommend │ │ • Validate │ │
│ └────┬─────┘ └──────┬───────┘ └────────┬───────┘ │
│ │ │ │ │
│ └───────────────┼────────────────────┘ │
│ │ │
│ ┌────────────────────▼─────────────────────────────────┐ │
│ │ KNOWLEDGE BASE (RAG) │ │
│ │ • DO Documentation (auto-indexed) │ │
│ │ • Runbooks & Best Practices │ │
│ │ • Past Incident History │ │
│ └──────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────┘
│
│ MCP Protocol
│
┌────────────────▼────────────────────────────────────────────┐
│ MCP SERVERS │
│ │
│ ┌─────────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ DigitalOcean │ │ Terraform │ │ Prometheus │ │
│ │ MCP Server │ │ MCP Server │ │ MCP (Custom) │ │
│ │ │ │ │ │ │ │
│ │ • Droplets │ │ • Validate │ │ • Query │ │
│ │ • Monitoring │ │ • Plan │ │ • Alerts │ │
│ │ • Spaces │ │ • Apply │ │ • Metrics │ │
│ │ • Kubernetes │ │ • State │ │ │ │
│ └─────────────────┘ └──────────────┘ └──────────────┘ │
└──────────────────────────────────────────────────────────────┘______________________________________________________________________
🛠️ 技术栈
前端
- 框架: Next.js 14(应用路由器)
- 语言: TypeScript 5+
- 造型: 顺风CSS 3.4
- 组件: shadcn/ui
- 状态管理: React钩子(useState、useEffect、useContext)
- 实时: Websocket API
- HTTP客户端: 获取API
- 构建工具: 内置Next.js(Turbopack)
后端
- 框架: FastAPI 0.109+
- 语言: Python 3.11+
- 人工智能平台: 数字海洋梯度AI
- 多智能体系统 - RAG(检索增强生成) - 函数调用 - 代理评估 - 可追溯性
- 协议: 模型上下文协议(MCP)
- 基础设施: 地形1.6+
- 监控: 普罗米修斯
- 状态管理: DO空间(兼容S3)
- Websocket: FastAPI WebSocket支持
基础设施
- 云: 数字海洋
- 液滴(计算) - 空间(对象存储) - 托管Kubernetes(可选) - 监控(内置)
- IaC: 地形与DO提供商
- 编排: FastAPI+异步
- 监控: 普罗米修斯+节点导出器
______________________________________________________________________
🎯 主要特点
✅ 已实施(前端)
- 带WebSocket的实时仪表板
- 黑暗朋克专业主题
- 代理状态监控
- 实时事件馈送
- 系统指标可视化
- 决策可追溯性查看器
- 响应式布局(以桌面为中心)
🔨 实施(后端-你的工作!)
- \[\]具有DO MCP集成的监控代理
- \[\]RAG诊断试剂
- \[\]含有Terraform的修复剂
- \[\]FastAPI编排器
- \[\]用于实时更新的WebSocket服务器
- \[\]MCP客户端实现
- \[\]知识库设置
- \[\]演示失败注入脚本
- \[\]代理评估
______________________________________________________________________
📦 快速命令参考
前端
# Install
npm install
# Dev mode
npm run dev
# Build
npm run build
# Production
npm start
# Type check
npm run type-check
# Lint
npm run lint后端
# Install
pip install -r requirements.txt
# Run dev
python main.py
# Run with reload
uvicorn main:app --reload
# Run tests
pytest tests/
# Type check
mypy .______________________________________________________________________
🐛 故障排除
前端无法连接到后端
- 检查
.env.local有正确NEXT_PUBLIC_API_URL - 验证后端是否在预期端口上运行
- 检查FastAPI后端的CORS设置
- 在浏览器控制台中查找错误(F12)
WebSocket连接失败
- 检查
NEXT_PUBLIC_WS_URL在.env.local - 验证后端是否存在WebSocket端点
- 检查防火墙/代理设置
- 测试:
wscat -c ws://localhost:8000/ws
黑暗主题不适用
- 清除浏览器缓存
- 检查
globals.css进口于layout.tsx - 验证Tailwind是否正确处理CSS
- 跑
npm run dev具有干净的缓存
代理没有响应
- 检查后台的Gradient AI API键
.env - 验证代理ID是否正确
- 单独测试代理端点
- 检查渐变AI仪表板是否有错误
______________________________________________________________________
📝 许可证
MIT许可证-有关详细信息,请参阅许可证文件
______________________________________________________________________
🏆 专为
MLH+数字海洋人工智能黑客马拉松纽约\ 2025年12月12日至13日
______________________________________________________________________
👥 团队
建于❤️ 和☕ \[你的名字\]
______________________________________________________________________
🔗 链接
______________________________________________________________________
问题?发现bug了吗?想贡献吗?\ 在GitHub上打开一个问题或PR!
🤖 FixBot-破坏东西?我们会在你注意到之前修好它们。 🤖
