Demostración de MCP Elicitation y Apps

Una demostración de servidor MCP mínima con soporte de Elicitation y MCP Apps para presentaciones de seminarios web.

Características

• Herramienta de Elicitation: book_appointment con persistencia SQLite

• Aplicación MCP: view_appointments con interfaz HTML interactiva

• Tailwind CSS: Interfaz moderna y receptiva

• Datos en tiempo real: Estadísticas de citas en vivo

• Base de datos SQLite: Persistencia de datos y datos de ejemplo

• Transporte HTTP: Endpoint en http://localhost:3000/mcp

Related MCP server: MCP Appointment Booking Server

Característica de MCP Apps

Esta demostración ahora incluye soporte de MCP Apps con:

• Interfaz HTML interactiva renderizada en hosts MCP

• Tailwind CSS para estilos modernos

• Visualización de datos de citas en tiempo real

• Panel de estadísticas

• Datos de ejemplo precargados

Esquema de la base de datos

CREATE TABLE appointments (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  person TEXT NOT NULL,
  duration_minutes INTEGER NOT NULL,
  created_at TEXT NOT NULL
);

Instalación

# Install dependencies
npm install

# Build TypeScript
npm run build

Ejecutando la demostración

Demostración de Elicitation (Original)

# Start the original elicitation server
npm start

# Or for development with auto-reload:
npm run dev

Demostración de MCP Apps (Nuevo)

# Start the MCP Apps server
npm run start:apps

# Or for development with auto-reload:
npm run dev:apps

Prueba simple

Para ver el flujo esperado:

npm run test

Flujo del seminario web

1. Iniciar servidor: npm start

2. Conecta un cliente MCP a http://localhost:3000/mcp

3. Pregunta: "Reserva una cita con John"

4. Elicitation pregunta por la duración: 30 / 60 / 90 minutos

5. Elige 60

6. Abre appointments.db en una interfaz gráfica de SQLite

7. Muestra la fila insertada con John, 60 minutos y la marca de tiempo

Especificaciones de la herramienta

Reservar cita (Demostración de Elicitation)

Nombre: book_appointment

Entrada inicial:

{
  "person": "string"
}

Elicitation (cuando falta la duración):

• Mensaje: "¿Cuánto debería durar la cita?"

• Esquema: Enumeración de 30, 60 o 90 minutos

Resultado: Inserta en SQLite y devuelve un mensaje de confirmación.

Ver citas (Aplicación MCP)

Nombre: view_appointments

Entrada: Ninguna requerida

Resultado: Abre una interfaz HTML interactiva con:

• Lista de todas las citas

• Panel de estadísticas (total de citas, duración total, duración media)

• Actualización de datos en tiempo real

• Estilos modernos con Tailwind CSS

Características de la aplicación MCP:

• Interfaz de usuario interactiva renderizada directamente en hosts MCP

• Contenido HTML servido a través de la API de recursos MCP

• Datos en tiempo real de la base de datos SQLite

Estructura del código

Demostración original

• src/server-simple.ts - Servidor MCP simple con lógica de Elicitation

• src/db.ts - Operaciones de base de datos SQLite

• appointments.db - Archivo de base de datos SQLite (creado en el primer inicio)

Demostración de MCP Apps

• src/server-apps.ts - Servidor extendido con soporte de MCP Apps

• src/appointments-ui.html - Interfaz HTML interactiva con Tailwind CSS

• appointments.db - Base de datos SQLite compartida con datos de ejemplo

Puntos clave de implementación

1. La herramienta se inicia - Recibe el parámetro person

2. Elicitation - Detecta la falta de duration_minutes, devuelve inputRequired

3. Continuar - Después de que el usuario proporcione la duración, completa la operación y guarda en la base de datos

Pruebas

Puedes probar ambos servidores con cualquier cliente compatible con MCP (Claude Desktop, VS Code con extensión MCP, etc.) conectándote a http://localhost:3000/mcp.

Probando la demostración de Elicitation

1. Conéctate a http://localhost:3000/mcp

2. Llama a book_appointment con {"person": "John"}

3. El servidor solicitará la duración (30/60/90 minutos)

4. Proporciona la duración para completar la cita

Probando la demostración de MCP Apps

1. Inicia el servidor de MCP Apps: npm run start:apps

2. Conéctate a http://localhost:3000/mcp

3. Llama a view_appointments (no se necesitan parámetros)

4. El host MCP renderizará la interfaz HTML interactiva

5. Explora las citas con estadísticas y datos en tiempo real

Requisitos

• Node.js 18+

• SQLite GUI (para ver la base de datos durante la demostración)