So streamen Sie OpenAI Response in NextJS

Veröffentlicht: 2024-03-22

KI/ML 4 Min. 3

22. März 2024

Zusammenfassung:

Erfahren Sie, wie Sie OpenAI-Antworten mithilfe des AI SDK von Vercel nahtlos in NextJS streamen. Mit einem einfachen Integrationsprozess, der in diesem Leitfaden beschrieben wird, können Entwickler die Leistungsfähigkeit der Echtzeit-KI-Generierung effizient nutzen und so das Benutzererlebnis und die Workflow-Effizienz verbessern.

In der sich schnell entwickelnden digitalen Landschaft von heute ist die Integration fortschrittlicher KI-Funktionen für Unternehmen, die wettbewerbsfähig bleiben wollen, unerlässlich geworden. Als OpenAI-Entwicklungsunternehmen bietet die Nutzung der Leistungsfähigkeit modernster Technologien wie NextJS zur Optimierung des Prozesses der Generierung und Verwaltung von OpenAI-Antworten eine Vielzahl von Vorteilen.

Von der Verbesserung des Benutzererlebnisses bis hin zur Optimierung der Workflow-Effizienz kann das Fachwissen eines OpenAI-Entwicklungsunternehmens tiefgreifende Auswirkungen auf die nahtlose Integration und Nutzung der OpenAI-Funktionen innerhalb des NextJS-Frameworks haben. In diesem Leitfaden befassen wir uns mit den Strategien und Erkenntnissen, die für OpenAI-Entwicklungsunternehmen unerlässlich sind, um das Potenzial von NextJS bei der Optimierung von OpenAI-Antworten effektiv zu nutzen und Unternehmen so in die Lage zu versetzen, neue Bereiche der Innovation und Effizienz zu erschließen.

Wir wissen, dass Sie frustriert waren und nach dem Streamen von OpenAI-Antworten in NextJS gesucht haben. Es gibt viele Möglichkeiten, OpenAI-Antworten zu streamen, und auch nach dem Stream, der die Daten analysiert, um sie lesbar zu machen, gibt es viel zu tun.

Hinweis: Wir werden im gesamten Blog NextJS und Vercel AI SDK verwenden.

Was ist Next.js?

Next.js ist ein React-Framework zum Erstellen von Full-Stack-Webanwendungen. Sie verwenden React Components zum Erstellen von Benutzeroberflächen und Next.js für zusätzliche Funktionen und Optimierungen.

Unter der Haube abstrahiert und konfiguriert Next.js auch die für React benötigten Tools wie Bündelung, Kompilierung und mehr und konfiguriert sie automatisch. Dadurch können Sie sich auf die Erstellung Ihrer Anwendung konzentrieren, anstatt Zeit mit der Konfiguration zu verbringen.

Egal, ob Sie ein einzelner Entwickler oder Teil eines größeren Teams sind, Next.js kann Ihnen beim Erstellen interaktiver, dynamischer und schneller React-Anwendungen helfen.

Was ist Vercel?

Vercel ist eine Plattform für Entwickler, die die Tools, Workflows und Infrastruktur bereitstellt, die Sie benötigen, um Ihre Web-Apps schneller zu erstellen und bereitzustellen, ohne dass zusätzliche Konfigurationen erforderlich sind.

Vercel unterstützt beliebte Frontend-Frameworks sofort einsatzbereit und seine skalierbare, sichere Infrastruktur ist weltweit verteilt, um Inhalte aus Rechenzentren in der Nähe Ihrer Benutzer für optimale Geschwindigkeiten bereitzustellen.

Welche Beziehung besteht zwischen Vercel und Nextjs?

Die Plattform von Vercel wurde von den Entwicklern von Next.js entwickelt und für Next.js-Anwendungen entwickelt. Zusammenfassend lässt sich sagen, dass die Beziehung zwischen Vercel und Next.js eine symbiotische Partnerschaft darstellt, die die Art und Weise, wie wir Webanwendungen erstellen und bereitstellen, neu definiert. Durch die Nutzung der Stärken beider Plattformen können Entwickler neue Möglichkeiten erschließen und außergewöhnliche Weberlebnisse liefern, die sich im heutigen Wettbewerbsumfeld abheben.

Während der Entwicklung stellt Vercel Tools für die Zusammenarbeit in Echtzeit an Ihren Projekten bereit, z. B. automatische Vorschau- und Produktionsumgebungen sowie Kommentare zu Vorschaubereitstellungen.

Wie können wir das Streaming mit Vercel und NextJS einfacher machen?

