聊天生成表单并自动发布到GitHub Pages

原文要点

原模板是免费n8n工作流：Chat触发器接收自然语言建表单请求，Anthropic Claude Sonnet智能体通过SubmitRax MCP服务器生成表单HTML、短评注和唯一表单键；GitHub节点检查Pages仓库中forms/路径下是否已有同名HTML，据此新建或更新并提交文件，回复中返回表单键与公开URL。SubmitRax作为静态站表单后端收集提交，可路由到邮箱、Slack、Discord或webhook。需SubmitRax API令牌、Anthropic密钥、开了Pages的公开仓库和有读写权限的GitHub令牌。

这次做成什么

在本地或云端n8n中搭一条'聊天说需求→AI生成表单→自动提交到GitHub Pages→回传公开链接'的练习流程，并用一句虚构需求跑通新建与更新两种分支。

准备什么

• 可用的n8n实例（Cloud或自托管），且含AI Agent与MCP Client Tool节点
• SubmitRax账号及其API令牌，用于表单后端与MCP服务器
• Anthropic API密钥，用于Claude Sonnet对话模型
• 已开启GitHub Pages的公开仓库，及对该仓库有contents读写权限的Personal Access Token

具体怎么做

1. 配置四类凭据

   在n8n Credentials中依次新建：HTTP Bearer Auth（填入SubmitRax令牌，供MCP Tool使用）、Anthropic API密钥、GitHub令牌（classic或fine-grained，勾选目标仓库contents读写）。每个凭据建好后点测试确认连通。

2. 导入模板并指向自己的仓库

   从n8n模板页打开该工作流并复制到画布，找到'GitHub Hosting Config'一类的配置节点，把username和repository改成自己的账号与Pages仓库名，确认分支为main（或你Pages实际部署分支）。

3. 用聊天触发一次新建

   激活工作流后打开Chat Trigger的聊天窗口，输入一句具体需求，例如'建一个含姓名、邮箱、留言的联系表单'。观察执行：AI Agent调用SubmitRax MCP生成HTML与表单键，GitHub节点发现forms/下无同名文件，走新建分支提交HTML。

4. 验证更新分支与回复内容

   再以相同表单名发一次修改请求（如'给联系表单加上电话字段'），确认GitHub节点这次走更新分支而非报错。检查聊天回复中是否包含评注、表单键和形如https://用户名.github.io/仓库/forms/xxx.html的公开URL，浏览器打开该URL能看到表单。

可直接复制的材料

你是一个表单生成助手。用户会用自然语言描述想要的表单。你必须调用SubmitRax MCP工具创建一个真实的表单端点，并返回：1）一句简短中文评注；2）唯一表单键；3）可直接嵌入静态页的完整HTML表单代码。统一风格要求：中文标签；必填字段为姓名、邮箱；所有输入框使用圆角8像素、边框1像素浅灰；提交按钮深蓝底白字；HTML中action指向SubmitRax返回的端点并带上表单键，不写入任何第三方外部脚本。若用户未说明字段，主动按'姓名、邮箱、留言'生成联系表单。

[{"请求":"建一个含姓名、邮箱、留言的联系表单","预期分支":"新建"},{"请求":"给联系表单加电话字段，留言改为必填","预期分支":"更新"},{"请求":"建一个报名表：姓名、公司、人数","预期分支":"新建（另一表单键）"}]

输入与输出示例

本站虚构演示，未实际运行，表单键与URL均为编造格式示例。

输入

在聊天窗口输入：建一个含姓名、邮箱、留言的联系表单，风格简洁中文

对应输出

回复示意：评注=已创建中文联系表单；form_key=srx_a1b2c3d4；URL=https://zhangsan.github.io/lab-pages/forms/contact.html。GitHub仓库forms/contact.html出现新提交，打开URL可见三个字段与提交按钮。

做完检查这些

• 聊天回复同时包含评注、表单键和以.github.io结尾的可访问URL
• 仓库forms/目录下出现对应HTML文件且每次变更都有Git提交记录
• 第二次同名请求走更新分支，文件被修改而不是报错或重复创建
• 在生成的表单页提交测试内容后，SubmitRax后台能收到该条提交

容易卡住的地方

• MCP Client Tool与AI Agent节点不可用时模板无法运行，需先确认n8n版本支持
• GitHub令牌若没有目标仓库contents读写权限，提交HTML会失败
• Pages部署分支与工作流分支不一致时，文件提交成功但URL打不开
• forms/路径需与Pages配置兼容，自定义域名时URL拼接要同步调整