Módulo 6: MCP Apps y UI Interactivo

Módulo 6: MCP Apps y UI Interactivo

Siguiente →

Módulo 6: MCP Apps y UI Interactivo

Descripción de la cápsula

Hasta ahora, cada MCP server que construiste retorna texto. Un JSON con datos, un string con un mensaje, un error con una descripción. El modelo lee ese texto, lo procesa, y te lo presenta. Funciona. Pero hay un problema: cuando los datos son complejos — tablas con 50 filas, métricas de un sistema, el estado de 20 tareas — el texto plano se queda corto.

Imagina que le pides a Claude Code: "muéstrame el estado de todos los endpoints de mi API." Tu MCP server consulta la base de datos y retorna un JSON con 15 endpoints, cada uno con status, latencia, error rate, y último request. Claude Code recibe ese JSON y... te lo muestra como un bloque de texto. Funcional, pero difícil de leer. Ahora imagina que en lugar de texto plano, tu tool retorna una tabla formateada con colores por status, barras de progreso para la latencia, y un resumen ejecutivo arriba. Misma información, presentación radicalmente diferente.

Eso es lo que explora este módulo: MCP servers cuyos tools van más allá del texto plano y retornan output rico y estructurado — tablas markdown, reportes formateados, visualizaciones ASCII, dashboards con secciones organizadas. No es un framework de UI completo — es la capacidad de hacer que las respuestas de tus tools sean visualmente útiles.

¿Dónde estamos?

Contexto en la guía

Phase 1: Fundamentos MCP (Módulos 1-3)
  ✅ Módulo 1: Qué es MCP y por qué importa
  ✅ Módulo 2: Arquitectura Host-Client-Server
  ✅ Módulo 3: Tres Primitivas (Resources, Tools, Prompts)

Phase 2: Construir MCP Servers (Módulos 4-6)
  ✅ Módulo 4: MCP Server en TypeScript
  ✅ Módulo 5: MCP Server en Python
  → Módulo 6: MCP Apps y UI Interactivo (ESTÁS AQUÍ)

Phase 3: Producción (Módulos 7-8)
  ○ Módulo 7: Testing, Debugging e Integración
  ○ Módulo 8: Proyecto — MCP Server Real

Lo que ya sabes

De los módulos anteriores traes:

  • MCP completo — el protocolo, la arquitectura Host-Client-Server, las tres primitivas
  • Servers en dos lenguajes — TypeScript con Zod y Python con FastMCP/Pydantic
  • Implementación de tools — handlers, schemas, error handling, patrones de diseño
  • Implementación de resources — URIs estáticos, templates dinámicos
  • Transports — stdio para local, HTTP/SSE para remoto
  • Conexión con Claude Code — claude mcp add, verificación end-to-end

Lo que falta

Sabes construir MCP servers que retornan texto. Pero todavía no has explorado:

  • Cómo hacer que el output de tus tools sea visualmente rico y fácil de consumir
  • Técnicas para formatear datos complejos (tablas, reportes, dashboards)
  • Workflows interactivos multi-paso usando tools y prompts juntos
  • Patrones para capturar input del usuario de forma estructurada
  • Cómo combinar múltiples herramientas en una experiencia cohesiva

¿Qué son las MCP Apps?

La idea central

Una MCP App no es una tecnología nueva. Es un patrón de diseño: un MCP server cuyos tools están diseñados para retornar output que es visualmente rico y, en algunos casos, permite interacción multi-paso con el usuario.

La distinción clave:

MCP Server tradicional:
  Tool → retorna datos como texto/JSON
  El modelo los interpreta y presenta como puede

MCP App:
  Tool → retorna output formateado y estructurado
  El modelo los presenta con la riqueza visual que el formato permite

En la práctica, esto significa que tus tools retornan:

  • Tablas markdown en lugar de arrays JSON
  • Reportes con secciones en lugar de datos planos
  • ASCII charts para visualización rápida
  • Datos estructurados que Claude Code puede presentar de forma organizada
  • Workflows multi-paso que guían al usuario a través de un proceso

