Shadcn의 AI 요소: 아름다운 AI 챗봇 앱을 5분 만에 만드는 마법 같은 방법

https://youtu.be/dS7hyPNvIb8?si=pmuiP3YunpDTF4jU

Shadcn's AI Elements are AWESOME (easiest way to build a chat app)

-- Shadcn은 정말 끝내줍니다. 이 비디오를 클릭하셨다면 굳이 제가 설명할 필요는 없을 겁니다. 이것은 유연하지 못한 UI 라이브러리에서 벗어나 완벽한 제어권을 가지면서도 빠르게 작업할 수 있게 해줌으로써 제 워크플로우를 엄청나게 바꿔 놓았습니다. 아름다운 앱을 정말 쉽게 만들 수 있게 해주죠.

-- 이제 AI 엘리먼트 덕분에 아름다운 채팅 앱이나 Vzero와 같은 완전한 VI 코딩 도구를 만들 수 있습니다. 이것들은 Vercel이 제공하며, 이는 AI SDK를 위해 만들어졌다는 것을 의미합니다. 그래서 AI 앱을 만드는 것이 그 어느 때보다 쉬워졌고, 이 비디오에서 제가 그것을 증명할 것입니다. 그러니 여러분이 사용할 수 있는 멋진 모든 구성 요소들을 살펴본 다음, 제가 채팅 앱을 얼마나 빨리 멋지게 꾸밀 수 있는지 알아보겠습니다. AI 엘리먼트에서 얻을 수 있는 모든 구성 요소들을 빠르게 살펴본 다음, 제가 직접 사용해 보겠습니다.

-- 저는 Vercel 웹사이트에 있는 이 문서를 보고 있습니다. 왼쪽에는 우리가 사용할 수 있는 모든 구성 요소들의 목록이 있습니다. 여러분은 이것을 저희 CLI 도구로 설치하거나 Shadcn으로 설치할 수 있습니다.

-- 그래서 여기에 AI 엘리먼트를 사용하여 달성할 수 있는 몇 가지 기본 예시가 있습니다. 여기에는 ChatGPT 클론, Claude 클론, 그리고 심지어 Grok 클론도 있습니다. 이 모든 것의 가장 좋은 점은 동일한 구성 요소가 다른 방식으로 스타일링될 것이라는 점입니다. 이것이 바로 Shadcn의 마법의 일부입니다. 여러분은 제대로 작동하는 구성 요소를 얻으면서도 스타일링에 대한 완벽한 제어권을 가집니다.

-- 위에서부터 시작하자면, 첫 번째 구성 요소는 액션(Actions)입니다. 메시지 아래에 있는 아주 좋은 도우미입니다. 메시지를 다시 생성하거나, 좋아요 또는 싫어요를 누르거나, 복사하거나, 공유할 수 있게 해줍니다. 정말 좋은 구성 요소입니다.

-- 브랜치(Branch) 구성 요소는 정말 좋고 별도의 설정 없이 바로 작동합니다. 앱에서 몇 가지 옵션이 있을 경우 생성할 수 있는 다양한 메시지 중에서 선택할 수 있습니다.

-- 코드 블록(Code Block)은 애플리케이션에서 제대로 구현하기가 보통 상당히 어려운 부분입니다. 구문 강조 표시가 제대로 작동하도록 하는 것이 때로는 약간 어렵고 잘하기 힘들 수 있습니다. 그래서 이것을 바로 얻을 수 있다는 것은 정말 멋진 일입니다.

-- 그런 다음 기본 대화(Conversation) 구성 요소가 있습니다. 이것은 우리를 정말 빠르게 시작하고 실행할 수 있게 해줄 것입니다. 문자 그대로 AI SDK와 이 대화 구성 요소만 있으면 됩니다.

-- 이 대화 구성 요소만 있으면 준비가 끝납니다. 우리는 기본적으로 이미 전체 채팅 앱을 구축했습니다. 정말 멋진 일입니다. 이미지(Image)나 로더(Loader)와 같은 몇 가지 도우미 구성 요소도 있습니다. 그리고 단일 메시지(Single Message)와 프롬프트 입력(Prompt Input)도 있는데, 프롬프트 입력은 제가 가장 좋아하는 구성 요소 중 하나입니다. 저는 프롬프트 입력을 어떻게 디자인해야 할지 항상 어려움을 겪었는데, 이것을 설치하기만 하면 되고 제대로 작동할 것이라는 것을 알 수 있어서 정말 좋습니다. 첨부 파일 추가, 음성 대화 또는 검색 사용이 가능합니다.

