AI-Enhanced Automated DevOps CI/CD Pipeline with Intelligent Decision‑Making — Part 6: Real‑Time Dashboard with AI Insights

⏱ 7 min read  |  ~1482 words

AI‑Enhanced Automated DevOps CI/CD Pipeline with Intelligent Decision‑Making — Part 6: Real‑Time Dashboard with AI Insights

Based on my technical understanding as a Lead Programmer Analyst (PHP, Perl, Python, Shell) and the latest industry chatter, this deep‑dive shows you how to stitch together a live DevOps observability layer that not only visualises pipeline health but also surfaces AI‑driven recommendations in real time.

Quick recap (Parts 1‑5): We started with a vanilla GitHub‑Actions‑driven CI/CD flow, then layered AI‑assisted test‑case prioritisation, automated rollback triggers, Claude 3.5 parallel‑agent scheduling, and finally a model‑performance monitor that feeds back into the pipeline. Now we close the loop with a real‑time dashboard that consumes those signals and turns them into actionable insights.

Why a Real‑Time Dashboard Matters in 2026

• DevOps teams are handling hundreds of commits per hour (see Medium, Jan 2026), making manual triage impossible.
• AI‑augmented pipelines now generate continuous telemetry – success rates, flake patterns, resource utilisation, and even LLM‑generated risk scores (as described in CloudThat, Mar 2026).
• Stakeholders (product, security, ops) need a single pane of glass that updates sub‑second and can explain “why” a build failed, not just “that it failed”.

In short, a live dashboard becomes the decision‑making hub where humans and AI co‑operate.

Architecture Overview

The diagram below (simplified) shows the data flow:

+-------------------+        +----------------------+        +-------------------+
| GitHub Actions    |  -->   | Kafka / Redis Stream |  -->   | FastAPI AI Service|
+-------------------+        +----------------------+        +-------------------+
                                   |                               |
                                   |  (WebSocket events)            |
                                   v                               v
                            +----------------------+        +-------------------+
                            |  Starlette WS Hub    |  <--->  | React Dashboard   |
                            +----------------------+        +-------------------+

Step‑by‑Step Implementation

1. Emitting Pipeline Events

We add a tiny post‑run step to every GitHub Action workflow that pushes a JSON payload to a Kafka topic. The example uses the confluentinc/kafka‑python client; you can swap it for any managed service.

# .github/workflows/ci.yml
name: CI Pipeline
on: [push, pull_request]

jobs:
  build-test:
    runs-on: ubuntu‑latest
    steps:
      - uses: actions/checkout@v4
      - name: Install dependencies
        run: pip install -r requirements.txt
      - name: Run tests
        id: test
        run: |
          pytest -q
      - name: Emit CI Event
        if: always()
        env:
          KAFKA_BOOTSTRAP: ${{ secrets.KAFKA_BOOTSTRAP }}
          KAFKA_TOPIC: ci-events
        run: |
          python .github/scripts/emit_event.py \\
            --status ${{ job.status }} \\
            --run_id ${{ github.run_id }} \\
            --commit ${{ github.sha }} \\
            --branch ${{ github.ref_name }}

The helper script (emit_event.py) is straightforward:

#!/usr/bin/env python3
import json, os, argparse
from confluent_kafka import Producer

def delivery_report(err, msg):
    if err is not None:
        print(f'Delivery failed: {err}')
    else:
        print(f'Message delivered to {msg.topic()} [{msg.partition()}]')

def main():
    parser = argparse.ArgumentParser()
    parser.add_argument('--status')
    parser.add_argument('--run_id')
    parser.add_argument('--commit')
    parser.add_argument('--branch')
    args = parser.parse_args()

    payload = {
        "event": "ci_build",
        "status": args.status,
        "run_id": args.run_id,
        "commit": args.commit,
        "branch": args.branch,
        "timestamp": int(time.time()*1000)
    }

    conf = {'bootstrap.servers': os.getenv('KAFKA_BOOTSTRAP')}
    producer = Producer(conf)
    producer.produce(
        topic=os.getenv('KAFKA_TOPIC', 'ci-events'),
        value=json.dumps(payload).encode('utf-8'),
        callback=delivery_report
    )
    producer.flush()

if __name__ == '__main__':
    main()

All downstream services now listen on ci-events. You can duplicate this pattern for test‑run, deployment, and rollback events.

2. AI Insight Service – Core Logic

The AI service does three things:

1. Consume events from Kafka.
2. Call an LLM (GPT‑5 Parallel Agents or Claude 3.5) to generate a short “insight card”.
3. Persist the enriched event to TimescaleDB and broadcast via WebSocket.

