JSON表单管理服务

一个允许AI助手通过JSON模式创建和操作表单的服务,支持表单组件的添加、删除、修改及验证设置。

  • by datakurre
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 datakurre/form-js-mcp

使用说明

表单js-mcp

MCP服务器,允许AI助手使用创建和操作基于JSON的表单 @bpmn-io/form-js.

表单在内存中作为纯JSON模式进行管理,不需要DOM或浏览器依赖性。服务器提供用于创建表单、添加/删除/替换组件、设置验证和布局以及导出模式的工具。

设置

VS代码MCP配置

增添 .vscode/mcp.json:

{
  "servers": {
    "form": {
      "command": "npx",
      "args": ["form-js-mcp"]
    }
  }
}

使用文件持久性:

{
  "servers": {
    "form": {
      "command": "npx",
      "args": ["form-js-mcp", "--persist-dir", "./forms"]
    }
  }
}

本地开发

npm install
npm run build
npm start

AI代理说明

当与 .form 文件或表单架构:

  1. 始终使用MCP工具 --不要手动编写JSON模式;使用提供的工具创建、修改和导出表单。
  2. 从开始 create_form 得到一个 formId --通过a schema param导入现有的JSON模式,或 cloneFromId 克隆现有表单。
  3. 添加组件 随着 add_form_component --键控类型自动生成唯一键。
  4. 设置属性 随着 set_form_component_properties --在单个调用中支持验证、布局、条件和选项属性。
  5. 检查 随着 inspect_form --使用以下方面 "validation", "summary", "variables", "components",或 "schema" 检查表格。
  6. 出口 随着 export_form_to_file({ filePath: "./myform.form" }) 将表单架构保存到文件中(自动添加.form扩展名)。

表单建模最佳实践

  • 命名: 使用与流程变量名称匹配的描述性关键字(例如。 firstName, orderAmount).
  • 验证: 始终设置 required: true 在必填字段上。使用 minLength/maxLength 对于文本, min/max 对于数字。
  • 布局: 该表单使用16列网格。使用 set_form_component_properties 控制列宽和 modify_form_component({ action: "auto-layout" }) 用于自动布局。
  • 条件: 使用 set_form_component_properties 随着 conditional 在 properties 根据FEEL表达式显示/隐藏字段。
  • 组: 使用 group 用于组织相关字段的容器。使用 dynamiclist 用于可重复的部分。

可用工具

工具 说明
create_form 创建、克隆或导入表单
delete_form 从内存中删除表单
inspect_form 检查表单——列出所有、汇总、验证、差异、导出、列出组件
export_form_to_file 将表单架构导出到扩展名为.form的文件系统
add_form_component 添加或复制组件
modify_form_component 删除、移动或自动布局组件
set_form_component_properties 更新组件属性、验证、布局、条件

可用资源

URI模式 描述
form://forms 列出所有内存中的表单
form://guides/form-field-reference 综合字段类型参考

可用提示

提示 描述
create-user-task-form Camunda用户任务表单分步指南
create-approval-form 审批工作流模板
add-conditional-section 条件字段组指南
create-multi-step-form 使用组的多部分表单
convert-to-dynamic-list 使用dynamiclist的可重复部分

许可证

麻省理工学院