AI 表单助理

AI 表单助理是一个可以帮助您快速生成和修改表单的强大工具，通过利用人工智能技术，使得表单设计更加高效和便捷。本文详细介绍如何在设计器中启用以及配置 AI 表单助理以提升您的工作效率。

功能特性

AI 表单助理提供以下核心功能：

智能表单生成: 根据自然语言描述自动生成表单结构
表单修改优化: 智能分析现有表单并提供改进建议
流式对话体验: 实时显示执行步骤与生成结果
深度思考模式: 开启后 AI 会先推理再作答，推理过程可在消息中展开查看
消息历史管理: 自动保存对话历史，支持清除和恢复

启用 AI 表单助理

在开始使用 AI 表单助理之前，您需要配置相应的 API token。以下是如何在您的 Vue 项目中进行配置的步骤：

基础配置

通过设置 config.ai.token，您就能启用 AI 表单助理功能。

vue

<template>
    <fc-designer ref="designer" :config="config" />
</template>

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

提示: 您可以通过访问官网申请 API token来获取。

config.ai 配置

通过 config.ai 配置 AI 表单助理的接口地址、鉴权信息与默认行为。完整类型如下：

export interface FcDesignerAiConfig {
    // 对话接口 URL，未配置时使用内置默认地址
    api?: string;
    // 请求头 Authorization
    token?: string;
    // 附带上下文的默认历史消息条数，有效范围 0–10（超出时运行时会裁剪）
    contextCount?: number;
    // 是否自动将流式返回的表单规则、函数代码等应用到当前设计器/编辑器
    autoApply?: boolean;
    // 是否默认开启深度思考模式，开启后 AI 先推理再作答，推理过程会实时展示在消息中
    thinking?: boolean;
}

字段	类型	默认值	说明
`api`	`string`	内置默认地址	对话接口 URL；私有化部署时填写自建服务地址
`token`	`string`	—	请求头 `Authorization`，用于鉴权
`contextCount`	`number`	`4`	请求时附带的历史消息条数，有效范围 `0–10`，超出范围会在运行时裁剪
`autoApply`	`boolean`	`true`	是否自动将流式返回的表单规则、函数代码等应用到当前设计；关闭后仅展示在对话中，可手动导入
`thinking`	`boolean`	`false`	是否默认开启深度思考；开启后 AI 先推理再作答，耗时更长但回答质量通常更高

说明：

contextCount、autoApply、thinking 均可在 AI 面板的上下文设置中调整；用户手动修改后会写入本地存储，并在后续会话中优先于配置默认值。
未在本地保存过对应偏好时，以 config.ai 中的值为准。

完整示例

vue

<template>
    <fc-designer ref="designer" :config="config" />
</template>

<script setup>
const config = {
    ai: {
        // 私有化服务地址（可选，不填则使用内置默认地址）
        api: 'http://localhost:3001/api/chat/completions',
        // API 鉴权
        token: 'Bearer fc-d8ed***************ffab0',
        // 默认附带 6 条历史消息作为上下文
        contextCount: 6,
        // 关闭自动应用，生成结果需手动导入
        autoApply: false,
        // 默认开启深度思考
        thinking: true,
    }
}
</script>

私有化部署

部署前请确认运行环境满足以下要求：

Node.js：v18 及以上（建议使用 LTS 版本，可用 node --version 检查）
包管理器：pnpm

1. 安装依赖

bash

pnpm install

2. 环境变量配置

创建 .env 文件（可选）：

bash

# 服务端口（默认: 3001）
PORT=3001

# Other Agent 的自定义 API 端点（用于自定义 OpenAI 兼容接口）
# AGENT_API=https://api.example.com/v1/chat/completions

# Agent 请求超时时间（毫秒，默认: 180000，即 3 分钟）
AGENT_TIMEOUT=180000

# 默认 Agent 类型（默认: deepseek）
# 可选值: deepseek, zhipu, qwen, other
DEFAULT_AGENT=deepseek

# 默认模型（默认: deepseek-v4-flash）
DEFAULT_MODEL=deepseek-v4-flash

# 默认 API 密钥（可选，当请求中未提供 Authorization header 时使用）
DEFAULT_TOKEN=your-api-key-here

# 是否为 FormCreate 设计器高级版, 部分组件和功能只有高级版支持
FORM_CREATE_BUSINESS=true