-- 그리고 모델 선택기(Model Selector)도 있습니다. 이런 기능들이 통합되어 있다는 것을 보니 정말 좋습니다. 이것은 아마도 Shadcn의 드롭다운 기능일 것이라고 생각합니다.

-- 그런 다음 추론(Reasoning) 섹션이 있습니다. 채팅 앱을 구축하고 있는데, 앱이 어떤 추론과 함께 응답한다면 여기에 멋진 접을 수 있는 섹션을 가질 수 있습니다.

-- 그리고 응답(Response) 그 자체입니다. 채팅 앱을 구축할 때 제대로 구현하기 정말 어려운 또 다른 부분입니다. 마크다운 렌더링을 완벽하게 제대로 하는 것이 때로는 상당히 어려운 일입니다. 코드 블록도 있고, 수학 렌더링도 있습니다. AI SDK가 처음 나왔을 때, 이 모든 도구들이 마크다운을 어떻게 렌더링하는지, 그리고 애플리케이션에서 제대로 렌더링하는 방법을 알아내는 것이 좀 골치 아팠던 기억이 납니다. 이제는 문자 그대로 구성 요소 하나만 설치하면 모든 것이 완료됩니다. 정말 멋진 일입니다.

-- 그런 다음 몇 가지 추가 도우미가 있습니다. 예를 들어 웹을 사용하는 경우 메시지 아래에 둘 수 있는 소스(Sources)가 있습니다. 제안(Suggestions) 구성 요소도 있고, 작업(Task) 구성 요소도 있습니다. Vercel 코딩 도구와 같은 것을 구축하고 있다면 page.tsx 읽기와 같이 어떤 작업을 수행했는지 보여주고 싶을 수 있습니다.

-- 그런 다음 도구 호출(Tool Call) 구성 요소가 있습니다. 이것은 채팅 앱에서 사용할 수 있습니다. 예를 들어 데이터베이스 쿼리와 같은 것을 호출했을 때, 매개변수와 결과가 표시되며 접을 수 있어서 좋습니다. 마지막으로 웹 미리보기(Web Preview)도 있습니다. 브라우저 사용이 있거나 실제 코드의 결과를 애플리케이션에서 보여주고 싶은 Vercel 코딩 도구를 구축하고 있다면 이것은 매우 강력한 구성 요소가 될 것입니다. 이것이 AI 엘리먼트에서 얻을 수 있는 모든 구성 요소들에 대한 빠른 소개였습니다.

-- 보시다시피 모든 구성 요소들이 아름답고 사용하기 쉬울 것입니다. 그러니 그것을 시험해 보고 이 구성 요소들을 AI SDK와 얼마나 빨리 연결하여 완벽하게 작동하는 채팅 앱을 얻을 수 있는지 확인해 봅시다.

-- 이것이 제가 현재 가지고 있는 채팅 앱입니다. 보시다시피 별로 좋지 않아 보입니다. 만약 제가 "루이스 해밀턴은 챔피언십을 몇 번 우승했나요?"와 같은 메시지를 붙여넣고 웹 검색을 요청한 다음 전송을 누르면, 사용자 메시지가 여기에 표시되고, 일부 소스와 함께 어시스턴트 메시지도 표시됩니다. 마크다운 렌더링이 작동하지 않고, 다시 말하지만 그냥 별로 좋지 않아 보입니다. 이것을 AI SDK와 간단한 HTML 엘리먼트, 그리고 Tailwind를 사용하여 설정하는 데 약 5분이 걸렸습니다.

-- 실제 페이지에서 보면 여기에 입력 상자와 그에 대한 상태가 있습니다. 여기 아래에는 모델 선택기가 있어서 GPT-5와 Claude 중에서 선택할 수 있습니다. 요즘 좀 논란이 되는 것 같은데, 여러분은 이 둘 중 어느 것을 선택할지 알려주세요. 그런 다음 웹 검색 토글이 있습니다. 마지막으로 AI SDK의 useChat 훅에서 오는 메시지들과, 텍스트 입력 및 모델 선택, 그리고 웹 검색 여부 선택을 실제로 처리할 sendMessage 함수도 있습니다.

