NextJS에서 OpenAI 응답을 스트리밍하는 방법

요약:

Vercel의 AI SDK를 사용하여 NextJS에서 OpenAI 응답을 원활하게 스트리밍하는 방법을 알아보세요. 이 가이드에 설명된 간단한 통합 프로세스를 통해 개발자는 실시간 AI 생성 기능을 효율적으로 활용하여 사용자 경험과 워크플로 효율성을 향상할 수 있습니다.

오늘날 빠르게 발전하는 디지털 환경에서 경쟁력을 유지하기 위해 노력하는 기업에게는 고급 AI 기능을 통합하는 것이 필수적입니다. OpenAI 개발 회사로서 NextJS와 같은 최첨단 기술의 힘을 활용하여 OpenAI 응답 생성 및 관리 프로세스를 간소화하는 것은 다양한 이점을 제공합니다.

사용자 경험 향상부터 워크플로 효율성 최적화에 이르기까지 OpenAI 개발 회사 의 전문 지식은 NextJS 프레임워크 내에서 OpenAI 기능의 원활한 통합 및 활용에 중대한 영향을 미칠 수 있습니다. 이 가이드에서는 OpenAI 개발 회사가 OpenAI 응답을 간소화하는 데 NextJS의 잠재력을 효과적으로 활용하여 기업이 혁신과 효율성의 새로운 영역을 열 수 있도록 지원하는 데 필수적인 전략과 통찰력을 탐구합니다.

우리는 귀하가 좌절감을 느끼고 NextJS에서 OpenAI 응답 스트리밍을 검색해 왔다는 것을 알고 있습니다. OpenAI 응답을 스트리밍하는 방법에는 여러 가지가 있으며 데이터를 읽을 수 있도록 구문 분석하는 스트림 후에 수행할 작업도 많습니다.

참고: 블로그 전체에서는 NextJS 및 Vercel AI SDK를 사용합니다.

Next.js란 무엇인가요?

Next.js는 풀스택 웹 애플리케이션을 구축하기 위한 React 프레임워크입니다. React 구성 요소를 사용하여 사용자 인터페이스를 구축하고 Next.js를 사용하여 추가 기능과 최적화를 수행합니다.

내부적으로 Next.js는 번들링, 컴파일 등과 같이 React에 필요한 도구를 추상화하고 자동으로 구성합니다. 이를 통해 구성에 시간을 낭비하는 대신 애플리케이션 구축에 집중할 수 있습니다.

개인 개발자이든 대규모 팀의 일원이든 Next.js는 대화형의 동적이며 빠른 React 애플리케이션을 구축하는 데 도움을 줄 수 있습니다.

베르셀은 무엇인가요?

Vercel은 추가 구성 없이 웹 앱을 더 빠르게 구축하고 배포하는 데 필요한 도구, 워크플로 및 인프라를 제공하는 개발자를 위한 플랫폼입니다.

Vercel은 즉시 사용 가능한 인기 있는 프런트엔드 프레임워크를 지원하며 확장 가능하고 안전한 인프라는 전 세계적으로 분산되어 최적의 속도로 사용자 근처의 데이터 센터에서 콘텐츠를 제공합니다.

Vercel과 Nextjs의 관계는 무엇입니까?

Vercel의 플랫폼은 Next.js 애플리케이션용으로 설계된 Next.js 제작자에 의해 만들어졌습니다. 결론적으로 Vercel과 Next.js의 관계는 웹 애플리케이션을 구축하고 배포하는 방식을 재정의하는 공생 파트너십을 나타냅니다. 두 플랫폼의 장점을 활용함으로써 개발자는 새로운 가능성을 열고 오늘날의 경쟁 환경에서 눈에 띄는 탁월한 웹 경험을 제공할 수 있습니다.

개발 중에 Vercel은 자동 미리보기 및 프로덕션 환경, 미리보기 배포에 대한 의견 등 프로젝트에 대한 실시간 협업을 위한 도구를 제공합니다.

