Vercel의 AI Elements가 사용 중단됩니다. shadcn/ui AI 채팅 UI 대안은 다음과 같습니다
요약
Vercel의 AI Elements가 2026년 11월 말에 사용 중단되면서, 개발자들은 shadcn/ui의 자체 AI Elements로 대체해야 합니다. 이 글은 마이그레이션 과정과 함께 'Pieces(컴포넌트 조각)'와 'Screens(완성된 화면)'이라는 두 가지 접근 방식을 비교 분석합니다.
핵심 포인트
- Vercel AI Elements는 2026년 11월 말에 사용 중단됩니다.
- 대체재는 shadcn/ui의 자체 AI Elements이며, 채팅 패턴 21가지를 제공합니다.
- Pieces 방식은 유연하지만 수동 구성이 필요하며, Screens 방식은 완성도가 높습니다.
- 개발자는 자신이 원하는 '조각'과 '완성된 화면' 중 어떤 접근 방식을 선택해야 합니다.
올해 Vercel의 AI Elements를 사용하여 AI 채팅을 구축했다면, 해당 저장소에 이제 알림이 표시됩니다. 이 라이브러리는 2026년 11월 말에 사용 중단되며, shadcn/ui의 AI Elements로 대체될 예정입니다.
본 게시물에서는 이것이 여러분의 코드에 무엇을 의미하는지, 어떤 것이 대체재인지, 그리고 2026년 후반에 shadcn/ui로 AI 채팅 UI를 시작할 때의 다른 옵션들을 다룹니다. 저는 그 옵션 중 하나인 HextaUI를 유지하고 있으므로, 이곳에 어떻게 적합한지, 그리고 그렇지 않은지를 말씀드리겠습니다.
첫째: 여러분의 코드는 계속 작동합니다
AI Elements는 shadcn 스타일 레지스트리였습니다. 컴포넌트들은 프로젝트 내부로 복사되었습니다. 업데이트를 받지 못하게 하는 패키지는 없으므로 12월 1일에도 아무것도 고장 나지 않습니다. 사용 중단된다는 것은 Vercel로부터 새로운 컴포넌트나 수정 사항이 제공되지 않는다는 의미이며, 문서도 결국 다른 곳을 가리킬 것입니다.
시간이 있습니다. 이번 주에 마이그레이션을 서두르지 마세요.
대체재는 무엇인가요
2026년 10월 shadcn/ui가 자체 AI Elements를 발표했습니다. 이는 shadcn/ui 컴포넌트로 구축된 에이전트 인터페이스를 위한 21가지 패턴입니다. 채팅, 프롬프트 입력(Prompt Input), 추론(Reasoning), 도구(Tool), 계획(Plan), 서브에이전트(Subagent) 등이 있습니다. 각 패턴 페이지는 AI SDK 메시지 파트를 통해 어떻게 렌더링하는지 보여줍니다. 패키지는 없습니다. 여러분은 각 패턴을 복사해야 합니다.
이들은 Base UI, React Aria, Radix 전반에서 작동하는 Trace와 Code Block이라는 두 가지 새로운 컴포넌트와 함께 제공됩니다.
Vercel 라이브러리로부터의 마이그레이션은 낮은 마찰(low-friction)을 목표로 합니다. 내보내기 이름(Export names)과 속성(props)은 패턴이 재구축된 곳에 유지되며, 각 패턴 페이지에는 AI 코딩 에이전트에게 전달할 수 있는 마이그레이션 프롬프트가 포함되어 있습니다. 재구축되지 않은 요소들은 다루지 않으므로, 목록을 사용하고 있는 것과 비교하여 확인하세요.
조각(pieces)과 화면(screens) 사이의 솔직한 차이점
아래 제시된 모든 옵션은 두 가지 캠프 중 하나에 속하며, 어떤 것을 원하는지 아는 것이 일주일 시간을 절약해 줍니다.
Pieces는 Message, Prompt Input, Tool 컴포넌트를 제공합니다. 사용자는 화면을 디자인하고 답변 실패 시, 스트리밍 중지 시, 도구 승인이 필요할 때, 업로드 실패 시 어떤 일이 발생할지 결정합니다. AI Elements와 prompt-kit 두 버전 모두 pieces에 속합니다.**
Screens는 채팅 스레드, 컴포저, 도구 호출 목록 및 설정 페이지를 이미 완성된 의사결정과 함께 제공합니다. 사용자는 여기에 데이터를 연결하고 테마 토큰으로 스타일을 재지정할 수 있습니다. HextaUI의 블록이나 Vercel의 AI Chatbot 템플릿 같은 완전한 앱이 screens에 해당합니다.
Pieces는 무료이고 유연하며, Screens는 빠르고 완성도가 높습니다. 어느 쪽도 틀리지 않습니다.
다섯 가지 옵션 비교
1. shadcn/ui의 AI Elements
무료이며 MIT 라이선스이고, shadcn 팀이 유지 관리하며, Base UI, React Aria 및 Radix를 위해 구축되었습니다. pieces입니다. 자체적으로 구성하고 가장 많이 사용되는 레지스트리를 유지하려는 경우 자연스러운 기본 선택지입니다. 2026년 10월에 새롭게 출시되었으므로, 패턴 목록이 성장하고 거친 부분이 몇 달 동안 다듬어질 것으로 예상됩니다.
2. prompt-kit
무료이며 MIT 라이선스이고, shadcn CLI로 설치할 수 있습니다. Prompt Input, Message, Reasoning, Chain of Thought, Tool, File Upload 및 채팅 앱과 히스토리 사이드바를 포함한 예제 블록을 제공합니다. 좋은 예제가 있는 pieces입니다. Radix 기반으로 구축되었기 때문에, Base UI 프로젝트는 이 라이브러리를 사용하는 동안 원시(primitive) 레이어 두 가지를 모두 갖게 됩니다.
3. assistant-ui
무료이며 MIT 라이선스이고, 저장된 스레드를 위한 선택적 유료 클라우드가 있습니다. 이것은 종류가 다릅니다: 대화를 관리하는 자체 런타임이 있는 채팅 프레임워크이며, 여기에 헤드리스(headless) 원시 컴포넌트와 이를 읽어오는 스타일링된 컴포넌트가 포함됩니다. AI SDK, LangGraph, LangChain, AG-UI 등의 어댑터가 있습니다. 런타임이 채팅 상태를 소유하기를 원한다면 이것을 선택하세요. 이미 useChat이나 자체 스토어에 상태가 존재하고 앱을 감싸는 것이 원치 않는다면 건너뛰세요.
4. shadcn-chatbot-kit 및 AI Chatbot 템플릿
Blazity의 shadcn-chatbot-kit은 더 작은 규모의 챗봇 컴포넌트 세트를 제공합니다. Vercel의 AI Chatbot은 로그인 기능과 데이터베이스가 포함된 완전한 Next.js 앱이며, 모든 구성 요소를 연결된 상태로 확인하고 싶을 때 표준 참고 자료(canonical reference)가 됩니다. 이 두 가지는 채택하지 않더라도 읽어볼 가치가 있습니다.
5. HextaUI blocks
화면(Screens). 실패한 답변에 '다시 시도'를 제공하고, 중단된 답변은 그 사실을 알리며, 편집 및 재시도는 전환할 수 있는 버전으로 만듭니다. "대신 이것을 하세요"라는 이유와 함께 승인 상태를 포함하여 모든 AI SDK 도구 상태가 반영되는 Tool Calls 기능이 있습니다. 반쯤 입력된 구문(half-typed syntax)을 절대 보여주지 않는 스트리밍 및 Markdown 기능을 갖추고 있습니다. 일본어 및 중국어 입력을 안전하게 처리하고, 업로드 진행 상황과 재시도를 표시하며, 답변 도중에 입력된 메시지를 큐에 넣고 리로드 시에도 초안을 유지하는 Prompt Input이 있습니다. 게다가 설정(settings), 모델(models), API 키, 결제(billing), 팀(team), 보안(security) 등 챗 제품 주변의 화면들도 갖추고 있습니다.
내부 컴포넌트들은 무료이며 MIT 라이선스입니다. AI 블록은 HextaUI Pro로, 일회성 결제로 이후 모든 블록이 포함되며, Prompt Input은 무료입니다. Base UI를 기반으로 구축되었으며 SDK를 임포트하지 않고도 AI SDK 메시지 부분을 읽어옵니다. 모든 것을 무료로 원하거나 Radix를 원하는 분에게는 적합하지 않습니다.
한눈에 보기 (At a glance)
| Camp | 가격 | 기본 요소 (Primitives) | AI SDK | |
|---|---|---|---|---|
| AI Elements (shadcn/ui) | 조각(Pieces) | 무료 | Base UI, React Aria, Radix | 예시에서 사용됨 |
| ... |
결정 방법 (How to decide)
- 새로 시작하며 직접 조합하고 싶은 경우: shadcn/ui의 AI Elements.
- 이미 트리에 Vercel의 AI Elements를 가지고 있는 경우: 새로운 것이 필요할 때까지 유지하다가, 마이그레이션 프롬프트를 사용하여 패턴별로 이동합니다.
- 스레드 관리, 분기 처리 및 영속성 관리를 위한 런타임(runtime)을 원하는 경우: assistant-ui.
- 챗 기능과 그 주변의 제품 화면까지 완성되어 있고, 실패 상태 처리가 되어 있으며, 한 번 지불하는 것에 문제가 없는 경우: HextaUI.
이 모든 것을 프로젝트에 복사하여 shadcn/ui 테마 토큰을 사용하면 한 화면씩 조합할 수 있습니다. 주의할 점은 프라이미티브(primitives)입니다. Radix 기반 키트를 Base UI 프로젝트에 혼합하는 것은 가능하지만, 두 가지를 모두 배포해야 합니다.
저는 hextaui.com/compare/ai-elements에서 전체 부품별 매핑이 포함된 더 자세한 비교와 shadcn AI chat templates에 대한 7가지 방식의 분석을 유지하고 있습니다.
FAQ
Vercel의 AI Elements는 정확히 언제 사용 중단되나요? 저장소에는 2026년 11월 말이라고 나와 있습니다.
기존 AI Elements 컴포넌트가 작동하지 않게 되나요? 아니요. 그것들은 사용자님의 저장소에 존재합니다. 업데이트를 받지 못할 뿐입니다.
새로운 AI Elements는 패키지인가요? 아닙니다. shadcn CLI와 함께 복사하는 일련의 패턴이며, 이는 shadcn/ui 자체와 동일한 방식입니다.
Vercel AI SDK 없이 HextaUI 블록을 사용할 수 있나요? 예. 그것들은 메시지를 AI SDK의 parts shape으로 props로 받아들이며, SDK를 가져오지 않습니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기