Dynamic Form MCP (Model Context Protocol)

Este documento describe cómo utilizar el servidor MCP (Model Context Protocol) para la gestión de formularios dinámicos. El servidor expone herramientas para crear, obtener y gestionar las respuestas de formularios dinámicos utilizando la librería @dynamicfrm/js. Este servidor está diseñado para ser utilizado con un cliente MCP, como el Inspector MCP integrado en Visual Studio Code.

Prerrequisitos

Asegúrate de tener Node.js y npm (o yarn) instalados en tu sistema. También se asume que tienes Visual Studio Code instalado y la extensión del Inspector MCP habilitada.

Instalación y Construcción

1. Clona o descarga este repositorio (si aplica).

2. Navega al directorio del proyecto en tu terminal.

3. Instala las dependencias necesarias:

   npm install
   # o
   yarn add

   Esto instalará las siguientes dependencias principales utilizadas en el servidor:

   • @modelcontextprotocol/sdk/server/mcp.js: Para la creación del servidor MCP.
   • @modelcontextprotocol/sdk/server/stdio.js: Para el transporte estándar de entrada/salida del servidor MCP.
   • zod: Para la validación de los datos de entrada de las herramientas.
   • uuid: Para la generación de UUIDs únicos para los formularios.
   • @dynamicfrm/js: La librería principal para la creación y gestión de formularios dinámicos.

4. Construye el proyecto:

   npm run build

   Este comando generará los archivos necesarios en el directorio de construcción (build), incluyendo el archivo principal del servidor (index.js).

Configuración en Visual Studio Code para el Inspector MCP

Para que el Inspector MCP de VS Code descubra y pueda interactuar con este servidor, necesitas configurar la sección mcp en la configuración de VS Code (settings.json). Un ejemplo de configuración sería:

{
  "chat.mcp.discovery.enabled": true,
  "mcp": {
    "inputs": [],
    "servers": {
      "dynamicform": {
        "command": "node",
        "args": [
          "/ruta/absoluta/a/tu/proyecto/build/index.js"
        ]
      }
    }
  }
}

Importante: Reemplaza /ruta/absoluta/a/tu/proyecto/build/index.js con la ruta absoluta real a tu archivo index.js construido.

Ejecución a través del Inspector MCP de VS Code

Una vez configurado, el Inspector MCP de VS Code debería detectar automáticamente el servicio dynamicform. Podrás interactuar con las herramientas expuestas por el servidor directamente desde la interfaz del Inspector.

Para interactuar con las herramientas:

1. Abre el Inspector MCP en VS Code (generalmente a través de la paleta de comandos o en la barra lateral).
2. Busca el servicio dynamicform.
3. Selecciona la herramienta que deseas utilizar (por ejemplo, create-form).
4. Proporciona los parámetros de entrada requeridos en formato JSON en el panel de entrada del Inspector.
5. Ejecuta la herramienta.
6. La respuesta del servidor se mostrará en el panel de resultados del Inspector.

Herramientas Disponibles

El servidor MCP de formularios dinámicos expone las siguientes herramientas, que puedes invocar a través del Inspector MCP:

create-form

Descripción: Crea un nuevo formulario dinámico con campos personalizados.

Parámetros:

{
  title: z.string().min(3).describe('Título del formulario'),
  fields: z
    .array(
      z.object({
        type: z.string().describe('Tipo de campo (e.g., text-field, list-field)'),
        name: z.string().describe('Nombre del campo'),
        label: z.string().optional().describe('Etiqueta para mostrar en el formulario'),
        placeholder: z.string().optional().describe('Texto de marcador de posición'),
        required: z.boolean().optional().describe('Indica si el campo es obligatorio'),
        options: z.array(z.string()).optional().describe('Opciones para campos de lista'),
        url: z.string().optional().describe('URL para campos como qr-field o yt-video'),
        email: z.string().optional().describe('Correo electrónico para email-field'),
        subject: z.string().optional().describe('Asunto para email-field'),
        minLength: z.number().optional().describe('Longitud mínima para campos de texto'),
        maxLength: z.number().optional().describe('Longitud máxima para campos de texto'),
        pattern: z.string().optional().describe('Patrón de validación para campos de texto'),
        defaultValue: z.string().optional().describe('Valor por defecto del campo'),
      })
    )
    .min(1)
    .describe('Lista de campos del formulario'),
}

Ejemplo de uso (a través del Inspector MCP):

{
  "title": "Formulario de Contacto",
  "fields": [
    {
      "type": "text-field",
      "name": "nombre",
      "label": "Nombre",
      "required": true
    },
    {
      "type": "email-field",
      "name": "correo",
      "label": "Correo Electrónico",
      "required": true
    },
    {
      "type": "text-area",
      "name": "mensaje",
      "label": "Mensaje"
    }
  ]
}

Respuesta:

En caso de éxito, la respuesta contendrá la URL del formulario creado:

{
  "content": [
    {
      "type": "text",
      "text": "Formulario creado exitosamente: "
    }
  ]
}

En caso de error, la respuesta indicará el problema:

{
  "content": [
    {
      "type": "text",
      "text": "Ha ocurrido un error: "
    }
  ]
}

Shared threads will appear here, showcasing real-world applications and insights from the community. Check back soon for updates!