Below is a minimal yet production‑ready FastAPI app. It uses aiokafka for async consumption and the openai SDK for LLM calls (replace with Claude SDK if you prefer).

# app/main.py
import os, json, asyncio
from datetime import datetime
from fastapi import FastAPI, WebSocket, WebSocketDisconnect
from fastapi.responses import HTMLResponse
from sqlmodel import SQLModel, Field, create_engine, Session, select
from aiokafka import AIOKafkaConsumer
import openai

# ---------- DB Model ----------
class CIEvent(SQLModel, table=True):
    id: int = Field(default=None, primary_key=True)
    run_id: str
    commit: str
    branch: str
    status: str
    timestamp: datetime
    ai_insight: str = None   # Narrative generated by LLM
    risk_score: float = None

# ---------- FastAPI Setup ----------
app = FastAPI()
engine = create_engine(os.getenv('DATABASE_URL', 'postgresql+psycopg2://dev:dev@localhost/ci'), echo=False)
SQLModel.metadata.create_all(engine)

# ---------- WebSocket Manager ----------
class ConnectionManager:
    def __init__(self):
        self.active_connections: list[WebSocket] = []

    async def connect(self, ws: WebSocket):
        await ws.accept()
        self.active_connections.append(ws)

    def disconnect(self, ws: WebSocket):
        self.active_connections.remove(ws)

    async def broadcast(self, message: dict):
        for conn in self.active_connections:
            await conn.send_json(message)

manager = ConnectionManager()

@app.get("/", response_class=HTMLResponse)
async def get_root():
    # Tiny placeholder page; real UI lives in /dashboard
    return "<h3>AI‑Enhanced CI Dashboard is running</h3>"

@app.websocket("/ws")
async def websocket_endpoint(ws: WebSocket):
    await manager.connect(ws)
    try:
        while True:
            await ws.receive_text()  # keep connection alive
    except WebSocketDisconnect:
        manager.disconnect(ws)

# ---------- LLM Prompt Template ----------
INSIGHT_PROMPT = """
You are a DevOps AI assistant. Summarise the following CI event in 2‑3 sentences,
provide a risk score (0‑100) and suggest the most likely fix if the build failed.

Event JSON:
{event_json}
"""

# ---------- AI Helper ----------
async def generate_insight(event: dict) -> dict:
    response = await openai.ChatCompletion.acreate(
        model="gpt-5-parallel",
        messages=[{"role": "system", "content": "You are a helpful AI for CI pipelines."},
                  {"role": "user", "content": INSIGHT_PROMPT.format(event_json=json.dumps(event, indent=2))}],
        temperature=0.2,
        max_tokens=150
    )
    raw = response.choices[0].message.content.strip()
    # Simple parsing – in production use a JSON schema or structured output
    lines = raw.splitlines()
    insight = lines[0]
    risk_line = next((l for l in lines if "risk" in l.lower()), "Risk: 0")
    risk_score = float(''.join(filter(str.isdigit, risk_line)))
    return {"insight": insight, "risk_score": risk_score}

# ---------- Kafka Consumer Loop ----------
async def consume_and_process():
    consumer = AIOKafkaConsumer(
        os.getenv('KAFKA_TOPIC', 'ci-events'),
        bootstrap_servers=os.getenv('KAFKA_BOOTSTRAP'),
        group_id="ci-dashboard-group",
        enable_auto_commit=True,
        value_deserializer=lambda m: json.loads(m.decode('utf-8'))
    )
    await consumer.start()
    try:
        async for msg in consumer:
            event = msg.value
            # 1️⃣ Enrich with AI
            ai_data = await generate_insight(event)
            # 2️⃣ Persist
            db_event = CIEvent(
                run_id=event["run_id"],
                commit=event["commit"],
                branch=event["branch"],
                status=event["status"],
                timestamp=datetime.fromtimestamp(event["timestamp"]/1000),
                ai_insight=ai_data["insight"],
                risk_score=ai_data["risk_score"]
            )
            with Session(engine) as session:
                session.add(db_event)
                session.commit()
                session.refresh(db_event)

            # 3️⃣ Push to WS clients
            await manager.broadcast({
                "type": "ci_event",
                "payload": {
                    "run_id": db_event.run_id,
                    "branch": db_event.branch,
                    "status": db_event.status,
                    "insight": db_event.ai_insight,
                    "risk_score": db_event.risk_score,
                    "ts": db_event.timestamp.isoformat()
                }
            })
    finally:
        await consumer.stop()

# ---------- Startup Hook ----------
@app.on_event("startup")
async def startup_event():
    asyncio.create_task(consume_and_process())

Key points to note:

