AI Elements

AI Elements (AI Elements)

AI Elements는 AI 채팅 인터페이스를 위해 특별히 만들어진, 조합 가능한 shadcn/ui 기반 컴포넌트 라이브러리예요. Conversation, Message, Tool, Reasoning, PromptInput 같은 컴포넌트들이 아무 React 프로젝트에나 바로 꽂혀서 stream.messages에 최소한의 글루 코드로 연결되도록 설계됐죠. LangChain의 useStream과 함께 쓰면 도구 호출 렌더링, 추론 표시, 스트리밍 메시지 등을 바로 구현할 수 있습니다.

참고: 전체 AI Elements 예제를 langgraphjs 예제 저장소에서 클론해서 실행해보면, 작동하는 프로젝트 안에서 도구 호출 렌더링·추론 표시·스트리밍 메시지를 한눈에 볼 수 있어요.

출처: LangChain 공식 문서 — ai-elements

동작 방식 (How it works)

  1. 컴포넌트를 소스 파일로 설치 — AI Elements는 CLI를 통해 컴포넌트를 프로젝트에 직접 추가해요 (shadcn/ui 레지스트리 방식).
  2. 메시지를 컴포넌트에 매핑 — stream.messages를 순회하며 HumanMessage 인스턴스를 사용자 거품으로, AIMessage 인스턴스를 어시스턴트 응답으로 렌더링해요.
  3. 더 풍부한 UI 조합 — 도구 호출은 <Tool>로, 추론은 <Reasoning>으로 감싸고, 스크롤 관리를 위해 모든 것을 <Conversation>으로 감쌀 수 있어요.

설치 (Installation)

AI Elements 컴포넌트는 CLI로 설치합니다. 편집 가능한 소스 파일로 프로젝트에 추가되죠.

npm install @langchain/react
npx ai-elements@latest add conversation message prompt-input tool reasoning suggestion

useStream 연결하기 (Wiring useStream)

stream.messages에서 직접 AI Elements 컴포넌트를 렌더링해요. 각 LangChain BaseMessage가 하나의 컴포넌트로 매핑됩니다.

import { useStream } from "@langchain/react";
import { HumanMessage, AIMessage } from "langchain";

import {
  Conversation,
  ConversationContent,
  ConversationScrollButton,
} from "@/components/ai-elements/conversation";
import {
  Message,
  MessageContent,
  MessageResponse,
} from "@/components/ai-elements/message";
import {
  Tool,
  ToolHeader,
  ToolContent,
  ToolInput,
  ToolOutput,
} from "@/components/ai-elements/tool";
import {
  Reasoning,
} from "@/components/ai-elements/reasoning";

모범 사례 (Best practices)

  • 소스 파일 자유롭게 편집 — 컴포넌트가 외부 패키지 의존성이 아니라 프로젝트 안에 있으므로, fork 없이 무엇이든 바꿀 수 있어요.
  • 스트리밍에는 MessageResponse 사용 — 스트리밍된 부분 토큰을 올바르게 처리해줘요. 스트리밍 중에는 원시 메시지 콘텐츠를 직접 렌더링하지 마세요.
  • Conversation으로 감싸기 — Conversation 컴포넌트가 스크롤 동작을 관리해서 새 메시지가 자동으로 뷰로 스크롤되게 해줘요.
  • isInstance로 분기 — msg.getType()을 확인하는 대신 HumanMessage.isInstance(msg)와 AIMessage.isInstance(msg)를 사용해 TypeScript 타입 내로잉(narrowing)을 제대로 하세요.

더 알아보기 (Learn more)