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

​
什么是推理 token？

具备推理能力的模型处理提示词时，会生成两种不同类型的内容：
  1. 推理块：模型的内部思维链、问题拆解和逐步分析
  2. 文本块：呈现给用户的最终润色响应
这些内容会作为 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>
  );
}

​
构建 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.