• The generate_insight function uses parallel agents (GPT‑5) to get a concise narrative and a numeric risk score. Parallel agents allow us to fire off multiple specialised sub‑models (e.g., a test‑flakiness detector and a security‑risk classifier) and aggregate their votes – a pattern highlighted in the Northflank 2026 blog.
• WebSocket broadcasting ensures sub‑second latency; browsers receive the enriched payload without polling.
• TimescaleDB gives us time‑series capabilities (down‑sampling, retention policies) that are essential for trend‑analysis charts.

3. Front‑End Dashboard (React + Vite)

The UI consists of three panels:

1. Live Feed – a scrolling list of recent events with AI cards.
2. Metrics Overview – line charts for success‑rate, average risk, and build duration.
3. Insight Explorer – a filterable table that lets users dive into historic AI suggestions.

Below is the minimal src/main.jsx and a few component snippets.

// src/main.jsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import Dashboard from './Dashboard.jsx';
import './index.css';

createRoot(document.getElementById('root')).render(<Dashboard />);

// src/Dashboard.jsx
import React, { useEffect, useState } from 'react';
import LiveFeed from './LiveFeed.jsx';
import Metrics from './Metrics.jsx';
import InsightTable from './InsightTable.jsx';
import { io } from 'socket.io-client';

export default function Dashboard() {
  const [events, setEvents] = useState([]);
  const ws = React.useRef(null);

  useEffect(() => {
    ws.current = new WebSocket(`${window.location.protocol}//${window.location.host}/ws`);
    ws.current.onmessage = (msg) => {
      const data = JSON.parse(msg.data);
      if (data.type === 'ci_event') {
        setEvents(prev => [data.payload, ...prev].slice(0, 100)); // keep last 100
      }
    };
    return () => ws.current?.close();
  }, []);

  return (
    <div className="p-4 bg-gray-50 min-h-screen">
      <h1 className="text-2xl font-bold mb-4">🚀 AI‑Powered CI/CD Dashboard</h1>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <LiveFeed events={events} />
        <Metrics events={events} />
        <InsightTable events={events} />
      </div>
    </div>
  );
}

// src/LiveFeed.jsx
import React from 'react';

export default function LiveFeed({ events }) {
  return (
    <div className="bg-white rounded shadow p-3 overflow-y-auto h-96">
      <h2 className="text-lg font-semibold mb-2">Live Feed</h2>
      {events.map(ev => (
        <div key={ev.run_id} className="border-b py-2">
          <div>
            <span className={`px-2 py-0.5 rounded text-xs ${ev.status === 'success' ? 'bg-green-200' : 'bg-red-200'}`}>
              {ev.status.toUpperCase()}
            </span>
            <span className="ml-2 font-mono text-sm">{ev.branch}@{ev.run_id.slice(0,7)}</span>
          </div>
          <p className="text-sm mt-1">{ev.insight}</p>
          <div className="text-xs text-gray-500">Risk: {ev.risk_score}% • {new Date(ev.ts).toLocaleTimeString()}</div>
        </div>
      ))}
    </div>
  );
}

// src/Metrics.jsx

import React from 'react';

import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';

export default function Metrics({ events }) {

  // Transform events into chart‑ready data

  const data = events

    .slice()

    .reverse()

    .map((e, i) => ({

      time: new Date(e.ts).toLocaleTimeString(),

      success: e.status === 'success' ? 1 : 0,

      risk: e.risk_score,

    }))

    .reduce((acc, cur) => {

      // simple rolling average for risk

      const last = acc[acc.length-1] || {time: cur.time, success:0, risk:0, count:0};

      const count = (last.count || 0) + 1;

      acc.push({

        time: cur.time,

        success: (last.success * (count-1) + cur.success) / count,

        risk: (last.risk * (count-1) + cur.risk) / count,

        count,

      });

      return acc;

    }, []);
  return (

    <div className="bg-white rounded shadow p-3">

      <h2 className="text-lg font-semibold mb-2">Metrics Overview</h2>

      <ResponsiveContainer width="100%" height={200

🔗 You Might Also Like

AI Safety & Ethics: What’s New in September 2026
AI Agents: What’s New in September 2026
Prompt Engineering: What’s New in September 2026



📺 Recommended Video
Watch this video for a practical overview of the topic covered in this article.




✍️ About the Author
Vijay Vinoth — Lead Programmer Analyst with expertise in PHP, Perl, Python, and Shell scripting. Passionate about AI, automation, and building scalable systems. Writing to share practical insights from real-world engineering experience.



        Note: This technical analysis reflects my independent understanding as a Lead Programmer Analyst as of October 2026.

        As AI ecosystems like Claude 3.5 evolve, actual implementation may vary. Refer to official documentation for final specs.