FcDesigner AI 表单助理使用指南：token 配置与私有化部署

好用的低代码可视化表单设计器 FcDesigner 是一款基于 Vue 的开源工具（设计器项目名 form-create-designer），通过数据驱动表单渲染。可以拖拽生成表单规则，再由配套渲染器 form-create 加载 JSON 并渲染。面向政务、OA、ERP、电商、流程管理里要做动态表单的开发者和业务配置同学。

源码地址: Github | 文档 | 演示

审批单不想从空白画布拖、录入页字段要用中文改、OA 里有的配置页开 AI 有的必须藏——这些都是 AI 表单助理。FcDesigner 用 config.ai.token 打开 AI 面板，业务同学在面板里描述需求，助理服务生成或修改 FormCreate 规则并写回画布。能力包括智能表单生成、表单修改优化、流式对话（实时显示思考过程和执行步骤）、消息历史（自动保存，支持清除和恢复）。Token 通过访问官网申请 API token，把文档占位符 Bearer fc-d8ed***************ffab0 换成你从官网获取的有效 token。私有化把开源助理跑在自己的机器上，启动后把 config.ai.api 指到 http://localhost:3001/api/chat/completions。不给业务同学看时写 config.showAi = false。

截图是打开 AI 面板后的设计器：左侧竖条底部「AI」高亮，中间对话区标题是「AI FormCreate 智能表单助理」，右侧是画布。对话区有欢迎语和「你可以试着问我」提示卡片；中间已经有两轮对话，用户先发「生成一个就诊满意度问卷表单」，助理回「已处理完毕！」；再发「让姓名字段必填」，再回「已处理完毕！」。底部输入框占位「请描述您的需求」，旁边有发送。画布上是就诊满意度问卷，含就诊满意度、联系方式、意见反馈、是否推荐、服务满意度、带红星必填的「您的姓名」、就诊日期、流程满意度星级。顶部有导入、导出、绿色「保存」、蓝色「预览」、红色「清空」。点「预览」只按当前画布渲染表单；真正改表是在 AI 面板发出提示词之后，画布会跟着更新。

FcDesigner AI 表单助理靠哪几个配置开关？

启用只靠 config.ai.token。私有化再写 config.ai.api，值是助理服务的 POST /api/chat/completions（这是助理服务接口，不是 fc-designer 组件上的方法）。整块不显示写 config.showAi = false。Token 通过访问官网申请 API token；文档里的 Bearer fc-d8ed***************ffab0 是占位符，必须换成有效 token，不要当密钥用。请求头里的 token 优先，没有再落到服务端 .env 的 DEFAULT_TOKEN。助理服务根据自然语言生成或修改 FormCreate 规则；设计器用户只在 AI 面板里说话。

流式对话会依次露出思考步骤：分析需求、生成方案、执行操作、验证结果。消息右下角可以复制、删除；AI 面板头部可以清除对话。历史自动存本地存储，刷新页面还能恢复。

FcDesigner 怎么用 config.ai.token 打开 AI 表单助理？审批单怎么对话改表？

基本示例：审批单配置页写 config.ai.token

场景： 审批单配置页。业务同学要用自然语言出表，先把 AI 面板打开。

按下面做：

1. 页面里放 fc-designer，把 config 传给 :config。
2. config.ai.token 写成 Bearer 加上你从官网拿到的 token。
3. 把文档占位符 Bearer fc-d8ed***************ffab0 换成有效值，不要原样粘贴当密钥。
4. 打开这个页面，点左侧「AI」，不要只看画布中间。
5. 点「预览」只确认当前表单能渲染；改表要在 AI 面板发指令。

<template>
    <fc-designer ref="designer" :config="config" />
</template>
<script setup>
    const config = {
        ai: {
            token: 'Bearer fc-d8ed***************ffab0'  // 请使用您从官网获取的有效 token
        }
    }
</script>

预览后：左侧出现 AI 入口，点开就是 AI 面板。此时还没发提示词，画布可以仍是空的。Token 无效时面板在，但发消息不会改表。点「预览」看到的是当前画布，和 AI 对话是两件事。

再一个示例：对话生成建议收集表单再追加字段

场景： 录入页要一张建议收集表，生成后再补一块用户信息，用中文提示词在 AI 面板发，不要自己拖字段。

按下面做：

