버셀 AI SDK 소개: 사용 이유와 2.x에서 3.2 버전 변경 사항

업데이트된 버셀 AI SDK와 날씨 AI 챗봇 구현 방법 소개

안녕하세요. 오랜만에 글을 올립니다. "레벨업 리액트 프로그래밍 with Next.js" 책을 출간하고 처음으로 블로그 글을 작성합니다.

이 책의 '12장 AI 챗봇을 통합하는 웹 애플리케이션'에서는 버셀 AI SDK와 OpenWeatherMap API를 기반으로 사용자가 챗봇에게 날씨를 질문했을 때 OpenAI의 챗봇 텍스트 답변과 함께 리액트 컴포넌트로 보기 좋게 제공하는 기법을 소개했습니다.

하지만, 이 책을 작성할 당시^{'23년 12월} 버셀 AI SDK의 버전은 2.2.30이었고 현재^{'24년 7월}는 3.2 버전으로 업데이트되었습니다. 버전이 2.x에서 3.x로 업그레이드되면서 더 이상 사용되지 않거나 앞으로 사라질 Deprecated API들이 있어서 이 책의 예제를 확장하거나 학습하는 데 어려움이 있을 수 있습니다.

따라서, 최신 버전을 사용한 예제 코드와 함께 블로그 연재를 통해 최신 기술에 대한 지속적인 정보를 제공하고자 합니다.

버셀 AI SDK란 무엇인가?

공식 문서의 정의를 직역하면 다음과 같습니다.

"버셀 AI SDK는 개발자가 리액트, Next.js, 뷰, 스벨트, Node.js 등과 함께 AI 기반 애플리케이션을 구축할 수 있도록 돕기 위해 설계된 타입스크립트 툴킷입니다. The Vercel AI SDK is the TypeScript toolkit designed to help developers build AI-powered applications with React, Next.js, Vue, Svelte, Node.js, and more."

다음과 같이 설명할 수 있습니다.

제 개인적인 의견으로, SDK가 되기 위해서는 배포되는 AI 애플리케이션에 포함되지 않지만 AI 학습이나 UI를 위한 다양한 도구들이 제공되어야 합니다. 현재로서는 이러한 도구들이 제공되지 않는 것 같아서 라이브러리로 표현했습니다.

버셀 AI SDK의 장단점

버셀 AI SDK는 아래 장점들을 통해 개발자가 AI 기반 애플리케이션을 더 쉽고 효율적으로 개발할 수 있도록 지원합니다.

1. 텍스트와 UI가 혼합된 인터랙티브 채팅 서비스

   • 단순한 텍스트 위주의 채팅 서비스가 아니라 텍스트와 UI 요소를 결합하여 보다 풍부한 사용자 경험을 제공합니다. 사용자에게 더 직관적이고 인터랙티브한 인터페이스를 제공할 수 있습니다.

2. 일관된 API 사용

   • 다양한 대규모 언어 모델(LLMs)을 지원하는 일관된 API를 사용함으로써 개발자가 여러 AI 모델을 손쉽게 통합하고 관리할 수 있습니다. 코드의 일관성과 유지보수성을 높여줍니다.

3. 쉬운 웹 스트리밍 구현

   • 웹 스트리밍 기능을 쉽게 구현할 수 있어, 실시간 데이터 처리와 같은 복잡한 기능을 간편하게 추가할 수 있습니다. 사용자와의 실시간 상호작용을 개선하는 데 도움이 됩니다.

4. 서버와 클라이언트 기능 분리

   • 성능을 최적화하기 위해 서버와 클라이언트에서 동작하는 기능을 구분하여 구현할 수 있습니다. 각 환경에서 최적의 성능을 발휘할 수 있으며 복잡한 애플리케이션을 효율적으로 관리할 수 있습니다.

5. Next.js 환경에서의 서버 사이드 렌더링

   • Next.js 환경에서는 리액트 서버 컴포넌트를 사용하여 서버에서 UI 요소를 생성하고 스트리밍할 수 있습니다. 성능을 최적화하고 클라이언트에서 UI를 효율적으로 렌더링할 수 있습니다. 또한, 리액트 컴포넌트를 재사용하거나 확장하기 쉬워 코드의 유지보수와 확장성이 뛰어납니다.