La evolución: de texto a experiencia

Piensa en cómo evolucionaron los programas de terminal. Primero fueron comandos que retornaban texto puro (ls, cat). Luego llegaron herramientas que formateaban su output para hacerlo legible (htop, git log --oneline --graph, docker ps). Después vinieron las TUI (Terminal User Interfaces) como lazygit y k9s — aplicaciones completas corriendo en la terminal.

MCP Apps están en la segunda etapa de esa evolución. No son TUIs completas, pero van mucho más allá de retornar texto plano. Son tools que piensan en cómo presentan la información, no solo en qué información retornan.

Evolución del output en MCP:

Nivel 1: Texto plano
  "Se encontraron 15 archivos en el directorio /src"

Nivel 2: JSON estructurado
  {"total": 15, "directory": "/src", "files": [...]}

Nivel 3: Output formateado (MCP Apps)
  ## 📁 Análisis de /src
  
  **15 archivos** | 3 directorios | 2.4 MB total
  
  | Archivo    | Tamaño | Modificado    |
  |------------|--------|---------------|
  | index.ts   | 2.4 KB | hace 2 horas  |
  | utils.ts   | 1.1 KB | hace 3 días   |
  
  **💡 Sugerencia:** 4 archivos no se modifican hace >30 días

Lo que puedes hacer vs lo que no puedes hacer

Seamos claros sobre las capacidades y limitaciones:

✅ Lo que SÍ puedes hacer:
├── Retornar markdown formateado (tablas, headers, listas)
├── Crear reportes con secciones y estructura visual
├── Generar ASCII art y charts para visualización
├── Diseñar workflows multi-paso con confirmaciones
├── Combinar tools + prompts para flujos interactivos
├── Retornar datos estructurados que el modelo presenta bien
├── Formatear output para máxima legibilidad
└── Usar emojis y caracteres Unicode para indicadores visuales

❌ Lo que NO puedes hacer (hoy):
├── Renderizar HTML/CSS en la terminal
├── Crear interfaces gráficas completas
├── Tener botones, sliders, o widgets interactivos
├── Reemplazar una web app o un dashboard web
├── Ejecutar JavaScript en el lado del cliente
├── Crear experiencias de UI como React/Vue
└── Hacer streaming de actualizaciones en tiempo real

⚡ Lo que está evolucionando:
├── Content types adicionales en respuestas MCP
├── Soporte de imágenes en tool responses
├── Structured data rendering por parte de los hosts
└── Annotations y metadata en respuestas

MCP Apps no son React apps. Son MCP servers que maximizan la riqueza del output dentro de lo que el host (Claude Code) puede presentar. Eso es mucho más de lo que parece — un buen dashboard en texto formateado puede ser sorprendentemente útil.

Anatomía de un tool response

Cada tool en MCP retorna un objeto con un array de content. Cada item de content tiene un type:

// Un tool puede retornar múltiples bloques de contenido
return {
  content: [
    {
      type: "text",
      text: "## Dashboard de Proyecto\n\n| Métrica | Valor |\n|---------|-------|\n| Tests | 142 passing |",
    },
  ],
};

El type: "text" es el más común, pero el texto dentro puede ser cualquier cosa: markdown, JSON, tablas, ASCII art, reportes multi-sección. El modelo (y el host) interpretan y renderizan el contenido de acuerdo al formato.

La clave está en el diseño del texto que retornas. Un string que contiene markdown bien estructurado se presenta completamente diferente a un string con JSON crudo.

¿Por qué este módulo importa?

El problema del "wall of JSON"

Si construiste los proyectos de los módulos 4 y 5, ya experimentaste esto. Le pides a Claude Code que use tu tool, el tool retorna un JSON con 50 líneas, y Claude Code te muestra... un bloque de JSON. Técnicamente correcto, prácticamente ilegible.

