form MCP

MCP服务器表单

A. 模型上下文协议（MCP） 服务器，使AI助手能够创建HTML表单、收集用户响应和检索提交数据。非常适合在人工智能对话期间从用户那里收集结构化信息。

示例

在这里，LLM调用了该工具来生成产品反馈

这是呈现给用户填写的结果表单。

在提交并告知LLM完成后，LLM可以以方便的JSON格式检索信息。

它做什么

• 🎯 创建表单：AI助手可以生成具有各种字段类型的自定义HTML表单
• 📝 收集回复：用户通过干净的web界面填写表单
• 📊 检索数据：AI助手可以检查提交内容并访问响应数据
• 💾 永久存储：表格和回复会自动保存
• 🔒 安全：包括CSRF保护和输入验证

快速开始

安装和设置

选项1:Docker（推荐）

使用Docker Compose启动服务器：

git clone https://github.com/yourusername/form-mcp.git
cd form-mcp
docker compose up -d

这将启动服务器侦听：

• 端口3000：表单HTTP服务器（用于呈现表单）
• 端口3002：MCP可流式传输HTTP端点

选项2：本机pnpm

使用Node.js在本地运行服务器：

git clone https://github.com/yourusername/form-mcp.git
cd form-mcp
pnpm install
pnpm build

# Start with streamable HTTP transport
MCP_TRANSPORT=streamable-http MCP_HTTP_PORT=3002 MCP_FORM_PORT=3000 pnpm start

服务器将在以下时间可用 http://localhost:3002/mcp 用于MCP连接。

连接MCP客户端

克劳德代码（官方CLI）

使用命令行添加服务器：

# For Docker setup
claude mcp add --transport http form-mcp http://localhost:3002/mcp

# For local pnpm setup  
claude mcp add --transport http form-mcp http://localhost:3002/mcp

您还可以设置范围，使其在项目之间可用：

claude mcp add --transport http -s user form-mcp http://localhost:3002/mcp

克劳德桌面（传统stdio模式）

增添 claude_desktop_config.json:

{
  "mcpServers": {
    "form-mcp": {
      "command": "node",
      "args": ["/absolute/path/to/form-mcp/dist/index.js"],
      "env": {
        "MCP_TRANSPORT": "stdio"
      }
    }
  }
}

配置文件位置：

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• 视窗: %APPDATA%\Claude\claude_desktop_config.json

光标

增添 .cursor/mcp.json 或全球 ~/.cursor/mcp.json:

{
  "mcpServers": {
    "form-mcp": {
      "command": "node", 
      "args": ["/absolute/path/to/form-mcp/dist/index.js"],
      "env": {
        "MCP_TRANSPORT": "stdio"
      }
    }
  }
}

备注：Cursor当前对可流式传输的HTTP支持有限。现在使用stdio模式。

Librechat

增添 librechat.yaml:

mcpServers:
  form-mcp:
    type: streamable-http
    url: http://form-mcp:3002/mcp
    timeout: 60000
    serverInstructions: |
      This server allows you to create HTML forms for users to fill out.
      Use createForm to generate forms with various field types.
      Use getResponses to check for submissions and retrieve data.

适用于不支持流式HTTP的客户端

如果您的MCP客户端还不支持流式HTTP，请使用 mcp-remote 适配器：

安装mcp远程

npm install -g mcp-remote

配置您的客户端

添加到MCP客户端配置中：

{
  "mcpServers": {
    "form-mcp": {
      "command": "mcp-remote",
      "args": ["http://localhost:3002/mcp"]
    }
  }
}

这允许任何MCP客户端通过本地stdio网桥连接到可流式传输的HTTP服务器。

运作原理

1.AI创建表单

AI助手使用 createForm 带有模式的工具：

Create a contact form with name, email, subject dropdown, and message fields.

2.用户填写表格

AI提供了一个类似的URL http://localhost:3000/forms/abc-123 用户可以：

• 填写表单字段
• 提交一次（提交后表单锁定）
• 查看确认消息

3.AI检索响应

AI使用 getResponses 检查表格是否已提交并获取数据：

{
  "submitted": true,
  "responses": {
    "name": "John Doe",
    "email": "john@example.com", 
    "subject": "General Inquiry",
    "message": "Hello, I have a question..."
  }
}

支持的表单字段

环境变量

部署选项

Docker（推荐）

# Start the server
docker compose up -d

# View logs
docker compose logs -f

# Stop the server
docker compose down

服务器将在以下时间可用 http://localhost:3000 具有持久数据存储。

原生Node.js

# Development
pnpm dev

# Production
pnpm build
pnpm start

启动时自动启动（Linux）

# Copy systemd service file
sudo cp systemd/form-mcp.service /etc/systemd/system/

# Update paths in the service file
sudo nano /etc/systemd/system/form-mcp.service

# Enable and start
sudo systemctl enable form-mcp.service
sudo systemctl start form-mcp.service

示例用例

客户反馈表

Create a feedback form with rating (1-5 radio buttons), category dropdown (Bug Report, Feature Request, General), and comment textarea.

活动报名

Create an event registration form with name, email, dietary restrictions (checkboxes), and special requests textarea.

调查收集

Create a product survey with satisfaction rating, feature preferences (multiple checkboxes), and improvement suggestions.

故障排除

服务器无法启动

• 检查是否安装了Node.js 18+
• 确保端口3000可用(lsof -i :3000)
• 验证构建是否成功完成(pnpm build)

MCP客户端连接问题

• 在配置文件中使用绝对路径
• 配置更改后重新启动AI助手
• 检查服务器进程是否正在运行
• 验证dist/index.js文件的文件权限

表单未加载

• 检查服务器日志是否有错误
• 确保可以从浏览器访问主机名
• 验证forms.json文件是否具有适当的权限

Docker问题

• 跑 docker compose logs 查看错误消息
• 确保Docker守护进程正在运行
• 检查与的端口冲突 docker ps

获取帮助

• 文档：参见 建筑.md 了解技术细节
• 贡献：参见 贡献.md 发展指南
• 问题：在GitHub上报告错误和请求功能
• MCP资源：参观 模型上下文协议.io 用于MCP文档

许可证

MIT许可证-请参阅 许可证 了解详情。