ai-chatbot/docs/智能体页面开发文档.md
Your Name 4b820f8ff4
Some checks failed
Lint / build (20) (push) Has been cancelled
Playwright Tests / test (push) Has been cancelled
Add canvas agent mode and management
2026-03-10 19:56:25 +08:00

31 KiB
Raw Permalink Blame History

智能体页面开发文档(基于当前 ai-chatbot-main)

目标:在现有“无限画布 + 画布对话 + 多模型生成”体系上,直接基于现有画布页改造出“智能体模式”。
页面形态:一侧为智能体界面,另一侧为现有对话框界面;底层仍使用画布项目、画布对话和媒体落盘能力。


1. 需求目标

本期不是重做一套生成系统,而是在现有项目基础上,把现有画布页改造成“智能体模式”:

  1. 不新增独立业务形态,仍然基于现有画布界面
  2. 画布页在“智能体模式”下采用左右双栏:
    • 一侧为智能体面板
    • 一侧为现有对话框界面
  3. 智能体面板分为:
    • 公共智能体区
    • 私有智能体区
  4. 公共智能体区支持按分类筛选查看
  5. 用户创建智能体时可:
    • 选择已有分类
    • 创建新分类
  6. 用户可以创建新的智能体,智能体需支持:
    • 类型:生图模型 / 视频模型
    • 自定义名称
    • 智能体分类
    • 选择对应的模型
    • 多个槽位配置
    • 每个槽位一套提示词
    • 每个槽位对应一组参考图
    • 默认参数模板
    • 公开 / 私有
  7. 用户点击某个智能体后,可将其以“标签/卡片”的形式挂载到现有对话框界面
  8. 后端在发送时自动注入该智能体的预设提示词和参考图
  9. 用户只需在现有对话框中:
    • 按槽位数量上传对应数量的图片
    • 可选补充提示词
    • 点击发送
  10. 后端会按槽位顺序一张张生成
  11. 后端完成生图或生视频后,结果先展示在现有对话消息流里,并继续落盘到画布项目数据中

2. 当前系统可复用能力

本项目已经具备实现该页面的大部分基础设施,不建议另起一套链路。

2.1 前端可复用能力

  • 画布主页面:app/canvas/[id]/page.tsx
    • 已具备画布容器、自动保存、浮动工具栏
  • 画布工作区:components/canvas/CanvasWorkspace.tsx
    • 已具备图片、视频、文本、3D 节点渲染
  • 画布对话面板:components/canvas/CanvasChatPanel.tsx
    • 已具备上传图片、模型选择、消息发送、结果流式回注画布
  • 画布状态:store/canvas/index.ts
    • 已具备节点管理、选中状态、附件暂存、自动保存等能力
  • 画布类型:types/canvas/index.ts
    • 已支持 image、video、text、model3d

2.2 后端可复用能力

  • 画布项目持久化:
    • GET/POST /api/canvas
    • GET/PUT/DELETE /api/canvas/[id]
  • 图片上传:
    • POST /app/(chat)/api/files/upload/route.ts
  • 模型列表获取:
    • GET /app/(chat)/api/models/route.ts
  • 统一聊天/Agent 生成主链路:
    • POST /app/(chat)/api/chat/route.ts
  • 画布图片生成直连能力:
    • POST /app/api/canvas/generate/image/route.ts

2.3 数据层基础

  • 画布项目表:CanvasProject
  • 模型表:AiModel
  • 统一媒体资产表:MediaAsset
  • 用户表:User
  • 系统设置表:SystemSettings

2.4 当前已有但不足以直接承载智能体的能力

当前已有“画布快捷标签”机制:

  • 配置定义:lib/canvas-skill-tags.ts
  • 接口:app/api/canvas-skill-tags/route.ts
  • 使用位置:components/canvas/CanvasChatPanel.tsx

但它不适合直接扩展为正式智能体,因为:

  1. 只能做全局配置,不能用户自建
  2. 没有公共/私有隔离
  3. 没有分类体系
  4. 没有参考图绑定
  5. 主要依赖前端拼 hiddenPrompt
  6. 无法形成正式智能体资产

