Dashboard that fixes all

🔧 technology.plumbing

The AI plumber that watches your integration layer so you don't get that 3am call.

The Problem

Every production app runs on invisible plumbing — Stripe webhooks, SendGrid quotas, Slack integrations, custom API endpoints. These pipes fail silently. A signing secret rotates during a Friday deployment. A quota hits 94% on Sunday night. A webhook starts returning 500s at 2am.

You find out when a customer tweets at you.

Integration failures cause 35% of critical outages (Gartner, 2023). Yet there's no tool that watches your integration layer the way Datadog watches your infrastructure or Sentry watches your errors.

Until now.

The Solution

technology.plumbing is a 4-agent AI pipeline that inspects, diagnoses, fixes, and maps your third-party integrations — before your users find the flood.

Inspect → Diagnose → Fix (human-approved) → Map

You connect your services. The agents do the rest.

How It Works

🔍 Agent 1 — The Inspector

Pings every configured integration. Validates auth tokens via live test calls. Measures latency. Captures HTTP status codes and error signatures.

Output: structured health JSON per service — HEALTHY, DEGRADED, BROKEN, or CRITICAL.

🩺 Agent 2 — The Diagnostician

Takes every failing or degraded service and reasons about root cause using Claude's understanding of service-specific error patterns.

Stripe 401 → signing secret mismatch, not an outage
SendGrid at 94% quota → will cap in ~48hrs at current send volume
Custom webhook 500s → upstream timeout pattern, not your code

Output: diagnosis + confidence score (0–100%) + recommended fix per service.

🔧 Agent 3 — The Plumber

Generates a specific, step-by-step fix plan for every high-confidence diagnosis. Presents it to you for approval before touching anything.

Human-in-the-loop is non-negotiable. The AI finds the leak. You decide when to fix it.

🗺️ Agent 4 — The Cartographer

Aggregates all agent outputs into a plain-English daily digest and the data powering the live integration map.

"3 pipes healthy. 1 leaking. 1 about to burst. Your Stripe issue started 3 days ago and correlates with your last deployment."

Key Features

Feature	Description
Live Agent Feed	Watch all 4 agents reason in real time — token by token
Triage Dashboard	Health badges per service, updated after every pipeline run
Fix Approval Queue	AI proposes fixes with confidence scores. You approve or skip
Integration Map	Visual node graph of your stack, color-coded by health status
Digest Panel	Plain-English summary from the Cartographer — ready for standup
Demo Mode	Full pipeline simulation with pre-seeded realistic data — no API keys needed

Architecture

┌─────────────────────────────────────────────────────────┐
│                    User Interface                        │
│  Config → Run Pipeline → Agent Feed → Map → Fix Queue   │
└────────────────────┬────────────────────────────────────┘
                     │
         ┌───────────▼───────────┐
         │   Next.js API Routes  │
         │  (server-side only)   │
         └───────────┬───────────┘
                     │
    ┌────────────────▼─────────────────┐
    │         4-Agent Pipeline         │
    │                                  │
    │  [Inspector]  ──fetch()──►  Raw  │
    │  health JSON                     │
    │       │                          │
    │       ▼                          │
    │  [Diagnostician] ──Claude──► Why │
    │  it broke + confidence           │
    │       │                          │
    │       ▼                          │
    │  [Plumber] ──Claude──► Fix plan  │
    │  + human approval gate           │
    │       │                          │
    │       ▼                          │
    │  [Cartographer] ──Claude──►      │
    │  Digest + map data               │
    └──────────────────────────────────┘
                     │
         ┌───────────▼───────────┐
         │    Anthropic Claude   │
         │  claude-sonnet-4-...  │
         │  (streaming, 3 calls) │
         └───────────────────────┘

Agent Chaining Pattern

Each agent's output JSON is injected as structured context into the next agent's system prompt. No raw text is passed between agents — always typed, validated JSON. If an agent returns malformed output, the pipeline retries once before surfacing a graceful error state.

