프론트엔드 통합 개요

프론트엔드 통합 개요 (Frontend Integrations Overview)

AI 채팅이나 생성형 UI를 만들 때, 메시지를 그려주는 "보기" 계층은 반드시 LangChain이 정한 방식이어야 할까요? 그렇지 않아요. useStream은 특정 UI 프레임워크에 종속되지 않아서, 어떤 컴포넌트 라이브러리와도 손쉽게 연결할 수 있죠. 이 페이지에서는 LangChain 프론트엔드와 잘 어울리는 몇 가지 라이브러리를 소개하고, 어떤 상황에 무엇을 고르면 좋은지 안내해 드릴게요.

출처: LangChain 공식 문서 — frontend-integrations-overview

왜 `useStream`은 UI에 종속되지 않나요?

useStream은 순수한 반응형 상태만 돌려줍니다. 메시지, 도구 호출(tool calls), 로딩 플래그, 값(values), 스레드 메타데이터까지 — 이 상태를 어떤 시각적 계층에 연결할지는 전적으로 여러분의 몫이에요. 그래서 아래 소개할 라이브러리들처럼 각자 다른 철학을 가진 프레임워크와도 잘 맞물립니다.

주요 통합 라이브러리

CopilotKit — 구조화된 생성형 UI를 지원하는 완전한 AI 채팅 런타임이에요. LangGraph 배포에 커스텀 CopilotKit 엔드포인트를 추가하면, React에서 동적인 컴포넌트 트리를 렌더링할 수 있습니다.
AI Elements — shadcn/ui 기반의 조합 가능한 AI 채팅 컴포넌트입니다. Conversation, Message, Tool, Reasoning 같은 컴포넌트를 그대로 가져다 stream.messages에 연결하면 돼요.
assistant-ui — 완전한 런타임 계층을 갖춘 헤드리스(Hedless) React 프레임워크예요. useExternalStoreRuntime 어댑터를 통해 useStream을 AssistantRuntimeProvider에 연결합니다.
OpenUI — 에이전트가 선언적 컴포넌트 DSL로 완전하고 인터랙티브한 대시보드를 만들어내게 하는 생성형 UI 라이브러리입니다. 데이터가 풍부한 리포트형 UI를 위해 특별히 설계되었죠.

라이브러리 고르기

각 라이브러리는 저마다 조금씩 다른 통합 모델을 갖고 있어요. 어떤 UI를 만들지에 따라 선택이 달라집니다.

	CopilotKit	AI Elements	assistant-ui	OpenUI
가장 적합한 용도	완전한 채팅 런타임 + 구조화된 생성형 UI	풍부한 메시지 타입을 갖춘 채팅	최소 설정으로 갖춘 기능 완전한 채팅	생성된 대시보드와 리포트
UI 스타일	CopilotKit 채팅 셸 + 커스텀 메시지 렌더러	조합 가능한 shadcn/ui 컴포넌트	헤드리스 슬롯 + 기본 테마	선언적 DSL을 가진 사전 제작 컴포넌트 라이브러리
커스터마이징	커스텀 백엔드 엔드포인트, 에이전트 컨텍스트, 렌더러	소스 파일을 직접 수정	컴포넌트 슬롯 오버라이드	CSS 커스텀 프로퍼티로 테마 설정
스트리밍 UX	구조화된 어시스턴트 페이로드로 런타임이 관리하는 채팅 스트림	컴포넌트 수준의 점진적 렌더링	내장 스레드 관리	호이스팅: 셸이 즉시 표시되고 데이터가 채워짐
도구 호출	CopilotKit 런타임과 커스텀 렌더러를 통해	`Tool` / `ToolHeader` / `ToolOutput`	메시지 슬롯으로 커스텀	생성된 UI 안에 인라인으로 표시
에이전트 형식	구조화된 어시스턴트 응답 + 선택적 Markdown	모든 `stream.messages`	모든 `stream.messages`	에이전트가 openui-lang 텍스트를 출력

네 라이브러리 모두 LangChain 에이전트와 잘 동작하고, 뒤의 세 개는 useStream에 직접 연결됩니다. 좀 더 풍부한 런타임 계층과, LangGraph 배포 옆에 놓을 수 있는 전용 엔드포인트가 필요하다면 CopilotKit이 특히 유용해요.

프론트엔드 통합 개요