{
  "endpoints": [
    {"path": "/api/users", "method": "GET", "status": "healthy", "latency_ms": 45, "requests_24h": 12340, "error_rate": 0.2},
    {"path": "/api/users", "method": "POST", "status": "healthy", "latency_ms": 120, "requests_24h": 3210, "error_rate": 0.5},
    {"path": "/api/orders", "method": "GET", "status": "degraded", "latency_ms": 890, "requests_24h": 8900, "error_rate": 3.1},
    {"path": "/api/orders", "method": "POST", "status": "healthy", "latency_ms": 200, "requests_24h": 2100, "error_rate": 0.8}
  ]
}

Ahora compara con la misma información formateada:

## 📊 API Health Dashboard

**Status general:** 3/4 endpoints healthy | 1 degraded

| Endpoint | Method | Status | Latency | Req/24h | Errors |
|----------|--------|--------|---------|---------|--------|
| /api/users | GET | ✅ Healthy | 45ms | 12,340 | 0.2% |
| /api/users | POST | ✅ Healthy | 120ms | 3,210 | 0.5% |
| /api/orders | GET | ⚠️ Degraded | 890ms | 8,900 | 3.1% |
| /api/orders | POST | ✅ Healthy | 200ms | 2,100 | 0.8% |

**⚠️ Atención:** `/api/orders GET` tiene latencia alta (890ms) y error rate elevado (3.1%)

Mismos datos. Información procesable en segundos en lugar de minutos.

Casos de uso reales

MCP Apps resuelven problemas concretos:

  • Dashboards de proyecto — estado de tareas, métricas de código, coverage de tests
  • Monitores de sistema — health checks, uso de recursos, logs formateados
  • Reportes de base de datos — analytics, queries frecuentes, estadísticas de tablas
  • Flujos de configuración — setup paso a paso con validaciones intermedias
  • Análisis de código — reportes de complejidad, dependencias, deuda técnica

Objetivo del módulo

Al completar este módulo, serás capaz de:

  • ✅ Entender qué son MCP Apps y cómo difieren de MCP servers que retornan texto plano
  • ✅ Diseñar tools que retornan output visualmente rico (tablas, reportes, dashboards)
  • ✅ Construir dashboards con datos estructurados y visualizaciones ASCII
  • ✅ Implementar workflows multi-paso con confirmaciones y captura de input
  • ✅ Combinar tools + prompts para crear flujos interactivos cohesivos
  • ✅ Conocer las limitaciones de este enfoque y cuándo es apropiado vs una web app
  • ✅ Tener un MCP App funcional con dashboard interactivo conectado a Claude Code

Roadmap del módulo

CápsulaTemaQué aprenderás
02Qué son MCP AppsCómo difieren de MCP servers tradicionales, tipos de contenido rico, anatomía de una respuesta formateada
03Dashboards y VisualizacionesTablas markdown, ASCII charts, reportes estructurados, formateo de datos complejos
04Forms InteractivosWorkflows multi-paso, captura de datos, confirmaciones, tools + prompts juntos
05Proyecto: MCP App con DashboardServer completo que retorna un dashboard de analytics con visualización rica

Flujo de aprendizaje

La progresión es deliberada:

  1. Concepto (cápsula 02) — qué son MCP Apps, qué tipos de output rico puedes retornar, y las capacidades reales del ecosistema. Sin sobreprometer, sin subestimar.
  2. Output visual (cápsula 03) — la carne del módulo. Construyes tools que retornan dashboards, tablas, charts ASCII, y reportes formateados. Esto es lo que transforma un MCP server útil en uno visualmente poderoso.
  3. Interacción (cápsula 04) — el otro eje de MCP Apps. Workflows multi-paso, captura de datos del usuario, confirmaciones, y cómo combinar tools con prompts para flujos complejos.
  4. Proyecto (cápsula 05) — todo converge en un MCP App que implementa un dashboard de analytics completo. End-to-end con Claude Code.

