推理 token

推理 token 会暴露 OpenAI GPT-5 和带 extended thinking 的 Anthropic Claude 等高级模型的内部思考过程。这些模型会生成结构化内容块，将推理与最终答案分离，让你可以构建展示模型如何得出响应的 UI。

什么是推理 token？

具备推理能力的模型处理提示词时，会生成两种不同类型的内容：

推理块：模型的内部思维链、问题拆解和逐步分析
文本块：呈现给用户的最终润色响应

这些内容会作为 AIMessage 中的类型化内容块交付，可通过 contentBlocks 属性访问：

// Reasoning block
{ type: "reasoning", reasoning: "Let me think about this step by step..." }

// Text block
{ type: "text", text: "The answer is 42." }

并非所有模型都会生成推理 token。此模式专门适用于支持 extended thinking 或思维链输出的模型。标准聊天模型只返回文本块。

用例

透明度：向用户展示模型推理过程，建立对答案的信任
调试：检查模型思考过程，找出出错位置
教育工具：展示 AI 如何处理问题，帮助学生学习解题
决策支持：让领域专家验证推荐背后的推理
质量保证：在受监管行业中审计推理链以确保合规

提取推理块和文本块

AIMessage 上的 contentBlocks 数组按生成顺序包含所有块。按 type 过滤它们，即可将推理与文本分离：

import { AIMessage } from "langchain";

function extractBlocks(msg: AIMessage) {
  const reasoningBlocks = msg.contentBlocks
    .filter((b) => b.type === "reasoning")
    .map((b) => b.reasoning);

  const textBlocks = msg.contentBlocks
    .filter((b) => b.type === "text")
    .map((b) => b.text);

  return {
    reasoning: reasoningBlocks.join(""),
    text: textBlocks.join(""),
  };
}

单条消息可能包含多个推理块（例如模型暂停推理、生成部分文本，然后继续推理）。将它们拼接起来即可得到完整思考过程。

从 `useStream` 访问消息

将 useStream 连接到具备推理能力的代理，并在聊天 UI 中遍历 stream.messages。基于 HumanMessage.isInstance 和 AIMessage.isInstance 分支，然后将每条助手消息传给读取 contentBlocks 并分离推理和文本的组件。当 stream.isLoading 为 true 时，在最后一条消息上设置 isStreaming，这样思考块会随着 token 到达而更新。

The code examples use useStream<typeof myAgent> for type-safe stream state. See Type inference for Python or JavaScript backends.

import { useStream } from "@langchain/react";
import { AIMessage, HumanMessage } from "langchain";

function Chat() {
  const stream = useStream<typeof myAgent>({
    apiUrl: "http://localhost:2024",
    assistantId: "reasoning",
  });

  return (
    <div className="messages">
      {stream.messages.map((msg, i) => {
        if (HumanMessage.isInstance(msg)) {
          return <HumanBubble key={i} text={msg.text} />;
        }
        if (AIMessage.isInstance(msg)) {
          return (
            <AIResponse
              key={i}
              message={msg}
              isStreaming={stream.isLoading && i === stream.messages.length - 1}
            />
          );
        }
        return null;
      })}
    </div>
  );
}

<script setup lang="ts">
import { useStream } from "@langchain/vue";
import { AIMessage, HumanMessage } from "langchain";

const stream = useStream<typeof myAgent>({
  apiUrl: "http://localhost:2024",
  assistantId: "reasoning",
});
</script>

<template>
  <div class="messages">
    <template v-for="(msg, i) in stream.messages.value" :key="i">
      <HumanBubble v-if="HumanMessage.isInstance(msg)" :text="msg.text" />
      <AIResponse
        v-else-if="AIMessage.isInstance(msg)"
        :message="msg"
        :isStreaming="stream.isLoading.value && i === stream.messages.value.length - 1"
      />
    </template>
  </div>
</template>

<script lang="ts">
  import { useStream } from "@langchain/svelte";
  import { AIMessage, HumanMessage } from "langchain";

  const stream = useStream<typeof myAgent>({
    apiUrl: "http://localhost:2024",
    assistantId: "reasoning",
  });
</script>

