Comment diffuser la réponse OpenAI dans NextJS
Publié: 2024-03-22Résumé:
Découvrez comment diffuser de manière transparente les réponses OpenAI dans NextJS à l'aide du SDK AI de Vercel. Grâce à un processus d'intégration simple décrit dans ce guide, les développeurs peuvent exploiter efficacement la puissance de la génération d'IA en temps réel, améliorant ainsi l'expérience utilisateur et l'efficacité des flux de travail.
Dans le paysage numérique actuel en évolution rapide, l’intégration de capacités avancées d’IA est devenue impérative pour les entreprises qui s’efforcent de rester compétitives. En tant que société de développement OpenAI, exploiter la puissance de technologies de pointe telles que NextJS pour rationaliser le processus de génération et de gestion des réponses OpenAI présente une multitude d'avantages.
De l'amélioration de l'expérience utilisateur à l'optimisation de l'efficacité des flux de travail, l'expertise d'une société de développement OpenAI peut avoir un impact profond sur l'intégration et l'utilisation transparentes des capacités d'OpenAI dans le cadre NextJS. Dans ce guide, nous approfondissons les stratégies et les informations essentielles aux sociétés de développement OpenAI pour exploiter efficacement le potentiel de NextJS dans la rationalisation des réponses OpenAI, permettant ainsi aux entreprises d'ouvrir de nouveaux domaines d'innovation et d'efficacité.
Nous savons que vous avez été frustré et que vous avez surfé pour diffuser des réponses OpenAI dans NextJS. Il existe de nombreuses façons de diffuser la réponse OpenAI et aussi beaucoup de choses à faire après le flux qui analyse les données pour les rendre lisibles.
Remarque : Nous utiliserons NextJS et Vercel AI SDK tout au long du blog.
Qu’est-ce que Next.js ?
Next.js est un framework React permettant de créer des applications Web full-stack. Vous utilisez les composants React pour créer des interfaces utilisateur et Next.js pour des fonctionnalités et des optimisations supplémentaires.
Sous le capot, Next.js résume et configure automatiquement les outils nécessaires à React, comme le regroupement, la compilation, etc. Cela vous permet de vous concentrer sur la création de votre application au lieu de passer du temps sur la configuration.
Que vous soyez un développeur individuel ou que vous fassiez partie d'une équipe plus grande, Next.js peut vous aider à créer des applications React interactives, dynamiques et rapides.
Qu’est-ce que Vercel ?
Vercel est une plate-forme destinée aux développeurs qui fournit les outils, les flux de travail et l'infrastructure dont vous avez besoin pour créer et déployer vos applications Web plus rapidement, sans avoir besoin de configuration supplémentaire.
Vercel prend en charge les frameworks frontend populaires prêts à l'emploi, et son infrastructure évolutive et sécurisée est distribuée à l'échelle mondiale pour servir le contenu des centres de données à proximité de vos utilisateurs pour des vitesses optimales.
Quelle est la relation entre Vercel et Nextjs ?
La plateforme Vercel est réalisée par les créateurs de Next.js, conçue pour les applications Next.js. En conclusion, la relation entre Vercel et Next.js représente un partenariat symbiotique qui redéfinit la façon dont nous construisons et déployons des applications Web. En tirant parti des atouts des deux plates-formes, les développeurs peuvent ouvrir de nouvelles possibilités et proposer des expériences Web exceptionnelles qui se démarquent dans le paysage concurrentiel actuel.
Pendant le développement, Vercel fournit des outils pour une collaboration en temps réel sur vos projets, tels que des environnements de prévisualisation et de production automatiques, ainsi que des commentaires sur les déploiements en préversion.
Comment pouvons-nous faciliter le streaming en utilisant Vercel et NextJS ?
En juin 2023, Vercel a publié une nouvelle bibliothèque ai (Vercel AI SDK) qui fournit des adaptateurs LLM intégrés / des premiers assistants d'interface utilisateur en streaming / des assistants de flux et des rappels. Depuis cette bibliothèque, la diffusion en continu de la réponse OpenAI est devenue beaucoup plus facile.
Avant de plonger dans un exemple, laissez-moi vous dire quelles bibliothèques/frameworks de nœuds Vercel AI SDK prennent en charge.
Il prend en charge React/Next.js, Svelte/SvelteKit, et la prise en charge de Nuxt/Vue sera bientôt disponible.
Exemple — Frontend/Backend tous deux dans NextJS (A React Framework)
Étape 1 : Création de l'application NextJS et installation du SDK Vercel AI
npx créer-next-app@latest
Pour installer le SDK, saisissez la commande suivante dans votre terminal :
npm je ai
Pour installer Openai, entrez la commande suivante dans votre terminal :
npm j'ouvre
Je viens de suivre la structure de dossiers simple/par défaut de ce que npx create-next-app@latest a créé pour moi pour rendre cette démo simple et facile à comprendre.
Étape 2 : Créez une page frontale pour diffuser la réponse
importer { useState } depuis "react" ;
exporter la fonction par défaut Home() {
const [question, setQuestion] = useState("")
const [réponse, setAnswer] = useState("")
/// fonction pour appeler le routeur openai et traiter la réponse en streaming
fonction asynchrone retriveResponse() {
/// appelle la route
réponse const : any = wait fetch("/api/chat", {
méthode : "POST",
corps : JSON.stringify({
question
}),
suivant : { revalider : 0 }
})
laissez resptext = "";
lecteur const = réponse.body
.pipeThrough (nouveau TextDecoderStream())
.getReader();
/// poursuit le flux
tandis que (vrai) {
const { valeur, terminé } = wait reader.read();
si (fait) {
casser;
}
resptext += valeur ;
setAnswer(resptext);
}
}
retour (
<div>
<label htmlFor="Posez votre question"></label>
<input type="text" value={question} onChange={(e)=>setQuestion(e.target.value)}/>
<button onClick={retriveResponse}>Diffusez la réponse</button>
<br />
<p>{réponse</p>
</div>
);
}
Le composant ci-dessus crée une interface où les utilisateurs peuvent saisir des questions, cliquer sur un bouton pour envoyer la question à une API côté serveur (/api/chat) et afficher la réponse en streaming du serveur en temps réel.
Étape 3 : Créer une route back-end pour diffuser la réponse
importer OpenAI depuis "openai" ;
// Définit le runtime sur Edge pour de meilleures performances
exporter la configuration const = {
environnement d'exécution : "bord",
} ;
exporter le gestionnaire de fonctions asynchrones par défaut (demande, réponse) {
const { question } = wait request.json();
// Récupère la réponse de l'API OpenAI
const openai = nouvel OpenAI ({
apiKey : process.env.NEXT_PUBLIC_OPENAI_KEY,
});
const réponseFromOpenAI = attendre openai.chat.completions.create({
modèle : "gpt-3.5-turbo",
température: 0,
top_p : 1,
messages : [{ rôle : "utilisateur", contenu : question }],
flux : vrai,
})
essayer {
// Convertit la réponse en un flux de texte convivial
const stream = OpenAIStream(responseFromOpenAI);
// Répond avec le flux
renvoie un nouveau StreamingTextResponse (stream);
} attraper (erreur) {
return réponse.send(400).send(erreur);
}
}
Le code ci-dessus définit une fonction sans serveur qui reçoit une question d'une requête HTTP, l'envoie à l'API OpenAI pour traitement et renvoie la réponse au client.
Étape 4 : Exécutez l'application
npm exécuter le développement
Sortir
Vidéo.webm
Vidéo de la démo
drive.google.com
Si vous avez regardé la vidéo, vous comprenez probablement bien le fonctionnement de la démo. Pour ceux qui souhaitent explorer le code complet, vous pouvez le trouver sur GitHub à ce lien : Next.js OpenAI Streaming.
Les références:
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
Pour rester informé des dernières évolutions dans le domaine de l’IA, il est conseillé de garder un œil sur la documentation IA de Vercel. Assurez-vous de rester à l'écoute des mises à jour et des améliorations alors que Vercel continue de faire progresser ses offres dans le domaine de l'IA.