Qué asume este módulo

Sobre tu conocimiento de MCP

Asume que completaste los módulos 1-5:

  • Entiendes el protocolo MCP, la arquitectura, y las tres primitivas
  • Has construido MCP servers en TypeScript y Python
  • Sabes implementar tools, resources, y prompts
  • Has conectado MCP servers a Claude Code
  • Dominas patrones de error handling y async

Sobre tu conocimiento técnico

  • Sabes leer y escribir TypeScript y Python
  • Has trabajado con markdown (tablas, listas, headers)
  • Entiendes JSON y puedes transformar datos entre formatos
  • Has usado la terminal y te sientes cómodo con output de texto

Puedes elegir tu lenguaje

En los módulos 4 y 5, cada lenguaje tuvo su módulo dedicado. En este módulo, los conceptos aplican a ambos lenguajes — un tool que retorna markdown formateado funciona igual en TypeScript que en Python. Donde sea práctico, mostramos ambas implementaciones. Donde no, elige el que prefieras.

Prerequisitos técnicos

Para este módulo necesitas:

  • ✅ Node.js 18+ o Python 3.10+ (o ambos — elige tu preferido)
  • ✅ MCP SDK instalado (TypeScript o Python, de los módulos 4-5)
  • ✅ Claude Code instalado y funcionando
  • ✅ Un MCP server previo funcionando (de los módulos 4 o 5)
  • ✅ Editor de código con soporte markdown (para previsualizar output)

Verificación rápida:

node --version        # Node.js 18+
python --version      # Python 3.10+
claude --version      # Claude Code instalado

Si completaste los módulos 4 y 5, estás listo. Este módulo no introduce dependencias nuevas — usa los mismos SDKs.

Mentalidad para este módulo

"Es un patrón, no una tecnología"

MCP Apps no requieren un SDK diferente, una librería nueva, o una configuración especial. Es el mismo server.tool() o @mcp.tool() que ya conoces. Lo que cambia es cómo diseñas el output de tus tools.

Esto es liberador: ya tienes todas las herramientas. Este módulo te enseña a usarlas de una forma que no habías considerado.

"Formateo como feature"

El formateo del output no es cosmético — es una feature. Un dashboard bien formateado puede ser la diferencia entre que un developer use tu MCP server diariamente o lo abandone después del primer uso. La presentación de datos es parte del valor que tu server provee.

Piensa en git log vs git log --oneline --graph --all. Misma información, presentación que transforma la utilidad. Eso es lo que vas a hacer con tus MCP tools.

"Honestidad sobre limitaciones"

Este módulo no va a presentar MCP Apps como el reemplazo de herramientas web. Son una forma de enriquecer la experiencia dentro de Claude Code. Potente dentro de su contexto, limitado fuera de él. Saber cuándo usar una MCP App y cuándo construir una web app es parte de la habilidad que desarrollas aquí.

"El usuario final es el developer"

Tus MCP Apps las usa un developer a través de Claude Code. No son para end-users, no son para stakeholders no-técnicos. Son herramientas internas que hacen tu día a día más productivo. Diseña para ti y para tu equipo.

Conexión con el proyecto integrador

Mini-proyecto de este módulo (cápsula 05)

Vas a construir un MCP App que implementa un Project Analytics Dashboard:

  • Tools que retornan métricas formateadas con tablas y charts
  • Visualización de datos de archivos, commits, y estructura de proyecto
  • Capacidad de drill-down: del resumen general al detalle de un área específica
  • Workflow interactivo para configurar qué métricas ver
  • Output que Claude Code presenta de forma visualmente rica

Conexión con el módulo 8

El proyecto integrador del módulo 8 puede incluir output rico si decides implementarlo. Este módulo te da los patrones para hacerlo. Lo que agregas en el módulo 8 que este módulo no cubre:

  • Testing automatizado del output formateado (módulo 7)
  • Integración con datos de producción reales
  • Manejo de volúmenes grandes de datos
  • Documentación profesional del formato de output