因此本功能建议升级为独立的数据模型,而不是继续放在 SystemSettings 或 canvasSkillTags 中;但前端页面层面不单独新开一页,而是直接复用当前画布页。


3. 产品形态建议

3.1 页面入口

建议不新增 /agents 独立路由,直接基于现有画布页实现:

  • 继续使用:/canvas/[id]
  • 增加模式概念:
    • 标准画布模式
    • 智能体模式

推荐行为:

  1. 访问 /canvas/[id] 时可通过顶部入口或参数切到“智能体模式”
  2. 智能体模式底层仍复用 CanvasProject
  3. 生成结果仍落到当前画布项目中
  4. 后续如需恢复可视化画布编辑,可在同一项目里切回标准画布模式

3.2 页面布局

桌面端建议采用左右 1:1 分栏:

  • 左侧 50%:智能体工具区
    • 顶部:搜索 / 类型筛选 / 新建按钮
    • 公共区顶部:分类筛选栏(全部 + 分类 Tab/下拉)
    • 中部:公共智能体区
    • 下部:私有智能体区
    • 点击卡片后变为当前激活智能体
  • 右侧 50%:现有对话框界面
    • 直接复用 CanvasChatPanel
    • 保留原有消息流、上传、模型选择、发送能力
    • 智能体只作为额外的预设注入层

说明:

  • 首版不再把半屏留给 CanvasWorkspace 常驻展示
  • 结果展示以现有对话消息流为主
  • 生成结果仍继续落盘到画布项目,后续可以通过“切回标准画布模式”查看和编辑

3.3 交互约束

MVP 建议限制:

  1. 单轮仅允许激活 1 个智能体
  2. 智能体类型二选一:
    • image:生图智能体
    • video:生视频智能体
  3. 创建为公开后,立即出现在公共区
  4. 参考图统一绑定媒体资产
  5. 公共区默认只支持单分类筛选
  6. 每次执行都生成一份“执行快照”,用于复盘和复现
  7. 首版不改造原对话框核心交互,只在其上叠加智能体注入能力

4. 核心用户流程

4.1 创建智能体

  1. 用户点击“新建智能体”
  2. 弹出表单,填写:
    • 智能体头像
    • 智能体名称
    • 智能体类型(生图 / 视频)
    • 可见性(公开 / 私有)
    • 智能体分类(选择已有分类 / 新建分类)
    • 对应模型(生图智能体只能选生图模型,视频智能体只能选视频模型)
    • 多个槽位(支持新增/删除/排序)
    • 每个槽位填写:
      • 提示词
      • 参考图(可多张)
      • 可选参数覆盖
  3. 前端先调用上传接口上传参考图
  4. 后端保存智能体记录
  5. 若勾选“公开”,则直接出现在公共区,并归入对应分类
  6. 若勾选“私有”,则出现在私有区;分类字段保留,便于后续扩展

4.1.1 公共智能体另存为私有

建议首版就支持:

  1. 用户在公共智能体卡片上点击“另存为我的智能体”
  2. 系统复制一份智能体到当前用户名下
  3. 默认写入:
    • visibility=private
    • forkedFromPresetId=原公共智能体ID
  4. 用户可继续修改:
    • 名称
    • 提示词
    • 默认模型
    • 默认参数模板
    • 参考图

这样更符合真实使用习惯:公共智能体用于发现,私有智能体用于个性化沉淀。

4.2 使用智能体

  1. 用户点击某个智能体卡片
  2. 底部对话框出现智能体标签
  3. 标签展示:
    • 头像
    • 名称
    • 类型
    • 分类
    • 默认模型
    • 槽位数量
    • 需要上传的图片数量
  4. 用户统一上传 3 张素材图:
    • 产品图1
    • 产品图2
    • 模特图
  5. 用户可补充一句额外提示词
  6. 点击发送

使用约束:

  • 即使智能体配置了 10 个槽位,前端也只提示上传 3 张素材图
  • 上传数量不足时,不允许发送
  • 这 3 张素材图会被后端在所有槽位中重复使用

