AI-powered incident management system for tracking, documenting, and communicating service disruptions. Built with Deco MCP runtime, React, and Tailwind CSS.
This system provides a complete incident management solution with:
- AI-powered incident creation via chat interface
- Admin dashboard for managing incidents
- Public incident pages for customer transparency
- Timeline tracking with real-time updates
- Multi-resource severity tracking
- Public/private visibility controls
/server- MCP Server (Cloudflare Workers + Deco runtime)- Database schema with JSON columns for flexible data
- CRUD tools with authentication
- AI integration for incident generation
/view- React Frontend (Vite + Tailwind CSS + TanStack Router)- Admin interface for incident management
- AI chat interface for creation
- Public incident viewing pages
# Install dependencies
npm install
# Configure the app
npm run configure
# Start development server
npm run dev
# Generate database migrations (after schema changes)
npm run db:generate
# Deploy to production
npm run deploy- Chat Interface: Conversational incident creation
- Smart Generation: AI analyzes descriptions and creates structured reports
- Auto-formatting: Generates timeline, affected resources, and status
- Private Tools: Admin functions require authentication
- Public Access: Anyone can view public incidents
- Visibility Controls: Public/private incident settings
- Status Flow: INVESTIGATING → IDENTIFIED → MONITORING → RESOLVED
- Multi-Resource Tracking: Track multiple services with different severity levels
- Timeline System: Chronological event tracking with timestamps
- Severity Levels: Operational, Under Maintenance, Degraded Performance, Partial Outage, Major Outage
- Deco Brand Colors: Consistent with Deco design system
- Responsive Design: Mobile-first approach
- Status Badges: Color-coded status and severity indicators
- Real-time Updates: Live data with React Query
/- Home page (redirects to status.deco.cx in production)/incident/:id- Public incident view
/admin- Dashboard with incident list/admin/new-incident- AI-powered incident creation/admin/incident/:id- Edit existing incident
// Single table with JSON columns for flexibility
incidents {
id: string (UUID)
createdAt: timestamp
updatedAt: timestamp
title: string
status: "INVESTIGATING" | "IDENTIFIED" | "MONITORING" | "RESOLVED"
visibility: "public" | "private"
commitments?: string
createdBy: string (user ID)
affectedResources: JSON // Array<{ resource: string, severity: string }>
timeline: JSON // Array<{ time: Date, event: string, attachmentUrl?: string, createdBy: string }>
}CREATE_INCIDENT- Create new incidentUPDATE_INCIDENT- Update existing incidentGET_INCIDENT- Get incident by ID (respects visibility)LIST_INCIDENTS- List incidents with filtersADD_TIMELINE_EVENT- Add event to incident timelineAI_GENERATE_INCIDENT- Generate incident using AI
useListIncidents- Query incidents with filtersuseGetIncident- Get single incidentuseCreateIncident- Create incident mutationuseUpdateIncident- Update incident mutationuseAddTimelineEvent- Add timeline eventuseAIGenerateIncident- AI generationuseCreateIncidentFromAI- Combined AI + create flow
--background: #fcfbf6
--foreground: #262626
--primary: #d0ec1a
--primary-foreground: #07401a
--card: #f3f1e7
--border: #c4c1b1
--muted: #dedbc9.status-investigating- Yellow badge for investigating.status-identified- Orange badge for identified.status-monitoring- Blue badge for monitoring.status-resolved- Green badge for resolved.severity-operational- Green for operational.severity-major- Red for major outages
- Backend: Add tools in
server/tools/incidents.ts - Types: Run
npm run gen:selfto generate types - Frontend: Create hooks in
view/src/hooks/useIncidents.ts - UI: Build components using shadcn/ui + Tailwind
- Modify
server/schema.ts - Run
npm run db:generate - Migrations apply automatically on next server start
npm run deploy- Builds frontend for production
- Deploys to Cloudflare Workers
- Available at your configured domain
- Development: Shows full incident management interface
- Production: Redirects home page to
status.deco.cx - Public incidents: Always accessible via direct URLs
- Admin functions: Require authentication
- Home page redirects to existing
status.deco.cx - Public incident pages provide detailed views
- Admin can control visibility (public/private)
- Uses
DECO_CHAT_WORKSPACE_API.AI_GENERATE_OBJECT - Structured schema for consistent output
- Chat-like interface for natural interaction
- Backend: Deco MCP Runtime, Cloudflare Workers
- Database: SQLite with Drizzle ORM
- Frontend: React 18, TypeScript, Vite
- Styling: Tailwind CSS, shadcn/ui components
- Routing: TanStack Router (type-safe)
- State: TanStack Query (React Query)
- Forms: Native HTML forms with validation
- AI: Deco Chat Workspace API
- Deployment: Cloudflare Workers
- Navigate to
/admin/new-incident - Describe the issue: "API is returning 500 errors for authentication"
- AI generates structured incident with timeline and affected resources
- Review and save with chosen visibility
- View all incidents at
/admin - Click "Edit" to modify details
- Add timeline events as situation develops
- Update status as incident progresses
- Set to public when ready for customer visibility
- Customers can view public incidents directly
- Clean, professional incident pages
- Real-time status and timeline updates
- Integration with main status page
This repository uses Specstory to track the history of prompts that were used to code this repo. You can inspect the complete development history in the .specstory/ folder.
This system provides complete incident lifecycle management with AI assistance, making it easy to maintain transparency during service disruptions while keeping internal processes efficient.
Ready to manage incidents with AI? Deploy on Deco 🚀