MCP Risk Cockpit

MCP Risk Cockpit is a generative security interface for AI agents that use MCP tools. Instead of acting like another chatbot, the app turns a user’s natural-language security request into a live, interactive risk workspace. A user can ask for an enterprise MCP security cockpit, a red-team investigation view, an executive risk board, a least-privilege policy review, or a human-in-the-loop approval center, and the application dynamically renders the right interface for that moment.

The core flow is: user prompt -> Gemini-generated JSON UI spec -> safe React component registry -> interactive dashboard, attack-path map, approval queue, simulation lab, evidence timeline, policy preview, risk register, and remediation roadmap. This follows the same spirit as A2UI’s declarative agent-driven UI model, where agents describe interface intent as structured data and the client renders it safely with native components. It also aligns with AG-UI and CopilotKit’s goal of connecting agent backends to user-facing applications so agents become transparent collaborators rather than hidden background processes.

The project focuses on a real-world problem: as MCP connects agents to tools that can read data, write records, trigger workflows, post messages, issue refunds, or change identity state, organizations need a way to see and govern those actions before they happen. MCP Risk Cockpit makes those decisions visible. It scores mock MCP tools, shows blast radius, maps prompt injection and tool poisoning paths, creates approval gates, and lets the user click Approve, Quarantine, or Deny.

The most important part is the Decision Impact Engine. When a user makes a decision, the UI does not stop at a button click. It generates a risk reduction estimate, audit packet, policy delta, remediation tasks, owner/SLA, and a before-vs-after business impact story. This turns agent tool risk into actionable governance work.

The stack includes Next.js, React, TypeScript, Tailwind CSS, Recharts, Gemini API, CopilotKit, LangChain/LangGraph, Docker, Notion MCP integration, and a custom generative UI route that validates model output before rendering. The result is a working application that moves beyond text-based chat by letting an agent generate functional, decision-driven security interfaces at runtime.

This project builds on the public Generative UI Global Hackathon starter kit, which provided the initial full-stack foundation for a Next.js frontend, CopilotKit, LangGraph/Deep Agents, Gemini, Docker services, persistent threads, and Notion MCP integration. During the hackathon, our team extended that foundation into MCP Risk Cockpit, a new generative security application focused on agent tool governance.

The work created during the hackathon includes the /risk-cockpit experience, the dynamic Gemini-to-JSON UI specification route, the safe React component registry, the mock MCP security inventory, generated attack-path and threat-model sections, approval queues, policy previews, remediation roadmaps, prompt injection simulation lab, risk register, evidence timeline, and the Decision Impact Engine for Approve, Quarantine, and Deny decisions.

The prior starter kit handled the base environment and starter agent structure. The hackathon work turned that base into a new product concept: a generative UI control surface for MCP security and human-in-the-loop agent governance.