4.3 后端执行

  1. 请求携带 agentPresetId
  2. 后端查询智能体定义
  3. 后端校验当前用户是否有权限使用
  4. 后端合并:
    • 智能体槽位列表
    • 每个槽位的提示词
    • 每个槽位的参考图
    • 智能体默认参数模板
    • 用户上传的 3 张素材图
    • 用户补充提示词
    • 当前工作台上下文
  5. 根据智能体类型进入:
    • 图片生成链路
    • 视频生成链路
  6. 后端按槽位顺序串行执行
  7. 每完成一个槽位,先回一条结果
  8. 结果通过现有流式消息返回
  9. 结果先回到现有对话框消息流
  10. 同时继续写入当前画布项目数据,便于后续切回标准画布查看

4.4 结果展示

继续复用现有 data-canvasMedia 流:

  • 图片结果 -> 新增 image 节点
  • 视频结果 -> 新增 video 节点

5. 技术方案

5.1 总体原则

  1. 不新造一套生成后端,继续复用 /api/chat
  2. 不新造独立页面,直接改造现有 /canvas/[id]
  3. 不复制现有对话框,继续复用 CanvasChatPanel
  4. 不继续使用系统设置存智能体,改为正式数据表
  5. 智能体 prompt 必须由服务端注入
  6. 结果继续走现有消息流展示与画布项目落盘逻辑
  7. 每次发送必须持久化一份不可变的执行快照

5.2 页面结构建议

建议新增文件:

  • components/agents/AgentPresetPanel.tsx
  • components/agents/AgentPresetCard.tsx
  • components/agents/AgentCategoryTabs.tsx
  • components/agents/AgentPresetDialog.tsx
  • services/agents/index.ts
  • types/agent.ts
  • store/agent-workbench.ts

建议修改文件:

  • app/canvas/[id]/page.tsx
    • 增加“智能体模式”布局
    • 将主界面切为“智能体面板 + 原对话框界面”
  • components/top-navbar.tsx
    • 新增“智能体”入口
    • 入口行为建议直接跳转到最近画布并以 mode=agent 打开
  • components/canvas/CanvasChatPanel.tsx
    • 接收 agentPresetId / 智能体标签注入
  • app/(chat)/api/chat/schema.ts
    • 扩展请求体,允许传入 agentPresetId
  • app/(chat)/api/chat/route.ts
    • 服务端读取并注入智能体定义
  • lib/db/schema.ts
    • 新增智能体相关表
  • lib/db/queries.ts
    • 增加智能体 CRUD 与分类查询

5.3 组件复用策略

A. 智能体面板

新增左侧 AgentPresetPanel:

  • 负责公共/私有智能体列表
  • 分类筛选
  • 新建智能体
  • 选择智能体

B. 对话能力

直接复用 CanvasChatPanel:

  • 保留现有消息流
  • 保留现有上传/发送能力
  • 在发送前额外注入 agentPresetId
  • 在输入区显示当前选中的智能体标签

这样可以最大化复用现有画布页和现有对话框。


6. 数据库设计

6.1 新增表:AgentPreset

建议新增正式智能体表,而不是继续放在 SystemSettings。

字段 类型 说明
id uuid 主键
ownerUserId uuid 创建者
name varchar(128) 智能体名称
type varchar(16) image / video
visibility varchar(16) public / private
categoryId uuid nullable 智能体分类
promptTemplate text 首槽位提示词摘要/检索字段
description text 可选描述
defaultModelId uuid nullable 默认模型,关联 AiModel.id
defaultParams jsonb nullable 默认参数模板
slotCount integer 槽位数量
requiredUploadCount integer 需要上传的图片数量
coverAssetId uuid nullable 智能体头像
status varchar(16) active / disabled
sortOrder integer 排序
usageCount integer 使用次数
lastUsedAt timestamp nullable 最近使用时间
forkedFromPresetId uuid nullable 从哪个公共智能体复制而来
createdAt timestamp 创建时间
updatedAt timestamp 更新时间

