OpsDesk WebMCP

• 

  WebMCP Architecture Diagram: User query - AI agent

• 

  OpsDesk Dahboard: Real-Time Incident - CPU 94% CRITICAL, p99 Letency 1420Oms DEGRADED, api service needs scaling 1-3 replicas

Inspiration

During high-severity incident responses, engineers often spend critical minutes toggling between multiple monitoring dashboards, terminal windows, and cloud control panels. We wanted to build a web application designed specifically for the agent-native era—a unified workspace where human operators and AI agents collaborate seamlessly during system outages to diagnose latency spikes, inspect telemetry, and execute infrastructure remediation natively.

What it does:

OpsDesk WebMCP is an agent-native DevOps management workspace that exposes client-side operations directly to AI agents using the WebMCP standard (document.modelContext). Key functionalities include:

• Cluster Health Inspection (get_cluster_metrics): Enables agents to fetch live CPU usage, memory footprint, p99 latency, and error rates for targeted microservices.
• Dynamic Infrastructure Autoscaling (scale_service_replicas): Allows agents to scale pod replica counts up or down to mitigate degraded service performance, updating the visual dashboard UI in real-time.
• Synthetic Availability Testing (run_synthetic_web_test): Triggers browser automation benchmarks to check UI accessibility and endpoint response times.

How we built it:

• Frontend & UI: Built using React and Tailwind CSS to render real-time service health, status indicators, and active pod replica counters.
• WebMCP Integration: Integrated @modelcontextprotocol/sdk on the client side, exposing native tool signatures directly via document.modelContext.registerTool.
• Agent Interoperability: Designed structured JSON input schemas and return payloads compatible with ChatGPT's in-app browser and WebMCP-enabled environments.

Challenges we ran into:

• Client-Side Tool Synchronization: Ensuring state changes executed by an agent tool call (e.g., scaling replicas) triggered immediate visual UI updates in the React component hierarchy without requiring page refreshes.
• Schema Precision: Crafting clear, deterministic tool descriptions and JSON schemas so LLMs select the correct diagnostic or action tool under varied prompting scenarios.

Accomplishments that we're proud of:

• Successfully implemented a functional browser-native WebMCP interface that allows an AI agent to execute end-to-end incident triage and infrastructure mitigation.
• Created a clean visual bridge where human engineers can monitor automated agent actions live on screen.

What we learned:

• How WebMCP transforms static web applications into interactive, agentic workspaces by standardizing client-side tool discovery.
• Best practices for structuring agent inputs and fallback handling for robust client-side execution.

What's next for OpsDesk WebMCP

• Adding multi-cluster support for cross-region failovers.
• Expanding tool execution security with human-in-the-loop confirmation prompts prior to executing high-impact scaling or rollback operations.

Built With

• model-context-protocol
• node.js
• react
• tailwind-css
• typescript
• webmcp