Dynamic Form MCP

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

Clona o descarga este repositorio (si aplica).
Navega al directorio del proyecto en tu terminal.
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.
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:

Abre el Inspector MCP en VS Code (generalmente a través de la paleta de comandos o en la barra lateral).
Busca el servicio dynamicform.
Selecciona la herramienta que deseas utilizar (por ejemplo, create-form).
Proporciona los parámetros de entrada requeridos en formato JSON en el panel de entrada del Inspector.
Ejecuta la herramienta.
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: <URL_DEL_FORMULARIO>"
    }
  ]
}

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

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

This server cannot be installed

security - not tested

license - not tested

quality - not tested

local-only server

The server can only run on the client's local machine because it depends on local resources.

A server that implements the Model Context Protocol for managing dynamic forms, allowing users to create, retrieve, and handle responses for web forms via the @dynamicfrm/js library.

Related MCP Servers

mcp-playwright
executeautomation
A
security
A
license
A
quality
A Model Context Protocol server that provides browser automation capabilities using Playwright. This server enables LLMs to interact with web pages, take screenshots, and execute JavaScript in a real browser environment.
Last updated -
13
9,457
3,642
TypeScript
MIT License
MCP JavaScript Server
davlgd
-
security
A
license
-
quality
An unofficial JavaScript SDK to create customized servers for the Model Context Protocol, allowing definition of prompts, resources, and tools for tailored interactions.
Last updated -
6
2
JavaScript
Apache 2.0
WASM MCP Server
beekmarks
-
security
F
license
-
quality
This server enables running a Model Context Protocol in a web browser with functionalities including arithmetic operations and session-based key-value storage.
Last updated -
2
TypeScript
Puppeteer MCP Server
twolven
-
security
A
license
-
quality
A Model Context Protocol server that provides browser automation capabilities using Playwright, enabling LLMs to interact with web pages, take screenshots, and execute JavaScript in a real browser environment.
Last updated -
3
Python
Apache 2.0

View all related MCP servers

Dynamic Form MCP

Dynamic Form MCP (Model Context Protocol)

Prerrequisitos

Instalación y Construcción

Configuración en Visual Studio Code para el Inspector MCP

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

Herramientas Disponibles

`create-form`

Related MCP Servers

mcp-playwright

MCP JavaScript Server

WASM MCP Server

Puppeteer MCP Server

New MCP Servers

MCP directory API