Related MCP Server Resources

Explore more AI models, providers, and integration options:

  • Explore AI Models
  • Explore AI Providers
  • Explore MCP Servers
  • LangDB Pricing
  • Documentation
  • AI Industry Blog
  • Jokes MCP Server
  • MCP Pokemon Server
  • Image Processor MCP Server
  • MCP Sumo Logic Server
  • MCP Web Browser Server
Back to MCP Servers
Dynamic Form MCP

Dynamic Form MCP

Public
backsoul/dynamicform-mcp

Manage and create dynamic forms with customizable fields using a Model Context Protocol server that integrates seamlessly with Visual Studio Code's MCP Inspector for efficient form response handling and validation.

typescript
0 tools
May 29, 2025
Updated Jun 4, 2025

Supercharge Your AI with Dynamic Form MCP

MCP Server

Unlock the full potential of Dynamic Form MCP through LangDB's AI Gateway. Get enterprise-grade security, analytics, and seamless integration with zero configuration.

Unified API Access
Complete Tracing
Instant Setup
Get Started Now

Free tier available • No credit card required

Instant Setup
99.9% Uptime
10,000+Monthly Requests

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: " } ] }
Publicly Shared Threads0

Discover shared experiences

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

Share your threads to help others
Related MCPs5
  • Jokes MCP Server
    Jokes MCP Server

    Deploy a Model Context Protocol (MCP) server to seamlessly integrate AI models with diverse data sou...

    Added May 30, 2025
  • MCP Pokemon Server
    MCP Pokemon Server

    An MCP server implementation enabling interaction with the PokeAPI to fetch dynamic Pokémon data and...

    Added May 30, 2025
  • Image Processor MCP Server
    Image Processor MCP Server

    A TypeScript-based Model Context Protocol server enabling creation, access, and summarization of tex...

    2 tools
    Added May 30, 2025
  • MCP Sumo Logic Server
    MCP Sumo Logic Server

    Model Context Protocol server integrating with Sumo Logic API to perform customizable log searches w...

    Added May 30, 2025
  • MCP Web Browser Server
    MCP Web Browser Server

    Advanced Model Context Protocol server enabling headless web browsing with multi-tab support, dynami...

    6 tools
    Added May 30, 2025