Next.js et GPT-4 : un guide pour diffuser le contenu généré en tant que composants d'interface utilisateur

DEV - 25/01
Les interfaces utilisateur en streaming avec du contenu à la demande généré par l’IA peuvent débloquer de nouvelles expériences utilisateur. Jusqu'à présent, la plupart...

Les interfaces utilisateur en streaming avec du contenu à la demande généré par l’IA peuvent débloquer de nouvelles expériences utilisateur.

Jusqu'à présent, la plupart des interfaces pour le contenu dynamique provenant de grands modèles de langage (LLM) étaient des interfaces de chat ou de saisie semi-automatique de texte. Grâce aux sorties structurées, nous pouvons désormais diffuser du contenu complexe et l'afficher de manière incrémentielle dans des composants d'interface utilisateur tels que des listes et des tableaux.

Dans ce didacticiel, nous allons créer un planificateur d'activités de voyage avec Next.js qui utilise GPT-4 pour générer une liste d'activités pour une destination et une durée de séjour données. La liste d'activités sera diffusée vers le client et affichée dans un composant React.

Voici un aperçu du tutoriel :

  • 1. Présentation de l'application - donne un aperçu de l'application
  • 2. Configuration du projet - couvre les étapes initiales pour configurer un projet Next.js
  • 3. Accès API GPT-4 - explique comment obtenir une clé API OpenAI
  • 4. Installation des bibliothèques - montre comment installer les bibliothèques utilisées dans le projet
  • 5. Implémentation de l'application - vous guide tout au long de la mise en œuvre de l'application
  • 6. Exécution de l'application - montre comment exécuter l'application

Commençons.

1. Présentation de l'application

Le planificateur d'activités de voyage est une application simple qui utilise GPT-4 pour générer une liste d'activités pour une destination et une durée de séjour données. La liste d'activités est diffusée vers le client et affichée dans un composant React. Voici un screencast de l’application finale :

L'architecture est assez simple. Sur le front-end, il y a une page qui contient les entrées et un bouton de soumission. Il affiche également la liste des activités. La page utilise un hook React pour appeler une route API, qui à son tour appelle GPT-4 et diffuse la liste d'activités au client :

Ce tutoriel vous guidera dans la création de l'application. Il est divisé en parties suivantes :

2. Configuration du projet (Next.js)

La prochaine étape consiste à créer la structure fondamentale de notre projet Next.js. Next.js 14 sera utilisé pour créer le frontend et la route API de notre application.

Voici les étapes pour créer le projet Next.js :

  1. Exécutez la commande suivante dans votre terminal pour créer un nouveau projet Next.js :
npx create-next-app@latest nextjs-openai-object-streaming
Entrer en mode plein écran Quitter le mode plein écran
  1. Vous serez invité à configurer divers aspects de votre application Next.js. Voici les paramètres de notre projet :
Souhaitez-vous utiliser TypeScript ? Oui Souhaitez-vous utiliser ESLint ? Oui Souhaitez-vous utiliser Tailwind CSS ? Oui Souhaitez-vous utiliser le répertoire `src/` ? Oui Souhaitez-vous utiliser App Router ? (recommandé) Oui Souhaitez-vous personnaliser l'alias d'importation par défaut ? Non
Entrer en mode plein écran Quitter le mode plein écran

Ces paramètres activent TypeScript pour une vérification de type robuste, ESLint pour la qualité du code et Tailwind CSS pour le style. L'utilisation du répertoire src/ et d'App Router améliore la structure du projet et les capacités de routage.

  1. Une fois le projet initialisé, accédez au répertoire du projet :
cd nextjs-openai-object-streaming
Entrer en mode plein écran Quitter le mode plein écran
  1. ModelFusion utiliseasync_hooksdans Node.js. Cela peut entraîner des problèmes avec la compilation Next.js des ressources du navigateur. Pour résoudre ce problème, remplacez le contenu desuivant.config.mjsavec:
/** @type {import('next').NextConfig} */ const nextConfig = { webpack: (config, { isServer }) => { if (isServer) { return config; } config.resolve = config.resolve ?? {} ; config.resolve.fallback = config.resolve.fallback ?? {} ; // Les hooks asynchrones ne sont pas disponibles dans le navigateur : config.resolve.fallback.async_hooks = false ; retourner la configuration ; }, }; exporter la nextConfig par...
[Courte citation de 8% de l'article original]