说明:

  • visibility=public:所有已登录用户可见
  • visibility=private:仅创建者可见
  • promptTemplate 退化为摘要字段,真正执行以槽位配置为准
  • categoryId 首期主要用于公共区分类筛选,也可保留给私有区未来扩展
  • defaultParams 用于沉淀默认比例、张数、视频模式、时长等参数,不只存默认模型
  • forkedFromPresetId 用于支持“另存为我的智能体”和后续来源追踪
  • usageCount、lastUsedAt 便于做热门排序、最近使用和运营分析

6.2 新增表:AgentPresetSlot

每个槽位代表“一套提示词 + 一组参考图 + 一张用户上传图”。

字段 类型 说明
id uuid 主键
presetId uuid 关联 AgentPreset.id
slotIndex integer 槽位顺序,从 0 开始
title varchar(128) nullable 槽位名称
promptTemplate text 该槽位提示词
defaultParams jsonb nullable 槽位级参数覆盖
requireUpload boolean 是否要求用户上传对应图片
uploadLabel varchar(128) nullable 上传提示文案
createdAt timestamp 创建时间
updatedAt timestamp 更新时间

说明:

  • 当前版本默认 requiredUploadCount=3
  • 执行时按 slotIndex 顺序串行处理
  • 后续若需要“部分槽位不上传图”,可通过 requireUpload=false 扩展

6.3 新增表:AgentPresetCategory

用于给公共智能体区提供分类筛选,也支持用户创建新分类。

字段 类型 说明
id uuid 主键
name varchar(64) 分类名称
slug varchar(64) 分类标识
scope varchar(16) public / private / global
createdBy uuid nullable 创建人
sortOrder integer 排序
isEnabled boolean 是否启用
createdAt timestamp 创建时间
updatedAt timestamp 更新时间

说明:

  • MVP 建议允许用户在创建智能体时输入新分类名,若不存在则自动创建
  • 若智能体为公开,分类建议归入 public 或 global
  • 公共区默认展示 public/global 分类
  • 若后续要治理分类,可以再补后台合并/禁用能力
  • 分类创建时应先做 slug 标准化,再做重名复用,避免出现多个语义相同分类
  • 后续后台需支持“分类合并”,用于把重复分类归并到一个正式分类下

6.4 新增表:AgentPresetReferenceAsset

用于绑定参考图,避免把 URL 直接写死在智能体表。

字段 类型 说明
id uuid 主键
presetId uuid 关联 AgentPreset.id
slotId uuid nullable 关联 AgentPresetSlot.id
assetId uuid 关联 MediaAsset.id
sortOrder integer 参考图顺序
createdAt timestamp 创建时间

说明:

  • 参考图建议全部走 MediaAsset
  • 每张参考图应归属于某个槽位
  • 后续若要做公共智能体复制、统计、缓存,会更稳定

6.5 扩展表:CanvasProject

为了让同一个画布项目支持“标准画布模式 / 智能体模式”切换,建议给 CanvasProject 增加:

字段 类型 说明
workspaceType varchar(16) canvas / agent

默认值:

  • 旧画布默认 canvas
  • 当画布被用作智能体模式项目时写 agent

6.6 新增表:AgentPresetExecutionSnapshot

用于记录每一次发送时实际生效的智能体快照,保证结果可追溯、可复盘。

字段 类型 说明
id uuid 主键
presetId uuid 关联 AgentPreset.id
projectId uuid nullable 工作台/画布项目
chatId uuid nullable 对话 ID
messageId uuid nullable 触发消息 ID
userId uuid 执行用户
presetName varchar(128) 执行时的智能体名称快照
presetType varchar(16) image / video
visibility varchar(16) 执行时可见性
categoryId uuid nullable 执行时分类
categoryName varchar(64) nullable 执行时分类名快照
promptTemplate text 执行时预设词快照
defaultModelId uuid nullable 执行时默认模型
resolvedModelId uuid nullable 实际执行模型
defaultParams jsonb nullable 执行时默认参数模板
slotCount integer 执行时槽位数量
requiredUploadCount integer 执行时要求上传的图片数量
slots jsonb 执行时完整槽位快照
referenceAssetIds jsonb 执行时参考图资产 ID 列表
referenceImageUrls jsonb 执行时参考图 URL 列表
userInputText text 用户补充提示词
requestPayload jsonb 最终调用载荷摘要
createdAt timestamp 创建时间