-- 보시다시피 간단한 HTML 엘리먼트, 많은 div 태그, 그리고 Tailwind를 사용했습니다. 우리는 메시지들을 매핑하여 메시지의 역할을 결정하고, 어시스턴트 메시지인 경우 어시스턴트 텍스트를 표시합니다. 소스가 있는 경우 작은 드롭다운으로 소스도 표시합니다. 그런 다음 텍스트와 추론이 있는지 여부에 따라 아래의 부분들도 매핑합니다. 이것을 확실히 조금 더 멋지게 꾸밀 수 있습니다. 그러나 먼저 애플리케이션에서 AI SDK를 얼마나 빨리 설정할 수 있는지 보여드리겠습니다.

-- 필요한 것은 post 요청을 처리하는 엔드포인트뿐입니다. 여기에서 streamText 함수를 사용합니다. 사용하고 싶은 모델을 전달합니다. 웹 검색을 원한다면 내장된 웹 검색 기능이 있는 Perplexity 모델을 사용하거나, 이전에 선택한 모델을 사용할 수 있습니다. 그런 다음 단순히 convertModelMessages 함수를 통해 모든 것을 처리하는 메시지들을 가집니다. 그런 다음 시스템 프롬프트가 있습니다. 저는 루이스 해밀턴이 8번의 챔피언십을 우승했다고 말하도록 요청했는데, 그것이 제가 믿는 바이기 때문입니다. 그러나 분명히

-- 그들은 저를 무시하고 웹에서 찾은 내용에 따라가고 있습니다. 저에게는 좀 짜증나는 일이지만, 기술적으로는 맞는 말이라고 생각합니다. F1에 대해 방금 5분 동안 떠들었던 내용은 잘라내고, 이제 AI 엘리먼트 사용을 시작할 수 있습니다.

-- 첫 번째 단계는 AI 엘리먼트를 설치하는 것입니다. 말씀드린 대로 Shadcn CLI를 사용하거나, `npx ai-elements@latest`를 실행할 수 있습니다. 이것은 실제로 모든 구성 요소들을 설치해 줄 것입니다. 개별 구성 요소를 선택하고 싶다면 해당 명령에 대한 문서를 찾아보면 됩니다. 여기서 `n`을 누르면, Shadcn도 활성화되어 있어야 합니다. AI 엘리먼트를 사용하기 전에 Shadcn을 설치해야 합니다. AI 엘리먼트 자체가 Shadcn 구성 요소의 일부를 사용하기 때문입니다.

-- 여기에 설치되어 27개의 파일이 생성된 것을 볼 수 있습니다. 코드에서 components 폴더에 AI elements와 UI 폴더가 있습니다. 즉, Shadcn UI 구성 요소도 함께 설치되었습니다. AI elements 내부를 보면 Shadcn과 그것이 구성되는 방식과 매우 유사해 보입니다.

-- 여기에는 액션(Action) 구성 요소가 있지만, 원한다면 모든 동작과 스타일링을 변경할 수 있습니다. 제가 궁금한 것은 코드 블록(Code Block)입니다. 여기서는 구문 강조 표시를 위해 React Syntax Highlighter를 사용하고 있으며, 스타일을 위해 Prism을 사용합니다. 그리고 여기 아래의 응답(Response)에서는 마크다운 응답을 위해 React Markdown을 사용하고 있습니다. 여기에는 수학 처리를 위한 몇 가지 플러그인이 있으며, 포맷된 마크다운을 얻을 수 있어서 정말 좋습니다. 이것은 바로 사용할 수 있습니다. 또한 harden-react-markdown도 포함되어 있습니다.

-- 그럼 이제 이 구성 요소들을 앱에서 실제로 사용해 봅시다. 첫 번째 단계는 아래에 있는 우리의 엉망인 프롬프트 입력 상자를 좀 더 보기 좋은 것으로 바꾸는 것입니다. 제가 가지고 있던 못생긴 폼 구성 요소를 삭제하고 프롬프트 입력(Prompt Input) 구성 요소로 교체하겠습니다.