Im Juni 2023 veröffentlichte Vercel eine neue Bibliothek ai (Vercel AI SDK), die integrierte LLM-Adapter / Streaming First UI-Helfer / Stream-Helfer und Rückrufe bereitstellt. Seit dieser Bibliothek ist das Streamen von OpenAI-Antworten viel einfacher geworden.

Bevor ich auf ein Beispiel eingehe, möchte ich Ihnen erklären, welche Knotenbibliotheken/Frameworks das Vercel AI SDK unterstützt.

Es unterstützt React/Next.js, Svelte/SvelteKit und wird in Kürze auch Nuxt/Vue unterstützen.

Beispiel – Frontend/Backend beide in NextJS (Ein Reaktions-Framework)

Schritt 1: NextJS-App erstellen und Vercel AI SDK installieren

npx create-next-app@latest

Um das SDK zu installieren, geben Sie den folgenden Befehl in Ihr Terminal ein:

npm und ai

Um Openai zu installieren, geben Sie den folgenden Befehl in Ihr Terminal ein:

npm ich öffneai

Ich habe gerade die einfache/Standardordnerstruktur befolgt, die npx create-next-app@latest für mich erstellt hat, um diese Demo einfach und leicht verständlich zu machen.

Schritt 2: Erstellen Sie eine Frontend-Seite, um die Antwort zu streamen

„Client verwenden“

import { useState } aus „react“;

Standardfunktion exportieren Home() {

const [question, setQuestion] = useState("")

const [answer, setAnswer] = useState("")

/// Funktion zum Aufrufen des OpenAI-Routers und Verarbeiten der Streaming-Antwort

asynchrone Funktion retriveResponse() {

/// Rufen Sie die Route auf

const-Antwort: any = waiting fetch("/api/chat", {

Methode: „POST“,

body: JSON.stringify({

Frage

}),

weiter: { erneut validieren: 0 }

})

let resptext = "";

const Reader = Antwort.Körper

.pipeThrough(new TextDecoderStream())

.getReader();

/// setzt den Stream fort

while (wahr) {

const { value, done } = waiting reader.read();

wenn (erledigt) {

brechen;

}

resptext += Wert;

setAnswer(resptext);

}

zurückkehren (

<div>

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

<button onClick={retriveResponse}>Antwort streamen</button>

<br />

<p>{Antwort</p>

</div>

);

}

Die obige Komponente erstellt eine Schnittstelle, über die Benutzer Fragen eingeben und auf eine Schaltfläche klicken können, um die Frage an eine serverseitige API (/api/chat) zu senden und die Streaming-Antwort vom Server in Echtzeit anzuzeigen

Schritt 3: Erstellen Sie eine Back-End-Route zum Streamen der Antwort

import { OpenAIStream, StreamingTextResponse } from „ai“;

OpenAI von „openai“ importieren;

// Stellen Sie die Laufzeit für beste Leistung auf Edge ein

export const config = {

Laufzeit: „Edge“,

};

Exportieren Sie den standardmäßigen asynchronen Funktionshandler (Anfrage, Antwort) {

const { Frage } = Warten auf request.json();

// Antwort von der OpenAI-API abrufen

const openai = new OpenAI({

apiKey: process.env.NEXT_PUBLIC_OPENAI_KEY,

});

const ResponseFromOpenAI = Warten auf openai.chat.completions.create({

Modell: „gpt-3.5-turbo“,

Temperatur: 0,

top_p: 1,

Nachrichten: [{ Rolle: „Benutzer“, Inhalt: Frage }],

Stream: wahr,

})

versuchen {

// Wandeln Sie die Antwort in einen benutzerfreundlichen Textstrom um

const stream = OpenAIStream(responseFromOpenAI);

// Mit dem Stream antworten

return new StreamingTextResponse(stream);

} Catch (Fehler) {

return Response.send(400).send(error);

}

Der obige Code definiert eine serverlose Funktion, die eine Frage von einer HTTP-Anfrage empfängt, sie zur Verarbeitung an die OpenAI-API sendet und die Antwort an den Client zurückstreamt.

Schritt 4: Führen Sie die App aus

npm run dev

Ausgabe

Video.webm

Video der Demo

drive.google.com

Wenn Sie sich das Video angesehen haben, wissen Sie wahrscheinlich gut, wie die Demo funktioniert. Wer den vollständigen Code erkunden möchte, kann ihn auf GitHub unter folgendem Link finden: Next.js OpenAI Streaming.

Verweise:

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

Um über die neuesten Entwicklungen im Bereich KI auf dem Laufenden zu bleiben, empfiehlt es sich, die KI-Dokumentation von Vercel im Auge zu behalten. Bleiben Sie auf dem Laufenden über Updates und Verbesserungen, während Vercel seine Angebote im KI-Bereich weiter ausbaut.