说明:

  • 该表是“不可变执行记录”,不随智能体后续编辑而改变
  • 用于排查“为什么同一个智能体今天出图和昨天不一样”
  • 也可用于后续做“复跑本次配置”

6.7 迁移建议

当前 lib/db/migrations 已存在到 0052,本期建议新增:

  • 0053_add_agent_presets.sql

7. 接口设计

7.1 智能体接口

GET /api/agents

用途:获取当前用户可见的智能体列表

建议支持查询参数:

  • scope=all | public | private
  • type=image | video
  • categoryId=xxx
  • keyword=xxx
  • sort=latest | hottest | most_used

返回建议:

{
  "success": true,
  "data": {
    "categories": [],
    "public": [],
    "private": []
  }
}

POST /api/agents

用途:创建智能体

请求体建议:

{
  "name": "商品主图增强",
  "type": "image",
  "visibility": "private",
  "categoryId": "uuid",
  "newCategoryName": "电商主图",
  "defaultModelId": "uuid",
  "defaultParams": {
    "aspectRatio": "1:1",
    "imageCount": 1
  },
  "slots": [
    {
      "title": "第1张主图",
      "promptTemplate": "请把用户上传的商品图做成干净高级的主图视觉。",
      "referenceAssetIds": ["uuid1"]
    },
    {
      "title": "第2张卖点图",
      "promptTemplate": "请基于用户上传的商品图突出核心卖点与材质质感。",
      "referenceAssetIds": ["uuid2"]
    }
  ]
}

说明:

  • categoryId 和 newCategoryName 二选一
  • 若传了 newCategoryName,后端先创建或复用同名分类,再回填 categoryId
  • slots 至少 1 组,最多建议 20 组
  • 每个槽位对应 1 次顺序生成
  • 用户使用时统一只上传 3 张素材图:产品图1、产品图2、模特图
  • 分类创建前应做名称清洗、slug 标准化和重名复用

GET /api/agents/[id]

用途:获取单个智能体详情

PUT /api/agents/[id]

用途:编辑智能体

DELETE /api/agents/[id]

用途:删除智能体

POST /api/agents/[id]/fork

用途:把公共智能体复制为“我的智能体”

请求体建议:

{
  "name": "我的商品主图增强"
}

返回:

  • 一份新的 visibility=private 智能体
  • forkedFromPresetId 指向原公共智能体

GET /api/agent-categories

用途:获取智能体分类列表

建议支持:

  • scope=public | private | all

POST /api/agent-categories

用途:创建分类

请求体建议:

{
  "name": "电商主图",
  "scope": "public"
}

说明:

  • 也可以不单独暴露该接口,而是在 POST /api/agents 时隐式创建分类
  • 若希望分类治理更规范,建议保留独立接口

7.2 对现有聊天接口的扩展

扩展 POST /api/chat

建议在 app/(chat)/api/chat/schema.ts 新增字段:

agentPresetId?: string;

必要时可增加:

agentPresetType?: "image" | "video";

前端发送时的请求体建议

{
  "id": "workspace-id",
  "message": {
    "id": "message-id",
    "role": "user",
    "parts": [
      { "type": "file", "mediaType": "image/png", "name": "demo.png", "url": "..." },
      { "type": "text", "text": "帮我再强化一点高级感" }
    ]
  },
  "selectedChatModel": "model-id",
  "selectedVisibilityType": "private",
  "agentPresetId": "preset-id"
}

服务端合成策略

服务端不要完全信任前端拼出来的 prompt,而应以数据库智能体定义为准:

最终执行输入建议:

  1. 智能体槽位:来自 AgentPresetSlot
  2. 槽位参考图:来自 AgentPresetReferenceAsset
  3. 智能体默认参数模板:来自 AgentPreset.defaultParams
  4. 用户上传图:按槽位顺序映射
  5. 用户补充提示词:来自本轮 text part
  6. 当前工作台上下文:可复用现有 contextPayload