1. 上一节的 config.ai.token 保持有效，打开 AI 面板。
2. 先发一条写清楚字段的提示词，不要只说「做一个注册表单」。
3. 等助理回「已处理完毕！」后，再发追加、改组件、加校验；它会记住上一轮上下文。
4. 结果不对就直接纠正，例如「这个字段应该是数字类型」。
5. 看表单长什么样，点设计器顶部「预览」；改表始终走 AI 面板，不要把提示词当成接口去 curl。

生成一个用户注册表单，包含：
- 用户名（必填，3-20个字符）
- 邮箱（必填，邮箱格式验证）
- 密码（必填，至少8位）
- 确认密码（必填，与密码一致）
- 手机号（可选，11位数字）

复杂需求拆开说：先结构，再校验，最后样式。官方提示词也可以直接用，例如：

创建一个建议收集表单，包含联系人、联系邮箱、分类和建议内容
追加一个用户信息表单
删除商品简介字段
商品价格字段使用数字输入框组件
当单选框选择 "选项1" 时，显示输入框组件
根据出生日期自动计算年龄
设置输入框为必填，并限制长度必须大于13
添加手机号格式验证
添加自定义验证：确认密码必须与密码一致
添加一个标签组件，显示文本为 "Tag"

发送后：第一句会在画布生成建议收集（或注册）字段；第二句「追加一个用户信息表单」会在已有规则上继续加，不用重头生成。流式过程里能看到分析需求、生成方案、执行操作、验证结果。点「预览」看到的就是改完后的表单。消息右下角复制、删除；面板头部清除。刷新后历史还在，因为存在本地存储。

私有化怎么 clone form-create-assistant？设计器怎么指到 localhost？

基本示例：仓库、写 .env、启动服务

场景： 内网审批单不能走官网 token，要在自己的服务器跑助理，上游用 DeepSeek。

按下面做：

1. 用官方安装命令拉取开源助理仓库。
2. 进入仓库目录后安装依赖。
3. 按需创建 .env。PORT 默认 3001；DEFAULT_AGENT 可选 deepseek、zhipu、qwen、other；DEFAULT_MODEL 默认 deepseek-chat；DEFAULT_TOKEN 在请求没有 Authorization 时使用；AGENT_TIMEOUT 默认 180000。
4. 启动服务后监听 http://localhost:3001。
5. 这一步只启动助理服务，设计器画布还不会自己连上来。

git clone https://github.com/xaboy/form-create-assistant/
cd form-create-assistant
pnpm install

# .env
PORT=3001
DEFAULT_AGENT=deepseek
DEFAULT_MODEL=deepseek-chat
DEFAULT_TOKEN=your-api-key-here
AGENT_TIMEOUT=180000

pnpm start

启动后：本机 3001 端口有助理服务。DEFAULT_AGENT=deepseek 时走 DeepSeek；改成 zhipu 走 ZhipuAI，改成 qwen 走 Qwen。DEFAULT_TOKEN 只在请求头没带密钥时生效。此时还没有打开设计器 AI 面板，下一步要把 config.ai.api 指过来。

再一个示例：设计器 config.ai.api 指向 /api/chat/completions

场景： 审批单配置页已经能打开，但 AI 要打你们自己的助理，而不是官网默认地址。

按下面做：

1. 确认上一节服务已起来，地址是 http://localhost:3001。
2. 设计器 config.ai.api 写成 http://localhost:3001/api/chat/completions。这是助理服务的对话接口，不是设计器组件方法。
3. config.ai.token 写成 Bearer your-api-key-here。服务端已经配了 DEFAULT_TOKEN 时，这项可以不写。
4. 打开配置页，点左侧「AI」，发一条「生成一个就诊满意度问卷表单」。
5. 点「预览」看画布；对话请求应打到本地服务，而不是官网。

<template>
    <fc-designer ref="designer" :config="config" />
</template>
<script setup>
    const config = {
        ai: {
            api: 'http://localhost:3001/api/chat/completions',
            token: 'Bearer your-api-key-here' // 服务端已配 DEFAULT_TOKEN 时可省略
        }
    }
</script>

请求头写法等价于：

const config = {
    ai: {
        api: 'http://localhost:3001/api/chat/completions',
        token: 'Bearer your-api-key-here'
    }
}

发送后：AI 面板的对话打到你们的 POST /api/chat/completions。Token 优先用请求头；没带才用 .env 里的 DEFAULT_TOKEN。画布规则仍由助理服务改写，业务同学不用自己调工具。把主机名换成内网域名即可嵌进 OA。

