MCP Joke Button App

Este proyecto es un servidor MCP pequeño que expone una interfaz MCP App UI: un único botón. Cuando se hace clic en el botón, la aplicación envía un mensaje al host pidiendo al asistente que responda con un chiste corto y apto para toda la familia.

Usa intencionadamente solo los módulos integrados de Node.js. No hay dependencias de paquetes en tiempo de ejecución.

Qué demuestra

• Protocolo central MCP versión 2026-07-28

• HTTP Streamable sin estado en un único endpoint: /mcp

• server/discover, tools/list, tools/call, resources/list y resources/read

• Metadatos de recursos de MCP Apps UI con _meta.ui.resourceUri

• Un widget text/html;profile=mcp-app compatible con sandbox

• ui/initialize y ui/message mediante postMessage

Related MCP server: Jokes MCP Server

Requisitos

Instala Node.js 20 o más reciente desde nodejs.org. La descarga LTS es suficiente.

No necesitas ejecutar npm install; este proyecto no tiene bibliotecas de terceros.

Iniciar el servidor

Abre una terminal en esta carpeta y ejecuta:

npm start

Deberías ver:

MCP Joke Button server listening on http://127.0.0.1:8787/mcp
Preview the widget shell at http://127.0.0.1:8787/preview

Deja esa terminal abierta mientras pruebas.

Las solicitudes MCP se registran por método mientras el servidor está en ejecución. Para una representación interactiva de la aplicación, el registro debería incluir una lectura de recurso de interfaz exitosa similar a:

[mcp] request method=resources/read name=ui://joke-button/app.html
[mcp] response method=resources/read status=200

Establece MCP_LOG_REQUESTS=false si quieres desactivar estos registros de desarrollo.

Implementación en Heroku

La aplicación Heroku joke-button está implementada en:

https://joke-button-31cddc4bc964.herokuapp.com

Su endpoint MCP es:

https://joke-button-31cddc4bc964.herokuapp.com/mcp

Implementa la rama actual con:

git push heroku HEAD:main

Comprobación local rápida

Abre esta dirección en un navegador:

http://127.0.0.1:8787/preview

Esto solo previsualiza la apariencia del botón. El botón solo puede pedir un chiste a la IA cuando se representa dentro de un host compatible con MCP Apps, como ChatGPT.

Uso con ChatGPT Desktop o ChatGPT Web

ChatGPT necesita una URL HTTPS para un servidor MCP remoto durante el desarrollo. Mantén npm start en ejecución y expón el puerto 8787 con una herramienta de túnel como ngrok o Cloudflare Tunnel.

Ejemplo con ngrok:

ngrok http 8787

Copia la URL de reenvío HTTPS y añade /mcp al final, por ejemplo:

https://example.ngrok.app/mcp

Luego conéctalo en ChatGPT:

1. Abre ChatGPT.

2. Abre Configuración.

3. Abre Seguridad e inicio de sesión.

4. Activa el modo Desarrollador si aún no está activado.

5. Abre Plugins. Si estás en la aplicación de escritorio y no lo ves en la barra lateral, abre https://chatgpt.com/plugins en un navegador con la misma cuenta iniciada.

6. Selecciona el botón de más para añadir una conexión de servidor MCP de desarrollador.

7. Pega la URL HTTPS que termina en /mcp.

8. Nómbralo Joke Button.

9. Inicia un nuevo chat, selecciona el plugin en el menú Más y pregunta: Show the joke button.

10. Haz clic en Tell a joke.

No necesitas un ajuste llamado MCP servers para esta prueba de interfaz de ChatGPT. Ese ajuste es para la configuración del host MCP local de Codex, no para añadir una conexión de plugin de desarrollador de ChatGPT.

Si falta el modo Desarrollador o el botón de más, comprueba que la aplicación de escritorio esté actualizada y que tu cuenta o espacio de trabajo permita el desarrollo de plugins.

Si la aplicación funciona, ChatGPT debería recibir el mensaje del botón y responder con un chiste corto.

Uso con Codex en la aplicación de escritorio de ChatGPT

Codex puede conectarse a servidores MCP Streamable HTTP desde los ajustes MCP compartidos.

El ajuste MCP servers solo aparece en clientes locales compatibles con Codex y puede no aparecer en la vista normal de ajustes de chat de ChatGPT. Si está disponible:

1. Mantén npm start en ejecución.

2. Abre la aplicación de escritorio de ChatGPT.

3. Abre Configuración y luego MCP servers.

4. Selecciona Añadir servidor.

5. Elige Streamable HTTP.

6. Nombra el servidor joke_button.

7. Usa esta URL:

http://127.0.0.1:8787/mcp

8. Guarda y reinicia cuando se te pida.

9. En una tarea de Codex, escribe /mcp para confirmar que el servidor está conectado.

10. Pide a Codex: Use the Joke Button MCP server.

El soporte de herramientas MCP de Codex puede mostrar el respaldo de texto en lugar de representar la interfaz iframe, según la superficie. Para la interfaz real de un solo botón, usa ChatGPT con soporte de MCP Apps UI.

Si el ajuste no es visible, copia la configuración de ejemplo de codex-config.example.toml en el .codex/config.toml de un proyecto de confianza o en tu ~/.codex/config.toml de usuario, y reinicia la aplicación de escritorio de ChatGPT o el cliente de Codex.

URLs útiles

• Comprobación de estado: http://127.0.0.1:8787/health

• Endpoint MCP: http://127.0.0.1:8787/mcp

• Vista previa del widget: http://127.0.0.1:8787/preview

Notas de seguridad

El servidor valida la versión del protocolo MCP y las cabeceras MCP reflejadas requeridas por el transporte Streamable HTTP 2026-07-28.

Para el desarrollo local, se aceptan solicitudes sin cabecera Origin, se aceptan orígenes de navegador de loopback y se aceptan orígenes comunes de host de OpenAI. Para otro origen de host, inicia el servidor con:

$env:MCP_ALLOWED_ORIGINS="https://your-host.example"
npm start

Usa autenticación antes de exponer un servidor MCP real que pueda acceder a datos privados o realizar acciones. Este ejemplo no hace ninguna de las dos cosas.

Archivos del proyecto

• server.js: servidor MCP sin dependencias

• public/joke-button.html: widget de MCP App UI

• codex-config.example.toml: configuración MCP de Codex de ejemplo