合成优先级建议:

系统路由/安全限制
  -> 按槽位逐个取出 promptTemplate
  -> 智能体 defaultParams
  -> 用户补充提示词
  -> 画布上下文 autoContext/contextPayload

顺序执行规则

后端应按槽位串行执行,而不是一次并发全部发起:

  1. 校验用户上传图片数量是否满足 requiredUploadCount
  2. 用户统一上传 3 张素材图:产品图1、产品图2、模特图
  3. 每个槽位都会复用这 3 张素材图
  4. 依次类推,直到最后一个槽位
  5. 每个槽位完成后立即回传对应结果

例如:

  • 智能体配置了 10 个槽位
  • 用户仍然只上传 3 张素材图
  • 则发送前前端明确提示“请上传产品图1、产品图2、模特图”
  • 后端按顺序一张张生成,共生成 10 次,并在每个槽位重复使用这 3 张素材图

执行快照写入策略

每次使用智能体发送时,后端建议同步写入一条 AgentPresetExecutionSnapshot:

  1. 读取智能体定义
  2. 解析本轮用户上传图
  3. 生成本次执行的槽位展开结果
  4. 计算最终执行模型与参数
  5. 在真正调用模型前写入快照
  6. 将快照 ID 回写到消息或结果节点 metadata

类型路由规则

  • image 智能体:
    • 仅允许走图片生成/图片编辑能力
  • video 智能体:
    • 仅允许走视频生成能力

若用户选了不兼容模型:

  • 前端优先过滤
  • 后端再次校验,不兼容则报错

8. 前端行为设计

8.1 智能体面板

右侧建议结构:

  1. 顶部工具栏
    • 搜索框
    • 类型筛选(全部/生图/视频)
    • 分类筛选(全部 + 分类 Tab/下拉)
    • “新建智能体”按钮
  2. 公共智能体区
    • 所有 visibility=public
    • 支持按分类切换
  3. 私有智能体区
    • 当前用户创建且 visibility=private

卡片字段建议展示:

  • 名称
  • 类型标签(生图 / 视频)
  • 分类名称
  • 可见性标签(公共 / 私有)
  • 默认模型名称
  • 默认参数摘要
  • 参考图数量
  • 智能体头像
  • 创建人(公共区建议展示)
  • 使用次数 / 最近更新(公共区建议展示)

8.2 对话输入区

现有对话框界面建议包含:

  1. 当前激活智能体标签
  2. 原有图片上传入口
  3. 原有输入框
  4. 原有模型选择器
  5. 原有发送按钮

标签行为:

  • 点击智能体卡片 -> 激活并显示标签
  • 再点击同一个标签 -> 可取消激活
  • 切换到另一个智能体 -> 替换当前标签

MVP 不建议一次选择多个智能体。 首版尽量不改原有输入区主结构,只在现有输入区上增加“智能体标签”和必要的预设注入提示。

8.3 新建智能体弹窗建议

表单字段建议:

  1. 智能体头像
  2. 智能体名称
  3. 智能体类型
  4. 可见性
  5. 分类选择
    • 下拉展示已有分类
    • 支持“新建分类”
    • 选择“新建分类”后出现输入框
  6. 对应模型选择
    • 若类型为 image,只展示支持生图的模型
    • 若类型为 video,只展示视频模型
  7. 默认参数模板
  8. 槽位配置区
    • 支持新增/删除/排序槽位
    • 每个槽位填写:
      • 提示词
      • 参考图
      • 可选参数覆盖
      • 上传提示语

交互建议:

  • 当用户选择 visibility=public 时,分类必填
  • 当用户选择 visibility=private 时,分类可选
  • 若输入的新分类名已存在,后端直接复用
  • 当用户切换智能体类型时,模型下拉列表要立即联动刷新
  • 若用户已选模型与新类型不兼容,前端应清空当前模型并提示重新选择
  • 增加一个“预览执行内容”区域,展示将被注入的槽位数、默认模型、默认参数和总参考图数量
  • 即使槽位数为 10,也应明确展示“使用时需要上传 3 张素材图:产品图1、产品图2、模特图”