Vercel과 NextJS를 사용하여 스트리밍을 더 쉽게 만들 수 있는 방법은 무엇입니까?

2023년 6월, Vercel은 내장 LLM 어댑터/스트리밍 퍼스트 UI 도우미/스트림 도우미 및 콜백을 제공하는 새로운 라이브러리 ai(Vercel AI SDK)를 출시했습니다. 이 라이브러리 이후 스트리밍 OpenAI 응답이 훨씬 쉬워졌습니다.

예제를 살펴보기 전에 Vercel AI SDK가 지원하는 노드 라이브러리/프레임워크를 알려드리겠습니다.

React/Next.js, Svelte/SvelteKit를 지원하며 Nuxt/Vue도 곧 지원될 예정입니다.

예 — NextJS의 프런트엔드/백엔드(A 반응 프레임워크)

1단계: NextJS 앱 생성 및 Vercel AI SDK 설치

npx 생성-다음-app@latest

SDK를 설치하려면 터미널에 다음 명령을 입력하세요.

npm 나 AI

Openai를 설치하려면 터미널에 다음 명령을 입력하세요.

npm 내가 열어

저는 이 데모를 간단하고 이해하기 쉽게 만들기 위해 npx create-next-app@latest가 만든 단순/기본 폴더 구조를 따랐습니다.

2단계: 응답을 스트리밍하기 위한 프런트 엔드 페이지 만들기

"클라이언트 사용"

"반응"에서 { useState }를 가져옵니다.

기본 함수 내보내기 Home() {

const [질문, setQuestion] = useState("")

const [답변, setAnswer] = useState("")

/// openai 라우터를 호출하고 스트리밍 응답을 처리하는 함수

비동기 함수 retriveResponse() {

/// 라우트 호출

const 응답: 모두 = 가져오기를 기다립니다("/api/chat", {

방법: "POST",

본문: JSON.stringify({

질문

}),

다음: { 재검증: 0 }

})

resptext = ""를 보자;

const 리더 = response.body

.pipeThrough(새 TextDecoderStream())

.getReader();

/// 스트림을 진행합니다.

동안 (참) {

const { 값, 완료 } = reader.read()를 기다립니다;

만약 (완료) {

부서지다;

}

응답 텍스트 += 값;

setAnswer(resptext);

}

}

반품 (

<div>

<label htmlFor="질문을 물어보세요"></label>

<input type="text" value={question} onChange={(e)=>setQuestion(e.target.value)}/>

<button onClick={retriveResponse}>스트리밍 응답</button>

<br />

<p>{답변}</p>

</div>

);

}

위 컴포넌트는 사용자가 질문을 입력할 수 있는 인터페이스를 생성하고, 버튼을 클릭하여 질문을 서버측 API(/api/chat)로 전송하고, 서버의 스트리밍 응답을 실시간으로 표시합니다.

3단계: 응답을 스트리밍하기 위한 백엔드 경로 만들기

위 코드는 HTTP 요청에서 질문을 수신하여 처리를 위해 OpenAI API로 보내고 응답을 클라이언트로 다시 스트리밍하는 서버리스 함수를 정의합니다.

4단계: 앱 실행

npm 실행 개발자

산출

Video.webm

데모 영상

드라이브.google.com

동영상을 시청하셨다면 데모가 어떻게 작동하는지 잘 이해하셨을 것입니다. 전체 코드를 살펴보는 데 관심이 있는 경우 GitHub의 Next.js OpenAI Streaming 링크에서 찾을 수 있습니다.

참고자료:

https://vercel.com/blog/introducing-the-vercel-ai-sdk

https://sdk.vercel.ai/docs https://platform.openai.com/docs/introduction

https://platform.openai.com/docs/introduction

AI 분야의 최신 개발에 대한 최신 정보를 얻으려면 Vercel의 AI 문서를 계속 주시하는 것이 좋습니다. Vercel이 AI 도메인에서 제품을 지속적으로 발전시키므로 업데이트 및 개선 사항을 계속 지켜봐 주시기 바랍니다.