생성형 UI (Generative UI)

채팅 말풍선 너머로

생성형 UI란 에이전트의 작업이 단순한 텍스트가 아닌 실제 인터페이스로 나타나는 것을 말합니다. Crew나 Flow가 도구를 호출하거나, 상태를 갱신하거나, 문제에 대해 추론할 때마다 사용자에게 무엇을 보여줄지 정할 수 있습니다: 진행 상황 체크리스트, 레시피 카드, 차트, 통째로 조립한 패널까지. CopilotKit은 생성형 UI를 스펙트럼을 따라 렌더링합니다. 완전히 작성자가 통제하는 방식(모든 픽셀을 결정)부터 에이전트가 직접 표면을 조립하는 방식까지입니다:

단계	UI를 결정하는 주체	CrewAI 메커니즘
통제 (Controlled)	여러분 — 에이전트가 고르는 고정된 컴포넌트 집합	useRenderTool, useAgent, reasoning
선언적 (Declarative)	에이전트 — 여러분의 컴포넌트 카탈로그에서 표면을 조립	A2UI
개방형 (Open-ended)	외부 도구/서버가 표면을 창작	MCP 도구

이 단계들은 자유롭게 조합됩니다. 단일 앱이 보통 여러 단계를 섞어 씁니다.

통제 (Controlled)

여러분이 컴포넌트를 소유합니다. 에이전트는 무엇을 보여줄지, 어떤 데이터로 보여줄지 선택합니다. 가장 예측 가능한 단계이며 대부분의 앱이 여기서 시작합니다.

도구 렌더링 (Tool rendering)

에이전트가 백엔드에서 도구를 호출합니다. 프론트엔드에서 useRenderTool로 일치하는 컴포넌트를 등록하면, CopilotKit이 이를 렌더링하고 인수가 도착하는 대로 스트리밍합니다.

"use client";
import { useRenderTool } from "@copilotkit/react-core/v2";
import { z } from "zod";

useRenderTool({
  name: "generate_recipe",
  parameters: z.object({
    title: z.string(),
    ingredients: z.array(z.string()),
  }),
  render: ({ args }) => <RecipeCard title={args.title} ingredients={args.ingredients} />,
});

useRenderTool은 도구 호출을 렌더링합니다. 도구가 브라우저에서 코드도 실행해야 한다면 useFrontendTool를 사용합니다(handler와 선택적 render 포함).

인수가 스트리밍되면서 점진적으로 렌더링하는 방법을 포함한 전체 워크스루는 도구 기반 생성형 UI를, Crew나 Flow가 서버 측에서 실행하는 도구는 백엔드 도구 렌더링을 참고하세요.

상태 렌더링 (State rendering)

단일 도구 호출에 반응하는 대신, 에이전트의 상태가 바뀔 때마다 렌더링합니다. 여러 단계로 이루어진 작업에 맞는 패턴입니다. useAgent로 에이전트의 작업 상태를 읽고 원하는 대로 그려 넣으세요.

"use client";
import { useAgent } from "@copilotkit/react-core/v2";

function TaskProgress() {
  const { agent } = useAgent({ agentId: "task_runner" });
  const steps = agent?.state?.steps ?? [];
  return <StepList steps={steps} />;
}

Flow에서 상태를 스트리밍하는 방법은 에이전트형 생성형 UI를, UI에서 그 상태를 편집하는 방법은 공유 상태를 참고하세요.

추론 (Reasoning)

모델이 답하기 전에 추론하면 그 사고가 자동으로 채팅에 렌더링됩니다. 컴포넌트를 작성할 필요가 없습니다. 추론을 참고하세요.

선언적 (Declarative)

에이전트는 컴포넌트 고르기를 넘어, 여러분이 정의한 카탈로그의 빌딩 블록을 조합해 표면을 조립합니다. 여전히 컴포넌트는 여러분 소유입니다(에이전트는 카탈로그에 있는 것만 쓸 수 있습니다), 하지만 레이아웃은 에이전트의 몫입니다. 이것이 A2UI입니다. 프로바이더에 카탈로그를 등록하세요:

<CopilotKit runtimeUrl="/api/copilotkit" agent="assistant" a2ui={{ catalog }}>
  {/* ... */}
</CopilotKit>

그러면 에이전트는 그 카탈로그로 표면을 만듭니다. 동적으로(대화에서 레이아웃을 설계) 또는 백엔드가 데이터로 채우는 고정 스키마에서요. 두 모드와 오류 복구에 관한 내용은 A2UI를 참고하세요.

개방형 (Open-ended)

가장 끝에서, 표면은 앱 밖에서 완전히 창작됩니다. CrewAI의 경우 이것은 MCP를 통해 이뤄집니다. 에이전트가 연결하는 MCP 서버가 제공하는 도구는 백엔드 도구와 같은 방식으로 채팅 안에서 도구 호출로 렌더링됩니다. 가장 제약이 적고 가장 예측하기 어려운 단계입니다. MCP 도구 호출은 표준 도구 호출 UI로 표면화되며, 다른 도구처럼 useRenderTool로 렌더링하세요. 에이전트가 완전히 창작하는 "MCP 앱" 표면은 떠오르는 기능입니다. 현재 상태는 CopilotKit 문서를 참고하세요.

도구 기반 생성형 UI (Tool-Based Generative UI)

에이전트 도구 호출을 컴포넌트에 매핑합니다(통제).

에이전트형 생성형 UI (Agentic Generative UI)

라이브 에이전트 상태를 렌더링합니다(통제).

A2UI

에이전트가 여러분의 카탈로그에서 표면을 조립하게 합니다(선언적).

추론 (Reasoning)

에이전트의 사고를 렌더링합니다.