8.3.1 使用时的上传校验

当用户选中某个智能体后,现有对话框界面需要显示:

  • 该智能体共有多少个槽位
  • 本次必须上传多少张图片
  • 固定上传哪几类图片

建议交互:

  1. 当前版本 requiredUploadCount = 3
    • 输入区上方明确显示:请上传产品图1、产品图2、模特图
  2. 未达到数量时:
    • 发送按钮禁用
    • 或点击后给出明确报错
  3. 达到数量后:
    • 在附件区按顺序展示 产品图1 / 产品图2 / 模特图
  4. 槽位生成阶段:
    • 系统在每个槽位重复使用这 3 张素材图

8.4 模型选择策略

根据智能体类型过滤模型:

  • 生图智能体:只显示支持图片生成的模型
  • 视频智能体:只显示视频模型

创建/编辑智能体时建议直接强制要求用户选择对应模型,不建议首版留空走系统默认,否则公共智能体可复现性会变差。

默认行为:

  1. 若智能体配置了默认模型,则优先用该模型
  2. 若智能体配置了默认参数模板,则优先套用
  3. 若未配置,则走系统默认模型和系统默认参数
  4. 用户可手动改模型,但必须满足类型限制

8.5 结果落画布

继续复用 CanvasChatPanel 的现有结果消费机制:

  • 前端主展示:现有对话消息流
  • 项目持久化:继续写入当前画布项目
  • 后续查看:可切回标准画布模式查看图片/视频节点

建议给节点 metadata 增加:

  • agentPresetId
  • agentPresetName
  • agentCategoryId
  • agentCategoryName
  • agentExecutionSnapshotId
  • workspaceType: "agent"

9. 后端实现细节建议

9.1 服务端必须接管智能体 prompt 注入

正式方案应改为:

  1. 前端只传 agentPresetId
  2. 服务端查询智能体
  3. 服务端注入:
    • promptTemplate
    • reference assets
    • default model
    • default params
  4. 服务端统一构造最终调用参数

价值:

  • 防止前端绕过规则
  • 便于权限校验
  • 便于日志审计
  • 便于后续版本化

9.2 参考图处理

智能体参考图建议走两层:

  1. 智能体固定参考图
  2. 用户本轮上传图

最终传给模型时:

  • 先拼固定参考图
  • 再拼用户上传图
  • 去重后按模型能力截断

9.3 默认参数模板

建议图片和视频智能体都支持默认参数模板:

  • 图片智能体:
    • aspectRatio
    • imageCount
    • imageSize
    • negativePrompt
  • 视频智能体:
    • mode
    • duration
    • ratio
    • resolution
    • cameraMove

这样智能体真正能沉淀“风格化工作方式”,而不是只沉淀一句提示词。

9.3.1 对应模型选择规则

创建或编辑智能体时,模型选择必须和智能体类型严格匹配:

  • image 智能体:
    • 只能选择支持生图的模型
    • 不能选择视频模型
  • video 智能体:
    • 只能选择视频模型

建议前后端都做校验:

  • 前端:只展示对应类型模型
  • 后端:再次校验提交的 defaultModelId

后端若发现模型不匹配,直接拒绝保存,避免出现“视频智能体绑定生图模型”这类脏数据

9.4 公开/私有权限

私有智能体:

  • 仅创建者自己可查、可用、可编辑、可删除

公共智能体:

  • 所有登录用户可查、可用
  • 仅创建者可编辑、删除

公共分类:

  • 默认所有登录用户可见
  • 若分类由普通用户创建,建议允许复用,但保留后续后台禁用/合并能力
  • 分类创建应遵循:名称清洗 -> slug 标准化 -> 重名复用 -> 后台可合并

9.5 公共智能体是否立即发布

按当前需求,本期可直接采用:

  • 创建时选“公开” -> 立即出现在公共区对应分类下

9.6 公共智能体复制为私有