OA 里怎么用 showAi 隐藏 AI？DEFAULT_AGENT=other 怎么接自定义接口？

基本示例：OA 配置页 config.showAi = false

场景： 设计器嵌进 OA。这页给业务同学拖字段，不能出现 AI 面板。

按下面做：

1. 页面里仍放 fc-designer，把 config 传给 :config。
2. 写 showAi: false，不要只删掉 config.ai.token 就以为入口没了。
3. 打开这个页面，看左侧，不应再出现 AI 入口。
4. 点「预览」只看当前画布；这页没有 AI 对话。
5. 需要助理的审批单配置页继续用带 config.ai.token 的那套，两页不要共用同一份 showAi: false。

<template>
    <fc-designer ref="designer" :config="config" />
</template>
<script setup>
    const config = {
        showAi: false
    }
</script>

预览后：AI 模块被藏起来，左侧没有 AI 入口，对话区不会出现。画布、预览、拖拽仍可用。这只影响设计器展示，不会替你关掉已经启动的助理进程。

再一个示例：DEFAULT_AGENT=other + AGENT_API

场景： 公司已有 OpenAI 兼容对话接口，助理不要走 DeepSeek / ZhipuAI / Qwen 默认地址。

按下面做：

1. 还是同一份助理服务的 .env。
2. DEFAULT_AGENT 写成 other。
3. AGENT_API 写成你们兼容接口的完整 URL，例如官方占位 https://api.example.com/v1/chat/completions。
4. DEFAULT_TOKEN 写成该接口的密钥。
5. 服务启动后，设计器仍指向 http://localhost:3001/api/chat/completions，不要改成 AGENT_API 本身。

# .env
DEFAULT_AGENT=other
AGENT_API=https://api.example.com/v1/chat/completions
DEFAULT_TOKEN=your-custom-api-key

启动后：助理收到设计器的对话，再转发到 AGENT_API。deepseek、zhipu、qwen 不用写 AGENT_API；只有 other 才走这个变量。设计器侧字段还是 config.ai.api 和 config.ai.token，不要把 AGENT_API 填进 fc-designer 的 config。

AI 表单助理常见问题

Q: token 从哪申请？文档里的 Bearer fc-d8ed***********ffab0 能直接用吗？

A: Token 通过访问官网申请 API token。config.ai.token 的格式是 Bearer 加你的密钥。文档示例 Bearer fc-d8ed***************ffab0 是占位符，必须换成从官网获取的有效 token，不要当真实密钥，也不要自己拼申请路径。云端启用只写 config.ai.token 即可打开 AI 面板。

Q: config.ai.token 和 config.ai.api 有什么区别？请求头和 DEFAULT_TOKEN 谁优先？

A: config.ai.token 负责启用并把密钥放进请求头。config.ai.api 只在私有化时写，值是助理服务的 http://localhost:3001/api/chat/completions，对应 POST /api/chat/completions，不是设计器组件方法。私有化先启动助理，再让设计器指向这个地址。密钥优先用请求头；请求没带 Authorization 时，才用服务端 .env 的 DEFAULT_TOKEN。服务端已配 DEFAULT_TOKEN 时，设计器的 token 可以省略。

Q: 对话怎么写？历史存在哪？复制、删除、清除怎么点？

A: 提示词要写成字段清单，不要只说「做一个注册表单」。可先「创建一个建议收集表单，包含联系人、联系邮箱、分类和建议内容」，再「追加一个用户信息表单」；改错用「这个字段应该是数字类型」。发完后画布更新，点「预览」看渲染结果。流式步骤是分析需求、生成方案、执行操作、验证结果。消息右下角复制、删除；AI 面板头部清除。历史自动存本地存储，刷新可恢复。用户只在 AI 面板说话，不要自己去调助理内部工具。

Q: OA 里怎么隐藏 AI？DEFAULT_AGENT 四个值怎么选？

A: 给业务同学、不需要助理的页面写 config.showAi = false，AI 入口和面板都会藏掉；需要助理的审批单配置页不要共用这份配置。私有化 .env 里 DEFAULT_AGENT 可选 deepseek（默认，DeepSeek）、zhipu（ZhipuAI）、qwen（Qwen）、other（走 AGENT_API 的 OpenAI 兼容接口）。设计器始终连 config.ai.api 指向的助理服务，不要把 AGENT_API 填进 fc-designer。