추론(Reasoning) 렌더링

추론이 가능한 모델(reasoning-capable model)을 쓰면 모델이 답하기 전에 하는 '사고(thinking)' 과정을 CopilotKit이 채팅 창에 그대로 렌더링해 줘요. 이 섹션에서 가장 간단한 generative-UI 패턴이라서 만들 것이 딱히 없어요. 훅도 없고, 컴포넌트도 없고, props도 없어요. 그냥 추론이 가능한 모델을 쓰고, 기존 Flow가 이미 갖고 있는 스트리밍 래퍼를 유지하면 Overview에서 다룬 채팅 화면이 나머지를 다 처리해 줘요.

출처: 문서

본문

추론이 가능한 모델 사용하기

추론(reasoning)은 copilotkit_stream이 자동으로 표면화해 줘요. 모든 Flow 예제가 이미 이걸로 모델 호출을 감싸고 있거든요. 브리지(bridge)가 모델의 reasoning 델타를 읽어서 프론트엔드로 전달해요. 프로바이더에 종속적이지 않고(provider-agnostic) 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)

표준 채널로 reasoning을 내보내는 모델로는 DeepSeek의 deepseek-reasoner, Anthropic의 extended thinking(Claude), Gemini thinking 등이 있어요. model을 이 중 하나로 바꾸면 그 사고 과정이 바로 스트리밍되기 시작해요.

Crews든 Flows든 둘 다 copilotkit_stream을 통해서 모델 호출을 돌리기 때문에 똑같이 동작해요.

렌더링하기

프론트엔드에서 할 일은 없어요. 이미 마운트해 둔 CopilotChat, CopilotSidebar, 또는 CopilotPopup 화면이 답변 위에 reasoning을 실시간 스트리밍해서 보여줘요.

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

<CopilotChat agentId="recipe" />

useReasoning 훅도, 작성해야 할 reasoning 컴포넌트도 없어요. reasoning은 프론트엔드에서 별도로 연결하는 게 아니라, 모델이 그걸 내보내는 한 자동으로 렌더링돼요.

Generative UI — 저자 주도(author-controlled)부터 에이전트 발명(agent-invented) UI까지 전체 스펙트럼을 다뤄요.
Agentic Generative UI — Flow가 동작하는 동안 실시간 에이전트 상태를 렌더링해요.
Frontend Overview — 채팅 화면과 런타임을 설정하는 방법이에요.

더 알아보기 (Learn more)

Frontend Overview

추론(Reasoning) 렌더링