모든 AI 제품은 이제 채팅 인터페이스(chat surface)가 필요하며, 이 채팅 인터페이스에서 사용자는 해당 제품이 완성도 높은지 아닌지를 판단합니다. 부드러운 토큰 스트리밍(token streaming), 실제로 확인할 수 있는 출처(sources), 대화 기록 중간보다 더 나은 곳에 코드를 열어주는 기능, 답변 도중에 멈출 수 있는 버튼 등—이 모든 것이 개별적으로는 어렵지 않지만, 이 모든 것을 완벽하게 작동하도록 만드는 것은 몇 주가 걸립니다. 이것이 바로 'AI 채팅 UI 키트(AI chat UI kit)'가 자체적인 카테고리가 된 이유입니다. 하지만 옵션들은 매우 다른 두 가지 종류로 나뉘며, 잘못된 종류를 선택하는 것은 절약할 시간보다 더 많은 시간을 낭비하게 만듭니다. 여기서는 시간이 아깝지 않은 여섯 가지 키트를 솔직하게 비교합니다.
템플릿 대 컴포넌트 라이브러리(Templates vs. component libraries)
목록에 앞서, 가장 중요한 구분점입니다. 채팅 템플릿은 포크(fork)하여 사용할 수 있는 완전한 작동 앱 전체를 의미합니다: 라우트, 레이아웃, 스레드 사이드바, 설정 및 디자인까지 포함됩니다. 반면 컴포넌트 라이브러리는 메시지 목록, 프롬프트 입력창, 마크다운 렌더러와 같은 개별 조각(pieces)을 제공하며, 사용자가 직접 앱을 조립해야 합니다. 어느 쪽이 더 좋다고 할 수 없습니다. 템플릿은 완성된 것처럼 보이는 제품을 가장 빠르게 만들어주지만; 라이브러리는 이미 존재하는 앱에 레이아웃에 대한 의견을 강요하지 않으면서 통합할 수 있게 해줍니다.
- 토큰 스트리밍(Token streaming) - 스피너가 전체 답변을 한 번에 쏟아내는 것이 아니라, 도착하는 대로 텍스트를 렌더링하고 중지 제어 기능을 제공합니다.
- 인용구(Citations) - 하단에 장식적인 링크 목록이 아닌, 클릭하여 인용한 출처를 볼 수 있는 인라인 마커입니다.
- 캔버스 또는 아티팩트 패널(A canvas or artifact panel) - ChatGPT Canvas나 Claude Artifacts처럼 채팅 옆에서 생성된 코드나 문서를 열어주는 기능입니다.
- 모델 연결부(A model seam) - 컴포넌트를 재작성할 필요 없이, UI가 실제 모델을 가리킬 수 있는 명확한 지점입니다.
- 백엔드 신뢰성(Backend honesty) - 채팅 기록, 인증(auth), 모델 호출이 실제로 작동하는지, 아니면 키 없이 UI를 실행하기 위해 모의(mocked)되었는지 여부입니다.
2026년 최고의 Next.js AI 채팅 UI 키트 6가지
1. Vercel Chatbot - 최고의 무료 풀스택 채팅 앱
Vercel의 공식 오픈소스 Chatbot 템플릿은 AI SDK의 레퍼런스 구현체이며, 실제로 작동하는 풀스택(full-stack) 애플리케이션입니다. 이 앱에는 로그인 기능을 위한 Auth.js, 채팅 기록을 위한 Neon Serverless Postgres, 파일 업로드를 위한 Vercel Blob, 모델 접근을 위한 AI Gateway, 그리고 shadcn/ui 인터페이스가 포함되어 있습니다. 또한 채팅 옆에서 생성된 콘텐츠를 작업할 수 있는 자체 아티팩트(artifacts) 기능도 제공합니다. 만약 처음부터 데이터베이스와 모델에 진정으로 연결된 챗봇을 원하고 기본 shadcn의 디자인이 만족스럽다면, 이것이 기본 선택지이며 비용은 들지 않습니다.
- Vercel에서 AI SDK와 함께 유지 관리하는 무료 오픈소스입니다.
- 실제 백엔드: 인증(auth), Postgres 채팅 기록, 파일 저장소, AI Gateway를 갖추고 있습니다.
- 실행을 위해 데이터베이스와 AI Gateway 키(또는 Vercel OIDC)가 필요합니다.
- 디자인은 깔끔하지만 일반적인 shadcn/ui이므로, 자신만의 디자인으로 수정할 여지가 있습니다.
2. Relay - 포크하기 가장 좋은 디자인의 채팅 UI
Relay는 저희가 소개하는 첫 번째 제품이며, 템플릿 카테고리에 속합니다. 이 앱은 Next.js 16, React 19, Tailwind v4를 기반으로 구축된 완벽한 스레드형 채팅 애플리케이션(홈, /app, 개별 스레드 경로, 설정, 로그인 및 회원가입)입니다. Vercel의 템플릿과 차이점은 인터페이스 자체가 제품이라는 점입니다. 토큰 단위 스트리밍 기능에 작동하는 정지 버튼, 인용된 구절과 출처 링크를 보여주는 팝오버 형태의 인라인 인용 마커, 각 답변 아래의 Sources 카드, 그리고 캔버스(canvas) 기능을 제공합니다. 메시지에 아티팩트를 부여하면 사이드 패널에서 HTML에 대한 실시간 샌드박스 미리보기(sandbox="allow-scripts" 및 allow-same-origin 미포함으로 설정되어 있어 미리보기가 자체 스크립트를 실행할 수 있지만 앱의 쿠키나 저장소에는 접근할 수 없음)와 다른 모든 콘텐츠를 위한 읽기 전용 코드 뷰가 열립니다. 또한 작동하는 Cmd+K 기능, 마크다운 내보내기(Markdown export), 공유 기능, 그리고 AI Gateway 스타일로 일반적인 "provider/model" 문자열을 사용하는 모델 선택기를 함께 제공합니다.
솔직히 말해 장단점은 이렇습니다: Relay는 UI 키트(UI kit)이며, SaaS 스타터나 풀스택 앱(full-stack app)이 아닙니다. 스트리밍 기능은 미리 준비된 답변(canned replies)을 기반으로 작동하는 실제 UI 동작입니다. 하나의 훅(hook)에 있는 타이머가 몇 개의 토큰씩 모의 메시지(mock messages)를 보여주며, 스레드는 localStorage에 저장됩니다. 모델이 호출되거나 키가 필요하지 않기 때문에 설치하자마자 전체 기능이 실행되는 것입니다. 실제로 사용하려면, 그 하나의 훅 타이머를 엔드포인트로 스트리밍된 호출로 대체하기만 하면 됩니다. 컴포넌트는 오직 이 훅의 출력만을 읽기 때문에 다른 부분은 전혀 변경할 필요가 없습니다. 만약 Postgres와 인증(auth)이 이미 연결되어 있기를 원한다면, Vercel Chatbot을 선택하는 것이 더 좋습니다.
// src/lib/use-chat-stream.ts - 라이브로 전환하기 위해 수정해야 할 유일한 파일
// 오늘: 타이머가 mock-data.ts에서 준비된 세그먼트를 보여줍니다.
// 실제 환경: 대신 엔드포인트에서 ReadableStream을 읽으세요...
Relay 보기 - 토큰 스트리밍, 인용(citation) 팝오버, 샌드박스 코드 캔버스, 그리고 완전한 스레드 채팅 앱 기능을 제공합니다. 키가 전혀 필요하지 않으며, 하나의 훅으로 실제 모델로 전환됩니다. 가격은 $79부터, 일회성 구매입니다.
3. AI Elements - AI SDK 프로젝트에 가장 적합한 컴포넌트 라이브러리
AI Elements는 Vercel이 만든 AI 인터페이스를 위한 오픈소스 컴포넌트 라이브러리로, shadcn/ui를 기반으로 하며 AI SDK의 useChat 훅과 페어링되도록 설계되었습니다. CLI 또는 shadcn 레지스트리를 통해 설치하면, Conversation, Message, PromptInput, Reasoning, Tool 등 실제 소스 파일들이 프로젝트에 복사됩니다. 따라서 모든 줄을 직접 소유하고 수정할 수 있습니다. 이미 shadcn/ui와 AI SDK를 사용하고 있다면, 기존 앱에 채팅 인터페이스를 추가하는 가장 자연스러운 방법입니다. 다만 이 라이브러리가 제공하지 않는 것은 '앱 자체'입니다. 즉, 스레드 사이드바, 라우트(routes), 또는 레이아웃 결정은 사용자 스스로 해야 합니다.
4. assistant-ui - 완전히 커스터마이징된 채팅 UX에 가장 적합합니다
assistant-ui는 shadcn/ui와 cmdk를 모델로 한 API를 가진, MIT 라이선스의 TypeScript/React 조합 가능 채팅 프리미티브 라이브러리입니다. 이 라이브러리는 자동 스크롤링(auto-scrolling), 스트리밍 상태(streaming state), 접근성(accessibility)과 같은 복잡한 부분을 처리해주므로, 사용자는 외관의 모든 픽셀을 제어할 수 있습니다. Vercel AI SDK 및 LangGraph와 통합되며, 사용자 지정 백엔드와 작동하고, 도구 호출이 자체 컴포넌트로 렌더링되는 생성형 UI(generative UI)를 지원합니다. 채팅 기록용 선택적 호스팅 서비스인 assistant-cloud도 제공됩니다. 완성된 템플릿으로는 대응하기 어려울 만큼 독특한 채팅 UX를 가지고 있다면 이 라이브러리를 선택하세요.
5. CopilotKit - 앱 내 코파일럿에 최적
CopilotKit은 채팅 제품을 구축하는 대신, 기존 애플리케이션 내부에 AI 코파일럿을 추가한다는 약간 다른 문제를 해결합니다. 이 MIT 라이선스의 React UI 패키지는 세 가지 준비된 레이아웃(CopilotChat (임베디드), CopilotPopup, CopilotSidebar)과 헤드리스 모드를 제공하며, 더 넓은 프레임워크는 에이전트가 앱 상태를 읽고 생성형 UI(generative UI)를 구동하도록 하는 데 중점을 둡니다. 제품이 코너에 비서가 필요한 대시보드나 편집기라면, 이 것이 어떤 전체 페이지 채팅 템플릿보다 더 적합합니다.
6. prompt-kit - 가장 가벼운 shadcn 애드온에 최적
prompt-kit은 shadcn/ui를 기반으로 구축된 오픈 소스 AI 채팅 컴포넌트 세트입니다: 프롬프트 입력, 자동 스크롤링 채팅 컨테이너, 마크다운 렌더러, Shiki 하이라이팅 코드 블록, 응답 스트림 컴포넌트 및 기타 몇 가지 요소가 포함됩니다. 이 라이브러리는 AI Elements보다 범위가 작다는 것이 장점입니다. 필요한 두세 개의 조각을 가져와 shadcn CLI로 설치하고 나머지 모든 것은 자신만의 것으로 유지할 수 있습니다.
비교표
| Kit | 유형 | 백엔드 | 인용(Citations) / 캔버스 | 키 없이 실행 가능 여부 | 가격 |
|---|
| Vercel Chatbot | 전체 앱 | Auth, Postgres, Blob, AI Gateway | Artifacts | 아니요 | 무료 |
| ... | | | | | |
선택 방법
- 데이터베이스와 모델에 처음부터 강력하게 연결된 무료 챗봇을 원한다면 - Vercel Chatbot.
- 스트리밍, 인용(citation), 캔버스가 포함된 완성도 높고 독특한 채팅 제품 UI를 갖추고 있으며, 자체 모델을 연결할 계획이라면 - Relay.
- 이미 shadcn/ui + AI SDK 앱을 가지고 있고 채팅 표면(chat surface)만 추가하고 싶다면 - AI Elements, 또는 좀 더 가벼운 것을 원한다면 prompt-kit.
- 채팅 UX가 독특하며 의견이 아닌 기본 요소(primitives)를 원한다면 - assistant-ui.
- 챗봇 제품 자체를 구축하는 것이 아니라 기존 대시보드나 에디터에 어시스턴트를 추가하는 경우 - CopilotKit.
이들은 항상 'A 아니면 B'의 관계는 아닙니다. 일반적인 패턴은 제품 셸과 디자인을 위해 템플릿을 포크(fork)한 다음, 실제 모델 호출에는 서버 측 AI SDK를 사용하는 것입니다. Relay의 스트림 후크(stream hook)는 바로 그러한 교체에 맞춰 설계되었습니다.
Relay 확인하기 - Next.js용 AI 채팅 UI 키트입니다. 스트리밍 응답, 인용 팝오버, 격리된 코드 캔버스, Cmd+K, 내보내기 기능, 그리고 완전한 스레드형 채팅 앱을 제공합니다. 가볍고 어두운 테마를 지원하며, 설정 없이 바로 실행할 수 있습니다.