AI 表单助理
AI 表单助理是一个可以帮助您快速生成和修改表单的强大工具，通过利用人工智能技术，使得表单设计更加高效和便捷。本文详细介绍如何在设计器中启用以及配置 AI 表单助理以提升您的工作效率。
功能特性
AI 表单助理提供以下核心功能：
- 智能表单生成: 根据自然语言描述自动生成表单结构
- 表单修改优化: 智能分析现有表单并提供改进建议
- 流式对话体验: 实时显示AI思考过程和执行步骤
- 消息历史管理: 自动保存对话历史，支持清除和恢复
启用 AI 表单助理
在开始使用 AI 表单助理之前，您需要配置相应的 API token。以下是如何在您的 Vue 项目中进行配置的步骤：
基础配置
通过设置 config.ai.token，您就能启用 AI 表单助理功能。
<template>
<fc-designer ref="designer" :config="config" />
</template>
<script setup>
const config = {
ai: {
token: 'Bearer fc-d8ed***************ffab0' // 请使用您从官网获取的有效 token
}
}
</script>提示: 您可以通过访问官网申请 API token来获取。
私有化部署
如果您希望在自己的服务器上部署 AI 表单助理服务，可以使用我们开源的 FormCreate AI 表单助理 项目。
安装部署
1. 克隆项目
# 克隆项目
git clone https://github.com/xaboy/form-create-assistant/
cd form-create-assistant
# 安装依赖
pnpm install2. 环境变量配置
创建 .env 文件（可选）：
# 服务端口（默认: 3001）
PORT=3001
# 默认 Agent 类型（默认: deepseek）
# 可选值: deepseek, zhipu, qwen, other
DEFAULT_AGENT=deepseek
# 默认模型（默认: deepseek-chat）
DEFAULT_MODEL=deepseek-chat
# 默认 API 密钥（可选，当请求中未提供 Authorization header 时使用）
DEFAULT_TOKEN=your-api-key-here
# Agent 请求超时时间（毫秒，默认: 180000，即 3 分钟）
AGENT_TIMEOUT=1800003. 启动服务
# 使用 tsx 直接运行
pnpm start服务启动后，默认监听 http://localhost:3001
设计器配置
部署好服务后，在设计器中配置私有化 AI 服务地址：
<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 兼容接口的私有化服务
配置示例：
# .env
DEFAULT_AGENT=other
AGENT_API=https://api.example.com/v1/chat/completions
DEFAULT_TOKEN=your-custom-api-keyAPI 密钥配置
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 模块
如果您希望暂时不使用或不显示 AI 模块功能，可以通过设置 config.showAi = false 来隐藏该模块。
<template>
<fc-designer ref="designer" :config="config" />
</template>
<script setup>
const config = {
showAi: false // 隐藏 AI 模块
}
</script>通过上述配置，您可以灵活地启动和利用 AI 表单助理功能以满足您的开发需求。AI 表单助理在为表单设计提供智能支持的同时，也保留了灵活性，可以根据特定业务场景进行调整。希望此文档能够帮助您更好地理解和使用 AI 表单助理。