# ============================================
# 思考模式配置
# 由客户端请求参数 thinking 控制开关, 以下变量用于调整各服务商的具体参数
# ============================================

# qwen: 思考过程的最大 token 数, 不配置则使用服务商默认值
# QWEN_THINKING_BUDGET=4096

# other: 自定义服务商开启思考的参数风格 (默认: none, 即不支持思考模式)
#   thinking          - 请求体追加 thinking: { type: 'enabled' | 'disabled' }, 智谱/火山方舟风格
#   enable_thinking   - 请求体追加 enable_thinking: true | false, 通义千问风格
#   reasoning_effort  - 请求体追加 reasoning_effort, OpenAI 风格
#   model             - 切换到 AGENT_THINKING_MODEL 指定的模型, deepseek 风格
#   none              - 不追加任何参数
# AGENT_THINKING_STYLE=none

# other: AGENT_THINKING_STYLE=reasoning_effort 时的思考强度 (默认: medium)
# AGENT_REASONING_EFFORT=medium

# other: AGENT_THINKING_STYLE=model 时开启思考所切换到的模型
# AGENT_THINKING_MODEL=deepseek-reasoner

3. 启动服务

开发模式：

bash

# 使用 tsx 直接运行
pnpm start

生产模式（推荐使用启动脚本）：

bash

# 启动服务（后台运行）
./start.sh start

# 前台运行（查看实时日志）
./start.sh start -f

# 停止 / 重启 / 查看状态 / 查看日志
./start.sh stop
./start.sh restart
./start.sh status
./start.sh logs

服务启动后，默认监听 http://localhost:3001

设计器配置

部署好服务后，在设计器中配置私有化 AI 服务地址：

vue

<template>
    <fc-designer ref="designer" :config="config" />
</template>

<script setup>
const config = {
    ai: {
        // 私有化服务地址
        api: 'http://localhost:3001/api/chat/completions',
        // API 密钥（可选，如果服务端配置了 DEFAULT_TOKEN 可省略）
        token: 'Bearer your-api-key-here',
    }
}
</script>

支持的 AI 服务

DeepSeek（默认）

Agent 类型: deepseek
API 端点: https://api.deepseek.com/v1/chat/completions
获取密钥: DeepSeek 官网

智谱 AI (ZhipuAI)

Agent 类型: zhipu
API 端点: https://open.bigmodel.cn/api/paas/v4/chat/completions
获取密钥: 智谱 AI 开放平台

通义千问 (Qwen)

Agent 类型: qwen
API 端点: https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions
获取密钥: 阿里云 DashScope

自定义 OpenAI 兼容接口

Agent 类型: other
API 端点: 通过 AGENT_API 环境变量配置
适用场景: 部署了 OpenAI 兼容接口的私有化服务

配置示例：

bash

# .env
DEFAULT_AGENT=other
AGENT_API=https://api.example.com/v1/chat/completions
DEFAULT_TOKEN=your-custom-api-key
# 若该服务支持思考模式，按实际协议选择参数风格
# AGENT_THINKING_STYLE=thinking

API 密钥配置

API 密钥可以通过以下方式提供：

请求头传递（推荐）：

在设计器配置中设置 token：

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

环境变量配置（可选）：

如果请求中未提供 API 密钥，系统会使用服务端 .env 文件中的 DEFAULT_TOKEN 值。

注意：优先使用请求头中的 API 密钥，如果请求头中未提供，才会使用环境变量中的 DEFAULT_TOKEN。

更多详细信息，请参考 FormCreate AI 表单助理。

使用实例

AI 表单助理可以根据不同需求自动生成和修改表单。以下是一些典型使用场景的示例，帮助您快速掌握这些功能：

基础表单生成

生成一个就诊满意度问卷表单
创建一个建议收集表单，包含联系人、联系邮箱、分类和建议内容
追加一个用户信息表单

组件操作

添加一个标签组件，显示文本为 "Tag"
删除商品简介字段
商品价格字段使用数字输入框组件

条件逻辑

当单选框选择 "选项1" 时，显示输入框组件
根据出生日期自动计算年龄
根据商品单价和数量自动计算总价

验证规则

设置输入框为必填，并限制长度必须大于13
添加手机号格式验证
添加自定义验证：确认密码必须与密码一致

样式优化

给输入类组件补充占位提示文本（placeholder）
将姓名和手机号并排显示在同一行

高级功能

生成一个Vue组件，实现金额输入框
生成一个js版本的高精度加法

