Avanzado Lección 9 de 9 ≈ 70 min de lectura Especificación 2026-07-28

Construir una MCP App completa

Especificación MCP 2026-07-28 · revisada el 2 de octubre de 2026

El panel de entregas de Nortia como MCP App: la tool que abre la vista, el recurso ui:// en un solo HTML, las tools que solo llama la vista, el estado, la CSP, la autorización en el servidor y las pruebas en local antes de publicar en Claude y ChatGPT.

Qué aprenderás

  • Construir una MCP App completa con el SDK oficial: la tool que abre la vista, el recurso ui:// en un solo HTML, la vista que recibe argumentos y resultado, y las tools que solo llama la vista
  • Repartir el estado entre la vista (localStorage con un viewUUID) y el servidor, y dejar al modelo solo lo que necesita con updateModelContext
  • Aplicar la seguridad de una MCP App: CSP con dominios declarados, autorización en el servidor aunque la visibility diga otra cosa y datos que sobreviven a un host que quita campos
  • Probar la App en local con basic-host y el Inspector, y saber qué cambia al publicarla en Claude, ChatGPT y otros hosts

Contenido de la lección

  1. 01 El problema
  2. 02 El diseño antes del código
  3. 03 El servidor y su recurso ui://
  4. 04 La vista y el puente con el host
  5. 05 Estado y contexto del modelo
  6. 06 Seguridad: CSP, visibilidad y autorización
  7. 07 Probarla en local
  8. 08 Claude, ChatGPT y los demás
  9. 09 En producción

Además: quiz de comprobación y desafío práctico.

Extracto

Una clienta de Barcelona llama a soporte. Su pedido PED-2026-004797 tiene una incidencia y quiere recibirlo esta semana, por la mañana. La agente se lo pide al asistente de Nortia. El modelo llama a listar_pedidos, encuentra el pedido y responde con un párrafo. Para cambiar la entrega tendría que contarle los seis huecos de reparto de BCN-02 con sus plazas libres, esperar a que la agente elija uno escribiendo, repetirle el cambio para que lo confirme y ejecutarlo.

Son cuatro turnos para algo que en una pantalla es mirar y pulsar dos veces. Y cada turno es una ocasión de error. El modelo puede copiar mal un hueco o dar por confirmada una respuesta ambigua, y puede ofrecer un hueco que se ha llenado mientras tanto. La agente no ve los huecos completos. Los lee en una lista, si el modelo los incluye.

Fin del extracto · la lección sigue con 8 secciones más

Artículos relacionados

Preguntas frecuentes

¿Qué hace falta para que una tool MCP muestre una interfaz dentro de Claude o ChatGPT?

Tres piezas que declara el propio servidor: la herramienta indica en sus metadatos qué recurso de interfaz le corresponde, ese recurso es un documento HTML con un tipo MIME propio de la extensión, y el código de esa página se comunica con la aplicación anfitriona mediante mensajes del navegador. La herramienta debe seguir contestando con texto útil, porque hay clientes que no dibujan nada. En la lección se monta todo para un caso de Nortia y se prueba con el host oficial de pruebas.

¿Ocultar una tool al modelo con visibility impide que alguien la ejecute?

No. Ese campo le indica a la aplicación anfitriona qué funciones enseñar al modelo y cuáles reservar para la interfaz, pero la petición que recibe el servidor es idéntica sea cual sea su origen, y hay hosts que no filtran como deberían. Los permisos hay que comprobarlos en el servidor siempre. En la lección se reproduce el problema en el host de pruebas oficial y se deja fijado con un test.

¿Cómo guarda su estado la interfaz de una MCP App?

La versión estable de la extensión no ofrece un almacén propio para eso. La posición en la que se quedó el usuario (filtros, selección) puede guardarse en el navegador con un identificador que entrega el servidor, y lo que tiene valor para el negocio debe vivir en el servidor. Aparte está lo que conviene que sepa el modelo, que viaja por otro mensaje y sin llenar su contexto. En la lección se reparte ese estado en un panel de Nortia y se explica qué cambia en ChatGPT.

Temario del curso