<div class="messages">
  {#each stream.messages as msg, i}
    {#if HumanMessage.isInstance(msg)}
      <HumanBubble text={msg.text} />
    {:else if AIMessage.isInstance(msg)}
      <AIResponse
        message={msg}
        isStreaming={stream.isLoading && i === stream.messages.length - 1}
      />
    {/if}
  {/each}
</div>

import { Component } from "@angular/core";
import { injectStream } from "@langchain/angular";
import { AIMessage, HumanMessage } from "langchain";

@Component({
  selector: "app-chat",
  template: `
    <div class="messages">
      @for (msg of stream.messages(); track $index) {
        @if (isHuman(msg)) {
          <human-bubble [text]="msg.text" />
        } @else if (isAI(msg)) {
          <ai-response
            [message]="msg"
            [isStreaming]="stream.isLoading() && $index === stream.messages().length - 1"
          />
        }
      }
    </div>
  `,
})
export class ChatComponent {
  stream = injectStream<typeof myAgent>({
    apiUrl: "http://localhost:2024",
    assistantId: "reasoning",
  });

  isHuman = HumanMessage.isInstance;
  isAI = AIMessage.isInstance;
}

构建 ThinkingBubble 组件

ThinkingBubble 会在视觉上独立、可折叠的容器中展示推理 token。用户可以展开它查看完整思考过程，也可以折叠它以专注于最终答案。

import { useState } from "react";

function ThinkingBubble({
  reasoning,
  isStreaming,
}: {
  reasoning: string;
  isStreaming: boolean;
}) {
  const [isExpanded, setIsExpanded] = useState(false);

  const charCount = reasoning.length;
  const previewLength = 120;
  const preview =
    reasoning.length > previewLength
      ? reasoning.slice(0, previewLength) + "..."
      : reasoning;

  return (
    <div className="thinking-bubble">
      <button
        className="thinking-header"
        onClick={() => setIsExpanded(!isExpanded)}
      >
        <span className="thinking-icon">
          {isStreaming ? (
            <span className="thinking-spinner" />
          ) : (
            "💭"
          )}
        </span>
        <span className="thinking-label">
          {isStreaming ? "Thinking..." : `Thought process (${charCount} chars)`}
        </span>
        <span className={`chevron ${isExpanded ? "expanded" : ""}`}>▶</span>
      </button>

      {isExpanded && (
        <div className="thinking-content">
          <pre>{reasoning}</pre>
        </div>
      )}

      {!isExpanded && !isStreaming && (
        <div className="thinking-preview">{preview}</div>
      )}
    </div>
  );
}

渲染完整 AI 响应

将 ThinkingBubble 和标准文本气泡组合成单个 AIResponse 组件：

function AIResponse({
  message,
  isStreaming,
}: {
  message: AIMessage;
  isStreaming: boolean;
}) {
  const reasoningBlocks = message.contentBlocks
    .filter((b) => b.type === "reasoning")
    .map((b) => b.reasoning)
    .join("");

  const textBlocks = message.contentBlocks
    .filter((b) => b.type === "text")
    .map((b) => b.text)
    .join("");

  const hasReasoning = reasoningBlocks.length > 0;
  const hasText = textBlocks.length > 0;

  const isReasoningPhase = isStreaming && !hasText;
  const isTextPhase = isStreaming && hasText;

  return (
    <div className="ai-response">
      {hasReasoning && (
        <ThinkingBubble
          reasoning={reasoningBlocks}
          isStreaming={isReasoningPhase}
        />
      )}
      {hasText && (
        <div className="ai-text-bubble">
          <p>{textBlocks}</p>
          {isTextPhase && <span className="cursor-blink">▊</span>}
        </div>
      )}
    </div>
  );
}

处理边缘情况

没有推理的消息

并非每条 AI 消息都包含推理块。当 contentBlocks 只有文本块时，渲染标准消息气泡即可，不需要 ThinkingBubble。

空推理块

一些模型会生成空推理块作为占位符。请过滤掉这些块：

const meaningfulReasoning = message.contentBlocks
  .filter((b) => b.type === "reasoning" && b.reasoning.trim().length > 0);

多个推理-文本循环

单条消息可能在推理块和文本块之间交替。如果需要保留这种交错顺序，请按顺序遍历 contentBlocks，而不是按类型分组：

message.contentBlocks.forEach((block) => {
  if (block.type === "reasoning") {
    // Render ThinkingBubble
  } else if (block.type === "text") {
    // Render text paragraph
  }
});

最佳实践

默认折叠：按需显示推理，而不是默认显示
显示字符数：让用户快速了解响应中包含多少思考内容
视觉区分：使用不同颜色、边框或背景，避免推理与实际答案混淆
添加过渡动画：平滑的展开/折叠动画可以提升感知质量
考虑可访问性：在切换按钮上使用合适的 ARIA 属性（aria-expanded、aria-controls）
在预览中截断：折叠时显示简短推理预览，让用户决定是否展开

Connect these docs to Claude, VSCode, and more via MCP for real-time answers.

Edit this page on GitHub or file an issue.

Get started

Core components

Middleware

Frontend

Advanced usage

Agent development

Production

什么是推理 token？

用例

提取推理块和文本块

从 `useStream` 访问消息

构建 ThinkingBubble 组件

渲染完整 AI 响应

处理边缘情况

没有推理的消息

空推理块

多个推理-文本循环

最佳实践

​什么是推理 token？

​用例

​提取推理块和文本块

​从 useStream 访问消息

​构建 ThinkingBubble 组件

​渲染完整 AI 响应

​处理边缘情况

​没有推理的消息

​空推理块

​多个推理-文本循环

​最佳实践

什么是推理 token？

用例

提取推理块和文本块

从 `useStream` 访问消息

构建 ThinkingBubble 组件

渲染完整 AI 响应

处理边缘情况

没有推理的消息

空推理块

多个推理-文本循环

最佳实践