Básicamente, MCP Apps

¿Sabes cómo los servidores MCP devuelven texto, JSON y cosas así? Bueno, las MCP Apps llevan eso un paso más allá: tus herramientas pueden devolver widgets HTML completos que se renderizan directamente dentro de ChatGPT. En lugar de que el modelo vuelque un muro de JSON al usuario, este ve una interfaz de usuario real. Tarjetas, cuadrículas, líneas de tiempo... lo que quieras.

Esto es literalmente solo una prueba de concepto (POC) y nada demasiado serio. Es una aplicación complementaria para la conferencia CityJS London 2026: horarios, ponentes, búsqueda de charlas... todo renderizado como una interfaz de usuario rica y temática dentro de ChatGPT.

Ejecútalo

./start.sh

Eso es todo. Un comando. Instala las dependencias, inicia el servidor, abre un túnel cloudflared y te entrega una URL para pegar en ChatGPT. Necesitas Node.js 18+ y cloudflared (brew install cloudflared en Mac).

Verás algo como esto:

  ┌─────────────────────────────────────────────────────────┐
  │                                                         │
  │   YOUR MCP ENDPOINT:                                    │
  │                                                         │
  │   https://something-random.trycloudflare.com/mcp        │
  │                                                         │
  │   NOW GO ADD IT TO CHATGPT:                             │
  │                                                         │
  │   1. Open chatgpt.com                                   │
  │   2. Click the tools icon (wrench) in the input bar     │
  │   3. Click 'Add MCP Server'                             │
  │   4. Paste the URL above                                │
  │   5. Ask: 'What's the CityJS London schedule?'          │
  │                                                         │
  └─────────────────────────────────────────────────────────┘

Luego pídele a ChatGPT cosas como "muéstrame los ponentes", "cuéntame sobre la charla de Douglas Crockford" o "busca charlas sobre IA" y observa cómo aparecen los widgets.

Related MCP server: Hello Widget Example

Vale, pero ¿cómo aprendo sobre las MCP Apps?

¡EL CÓDIGO FUENTE NO DA MIEDO! Revísalo. Básicamente hay 3 archivos relevantes (¡y son pequeños!):

VE A LEERLOS. ¡ES DIVERTIDO, DE VERDAD!

Cómo funciona básicamente

Una MCP App es solo un servidor MCP que también sirve widgets HTML. Cuando ChatGPT llama a tu herramienta, renderiza tu widget y canaliza los datos de salida de la herramienta hacia él. Tres cosas hacen que esto suceda:

1. Escribes un widget HTML

Un archivo HTML autónomo con CSS y JS integrados. Recibe datos de ChatGPT y los renderiza. Eso es todo lo que hace. Mira widgets/speakers.html: es solo una función render(data) y algo de CSS.

El widget recoge los datos de ChatGPT así:

// ChatGPT puts tool output here when the widget loads
tryRender(window.openai?.toolOutput);

// Or fires this event slightly later
window.addEventListener("openai:set_globals", (e) => {
  tryRender(e.detail?.globals?.toolOutput);
});

También recoge el tema (window.openai?.theme) para que coincida automáticamente con el modo claro/oscuro de ChatGPT.

2. Registras el widget como un recurso

En server.js, le dices al host MCP "oye, tengo este widget":

server.registerResource(
  "schedule-widget",
  "ui://cityjs/schedule.html",
  { mimeType: "text/html;profile=mcp-app" },  // <-- this MIME type is the magic
  async () => ({
    contents: [{
      uri: "ui://cityjs/schedule.html",
      mimeType: "text/html;profile=mcp-app",
      text: scheduleWidgetHtml,  // the raw HTML string
    }],
  })
);

El tipo MIME text/html;profile=mcp-app es lo que convierte un servidor MCP normal en una MCP App. Le dice al host "esto es un widget renderizable, no solo un archivo".

3. Vinculas una herramienta al widget

Cuando registras una herramienta, le dices al host qué widget renderizar cuando se llama a la herramienta:

server.registerTool(
  "get_schedule",
  {
    title: "Get Schedule",
    description: "Get the CityJS London 2026 schedule...",
    inputSchema: { day: z.enum(["day1", "day2", "day3", "all"]).optional() },
    _meta: {
      ui: { resourceUri: SCHEDULE_URI },           // MCP spec way
      "openai/outputTemplate": SCHEDULE_URI,        // ChatGPT-specific way
    },
  },
  async ({ day }) => {
    return {
      structuredContent: { days },   // <-- your widget receives THIS
      content: [{ type: "text", text: JSON.stringify({ days }) }],  // fallback for non-UI hosts
    };
  }
);

structuredContent son los datos que renderiza tu widget. content es una alternativa de texto para hosts que aún no tienen interfaz de usuario (como Claude). Devuelve siempre ambos.

Y eso es básicamente todo. Widget + recurso + vinculación de herramienta = MCP App.

El proyecto

basically-mcp-apps/
  start.sh               <- run this. that's it.
  server.js              <- the MCP server. START READING HERE.
  package.json
  data/
    data.json            <- raw conference data (speakers, talks, bios)
    cityjs.js            <- enriches the raw data with rooms, types, etc.
  widgets/
    schedule.html        <- conference schedule timeline widget
    speakers.html        <- speaker grid widget
    speaker-detail.html  <- individual speaker profile card widget

Dependencias

• @modelcontextprotocol/sdk -- SDK del servidor MCP

• zod -- validación de esquema de entrada

• cloudflared -- crea túneles de tu localhost a internet para que ChatGPT pueda acceder a él

• Node.js 18+

Sin React, sin paso de compilación, sin empaquetador, sin framework. Solo archivos HTML y un servidor Node.

¡Feliz hackeo!