从 COT 到 ThoughtChain：AI 应用为什么需要展示“思考过程”

从 COT 到 ThoughtChain：AI 应用为什么需要展示"思考过程"

前言

因为最近boss直提需求，说想让用户看到AI正在努力的干活的样子，我认为这不就是Agent的cot概念吗，所以今天来大致讲解下 Ant Design X Vue 里的的组件：

txt 复制代码

ThoughtChain

它不是用来展示普通聊天消息的。

普通聊天消息一般用：

txt 复制代码

Bubble / BubbleList

而 ThoughtChain 更像是用来展示：

txt 复制代码

AI 正在做什么
AI 做到了哪一步
AI 哪一步成功了
AI 哪一步失败了
AI 某一步的过程说明是什么

这其实就引出我刚刚说的一个 AI 产品里非常常见的概念：

txt 复制代码

COT

也就是：

txt 复制代码

Chain of Thought

中文一般叫：

txt 复制代码

思维链

这篇文章主要想讲清楚三件事：

COT 是什么
COT 在 AI 应用里有什么用
在前端组件里，如何用 ThoughtChain 展示 COT 风格的过程链路

不过要先说明一点：

真实产品里通常不应该直接暴露模型的原始内部推理文本，而是展示经过整理后的"过程摘要""执行步骤""状态链路"。

所以这篇文章里说的 COT 展示，更准确地说，是：

txt 复制代码

给用户看的可解释过程链路

而不是把模型内部所有推理细节原封不动展示出来。

COT 是什么

COT 全称是：

txt 复制代码

Chain of Thought

直译就是：

txt 复制代码

思维链

它的核心思想是：

txt 复制代码

不要只给最终答案，而是把解决问题的中间步骤组织出来。

举个简单例子。

用户问：

txt 复制代码

帮我判断这个需求应该怎么实现：加载历史对话。

如果 AI 只返回最终答案，可能是：

txt 复制代码

你需要请求历史消息接口，然后渲染到 BubbleList。

这当然有用，但信息有点少。

如果用 COT 风格组织，就会更像这样：

txt 复制代码

1. 先确认历史对话的数据结构
2. 再判断消息应该映射成哪些 BubbleList items
3. 然后区分历史消息和正在生成的消息
4. 历史消息直接展示，当前生成消息才开启 typing
5. 最后处理自动滚动和滚动位置保持

这就是思维链的价值：

txt 复制代码

它让用户知道结果是怎么一步一步得到的。

COT 不是简单地"多说几句"

很多人第一次听 COT，会以为它只是让 AI 把回答写长一点。

其实不是。

COT 的重点不是：

txt 复制代码

回答更长

而是：

txt 复制代码

推理过程更结构化

比如一个坏的 COT 是：

txt 复制代码

我想了想，感觉应该这样做，因为这个功能比较复杂，所以要先这样再那样，总之就是用 BubbleList。

这只是废话变多。

一个更好的 COT 应该是：

txt 复制代码

目标：加载历史对话

步骤 1：读取会话 ID
步骤 2：请求历史消息
步骤 3：转换为 BubbleList items
步骤 4：禁用历史消息 typing
步骤 5：滚动到底部

结果：用户切换历史会话时，可以看到完整上下文。

它的特点是：

txt 复制代码

有步骤
有顺序
有状态
有结果

所以 COT 在产品里的价值，不只是"解释"，更是"组织过程"。

COT 有什么用

在 AI 应用里，COT 主要有几个作用。

1. 提升可解释性

用户最怕的是黑盒。

如果 AI 直接给一个结论：

txt 复制代码

我已经帮你生成好了。

用户可能会想：

txt 复制代码

你到底做了什么？
你有没有理解我的需求？
你是不是漏掉了什么？

如果能展示过程：

txt 复制代码

已读取项目结构
已分析 BubbleList
已确认历史消息数据流
正在生成实现方案

用户就更容易相信这个结果。

这就是 COT 的第一个价值：

txt 复制代码

让 AI 的行为更可解释。

2. 降低等待焦虑

AI 应用经常有等待时间。

比如 Agent 做一个复杂任务，可能要几秒甚至几十秒。

如果页面只显示：

txt 复制代码

生成中...

用户不知道它是真的在工作，还是卡住了。

