프론트엔드·

Vercel Blog·11개월 전

AI Elements — Vercel AI SDK용 조합 가능한 React 컴포넌트 오픈소스 라이브러리

Vercel이 AI SDK와 연동되는 React 컴포넌트 오픈소스 라이브러리 AI Elements를 공개했다. shadcn/ui 기반의 메시지 스레드, 입력 상자, 추론 패널, 응답 액션 컴포넌트를 조합해 AI 채팅 UI를 빠르게 구성할 수 있다.

핵심 포인트

npx ai-elements@latest CLI로 필요한 컴포넌트를 선택적으로 설치한다.
shadcn/ui 기반으로, Vercel AI SDK의 useChat 훅과 통합해 스트리밍·상태 관리를 처리한다.
Message, MessageContent, Response 컴포넌트로 메시지 역할(role) 기반 렌더링을 구성한다.
기존 ChatSDK 전체 템플릿을 대체하며, 필요한 컴포넌트만 골라 쓰는 모듈식 구조다.
향후 Next.js 앱 템플릿 마이그레이션 예정이다.

상세 정리

배경: 기존 ChatSDK는 전체 템플릿 형태였지만, AI Elements는 필요한 컴포넌트만 선택·조합하는 방식으로 전환한다.
기반: shadcn/ui 컴포넌트 라이브러리 위에 구축, 스타일 커스터마이징이 shadcn 방식을 따른다.
설치: npx ai-elements@latest를 실행해 원하는 컴포넌트를 선택적으로 가져온다.
AI SDK 통합: useChat 훅으로 스트리밍과 채팅 상태를 관리한다.
핵심 컴포넌트: Message(메시지 컨테이너), MessageContent(본문 렌더링), Response(AI 응답 표시).
역할 기반 필터링: 메시지 role(user/assistant)에 따라 조건부 렌더링이 가능하다.
제공 블록: 메시지 스레드, 입력 상자, 추론 패널(reasoning panels), 응답 액션 등 기본 UI 블록.
향후 계획: Next.js 앱 템플릿 마이그레이션 예정.

왜 읽나AI 채팅 UI를 처음부터 짜지 않고 조합 가능한 컴포넌트로 빠르게 구성하려는 React 개발자에게 설치 방법과 컴포넌트 구조를 제공한다.

Vercel Blog 블로그

원문은 여기서 이어서 읽을 수 있어요

읽음 (0)

·takedown 요청

이 글과 비슷한