Límites: qué NO se cubre en este módulo

  • ❌ Frameworks de UI web (React, Vue, Svelte) — fuera del scope de MCP
  • ❌ HTML/CSS rendering — Claude Code no renderiza HTML en la terminal
  • ❌ Gráficos bitmap — MCP tools retornan texto, no imágenes (con excepciones limitadas)
  • ❌ WebSockets para real-time — un MCP tool retorna una respuesta, no un stream continuo
  • ❌ Testing de output — eso viene en el módulo 7
  • ❌ Deploy de MCP Apps — fuera del scope de la guía
  • ❌ Diseño UX profesional — principios básicos sí, teoría UX no

Este módulo es exploración de output rico en MCP. Entras sabiendo retornar texto plano, sales sabiendo retornar dashboards y workflows interactivos.

Comparación: cuándo usar qué

Una pregunta que surge naturalmente: "¿cuándo uso una MCP App vs una web app vs un script?"

NecesidadMejor opciónPor qué
Dashboard rápido para tiMCP AppIntegrado en Claude Code, sin deploy
Dashboard para el equipo (no-devs)Web appNecesitan UI gráfica real
Reporte one-off de datosMCP AppBajo esfuerzo, resultado inmediato
Herramienta interna del equipo devMCP AppTodos usan Claude Code, sin overhead de infra
Producto para clientesWeb appNecesitan experiencia pulida
Automatización de flujoMCP App + toolsClaude Code orquesta, los tools ejecutan
Visualización de datos complejaWeb appCharts interactivos, zoom, filtros dinámicos
Query rápido a la DB con formatoMCP AppTabla markdown es suficiente

La regla general: si el consumidor es un developer que ya usa Claude Code, MCP App es probablemente suficiente. Si necesitas una experiencia visual completa o usuarios no-técnicos, necesitas una web app.

Evidencia de éxito

Al terminar este módulo, sabrás que tuviste éxito si:

  • ✅ Puedes articular qué es una MCP App y cómo difiere de un MCP server tradicional
  • ✅ Tus tools retornan tablas markdown, reportes formateados, y dashboards estructurados
  • ✅ Puedes construir workflows multi-paso con confirmaciones y captura de input
  • ✅ Sabes cuándo usar output rico vs texto plano (y cuándo usar una web app en su lugar)
  • ✅ Tienes un MCP App funcional con dashboard interactivo corriendo en Claude Code
  • ✅ Te sientes cómodo combinando tools y prompts para crear flujos interactivos
  • ✅ Puedes incorporar output rico en el proyecto integrador del módulo 8 si decides hacerlo

Resumen

  • Este módulo explora MCP Apps: MCP servers cuyos tools retornan output visualmente rico
  • No es una tecnología nueva — es un patrón de diseño sobre los tools que ya sabes construir
  • Vas a aprender a crear dashboards, tablas, reportes, charts ASCII, y workflows multi-paso
  • Las capacidades son reales pero limitadas — no reemplaza web apps, enriquece la experiencia en Claude Code
  • Al terminar tendrás un MCP App funcional con dashboard interactivo
  • Los patrones se aplican directamente al proyecto integrador del módulo 8

Recursos adicionales

  1. MCP Specification — Tool Results — Especificación de content types en respuestas
  2. MCP TypeScript SDK — SDK oficial TypeScript
  3. MCP Python SDK — SDK oficial Python
  4. Markdown Tables Generator — Herramienta para generar tablas markdown
  5. ASCII Art Generator — Inspiración para visualizaciones ASCII

Siguiente cápsula: Qué son MCP Apps — anatomía de una respuesta rica, tipos de contenido, y la diferencia entre un tool que retorna datos y uno que retorna una experiencia visual.

← AnteriorProyecto: MCP Server Python con API REST ExternaSiguiente →MCP Apps: Tools que Retornan Output Visual