Security Incidents Visualizer - MCP App

An interactive MCP App for visualizing security incident data with multiple charts, filters, and real-time analytics. Features both an MCP server for AI assistants (VS Code, Claude Desktop) and a standalone demo with AI chat.

Features

📊 Multiple Visualizations

1. Time Series Chart - Track incidents over time
2. Severity & States - Pie chart showing severity distribution + states bar chart
3. Affected Hosts - Top 10 most affected hosts
4. Threat Analysis - Positivity score distribution + detection types
5. Table View - Sortable table with detailed incident information

🎯 Interactive Filters

• Date Range - Filter by start and end date
• Severity - Filter by CRITICAL, HIGH, MEDIUM, LOW
• State - Filter by incident state (NOT_STARTED, IN_PROGRESS, RESOLVED, CLOSED, ESCALATED)
• Host - Search and filter by host name with autocomplete

🎨 Design Features

• Responsive Layout - Adapts to screen size (compact for chat windows, larger for web pages)
• Transparent Background - Integrates seamlessly with host UI
• Acronis Branding - Corporate color scheme (#0B1F3F navy, #00C7D4 cyan)
• Dual Context Support - Works in both MCP hosts and standalone browsers

Installation

Option A: Install from npm (Recommended)

No installation needed! Use directly with npx:

{
  "mcpServers": {
    "security-incidents": {
      "command": "npx",
      "args": ["-y", "mcp-security-incidents-visualizer"]
    }
  }
}

Option B: From Source

git clone <repository-url>
cd security-incidents-visualizer
npm install
npm run build

Build

npm run build

This creates a bundled single-file HTML app in dist/index.html.

Usage

Option 1: VS Code with GitHub Copilot

1. Start the HTTP MCP server:

   npx tsx server-http.ts

2. Configure VS Code - The project includes .vscode/mcp.json:

   {
     "servers": {
       "security-incidents": {
         "type": "http",
         "url": "http://localhost:3001/mcp"
       }
     }
   }

3. Reload VS Code - Cmd+Shift+P → "Developer: Reload Window"

4. Open Copilot Chat and ask:

   Show me security incidents visualization

Option 2: Claude Desktop

Using npm (recommended):

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "security-incidents": {
      "command": "npx",
      "args": ["-y", "mcp-security-incidents-visualizer"]
    }
  }
}

Or from source:

1. Start the stdio MCP server:

   npx tsx server.ts

2. Configure Claude Desktop - Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

   {
     "mcpServers": {
       "security-incidents": {
         "command": "npx",
         "args": ["tsx", "/path/to/your/project/server.ts"]
       }
     }
   }

3. Restart Claude Desktop

4. Ask Claude:

   Visualize security incidents for me

Option 3: Standalone Demo with AI Chat

1. Start the demo server:

   npx tsx demo-server-ai.ts

2. Open in browser:

   http://localhost:3002

3. Chat with AI - The demo includes OpenAI GPT-4o integration:

   Show me critical incidents from last month

Server Ports

• Port 3001 - HTTP MCP server (for VS Code, Claude web)
• Port 3002 - Demo server with AI chat (for testing/demos)

MCP Tool Parameters

The visualize_security_incidents tool accepts these optional parameters:

• incident_count (number, 1-300) - Number of incidents to display (default: 50)
• chart_type (string) - Initial chart type: timeseries, severity, hosts, analysis, table
• start_date (string) - Filter from date (ISO format: YYYY-MM-DD)
• end_date (string) - Filter to date (ISO format: YYYY-MM-DD)
• severity (string) - Filter by severity: CRITICAL, HIGH, MEDIUM, LOW
• state (string) - Filter by state: NOT_STARTED, IN_PROGRESS, RESOLVED, CLOSED, ESCALATED
• host (string) - Filter by host name (partial match)

Data Structure

Each incident contains:

{
  incident_id: string;      // Unique identifier
  incident_time: string;    // ISO timestamp
  positivity: number;       // Score 0-10
  severity: string;         // CRITICAL, HIGH, MEDIUM, LOW
  state: string;            // Incident state
  host_name: string;        // Affected host
  host_domain: string;      // Host domain
  host_address: string;     // IP address
  agent_version: string;    // Agent version
  detection: string;        // Threat type
}

Technology Stack

• MCP SDK - @modelcontextprotocol/ext-apps & @modelcontextprotocol/sdk
• React - UI framework with TypeScript
• Recharts - Interactive data visualization
• Vite - Build tool with single-file bundling (vite-plugin-singlefile)
• Express - HTTP server with CORS
• OpenAI API - GPT-4o for demo chat (optional)

Project Structure

.
├── server-http.ts         # HTTP MCP server (port 3001)
├── server.ts              # Stdio MCP server (for Claude Desktop)
├── demo-server-ai.ts      # Demo server with AI chat (port 3002)
├── src/
│   └── App.tsx           # React app with visualizations & filters
├── demo/
│   └── ai-chat.html      # Demo page with AI chat interface
├── mock-data.json        # Sample security incident data
├── dist/                 # Built single-file HTML (generated)
├── vite.config.ts        # Vite configuration
├── package.json          # Dependencies and scripts
└── tsconfig.json         # TypeScript configuration

Development

Available Scripts

• npm run build - Build the React app to dist/index.html
• npm run serve - Start stdio MCP server (Claude Desktop)
• npx tsx server-http.ts - Start HTTP MCP server (VS Code)
• npx tsx demo-server-ai.ts - Start demo server with AI chat

Customization

Add more data fields: Edit mock-data.json or modify the data generation logic.

Add new visualizations: Add chart components in src/App.tsx using Recharts.

Change color scheme: Modify SEVERITY_COLORS and CHART_COLORS in src/App.tsx.

Adjust responsive breakpoint: Change the isWideScreen threshold (currently 800px) in src/App.tsx.

Environment Variables

For the demo server with AI chat, create a .env file:

OPENAI_API_KEY=your_openai_api_key_here

Browser Compatibility

• Modern browsers with ES2020+ support
• Tested in Chrome, Firefox, Safari, Edge
• Works in VS Code webview and Claude Desktop

License

MIT

Credits

Built with MCP Apps SDK - the official extension for interactive UIs in MCP hosts.