MCP Visual Explainer
An interactive diagram tool built with React and MCP that visually maps how an MCP server, client, and host communicate — rendered live from a running local MCP server.
Goal
Build a developer-facing explainer tool that connects to a real MCP server and visualizes the Tools/Resources/Prompts primitives in a live, interactive diagram.
Context
The Model Context Protocol (MCP) is an open standard introduced by Anthropic in November 2024 for connecting AI applications to external data sources and tools. MCP has three core primitives: Tools (executable functions), Resources (structured data), and Prompts (templates). This experiment builds a local MCP server that exposes metadata about itself, then renders that metadata in a React diagram. The goal is to make MCP's architecture tangible for developers encountering it for the first time.
Implementation notes
Built a Node.js MCP server using the official TypeScript SDK that exposes three tools: list-tools, list-resources, and list-prompts — each returning JSON describing the server's own capabilities. The Next.js frontend connects via the MCP connector (SSE transport) and renders a live node graph using a lightweight custom SVG renderer. Zod validates all incoming MCP responses before rendering.
Result
The visual explainer successfully renders a live diagram of an MCP server's capabilities tree. The SSE connection is stable for local development. The diagram updates in real time when the server's tools list changes — useful for demonstrating MCP server development workflows.
What worked
- The official MCP TypeScript SDK made server setup straightforward
- SSE transport worked reliably for local connections
- Zod validation caught two malformed tool definitions during testing
- The SVG node graph rendered correctly on all tested screen sizes
What failed
- CORS configuration required manual header setup for the SSE endpoint
- No official MCP server discovery protocol yet — server URL must be hardcoded
- The diagram becomes cluttered with more than 15 tools — needs pagination or grouping
Next iteration
Add WebSocket transport support. Explore connecting to a public MCP server registry when one becomes available. Add a 'request trace' mode that shows the raw JSON-RPC 2.0 message flow.