最佳实践

1. 清晰的指令描述

推荐做法：

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

避免：

做一个注册表单

2. 分步骤操作

对于复杂需求，建议分步骤进行：

先生成基础表单结构
再添加验证规则
最后调整样式和布局

3. 利用上下文

AI 表单助理会记住之前的对话内容，您可以：

用户：生成一个商品信息表单
AI：已生成包含商品名称、价格、描述的表单


用户：添加库存字段
AI：已添加库存数量字段

4. 错误处理

如果AI生成的结果不符合预期，您可以：

直接说明问题："这个字段应该是数字类型"
提供具体修改要求："将价格字段改为必填"
重新描述需求："我需要的是下拉选择，不是输入框"

对话管理

消息操作

复制消息: 点击消息右下角的复制按钮
删除消息: 点击消息右下角的删除按钮
清除对话: 点击AI面板头部的清除按钮

历史记录

对话历史会自动保存到本地存储
刷新页面后可以恢复之前的对话

执行步骤

AI 在处理复杂请求时，会在对话中展示工具执行步骤，例如分析需求、生成方案、修改表单与校验结果，便于了解当前进度。

深度思考

在 AI 面板的上下文设置中，可开启「深度思考」。开启后，AI 会先进行推理再输出正式回答：

推理过程会以可折叠区块实时展示在消息中（思考中 / 已深度思考）
推理结束后区块默认收起，可随时展开回看
回答质量通常更高，但耗时也会更长
生成过程中不可切换该开关；用户选择会保存在本地，下次打开面板时沿用

默认开关可通过 config.ai.thinking 设置，详见上方 config.ai 配置。

利用 AI 表单助理，您不但可以大幅减少手动编码的时间，还能灵活调整表单以适应各种业务需求，从而在复杂项目中更高效地创建和管理表单。

隐藏 AI 模块

如果您希望暂时不使用或不显示 AI 模块功能，可以通过设置 config.showAi = false 来隐藏该模块。

vue

<template>
    <fc-designer ref="designer" :config="config" />
</template>

<script setup>
const config = {
    showAi: false  // 隐藏 AI 模块
}
</script>

通过上述配置，您可以灵活地启动和利用 AI 表单助理功能以满足您的开发需求。AI 表单助理在为表单设计提供智能支持的同时，也保留了灵活性，可以根据特定业务场景进行调整。希望此文档能够帮助您更好地理解和使用 AI 表单助理。

Vue3

Vue2

Vue3

Vue2

AI 表单助理

功能特性

启用 AI 表单助理

基础配置

config.ai 配置

完整示例

私有化部署

1. 安装依赖

2. 环境变量配置

3. 启动服务

设计器配置

支持的 AI 服务

API 密钥配置

使用实例

基础表单生成

组件操作

条件逻辑

验证规则

样式优化

高级功能

最佳实践

1. 清晰的指令描述

2. 分步骤操作

3. 利用上下文

4. 错误处理

对话管理

消息操作

历史记录

执行步骤

深度思考

隐藏 AI 模块

AI 表单助理 ​

功能特性 ​

启用 AI 表单助理 ​

基础配置 ​

config.ai 配置 ​

完整示例 ​

私有化部署 ​

1. 安装依赖 ​

2. 环境变量配置 ​

3. 启动服务 ​

设计器配置 ​

支持的 AI 服务 ​

API 密钥配置 ​

使用实例 ​

基础表单生成 ​

组件操作 ​

条件逻辑 ​

验证规则 ​

样式优化 ​

高级功能 ​

最佳实践 ​

1. 清晰的指令描述 ​

2. 分步骤操作 ​

3. 利用上下文 ​

4. 错误处理 ​

对话管理 ​

消息操作 ​

历史记录 ​

执行步骤 ​

深度思考 ​

隐藏 AI 模块 ​

AI 表单助理

功能特性

启用 AI 表单助理

基础配置

config.ai 配置

完整示例

私有化部署

1. 安装依赖

2. 环境变量配置

3. 启动服务

设计器配置

支持的 AI 服务

API 密钥配置

使用实例

基础表单生成

组件操作

条件逻辑

验证规则

样式优化

高级功能

最佳实践

1. 清晰的指令描述

2. 分步骤操作

3. 利用上下文

4. 错误处理

对话管理

消息操作

历史记录

执行步骤

深度思考

隐藏 AI 模块