Tech Stack

Layer	Technology
Framework	Next.js 14 App Router + TypeScript (strict)
Styling	Tailwind CSS + shadcn/ui (dark theme)
AI	Anthropic Claude (`claude-sonnet-4-20250514`) via streaming API
Visualization	React Flow — live integration node graph
State	React `useState` / `useReducer` + `localStorage` for service config
Deployment	Vercel — public URL, zero-config

Project Structure

technology-plumbing/
├── app/
│   ├── page.tsx                    # Main dashboard
│   ├── layout.tsx                  # Root layout + dark theme
│   └── api/
│       ├── inspect/route.ts        # Agent 1 — Inspector (fetch-based)
│       ├── diagnose/route.ts       # Agent 2 — Diagnostician (Claude)
│       ├── fix/route.ts            # Agent 3 — Plumber (Claude + approval gate)
│       └── digest/route.ts         # Agent 4 — Cartographer (Claude)
├── components/
│   ├── AgentStatusFeed.tsx         # Live streaming agent progress
│   ├── TrigeDashboard.tsx          # Service health list + badges
│   ├── FixApprovalQueue.tsx        # Human-in-the-loop fix cards
│   ├── IntegrationMap.tsx          # React Flow node graph
│   ├── DigestPanel.tsx             # Cartographer plain-English summary
│   └── ConfigModal.tsx             # Service endpoint + label input
├── lib/
│   ├── agents.ts                   # Agent prompt templates + output schemas
│   ├── integrations.ts             # Service ping logic (fetch-based)
│   ├── demo-fixtures.ts            # Pre-seeded demo mode data
│   └── types.ts                    # Shared TypeScript interfaces
└── AGENTS.md                       # Codex/agent guidance for this repo

Getting Started

Prerequisites

Node.js 18+
An Anthropic API key

Local Setup

git clone https://github.com/saurin16/technology-plumbing
cd technology-plumbing
npm install
cp .env.local.example .env.local

Add your key to .env.local:

ANTHROPIC_API_KEY=sk-ant-...

npm run dev
# → http://localhost:3000

Try Demo Mode

No API keys needed. Click "🔧 Demo Mode" on the dashboard to run the full pipeline with pre-seeded realistic data:

Service	Status	Issue
Stripe	🔴 BROKEN	401 — signing secret mismatch (3 days)
SendGrid	🟡 DEGRADED	94% monthly quota — caps in ~48hrs
Slack	🟢 HEALTHY	All clear
Custom Webhook	🔴 CRITICAL	500s for 2 hours — upstream timeout

Deployment

Deploy to Vercel

npx vercel --prod

Set environment variable in Vercel dashboard:

ANTHROPIC_API_KEY = sk-ant-...

The API key never touches the client bundle. All Claude calls are server-side only via /api/* routes.

Security Model

API keys: server-side only, never in client bundle (grep -r "ANTHROPIC_API_KEY" app/ returns zero results outside /api)
localStorage: only stores service labels and endpoint URLs — never secrets
Human-in-the-loop: Agent 3 cannot execute any fix without explicit user approval. The gate is enforced server-side, not just in the UI.
No database: zero PII stored — all session state is in-memory

Why "technology.plumbing"

The domain is the product name is the problem statement.

Plumbing is the infrastructure everyone depends on and nobody thinks about — until it fails at the worst possible moment. Technology plumbing is your API layer: Stripe, SendGrid, Slack, webhooks, OAuth tokens. It works invisibly until it doesn't.

We didn't start with an idea and search for an available domain. We started with the domain and built the product it deserved.

The Market

2.5M+ teams deploy on Vercel/Netlify with 3+ third-party integrations
35% of critical outages trace back to integration layer failures (Gartner)
Zero direct competitors solving this with an AI reasoning layer
Pricing model: $49/month per workspace — same motion as Datadog but for the integration layer, not the infrastructure layer