Vercel AI SDK를 사용한 다중 병렬 AI 스트림

Vercel AI SDK를 사용하면 OpenAI, Anthropic 등과 같은 LLM API와 쉽게 상호 작용하고 데이터를 스트리밍하여 로드 시 웹 앱에 빠르게 표시할 수 있습니다. 이 글에서는 여러 프롬프트를 동시에 실행하고 결과를 병렬로 확인하는 방법을 알아봅니다.

TL;DR: GitHub Repo가 여기에 있습니다.

내가 왜 이 일을 하고 싶겠는가?

웹 앱에서 동시에 여러 데이터 가져오기 요청을 실행하려는 것은 드문 일이 아닙니다. 예를 들어, 가상의 블로깅 시스템에서 대시보드 인터페이스가 로드되면 사용자의 프로필 데이터, 해당 사용자가 만든 게시물, 즐겨찾기에 추가한 다른 사용자의 게시물을 모두 동시에 가져오고 싶을 수 있습니다.

동일한 대시보드가 ​​OpenAI에 동시에 요청했다면 OpenAI에 사용자 프로필 개선에 대한 팁을 요청하고 동시에 최신 게시물에 대한 분석을 요청하고 싶을 수도 있습니다. 이론적으로 우리는 원할 경우 수십 개의 AI 요청을 동시에 사용할 수 있으며(완전히 다른 플랫폼과 모델에서도) 정보를 분석하고, 콘텐츠를 생성하고, 모든 유형의 다른 작업을 동시에 수행할 수 있습니다.

설치 및 설정

여기에서 최종 결과가 포함된 GitHub 저장소를 복제할 수 있습니다.

처음부터 설정하려면:

1. Next.js 앱 라우터 빠른 시작을 따르세요. 기본 사항만 설명합니다. 앱을 생성하고, 종속성을 설치하고, OpenAI API 키를 추가하세요.
2. shadcn/ui를 설치하고 설정합니다.

기본 UI 설정

모든 작업을 수행하는 주요 구성 요소에는 출력을 위한 양식과 일부 컨테이너가 포함됩니다. 몇 가지 기본 shadcn-ui 구성 요소를 사용하면 형식은 다음과 같습니다.

여기서 몇 가지 사항을 확인할 수 있습니다.

• 양식
• 로딩 애니메이션(및 표시/숨기기를 위한 isGenerating 플래그)
• 날씨 콘텐츠 렌더링을 위한 컨테이너
• 뉴스 콘텐츠 렌더링을 위한 컨테이너

지금은 이러한 값을 하드코딩할 수 있습니다. 우리 스트림에서 모두 삭제될 거예요.

React Server 구성요소(RSC) 설정

streamAnswer 서버 작업은 스트림을 생성하고 업데이트하는 작업을 수행합니다.

액션의 구조는 다음과 같습니다.

클라이언트 코드 작성

양식의 onSubmit 핸들러가 여기서 모든 작업을 수행합니다. 작동 방식은 다음과 같습니다.

시도해 볼 만한 다른 재미있는 것들

• streamObject()를 사용하여 텍스트 대신 구조화된 JSON 데이터 스트리밍
• 더 많은 것을 동시에 스트리밍
• 다양한 API에서 동시에 스트리밍
• 동일한 비교 메시지로 다양한 모델 스트리밍(예: Cohere, Anthropic, Gemini 등)
• 서버에서 UI 스트리밍(createStreamableUI() 사용)

추가 자료 및 링크

• 서버 작업 및 돌연변이
• Vercel AI SDK
• streamText() API 문서
• Next.js 앱 라우터 빠른 시작

위 내용은 Vercel AI SDK를 사용한 다중 병렬 AI 스트림의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!