建议首版就支持:

  1. 公共智能体允许“另存为我的智能体”
  2. 复制后自动转为 private
  3. 保留原分类或允许用户重新选择分类
  4. 继承原智能体的参考图、提示词、默认模型、默认参数模板
  5. 记录 forkedFromPresetId

10. 与现有 canvasSkillTags 的兼容方案

建议分两步处理:

Phase A:先并行存在

  • 旧画布页的常规模式继续可用
  • 同一画布页新增“智能体模式”
  • canvasSkillTags 暂不移除

Phase B:后续统一

待智能体稳定后,可考虑:

  1. 用 AgentPreset 替换 canvasSkillTags
  2. 标准画布模式和智能体模式共享同一套智能体预设
  3. 后台不再维护两套预设

11. 推荐开发顺序

第一阶段:数据层

  1. 新增 AgentPreset
  2. 新增 AgentPresetCategory
  3. 新增 AgentPresetReferenceAsset
  4. 新增 AgentPresetExecutionSnapshot
  5. 扩展 CanvasProject.workspaceType
  6. 增加 lib/db/queries.ts 查询函数
  7. 增加 /api/agents 与 /api/agent-categories

第二阶段:页面骨架

  1. 改造 app/canvas/[id]/page.tsx
  2. 增加“智能体模式”开关
  3. 左侧接入智能体列表
  4. 右侧保留现有 CanvasChatPanel
  5. 接入公共区分类筛选
  6. 增加“新建智能体”弹窗
  7. 增加“另存为我的智能体”

第三阶段:发送链路

  1. CanvasChatPanel 支持接收 agentPresetId
  2. 发送时带 agentPresetId
  3. 后端 /api/chat 注入智能体定义
  4. 写入执行快照
  5. 结果继续走现有消息流展示
  6. 同时落到当前画布项目

第四阶段:体验增强

  1. 智能体搜索/筛选
  2. 公共区分类管理
  3. 智能体编辑/删除
  4. 参考图拖拽排序
  5. 最近使用智能体
  6. 公共智能体卡片展示创建者/热度
  7. 分类合并/禁用

12. MVP 验收标准

满足以下条件即可视为第一版完成:

  1. 可以从现有画布页进入“智能体模式”
  2. 一侧能看到智能体界面
  3. 一侧能看到现有对话框界面
  4. 公共区可以按分类筛选智能体
  5. 新建智能体时可以选择已有分类
  6. 新建智能体时可以创建新分类
  7. 创建分类时会做重名复用,不会重复创建近义同名分类
  8. 可以新建一个生图智能体
  9. 可以新建一个视频智能体
  10. 创建智能体时必须能选择对应的生图模型或视频模型
  11. 智能体支持多槽位配置
  12. 智能体支持上传头像并展示
  13. 即使智能体有 10 个槽位,使用时也只提示上传 3 张素材图
  14. 上传数量不足时不允许发送
  15. 智能体支持默认模型和默认参数模板
  16. 可以上传参考图并成功保存
  17. 可以选择公开或私有
  18. 公共智能体支持“另存为我的智能体”
  19. 点击智能体卡片后,底部输入区出现智能体标签
  20. 上传用户图片并发送后,后端会自动注入智能体预设
  21. 每次发送都会写入执行快照
  22. 生图结果会先出现在现有对话消息流中
  23. 生视频结果会先出现在现有对话消息流中
  24. 生成结果会同步落到当前画布项目
  25. 其他用户不能使用当前用户的私有智能体

13. 本期不建议做的内容

  1. 多智能体串联
  2. 智能体版本管理
  3. 智能体分享页/详情页
  4. 公共智能体审核流
  5. 公共智能体评分/收藏/排行榜
  6. 智能体对外分享链接
  7. 复杂工作流编排型智能体

14. 一句话结论

这次“智能体功能”最合适的实现方式是:

不新开独立页面,而是直接改造现有 /canvas/[id]:一侧做智能体界面,一侧保留现有 CanvasChatPanel,底层继续复用 CanvasProject + /api/chat + MediaAsset。