-- 여기에서 래퍼(Wrapper) 구성 요소는 기본적으로 모든 것을 처리하고 `onSubmit`도 처리합니다. 그런 다음 입력을 설정하는 텍스트 영역 자체가 있습니다. 그리고 그 위에 무엇이든 넣고 싶은 도구 모음(Toolbar)이 있습니다. 제 경우에는 당연히 검색 및 모델 선택기가 있습니다. 이를 위해 단순히 `PromptInputButton`이 있어서 `onClick`에 전달할 내용을 제어할 수 있습니다.

-- 그리고 모델 선택기는 내장되어 있으며 `PromptInputModelSelect` 구성 요소가 있습니다. 여기에 선택하고 싶은 모델들을 전달하기만 하면 됩니다. 여기 아래에서 GPT-5와 Claude 중에서 선택할 수 있습니다. 하지만 보시다시피 이 구성 요소는 제가 이전에 가지고 있던 것보다 훨씬 더 보기 좋습니다. 그리고 검색 기능을 켜고 끌 수 있습니다.

-- 이제 메시지 구성 요소를 교체해 봅시다. 제가 이전에 가지고 있던 모든 것을 삭제하고 멋진 AI 엘리먼트 구성 요소들로 교체하겠습니다. 전체 대화(Conversation) 구성 요소가 있는데, 이것은 전체를 감싸는 래퍼입니다. 그 안에는 대화 내용(ConversationContent)이 있습니다. 메시지가 어시스턴트이고 소스를 가지고 있다면, 우리는 소스(Source) 구성 요소를 사용하여 소스를 표시합니다. 대부분의 Shadcn 구성 요소와 유사하게 구성되어 있습니다. 래퍼, 트리거, 그리고 내용으로 구성됩니다.

-- 그런 다음 메시지(Message) 자체도 있습니다. 그 안에 메시지 내용(MessageContent)이 있습니다. 텍스트라면 마크다운 렌더링을 처리하는 응답(Response) 구성 요소를 반환할 것입니다. 추론이라면, 모델이 추론할 수 있다면 추론 텍스트(ReasoningText)도 반환할 것입니다. 이것이 아름다운 채팅 앱을 만드는 데 필요한 모든 코드입니다. 정말 간단하고 약 5분 정도 걸립니다.

-- 마지막으로 테스트해 봅시다. 훨씬 더 보기 좋다는 것을 알 수 있습니다. 제가 같은 질문을 하고 웹 검색을 켠 다음 엔터를 누르면, 제 메시지가 오른쪽에 표시됩니다. 루이스가 몇 개의 챔피언십을 가지고 있는지 묻는 질문입니다. 5개의 소스를 사용했으며, 모두 보고 싶다면 이것을 접을 수 있습니다. 그리고 설명이 굵게 표시되어 있는 것으로 보아 마크다운도 렌더링되고 있습니다. 만약 제가 검색을 끄고 "2021년은 어때요? 확실해요?"와 같은 다른 질문을 한다면, GPT-5를 사용할 때 생각하는 응답이 스트리밍될 것입니다. 현재 GPT-5 모델이 약간 문제가 있는 것 같습니다. AI 엘리먼트의 문제가 아니라, GPT-5 모델이 추론 텍스트를 반환하지 않고 있습니다. 하지만 만약 반환된다면 여기에 스트리밍될 것이고, 접을 수도 있을 것입니다. 완료되면 드디어 AI가 저에게 거짓말을 하지 않고 루이스 해밀턴이 월드 챔피언십을 가지고 있다고 말해줍니다. 아마 사람들이 GPT-5에 너무 가혹했나 봅니다. 루이스 해밀턴이 최고라고 말해주네요.

---

-- 자, 이것이 AI 구성 요소를 위한 Shadcn입니다. AI SDK와 AI 엘리먼트를 사용하여 웹 검색 기능까지 갖춘 정말 아름다운 채팅 앱을 얼마나 빨리 만들 수 있는지 보셨을 겁니다. 문자 그대로 5분밖에 걸리지 않았습니다. 제가 사용한 모든 코드에 대한 링크를 설명에 남겨두었습니다. Vercel 문서에 있습니다. 그러니 빠르게 시작하고 싶다면 확인해 보세요. 그리고 이 비디오에 대해 어떻게 생각하시는지 아래 댓글로 알려주세요. Shadcn을 좋아하시나요? 이 모든 구성 요소들이 구성되는 방식이 마음에 드시나요? 아래에 계신 동안 구독 버튼도 눌러주시고, 늘 그렇듯이 다음 비디오에서 뵙겠습니다.

