Contenido verificado el 2026-05-07 · experimento de Eggthropic
Explicador visual de MCP
Una herramienta de diagramas interactivos construida con React y MCP que muestra cómo se comunican servidor, cliente y host — renderizada en vivo desde un servidor MCP local real.
Objetivo
Construir un explicador para desarrolladores que se conecte a un servidor MCP real y visualice las primitivas Tools/Resources/Prompts en un diagrama vivo e interactivo.
Contexto
El Model Context Protocol (MCP) es el estándar abierto presentado por Anthropic en noviembre de 2024 para conectar aplicaciones de IA con datos y herramientas externas. Tiene tres primitivas: Tools (funciones ejecutables), Resources (datos estructurados) y Prompts (plantillas). Este experimento construye un servidor MCP local que expone metadatos sobre sí mismo y los renderiza en un diagrama React. El objetivo: hacer tangible la arquitectura de MCP para quien la ve por primera vez.
Notas de implementación
Servidor MCP en Node.js con el SDK oficial de TypeScript que expone tres tools: list-tools, list-resources y list-prompts — cada una devuelve JSON describiendo las capacidades del propio servidor. El frontend Next.js se conecta vía transporte SSE y renderiza un grafo de nodos en vivo con un renderer SVG propio y ligero. Zod valida todas las respuestas MCP antes de renderizar.
Resultado
El explicador renderiza correctamente el árbol de capacidades de un servidor MCP en vivo. La conexión SSE es estable en desarrollo local. El diagrama se actualiza en tiempo real cuando cambia la lista de tools del servidor — útil para demostrar flujos de desarrollo de servidores MCP.
Qué funcionó
- El SDK oficial de TypeScript hizo trivial el montaje del servidor
- El transporte SSE funcionó de forma fiable en local
- La validación con Zod cazó dos definiciones de tools malformadas durante las pruebas
- El grafo SVG se renderizó bien en todos los tamaños de pantalla probados
Qué falló
- La configuración CORS del endpoint SSE requirió cabeceras manuales
- No hay protocolo oficial de descubrimiento de servidores: la URL va hardcodeada
- El diagrama se satura con más de 15 tools — necesita paginación o agrupación
Próxima iteración
Migrar de SSE a transporte Streamable HTTP (SSE quedó obsoleto en la revisión de la spec de 2025-03-26). Conectar con el MCP Registry oficial (registry.modelcontextprotocol.io) para descubrir servidores en vez de URLs fijas. Añadir un modo «traza de peticiones» que muestre el flujo crudo de mensajes JSON-RPC 2.0.
Reprodúcelo tú
Este experimento es un playbook: con las herramientas de arriba y las notas de implementación puedes repetirlo en tu propio entorno. Si lo haces — funcione o no — cuéntanoslo en GitHub: las réplicas con resultados distintos son tan valiosas como el experimento original.