modelcontextprotocol/create-mcp-app

¿Qué hace create-mcp-app?

Esta habilidad debe utilizarse cuando el usuario solicite "crear una aplicación MCP", "agregar una interfaz de usuario a una herramienta MCP", "construir una vista MCP interactiva", "generar una aplicación MCP" o necesite orientación sobre patrones del SDK de MCP Apps, registro de recursos de UI, ciclo de vida de MCP App o integración con el host. Proporciona una guía completa para construir aplicaciones MCP con interfaces de usuario interactivas.

¿Qué es una MCP App?

Una MCP App es una aplicación que utiliza el protocolo MCP (Model Context Protocol) para proporcionar una interfaz de usuario interactiva a herramientas y recursos dentro de un agente de IA. Estas aplicaciones permiten a los desarrolladores crear experiencias visuales y dinámicas que van más allá de simples respuestas de texto.

Casos de uso

• Crear una nueva aplicación MCP desde cero
• Agregar una interfaz de usuario a una herramienta MCP existente
• Construir vistas interactivas (MCP Views) que respondan a eventos del usuario
• Registrar recursos de UI para que estén disponibles en el host
• Integrar el ciclo de vida de la aplicación (inicio, pausa, finalización) con el host

Requisitos previos

• Conocimiento básico del protocolo MCP
• Un entorno de desarrollo configurado con Node.js (versión 18 o superior)
• Acceso a un agente de IA compatible (Claude Code, Cursor, Codex, etc.)

Instalación y uso

Ejecuta el siguiente comando para crear un nuevo proyecto MCP App:

npx @modelcontextprotocol/create-mcp-app my-mcp-app

Esto generará una estructura de proyecto con los archivos esenciales:

my-mcp-app/
├── src/
│   ├── app.ts          # Punto de entrada de la aplicación
│   ├── views/          # Vistas interactivas
│   │   └── mainView.ts # Ejemplo de vista
│   └── tools/          # Herramientas MCP
│       └── myTool.ts   # Ejemplo de herramienta
├── package.json
└── tsconfig.json

Patrones de desarrollo

Registrar una herramienta con UI

import { Server } from "@modelcontextprotocol/sdk/server/index.js";
import { ToolDefinition } from "@modelcontextprotocol/sdk/types.js";

const myTool: ToolDefinition = {
  name: "my-tool",
  description: "Una herramienta de ejemplo con UI",
  inputSchema: {
    type: "object",
    properties: {
      message: { type: "string" }
    }
  },
  handler: async (args) => {
    return {
      content: [{ type: "text", text: `Has dicho: ${args.message}` }],
      view: {
        type: "form",
        fields: [
          { name: "nombre", type: "text", label: "Tu nombre" },
          { name: "email", type: "email", label: "Email" }
        ]
      }
    };
  }
};

Ciclo de vida de la aplicación

Las MCP Apps tienen un ciclo de vida gestionado por el host:

1. Inicio: La aplicación se registra y se inicializa.
2. Activo: La aplicación está lista para recibir solicitudes y mostrar UI.
3. Pausa: La aplicación puede ser pausada por el host (por ejemplo, para conservar recursos).
4. Finalización: La aplicación se limpia y se elimina.

server.on("lifecycle", (event) => {
  switch (event.type) {
    case "start":
      console.log("Aplicación iniciada");
      break;
    case "pause":
      console.log("Aplicación pausada");
      break;
    case "resume":
      console.log("Aplicación reanudada");
      break;
    case "stop":
      console.log("Aplicación detenida");
      break;
  }
});

Integración con el host

Para que el host pueda cargar tu aplicación, debes exponer un archivo de configuración:

{
  "name": "my-mcp-app",
  "version": "1.0.0",
  "entry": "./src/app.ts",
  "views": ["./views/mainView"],
  "tools": ["./tools/myTool"]
}

Recursos adicionales

• Documentación oficial de MCP
• SDK de MCP Apps
• Ejemplos de MCP Apps

Notas

• Asegúrate de que el SDK esté actualizado para usar las últimas funciones de UI.
• Las vistas pueden ser tan simples como un formulario o tan complejas como un dashboard completo.
• El host puede limitar el tamaño y la complejidad de las vistas por razones de rendimiento.