如何用 Zion 实现 AI 输入预测与自动补全功能

在文本输入场景中，用户往往需要不断构思或重复输入内容。例如：

在搜索框中输入关键词

在聊天或写作中组织语句

在表单中填写常见内容

如果每次都完全依赖手动输入，不仅效率较低，也会影响整体体验。

通过 AI 输入预补全，可以在用户输入过程中提供预测内容，减少输入成本，并提升交互流畅度。

在 Zion 中，可以通过两种方式实现这一能力：

多项建议列表（提供多个候选项）

实时流式补全（逐字生成内容）

两种方式适用于不同场景，可以根据需求选择使用。

什么是 AI 输入内容预补全以及何时使用

功能或工作流是什么

AI 输入内容预补全，是指根据用户当前输入的内容，实时生成后续可能的文本，并以建议或补全形式呈现。

解决了什么问题

输入效率低，需要重复输入

用户缺乏表达思路或灵感

交互体验不够流畅

文本输入过程缺乏辅助能力

通过 AI 预测，可以将“输入”变成“选择或确认”，降低操作成本。

典型使用场景

搜索联想

用户输入关键词时自动补全搜索建议

提高搜索效率

内容创作辅助

提供句子补全或表达建议

帮助用户快速生成内容

聊天或即时通讯

自动预测回复内容

加快沟通节奏

表单与输入优化

自动填写常见字段

减少重复输入

AI 灵感工具

提供多个创意方向

用于标题生成或内容构思

不适用的情况（建议）

输入内容高度敏感或需严格控制

对输出准确性要求极高

不希望 AI 干预用户输入过程

如何在 Zion 中构建

方法一：多项建议列表

概述：提供多个由 AI 生成的独立选项供用户选择，并将所有建议保存到数据库中。

适用场景：搜索栏联想、AI 灵感激发工具或邮件主题生成。

核心逻辑：输入触发 -> 异步行为流 -> AI Agent（结构化数组） -> 数据库表 -> UI 列表（订阅模式）。

方法二：实时流式补全

概述：提供单个实时的、逐字生成的预测内容，作为行内建议无缝完成当前句子。

适用场景：快速聊天应用、文本编辑器或快速表单填写。

核心逻辑：输入触发 -> AI Agent（流式输出） -> 页面变量 -> UI 文本组件。

方法一：多项建议列表

此方法生成一组存储在数据库中的建议列表，允许用户从几个不同的补全方案中进行选择。

数据存储

为了处理 AI 生成的异步特性，我们将建议存储在一张表中，以便前端可以“订阅”它们的变化。

数据模型：创建名为  的数据表。建议记录

AI Agent配置

Agent必须返回结构化数据，以便后端逻辑处理多个选项。

AI Agent：创建Agent 。Agent_内容补全

输入参数：添加  (文本)。用户输入

提示词模板：

角色：你是一个文本补全助手。

任务详情：基于 ，返回 3 个不同的补全选项，每项不超过 10 个字。\{输入/用户输入\}

输出配置：设置为 结构化 (Structured)。定义一个  类型的字段，命名为 。ARRAY(STRING)suggestions

行为流搭建

名称：AI输入内容补充

执行方式：设置为 异步 。

节点逻辑：

用户输入：绑定到行为流参数 。content

补充文本：绑定到循环节点的  (item)。当前项

会话id：绑定到 AI 节点的 。id

数据源：选择 AI 节点输出的  数组。suggestions

开始节点：定义参数  (文本)。content

**AI 节点 (开始会话)**：选择 。将其输入参数绑定为行为流的 。Agent_内容补全content

**循环 (循环存储补全建议)**：

**添加数据 (存储补全建议)**：在循环内部，向  表插入一条记录。建议记录

UI 搭建与交互

输入框触发：在 输入框 组件的 值变化时触发 事件中，添加条件：。若满足条件，执行上述行为流。STRING_LEN(输入组件.输入框) >= 3

建议列表：在输入框下方放置一个 条件式容器，将其显示条件设置为 。在容器内放置一个 列表 组件。STRING_LEN(输入组件.输入框) >= 3

数据源：远程数据 -> 。建议记录

请求类型：订阅 — 必须使用订阅模式才能实时监听并显示新生成的记录。

数据限额：限制数据显示为 3 条。

数据筛选： 等于 。用户输入输入组件.输入框

排序：按 倒序 排列，确保展示最新的预测结果。id

绑定列表项内的文本组件，显示内容为 。当前项.补充文本

填入操作：在 列表项 的点击事件中，使用 设置输入组件值 将输入框内容更新为 。当前项.补充文本

建议关闭“触发对象值变化时行为”开关，防止回填操作再次触发新的 AI 生成行为。

验证

触发：在输入框中输入一段文字（如“他昨天”）。

观察：稍作等待后，输入框下方会出现包含 3 个不同 AI 生成选项的列表。

交互：点击任意一个建议选项。

结果：输入框内容立即更新为所选文本，建议列表随之消失。

方法二：实时流式补全

此方法提供一种即时的、逐字生成的预测预览，直接流式传输到 UI 组件中进行显示。

逻辑与状态配置

此方案不依赖数据库存储，而是使用页面变量进行临时状态管理和即时展示。

AI Agent配置

AI Agent：创建一个Agent（如 ）。Agent_流式文本补全

提示词模板：

角色：你是一个文本补全助手。

任务详情：基于提供的文本 ，预测并补全接来的内容。\{输入/用户输入\}

输出配置：设置为 纯文本。

流式输出：开启 流式输出 开关。

页面变量设置

在 页面管理 -> 数据 面板中，创建一个名为  的 页面变量 (类型：文本)。content

UI 搭建与交互

画布配置：

放置一个 输入框 组件供用户输入。

在下方放置一个 文本 组件，内容绑定为 。页面变量.content

流式交互：

选择 输入框，在 行为 -> 值变化时触发 中：

条件：。STRING_LEN(输入组件.输入框) >= 3

动作：AI -> 开始会话。

配置：选择上述流式Agent，并设置 将流式的最终结果增加到 指向 。页面变量.content

在配置“开始会话”动作时，可以关闭底部的“请求时显示加载动画”开关。这样可以确保流式文本生成时，页面不会被加载动画阻断，提供更平滑的补全效果。

建议采纳：

选择显示建议内容的 文本 组件。在 点击时 事件中：

动作 1：设置输入组件值 -> 目标： -> 值：。（关闭“触发对象值变化时行为”）输入框页面变量.content

动作 2：设置页面变量 -> 将  重置为空文本。content

验证

触发：在输入框输入文字（至少 3 个字符）。

观察：输入框下方将实时逐字生成预测文本。

交互：点击生成的预测文本组件。

结果：内容自动填入主输入框，且下方的临时预览文本被清空。

动手尝试并深入学习

两种方案适用于不同场景

可结合使用形成完整输入体验

可扩展为搜索、聊天或写作工具