---

## Shadcn의 AI 요소: 아름다운 AI 챗봇 앱을 5분 만에 만드는 마법 같은 방법

안녕하세요, 개발자 여러분! 오늘은 여러분의 AI 앱 개발 워크플로우를 혁신할 수 있는 놀라운 도구인 **Shadcn의 AI 요소(AI elements)** 에 대해 이야기해보고자 합니다. 유연한 UI 라이브러리를 통해 완전한 제어권을 가지면서도 빠르게 작업할 수 있도록 도와주는 Shadcn은 이미 많은 분들에게 사랑받고 있죠. 이제는 AI 요소 덕분에 아름다운 채팅 앱이나 Vzero와 같은 완전한 VI 코딩 도구까지 쉽게 만들 수 있게 되었습니다. 이 모든 것은 Vercel(VEL)에서 제공하며, AI SDK를 위해 특별히 제작되어 AI 앱 개발을 그 어느 때보다 쉽게 만들어 줍니다.

### AI 요소란 무엇인가요?

AI 요소는 Shadcn 기반의 재사용 가능한 UI 컴포넌트 모음으로, AI 애플리케이션, 특히 채팅 인터페이스를 구축하는 데 필요한 복잡한 기능을 단순화합니다. 이 컴포넌트들은 AI SDK와 함께 작동하도록 설계되어, 개발자가 UI 구현에 드는 노력을 최소화하면서도 강력하고 시각적으로 매력적인 앱을 만들 수 있도록 돕습니다. 비디오에서 언급된 바와 같이, 이 요소들은 자체 CLI 도구로 설치하거나 기존 Shadcn 설치에 추가할 수 있습니다. 가장 좋은 점은 이 컴포넌트들이 동일한 기본 구조를 가지면서도 Shadcn의 마법처럼 다양한 스타일로 변형될 수 있다는 것입니다. 이는 개발자가 기능적인 컴포넌트를 얻는 동시에 스타일링에 대한 완전한 제어권을 가질 수 있다는 의미입니다.

### 핵심 AI 요소 컴포넌트 살펴보기

AI 요소는 AI 앱 개발에 필수적인 다양한 컴포넌트들을 제공합니다. 몇 가지 주요 컴포넌트들을 자세히 살펴보겠습니다.

*   **Actions (액션)**: 이 컴포넌트는 메시지 아래에 표시되는 매우 유용한 도우미입니다. 메시지를 다시 생성하거나, 좋아요/싫어요를 표시하거나, 복사하거나, 공유할 수 있는 옵션을 제공하여 사용자 경험을 향상시킵니다. 이는 비디오의 초반 부분에서 설명되었습니다.

*   **Branch (브랜치)**: 이 컴포넌트는 앱이 생성할 수 있는 여러 메시지 옵션 중에서 선택할 수 있도록 설계되어, 다양한 응답 시나리오를 효과적으로 처리합니다. 비디오의 컴포넌트 소개 부분에서 간단히 언급되었습니다.

*   **Code block (코드 블록)**: 애플리케이션에서 구문 강조(syntax highlighting)를 정확하게 구현하는 것은 종종 매우 어려운 작업입니다. 그러나 AI 요소의 코드 블록 컴포넌트를 사용하면 이 기능을 즉시 얻을 수 있습니다. 이 컴포넌트는 React Syntax Highlighter와 Prism을 사용하여 구문 강조와 스타일링을 처리한다고, 비디오의 설치 후 코드 분석 섹션에서 설명하고 있습니다.

*   **Conversation (대화)**: 이 컴포넌트는 AI 채팅 앱의 핵심이며, 사실상 전체 채팅 앱을 구성하는 데 필요한 전부입니다. 비디오의 컴포넌트 개요에서 AI SDK와 이 대화 컴포넌트만 있으면 "완전한 채팅 앱을 이미 구축한 것"이라고 강조합니다.

