라이브러리 둘러보기
라이브러리 둘러보기 (Navigating the Library)
AI SDK는 AI 애플리케이션을 만드는 강력한 툴킷이에요. 이 페이지는 여러분의 요구사항에 맞는 올바른 도구를 고르도록 도와줍니다. AI SDK가 어떤 세 부분으로 구성되는지, 각각 언제 쓰는 게 좋은지가 핵심이에요.
출처: 문서
본문
AI SDK에 대한 간단한 개요부터 시작해보죠. AI SDK는 세 부분으로 구성됩니다:
- AI SDK Core: LLM으로 텍스트, 구조화된 객체, 도구 호출을 생성하기 위한, 프로바이더에 종속되지 않는 통합 API.
- AI SDK UI: 채팅과 생성형 사용자 인터페이스를 구축하기 위한 프레임워크에 종속되지 않는 훅(hooks) 묶음.
- AI SDK RSC: React Server Components(RSC)로 생성형 사용자 인터페이스를 스트리밍. 개발은 현재 실험 단계이며, 우리는 AI SDK UI 사용을 권장합니다.
환경에 맞는 올바른 도구 선택 (Choosing the Right Tool for Your Environment)
AI SDK의 어느 부분을 사용할지 결정할 때, 가장 먼저 고려해야 할 것은 작업 중인 환경과 기존 스택입니다. SDK의 서로 다른 컴포넌트는 특정 프레임워크와 환경에 맞춰져 있습니다.
| 라이브러리 | 용도 | 환경 호환성 |
|---|---|---|
| AI SDK Core | 통합 API로 어떤 LLM이든 호출 (예: generateText와 streamText) | 모든 JS 환경 (예: Node.js, Deno, Browser) |
| AI SDK UI | 스트리밍 채팅과 생성형 UI 구축 (예: useChat) | React & Next.js, Vue & Nuxt, Svelte & SvelteKit |
| AI SDK RSC | 서버에서 클라이언트로 생성형 UI 스트리밍 (예: streamUI). 개발은 현재 실험 단계이며 AI SDK UI 사용을 권장합니다. | React Server Components를 지원하는 모든 프레임워크 (예: Next.js) |
환경 호환성 (Environment Compatibility)
이 도구들은 서로 원활하게 함께 동작하도록 설계되었으며, 여러분이 함께 사용하게 될 가능성이 높습니다. 애플리케이션 환경, 기존 스택, 요구사항에 따라 어떤 라이브러리를 사용할지 결정하는 방법을 살펴봅시다.
다음 표는 환경에 따른 AI SDK 호환성을 보여줍니다:
| 환경 | AI SDK Core | AI SDK UI | AI SDK RSC |
|---|---|---|---|
| 없음 / Node.js / Deno | ✓ | ✗ | ✗ |
| Vue / Nuxt | ✓ | ✓ | ✗ |
| Svelte / SvelteKit | ✓ | ✓ | ✗ |
| Next.js Pages Router | ✓ | ✓ | ✗ |
| Next.js App Router | ✓ | ✓ | ✓ |
AI SDK UI는 언제 쓸까 (When to use AI SDK UI)
AI SDK UI는 프로덕션에 바로 쓸 수 있는 AI 네이티브 애플리케이션을 빠르게 구축하기 위한 프레임워크에 종속되지 않는 훅 묶음을 제공합니다. 제공하는 것:
- 스트리밍 채팅과 클라이언트 측 생성형 UI에 대한 완전한 지원
- 일반적인 AI 상호작용 패턴(즉, chat, completion, assistant)을 다루는 유틸리티
- 프로덕션에서 검증된 신뢰성과 성능
- 인기 있는 프레임워크 전반에 걸친 호환성
AI SDK UI 프레임워크 호환성 (AI SDK UI Framework Compatibility)
AI SDK UI는 다음 프레임워크를 지원합니다: React, Svelte, Vue.js. 프레임워크 전반에 걸친 지원 함수 비교는 다음과 같습니다:
| 함수 | React | Svelte | Vue.js |
|---|---|---|---|
| useChat | ✓ | ✓ | ✓ |
| useChat 도구 호출 | ✓ | ✓ | ✗ |
| useCompletion | ✓ | ✓ | ✓ |
| useObject | ✓ | ✗ | ✗ |
| MCP Apps | ✓ | ✗ | ✗ |
React가 아닌 프레임워크의 누락된 기능을 구현하기 위한 기여(Contributions)를 환영합니다.
AI SDK RSC는 언제 쓸까 (When to use AI SDK RSC)
경고: AI SDK RSC는 현재 실험 단계입니다. 프로덕션에는 AI SDK UI를 권장합니다. RSC에서 UI로 마이그레이션하는 방법에 대한 지침은 마이그레이션 가이드를 참고하세요.
React Server Components(RSC)는 React 애플리케이션을 구축하는 새로운 접근 방식을 제공합니다. 컴포넌트가 서버에서 렌더링되고, 데이터를 직접 가져오며, 결과를 클라이언트로 스트리밍하여 번들 크기를 줄이고 성능을 향상시킵니다. 또한 Server Actions라고 하는, 애플리케이션 어디에서나 서버 측 함수를 호출하는 새로운 방식을 도입합니다.
AI SDK RSC는 값과 UI를 서버에서 클라이언트로 직접 스트리밍할 수 있게 해주는 여러 유틸리티를 제공합니다. 그러나 현재 제약 사항을 인지하는 것이 중요합니다:
- 취소(Cancellation): 현재 Server Actions를 사용해 스트림을 중단(abort)하는 것은 불가능합니다. 이 부분은 향후 React와 Next.js 릴리스에서 개선될 예정입니다.
- 증가된 데이터 전송:
createStreamableUI를 사용하면 이차(quadratic) 데이터 전송(생성된 텍스트 길이에 이차)이 발생할 수 있습니다. 대신createStreamableValue를 사용하고 컴포넌트를 클라이언트 측에서 렌더링하면 피할 수 있습니다. - 스트리밍 중 재마운트 문제:
createStreamableUI를 사용하면 컴포넌트가.done()에서 재마운트되어 깜빡임(flickering)이 발생합니다.
이런 제약을 고려하여, 프로덕션 애플리케이션에는 AI SDK UI를 권장합니다.