如果展示成：

txt 复制代码

1. 正在读取项目文件
2. 正在分析组件依赖
3. 正在生成代码
4. 正在运行校验

用户会感觉：

txt 复制代码

它在推进。

这能显著降低等待焦虑。

3. 方便用户判断是否跑偏

Agent 产品里，AI 不一定每次都理解正确。

如果它的过程是隐藏的，用户只能等最后结果出来才知道：

txt 复制代码

它跑偏了。

但如果过程可见，用户可以提前发现：

txt 复制代码

它好像理解错需求了
它分析错文件了
它执行了不该执行的步骤

这时候用户可以及时打断、修正或重新发起任务。

所以 COT 还有一个重要作用：

txt 复制代码

让用户可以更早介入。

4. 适合 Agent 执行过程展示

普通聊天里，COT 可能只是回答结构的一部分。

但在 Agent 产品里，COT 更像是任务执行轨迹。

比如 zero-CODE-AGENT 里，用户说：

txt 复制代码

帮我实现加载历史对话。

Agent 可能会做：

txt 复制代码

1. 搜索对话相关文件
2. 分析 BubbleList 渲染逻辑
3. 分析消息状态结构
4. 设计历史接口数据映射
5. 修改页面代码
6. 运行本地测试

这些天然就适合用链路组件展示。

所以 COT 在 Agent 里不只是"思考"，还可以是：

txt 复制代码

计划链
执行链
工具调用链
状态链
结果链

COT 在前端里应该怎么展示

前端展示 COT 时，我觉得要注意一个原则：

不要把模型原始推理一股脑扔给用户，而是展示用户能理解、能判断、能行动的过程信息。

也就是说，前端更适合展示：

txt 复制代码

步骤标题
步骤状态
步骤说明
步骤结果
可展开的详情

比如：

txt 复制代码

读取项目结构        success
分析 BubbleList     success
设计历史数据流       pending
生成代码            pending

这种结构比一大段推理文本更适合 UI。

这也是 ThoughtChain 组件适合承载 COT 的原因。

ThoughtChain 是什么

在这个组件库里，ThoughtChain 是一个步骤链组件。

它的作用可以简单理解成：

txt 复制代码

展示一组思考 / 执行节点。

它不是聊天气泡。

聊天消息用：

txt 复制代码

BubbleList

思考过程用：

txt 复制代码

ThoughtChain

两者分工可以这样看：

组件	作用
`BubbleList`	展示用户和 AI 的对话内容
`ThoughtChain`	展示 AI 的思考、计划或执行过程
`Sender`	用户输入
`Conversations`	历史会话

一个比较典型的 AI 工作台页面可能是：

txt 复制代码

左侧：历史会话 Conversations
中间：对话内容 BubbleList
右侧：执行过程 ThoughtChain
底部：输入框 Sender

这样用户既能看到聊天内容，也能看到 AI 当前做到了哪一步。

ThoughtChain 的数据结构

ThoughtChain 通过 items 渲染。

每一项大概是这样的：

ts 复制代码

type ThoughtChainItem = {
  key?: string;
  icon?: VNode | string | number;
  title?: VNode | string;
  description?: VNode | string;
  extra?: VNode | string;
  content?: VNode | string;
  footer?: VNode | string;
  status?: 'pending' | 'success' | 'error';
  tooltip?: boolean | TooltipConfig;
}

可以简单理解成：

txt 复制代码

一个 item 就是 COT 里的一个步骤。

比如：

ts 复制代码

{
  key: 'read',
  title: '读取项目结构',
  description: '定位消息列表和历史会话相关文件',
  status: 'success',
}

它在 UI 上就是一条思考节点。

最简单使用方式

先写一个最小例子。

vue 复制代码

<script setup lang="ts">
import { ThoughtChain, type ThoughtChainItem } from 'ant-design-x-vue';

const items: ThoughtChainItem[] = [
  {
    key: 'understand',
    title: '理解需求',
    description: '确认用户想实现加载历史对话功能',
    status: 'success',
  },
  {
    key: 'analyze',
    title: '分析组件',
    description: '查看 BubbleList、Bubble 和消息状态流转',
    status: 'success',
  },
  {
    key: 'plan',
    title: '生成方案',
    description: '设计历史消息到 BubbleList items 的映射方式',
    status: 'pending',
  },
];
</script>