하지만, 버셀 AI SDK는 현재 한창 개발 중이라 API 변경이 잦고 많은 기능들이 Next.js에만 제공되기 때문에 Svelte, Nuxt, Node.js 등 다른 프레임워크에서는 기능이 제한적입니다.

주요 구성 요소

Next.js에서 구축할 때는 아래 2가지 방식 중에서 선택합니다.

1. AI SDK Core + AI SDK UI: 클라이언트 측에서는 useChat 리액트 훅을 사용하여 채팅 및 생성형 UI를 구축하고 서버 측에서는 라우트 핸들러를 사용하여 AI 모델과 상호작용합니다.
2. AI SDK Core + AI SDK RSC: 클라이언트 측에서는 useActions 훅을 사용하고 서버 측에서는 서버 액션을 이용하여 서버에서 생성된 데이터를 스트리밍합니다. 즉, 텍스트를 넘어서 UI 컴포넌트를 스트리밍할 수 있습니다.

공식 문서에서는 크게 AI SDK Core, AI SDK UI, AI SDK RSC로 구성되어 있습니다.

• 대규모 언어 모델 인터페이스
  • AI SDK Core: AI SDK Core는 다양한 AI 모델에 접근하기 위한 래퍼(wrapper)로, LLMs(대규모 언어 모델)을 사용하여 텍스트, 구조화된 객체, 도구 호출을 생성하기 위한 통합 API를 제공합니다. 이를 통해 다양한 모델 제공자의 차이점을 추상화하고 일관된 인터페이스를 제공합니다.
• UI 구축
  • AI SDK UI: 프레임워크에 구애받지 않는 다양한 훅을 제공하여 채팅 및 생성형 사용자 인터페이스를 빠르게 구축할 수 있도록 돕습니다. 클라이언트 측에서는 보통 useChat 리액트 훅을 사용하고, 서버 측에서는 라우트 핸들러를 사용합니다. 이를 통해 복잡한 보일러플레이트 코드를 줄이고 효율적으로 작업할 수 있습니다.
  • AI SDK RSC: React Server Components(RSC)를 사용하여 생성형 사용자 인터페이스를 스트리밍하는 라이브러리를 제공합니다. 클라이언트 측에서는 보통 useActions를 사용하고, 서버 측에서는 서버 액션을 이용하여 서버에 접근합니다. 이를 통해 텍스트 출력을 넘어서서 풍부하고 인터랙티브한 UI 요소를 생성할 수 있습니다. 특히, AI SDK RSC는 대규모 언어 모델에서 받은 텍스트를 넘어서 UI 컴포넌트까지 스트리밍할 수 있습니다.

왜 Next.js 기반 웹 개발 시에 버셀 AI SDK를 사용해야 하는가?

Next.js 기반 웹 개발 시 버셀 AI SDK를 사용하면 다음과 같은 다양한 이점을 누릴 수 있습니다.

1. 향상된 사용자 경험
   • Next.js는 서버와 클라이언트 동작을 명확히 구분할 수 있는 프레임워크입니다. 버셀 AI SDK를 사용하면 서버에서 생성된 채팅 메시지나 UI 요소를 클라이언트에 스트리밍할 수 있어서 사용자에게 실시간으로 업데이트된 풍부한 인터페이스를 제공할 수 있습니다.
2. 강화된 보안
   • 대규모 언어 모델(LLMs)에 대한 접근은 서버에서 안전하게 처리할 수 있습니다. 버셀 AI SDK는 모델 접근을 서버 측에서 안전하게 관리하도록 도와주며 민감한 데이터가 클라이언트로 직접 노출되지 않도록 합니다.