*   **Prompt input (프롬프트 입력)**: 비디오의 화자는 이 컴포넌트를 "가장 좋아하는 컴포넌트" 중 하나로 꼽는데, 프롬프트 입력 디자인에 대한 어려움을 해결해주기 때문입니다. 이 컴포넌트는 첨부 파일 추가, 음성 대화, 검색 기능과 함께 사용할 수 있도록 준비되어 있습니다. 비디오에서 오래된 입력 상자를 교체하는 예시를 보여주면서 이 컴포넌트의 유용성을 강조합니다.

*   **Reasoning section (추론 섹션)**: 채팅 앱이 추론과 함께 응답하는 경우, 이 컴포넌트는 추론 내용을 멋진 접이식 섹션으로 표시할 수 있게 해줍니다. 이 기능은 비디오의 컴포넌트 목록 설명에서 언급되었습니다.

*   **Response (응답)**: 채팅 앱을 구축할 때 마크다운 렌더링을 정확하게 구현하는 것은 "정말 고통스러운 일"이라고 비디오에서 설명합니다. 특히 코드 블록이나 수학 렌더링과 같은 복잡한 요소들을 포함할 때 더욱 그렇습니다. AI SDK가 처음 나왔을 때는 이 부분을 처리하는 것이 "골치 아픈 일"이었지만, 이제는 이 응답 컴포넌트 하나만 설치하면 모든 마크다운 렌더링 문제가 해결됩니다. 이 컴포넌트는 React Markdown을 사용하여 마크다운 응답을 처리하며, 수학 처리 및 서식 있는 마크다운을 위한 여러 플러그인을 포함한다고, 비디오의 설치 및 구현 부분에서 자세히 설명합니다.

*   **Sources (출처)**: 웹 검색 결과를 사용할 때 메시지 아래에 출처를 표시하는 데 유용합니다. 비디오의 컴포넌트 소개 섹션에서 그 활용법을 언급했습니다.

*   **Tool call (도구 호출)**: 이 컴포넌트는 데이터베이스 쿼리와 같은 도구 호출을 표시하는 데 사용됩니다. 매개변수와 결과를 보여주며 접이식으로 되어 있어 깔끔하게 정보를 관리할 수 있습니다. 비디오의 컴포넌트 개요에서 예시를 들었습니다.

*   **Web preview (웹 미리보기)**: 브라우저 사용 기능을 가진 앱이나 코딩 도구에서 실제 코드 실행 결과나 웹 페이지 미리보기를 애플리케이션 내에 표시해야 할 때 매우 강력한 컴포넌트입니다. 이는 비디오의 컴포넌트 소개 마지막 부분에서 설명됩니다.

이 외에도 이미지(Image), 로더(Loader), 단일 메시지(Single message), 제안(Suggestions), 작업(Task) 컴포넌트 등 다양한 도우미 컴포넌트들이 제공되어 앱의 기능을 풍부하게 합니다. 비디오 전체에서 이러한 모든 컴포넌트들이 "아름답고 사용하기 쉬울 것"이라고 언급됩니다.

### AI 요소로 채팅 앱 업그레이드하기: 5분 만에 완성!

비디오에서는 기존에 이미 AI SDK를 사용해 구축했지만 디자인이 "별로 좋지 않고" 마크다운 렌더링이 작동하지 않던 채팅 앱을 AI 요소를 사용하여 개선하는 과정을 시연합니다. 기존 앱은 간단한 HTML 요소와 Tailwind CSS로 약 5분 만에 설정되었으며, 입력 상자, 모델 선택기(GPT5, Claude), 웹 검색 토글, AI SDK의 `useChat` 훅을 통해 메시지와 `sendMessage` 함수를 사용하고 있었습니다.

**1. AI 요소 설치:**
가장 먼저 할 일은 AI 요소를 설치하는 것입니다. 비디오의 중간 부분에서 설명된 바와 같이, `npx ai-elements@latest` 명령어를 사용하거나 Shadcn CLI를 통해 설치할 수 있습니다. 중요한 점은 AI 요소가 Shadcn 컴포넌트의 일부를 사용하므로, **AI 요소를 사용하기 전에 Shadcn이 활성화되어 있어야 한다는 것**입니다. 설치를 마치면 코드 베이스에 27개의 파일이 추가되며, `components` 폴더 아래에 `AI elements`와 `UI` (Shadcn UI 컴포넌트) 폴더가 생성됩니다.