<template>
  <ThoughtChain :items="items" />
</template>

这就会渲染出一个三步的过程链。

如果没有传 icon，组件内部会默认用序号。

也就是：

txt 复制代码

1 理解需求
2 分析组件
3 生成方案

加上图标和状态

真实业务里，我们通常会给不同状态配不同图标。

比如：

vue 复制代码

<script setup lang="ts">
import {
  CheckCircleOutlined,
  LoadingOutlined,
  InfoCircleOutlined,
} from '@ant-design/icons-vue';
import { h, ref } from 'vue';
import { ThoughtChain, type ThoughtChainItem } from 'ant-design-x-vue';

function getStatusIcon(status: ThoughtChainItem['status']) {
  switch (status) {
    case 'success':
      return h(CheckCircleOutlined);
    case 'error':
      return h(InfoCircleOutlined);
    case 'pending':
      return h(LoadingOutlined);
    default:
      return undefined;
  }
}

const items = ref<ThoughtChainItem[]>([
  {
    key: 'read',
    title: '读取项目结构',
    description: '已找到 BubbleList 和 useXChat 相关文件',
    status: 'success',
    icon: getStatusIcon('success'),
  },
  {
    key: 'analyze',
    title: '分析历史对话数据流',
    description: '正在确认 messages 如何转换成 items',
    status: 'pending',
    icon: getStatusIcon('pending'),
  },
  {
    key: 'write',
    title: '生成实现代码',
    description: '等待分析完成后执行',
    status: 'pending',
    icon: getStatusIcon('pending'),
  },
]);
</script>

<template>
  <ThoughtChain :items="items" />
</template>

这样用户一眼就能看出：

txt 复制代码

哪一步完成了
哪一步正在进行
哪一步还没开始

加上可折叠详情

COT 不一定每一步都要把详情展开。

更好的体验是：

txt 复制代码

默认展示标题和描述
用户想看时再展开详情

这时候可以用 content 和 collapsible。

vue 复制代码

<script setup lang="ts">
import { ThoughtChain, type ThoughtChainItem } from 'ant-design-x-vue';

const items: ThoughtChainItem[] = [
  {
    key: 'understand',
    title: '理解需求',
    description: '确认目标是加载历史对话',
    status: 'success',
    content: '用户切换会话时，需要请求历史消息，并把这些消息映射成 BubbleList 可以渲染的 items。',
  },
  {
    key: 'analyze',
    title: '分析组件通信',
    description: '确认 Bubble 如何通知 BubbleList',
    status: 'success',
    content: 'Bubble 内部 typedContent 变化后调用 onUpdate，BubbleList 通过 updateCount 触发自动滚动检查。',
  },
  {
    key: 'plan',
    title: '生成方案',
    description: '设计历史消息加载策略',
    status: 'pending',
    content: '历史消息直接展示，不重新 typing；当前正在生成的最后一条 AI 消息才开启 typing。',
  },
];
</script>

<template>
  <ThoughtChain
    :items="items"
    collapsible
  />
</template>

这样每个节点都可以点击展开。

这就很适合展示：

txt 复制代码

步骤摘要 + 可展开详情

总结

COT 是 Chain of Thought，也就是思维链。

它的价值不是让回答变长，而是让 AI 的处理过程变得更结构化、更可解释。

在 AI 应用里，COT 可以帮助用户：

理解 AI 为什么这么做
判断任务执行到哪一步
降低等待过程中的焦虑
提前发现 AI 是否跑偏
更自然地介入 Agent 执行流程

而在前端组件层面，ThoughtChain 正好适合承载这种结构。

它可以把 COT 拆成一个个节点：

txt 复制代码

理解需求
读取文件
分析组件
生成方案
执行修改
验证结果

每个节点都有自己的：

txt 复制代码

标题
描述
状态
图标
详情
操作区

所以我的理解是：

txt 复制代码

BubbleList 负责展示 AI 说了什么。
ThoughtChain 负责展示 AI 正在怎么做。

当我们做 zero-CODE-AGENT 这类 Agent 产品时，ThoughtChain 就是一个很自然的过程可视化组件。

它让用户看到的不只是最终回答，而是一条清晰的任务推进链路。