AI SDK 3.0를 사용하여 만들어보는 GENERATIVE UI
목차
- 개요
- AI SDK란 무엇인가요?
- AI SDK의 주요 기능
- AI SDK의 업데이트 소식
- AI SDK와 React Server Components
- 새로운 패러다임: Generative UI
- AI SDK의 실제 사용 예시
- 결론
- FAQ
- 참고 자료
개요
안녕하세요! Raj입니다. 만약 여러분들이 제 채널에 처음 오신 분들이라면 반가워요. 몇 달 전부터 AI 앱 개발을 하고 계셨다면, AI SDK라는 라이브러리에 대해 들어봤을 것입니다. 이 라이브러리는 versal에서 개발되고 유지보수되는 라이브러리로, typescript로 AI 앱을 구축하는 데 도움을 주는 훌륭한 라이브러리입니다. 이번에 AI SDK에 대한 새로운 업데이트가 공개되었는데, 이 업데이트는 상당히 큰 변화를 가져왔습니다. 하지만 그 전에, AI SDK 이전에 versal에서 개발한 다른 AI 도구에 대해 간단히 살펴보겠습니다. 이 AI 도구는 텍스트 프롬프트를 리액트 컴포넌트로 변환해주는 기능을 가지고 있었고, 그 외에도 리액트 컴포넌트를 LLM에서 바로 스트리밍할 수 있는 기능을 제공했습니다. 이번에 versal은 이러한 스트리밍 알고리즘을 AI SDK에 오픈소스로 공개하였으며, 몇 가지 추가적인 API도 도입했습니다. 이제 AI 앱을 쉽게 구축할 수 있는 새로운 개념을 소개하고 있습니다.
AI SDK란 무엇인가요?
AI SDK는 versal에서 제공하는 라이브러리로, typescript를 사용하여 AI 앱을 더욱 쉽게 구축할 수 있게 도와줍니다. AI SDK를 사용하면 LLM과의 인테그레이션을 간단히 할 수 있으며, 리액트 컴포넌트를 스트리밍하여 앱을 더욱 상호작용적이고 반응성있게 만들 수 있습니다.
AI SDK의 주요 기능
- AI 앱과의 간편한 인테그레이션
- LLM과의 리액트 컴포넌트 스트리밍 기능
- 앱의 반응성과 성능 유지를 위한 클라이언트 사이드 자바스크립트 최적화 기능
AI SDK의 업데이트 소식
AI SDK의 최신 업데이트에 따르면, AI를 앱에 통합하는 방법을 단순화하기 위해 React Server Components를 사용할 수 있게 되었습니다. 이제 클라이언트 사이드 자바스크립트를 사용하지 않고도 LLM에서 UI 컴포넌트를 직접 스트리밍할 수 있습니다. 이를 통해 앱은 더욱 상호작용적이고 반응성있게 동작할 수 있습니다.
AI SDK와 React Server Components
React Server Components 또는 RSC는 서버에서 컴포넌트를 구축하고 추가적인 복잡성을 도입하는 것에 대한 다양한 변화를 가져왔습니다. 이제 AI SDK의 이번 업데이트에서 이러한 React Server Components의 이점을 최대한 활용하고 있습니다. 이를 통해 서버에서 클라이언트로 리액트 컴포넌트를 스트리밍하고 클라이언트 사이드에서 LLM 입력을 상호작용적으로 업데이트할 수 있습니다.
새로운 패러다임: Generative UI
이번 AI SDK의 업데이트에서는 "Generative UI"라는 새로운 패러다임이 소개되었습니다. Generative UI는 AI State와 UI State라는 두 가지 개념으로 구성되어 있습니다. AI State는 일반적으로 LLM의 입력으로 전달되는 JSON 데이터로, 클라이언트 사이드와 서버 사이드에서 접근할 수 있습니다. 반면, UI State는 LLM 백엔드에서 반환되는 모든 텍스트와 컴포넌트의 모음으로, 서버는 이에 대해 알지 못하며 클라이언트 사이드에서만 액세스할 수 있습니다. 이러한 패러다임 변화를 통해 서버에서 클라이언트로 리액트 컴포넌트를 스트리밍하고 클라이언트 사이드에서 LLM 입력을 업데이트할 수 있게 되었습니다.
AI SDK의 실제 사용 예시
AI SDK를 사용하여 구축된 일부 실제 사용 예시를 살펴보겠습니다.
날씨 정보 조회 앱
일반적으로 날씨 정보를 조회하는 AI 에이전트의 출력은 텍스트 형식일 것입니다. 하지만 AI SDK를 사용하면 해당 정보에 맞는 커스텀한 리액트 서버 컴포넌트를 반환할 수 있습니다. 이렇게 되면 에이전트의 출력에 따라 서버에서 클라이언트로 컴포넌트를 전송할 수 있으며, 여러 단계로 나뉘어 작업을 수행하는 여러 개의 에이전트가 있다면 각 단계마다 클라이언트에게 출력을 전송하여 클라이언트를 항상 최신 상태로 유지할 수 있습니다.
상호작용적인 UI 업데이트
AI SDK를 통해 개발된 공식 데모에서는 주식 구매 에이전트가 제공되고 있습니다. 이 에이전트를 사용하면 주식에 관한 정보를 확인하고 시간에 따른 주식 가격 변화 그래프를 얻을 수 있으며, 이 그래프와 상호작용할 수 있습니다. 그래프에 원하는 범위를 강조하고 해당 범위에 대해 질문을 하면 답변을 받을 수 있습니다. 이런 상호작용은 클라이언트 컴포넌트인 Range Highlighter를 통해 가능하며, 클라이언트 컴포넌트는 AI State를 업데이트합니다. 그리고 이 업데이트된 AI State는 서버로의 다음 요청 시에 서버로 전송됩니다. 이를 통해 대화가 더욱 상호작용적이고 앱과 같이 동작하는 느낌을 줄 수 있습니다.
결론
AI SDK는 JavaScript로 상호작용적인 AI 앱을 구축하는 데에 큰 도움을 주는 훌륭한 도구입니다. 최신 업데이트로 인해 AI를 앱에 통합하는 방법이 더욱 간단해졌으며, React Server Components와의 결합으로 앱의 반응성을 유지하면서 상호작용성을 높일 수 있게 되었습니다. AI 앱 개발에 관심이 있다면, AI SDK를 살펴보시기 바랍니다.
FAQ
AI SDK를 사용하기 위해선 어떤 기술적인 요구사항이 있나요?
AI SDK를 사용하기 위해서는 TypeScript와 React에 대한 기본적인 지식이 필요합니다.
AI SDK의 라이선스는 어떻게 되나요?
AI SDK는 MIT 라이선스 하에 오픈소스로 제공되고 있습니다.
AI SDK를 사용하여 개발된 앱은 어디에서 배포할 수 있나요?
AI SDK를 사용하여 개발된 앱은 웹 환경에서 배포할 수 있으며, 서버사이드 렌더링을 지원하는 프레임워크와의 결합이 가능합니다.
참고 자료