**2. 프롬프트 입력 상자 교체:**
비디오에서는 기존의 "끔찍한 프롬프트 입력 상자"를 **PromptInput** 컴포넌트로 교체합니다. 이 컴포넌트는 모든 것을 처리하는 래퍼 컴포넌트와 `onSubmit` 핸들러, 텍스트 영역, 그리고 검색 및 모델 선택을 위한 툴바를 포함합니다. `PromptInputModelSelect` 컴포넌트를 통해 GPT5와 Claude와 같은 모델을 쉽게 선택할 수 있습니다. 비디오의 코드 수정 부분에서 이 교체만으로도 UI가 "훨씬 보기 좋아진다"고 언급합니다.

**3. 메시지 컴포넌트 교체:**
다음 단계는 기존 메시지 렌더링 로직을 AI 요소 컴포넌트로 대체하는 것입니다. 비디오에서는 이 부분을 자세히 설명합니다:
*   전체 메시지 영역의 래퍼로 **Conversation** 컴포넌트가 사용됩니다.
*   그 안에는 **ConversationContent**가 있습니다.
*   만약 메시지가 어시스턴트 메시지이고 출처(sources)가 있다면, **Source** 컴포넌트를 사용하여 출처를 표시합니다. 이 Source 컴포넌트는 대부분의 Shadcn 컴포넌트처럼 래퍼, 트리거, 콘텐츠로 구성됩니다.
*   메시지 자체는 **Message** 컴포넌트 내에 포함됩니다.
*   메시지 내용이 텍스트인 경우, **Response** 컴포넌트를 사용하여 마크다운 렌더링을 처리합니다.
*   모델이 추론(reasoning)을 제공한다면, 추론 텍스트도 반환됩니다.

비디오의 코드 변경 섹션에서 이러한 몇 줄의 코드만으로도 "아름다운 채팅"을 만들 수 있으며, 이 모든 과정이 약 5분밖에 걸리지 않는다고 강조합니다.

### 결과 및 최종 테스트

AI 요소를 적용한 후의 채팅 앱은 훨씬 더 매력적으로 변합니다. 비디오에서 루이스 해밀턴의 챔피언십에 대한 질문을 웹 검색 기능과 함께 다시 했을 때, 사용자 메시지가 오른쪽에 표시되고, 어시스턴트 메시지와 함께 5개의 출처가 표시되며(이 출처는 접을 수 있습니다), 설명이 굵게 표시되는 등 마크다운 렌더링이 완벽하게 작동하는 것을 확인할 수 있습니다.

또한, 비디오에서 웹 검색 없이 다른 질문을 했을 때(예: "확실해? 2021년은 어때?"), GPT5 모델이 추론 응답을 스트리밍하는 것을 시연하려 합니다. 비록 시연 당시 GPT5 모델 자체의 문제로 추론 텍스트가 반환되지 않았지만, 원래라면 이 추론 역시 접을 수 있는 형태로 스트리밍되어야 합니다. 최종적으로 AI는 루이스 해밀턴이 7번의 월드 챔피언십을 가지고 있다고 정확히 대답합니다.

### 마무리하며

결론적으로, 비디오의 마지막 부분에서 강조된 바와 같이, AI SDK와 Shadcn의 AI 요소를 함께 사용하면 **놀랍도록 아름다운 채팅 앱을 웹 검색 기능까지 포함하여 단 5분 만에 구축**할 수 있습니다. 이 과정은 매우 간편하며, Shadcn 컴포넌트의 구성 방식 덕분에 개발자는 기능과 스타일링 모두에 대한 완전한 제어권을 유지할 수 있습니다. 이 모든 코드는 Vercel 문서에서도 찾아볼 수 있다고 비디오의 끝 부분에서 알려줍니다. AI 앱 개발을 빠르고 효율적으로 시작하고 싶다면, Shadcn의 AI 요소는 분명 여러분의 워크플로우를 크게 향상시킬 것입니다.