3. 최적화된 성능
   • 서버 측에서는 대규모 언어 모델과의 상호작용을 처리하고 클라이언트 측에서는 서버에서 받은 데이터를 기반으로 UI 컴포넌트를 생성하거나 외부 서비스와 연동할 수 있습니다. 서버의 부하를 줄이고 클라이언트 측에서 더 많은 작업을 처리하여 전체 성능을 최적화할 수 있습니다.
4. 유지보수의 용이성
   • 버셀 AI SDK는 다양한 AI 모델 제공자(OpenAI, Anthropic 등)에 대해 일관된 API를 제공합니다. 이를 통해 개발자는 코드 파편화 없이 일관된 방식으로 다양한 언어 모델을 통합할 수 있습니다. 코드의 일관성과 재사용성이 높아져 유지보수가 용이해집니다.

버전 2.x에서 3.x로의 주요 변경 사항

버셀 AI SDK는 버전 2.x에서 3.x로 업그레이드되면서 많은 변화가 있었습니다. 주요 변경 사항과 각 버전별 업데이트 내용을 살펴보겠습니다.

2.x 버전의 주요 기능과 제한점

"레벨업 리액트 프로그래밍 with Next.js" 책의 '12장 AI 챗봇을 통합하는 웹 애플리케이션' 실습 프로젝트는 2.x 버전으로 구현되었습니다.

버전 2.x에서는 AI SDK가 텍스트 생성 및 채팅 기능을 중심으로 다음과 같은 주요한 기능을 가집니다.

• 기본적인 텍스트 생성 및 채팅 기능 지원
• 클라이언트 측 useChat 훅을 통해 채팅 인터페이스 구축 가능
• 서버 측 라우트 핸들러를 통해 AI 모델과 상호작용

그러나 이 버전에서는 다음과 같은 제한점이 있었습니다.

• 대규모 언어 모델에 대한 접근 및 관리 기능이 제한적
• 새로운 기능 추가에 대한 유연성이 부족
• 일부 API의 일관성 문제

3.0으로의 주요 업데이트 내용

성능 향상 버전 3.0에서는 성능 향상을 위해 많은 부분이 개선되었습니다. 특히 서버와 클라이언트 간의 데이터 전송 속도가 향상되어 사용자 경험이 개선되었습니다.

새로운 기능 추가

• 새로운 스트리밍 텍스트 프로토콜 도입으로 텍스트뿐만 아니라 도구(함수 호출), 객체 등의 다양한 메시지 유형을 지원할 수 있게 되었습니다.
• 새로운 useCompletion 훅이 추가되어 채팅 외에도 다양한 작업을 쉽게 수행할 수 있습니다.

Deprecated API 목록

• 기존의 StreamingTextResponse API가 새로운 스트리밍 프로토콜로 대체되었으며 이는 일부 사용자에게 호환성 문제를 일으킬 수 있습니다. 이 API는 이전 버전으로 고정(pinning)하거나 새로운 프로토콜로 전환하여 사용해야 합니다.

3.1 버전의 추가 변경 사항

버전 3.1에서는 다음과 같은 변경 사항이 포함되었습니다.

• 클라이언트와 서버 간의 데이터 스트리밍 기능이 개선되었습니다.
• 다양한 AI 모델 제공자(OpenAI, Anthropic 등)에 대한 지원이 강화되었습니다.
• 새로운 useActions 훅을 통해 클라이언트에서 서버로의 데이터 전송이 더욱 유연해졌습니다.

3.2 버전의 추가 변경 사항

버전 3.2에서는 주로 다음과 같은 업데이트가 있었습니다.

• 버그 수정 및 안정성 개선
• 성능 최적화를 위한 추가적인 개선 사항
• 새로운 기능의 도입 및 기존 기능의 확장

결론

버셀 AI SDK는 지속적인 업데이트와 개선을 통해 사용자에게 더 나은 기능과 성능을 제공하고 있습니다. 다양한 대규모 언어 모델을 지원하여 AI 애플리케이션 개발의 유연성을 높이고 커뮤니티 피드백을 반영하여 빠르게 발전하고 있습니다. 버셀 AI SDK는 앞으로의 발전이 매우 기대되는 도구입니다.