推理

自动在聊天中展示模型的思考过程，无需构建任何组件。

思考过程，免费渲染

当具备推理能力的模型在回答前先思考时，CopilotKit 会把这段思考直接渲染在聊天中。这是整节里最简单的生成式 UI 模式：没有任何东西需要构建。没有 hook，没有组件，没有 props。使用一个具备推理能力的模型，保留 Flows 已经有的流式传输包装器，概览 中的聊天界面会完成剩下的事。

使用具备推理能力的模型

推理由 copilotkit_stream 自动呈现，每个 Flow 示例的模型调用都已经包在它里面。桥接层读取模型的推理增量并将其发送到前端。它与服务商无关，并且在 CrewAI 的两种流式传输通道上都能工作，所以你唯一需要改的就是模型。

# recipe_flow.py
from crewai.flow.flow import Flow, start
from ag_ui_crewai.sdk import copilotkit_stream, CopilotKitState
from litellm import acompletion

class RecipeFlow(Flow[CopilotKitState]):
    @start()
    async def chat(self):
        response = await copilotkit_stream(
            acompletion(
                # any reasoning-capable model, e.g. deepseek-reasoner
                model="deepseek/deepseek-reasoner",
                messages=self.state.messages,
                stream=True,
            )
        )
        message = response.choices[0].message
        self.state.messages.append(message)

通过标准通道输出推理的模型包括 DeepSeek deepseek-reasoner、Anthropic 扩展思考（Claude）以及 Gemini thinking 等。把 model 换成其中之一，它的思考就会开始流式输出。

这对 Crews 和 Flows 都一样，因为二者的模型调用都经过 copilotkit_stream。

渲染它

没有前端步骤。你已挂载的 CopilotChat、CopilotSidebar 或 CopilotPopup 界面会随着推理流式输出把它显示在其生成的答案上方。

import { CopilotChat } from "@copilotkit/react-core/v2";

<CopilotChat agentId="recipe" />

NOTE

没有 useReasoning hook，也没有需要编写的推理组件。推理不是你在前端接线的东西；只要模型输出它，它就会自动渲染。

相关

•Generative UI

完整光谱，从作者可控的 UI 到智能体自行发明的 UI。

•Agentic Generative UI

在 Flow 运行时实时渲染智能体状态。

•Frontend Overview

设置聊天界面与运行时。