Skip to main content
Utilisez cette page si vous voulez une petite application de chat Next.js réaliste tout en gardant votre clé API Phaseo sur le serveur. Objectif : Exécuter une application de chat dans le navigateur qui découvre les modèles et envoie les réponses via des routes côté serveur. Résultat : Une interface de chat locale fonctionnelle qui n’expose pas les identifiants Phaseo au navigateur.

Créez une application de chat web Next.js avec Phaseo Gateway.

Ouvrir dans Cursor

​
Projet d’exemple

​
Fonctionnalités de l’application

    • récupère les modèles disponibles avec GET /v1/models
    • envoie les tours de chat avec POST /v1/responses
  • conserve la clé API sur le serveur
  • offre un point de départ simple pour un vrai produit, sans la complexité d’OAuth

​
Fichiers principaux

  • app/api/models/route.ts
  • app/api/responses/route.ts
  • app/components/ChatClient.tsx
  • lib/gateway.ts

​
Pourquoi l’exemple est structuré ainsi

​
1. Le navigateur n’appelle pas Phaseo directement

L’interface communique d’abord avec vos propres routes Next.js. Ces routes appellent Phaseo sur le serveur. Vous bénéficiez ainsi :
  • la gestion des secrets côté serveur
  • un emplacement unique pour gérer les en-têtes et les corps des requêtes
  • une évolution plus simple si vous ajoutez ensuite l’authentification, des limites de requêtes ou des journaux

​
2. La découverte des modèles est séparée de la génération

Gardez les routes de liste des modèles et de génération de chat séparées afin que chaque partie reste facile à comprendre :
  • une route pour lister les modèles
  • une route pour exécuter la requête de chat

​
3. L’interface gère uniquement l’état des interactions

Le client React gère :
  • l’état du champ de saisie
  • l’état de chargement
  • l’affichage des erreurs
  • les messages rendus
La route serveur gère l’appel à l’IA. Le navigateur s’occupe uniquement de l’expérience utilisateur.

​
Prérequis

    • Node.js et un gestionnaire de paquets compatible
  • une clé API Phaseo

​
Exécuter l’exemple

Définissez :
  • PHASEO_API_KEY
  • NEXT_PUBLIC_GATEWAY_URL
Puis lancez :
Ouvrez http://localhost:3000.

​
Vérifier le résultat

  • Le sélecteur de modèles charge les modèles depuis la route serveur.
  • L’envoi d’un message produit une réponse de l’assistant.
  • Le panneau réseau du navigateur n’expose pas PHASEO_API_KEY.
  • Une requête échouée au gateway affiche un état d’erreur utile dans l’interface.

​
Personnaliser l’application

  • remplacez le modèle par défaut par la cible que vous utiliserez en production
  • ajoutez le streaming si votre interface doit afficher les jetons un par un
  • ajoutez l’authentification plus tard si l’application devient multi-utilisateur
  • remplacez ensuite l’implémentation interne de la route par le SDK TypeScript pour utiliser un client de plus haut niveau

​
Choisir un autre point de départ

  • utilisez le guide rapide Node pour un script ou un test de backend, plutôt qu’une interface
  • utilisez le guide rapide Python si votre première intégration se trouve dans un worker, une CLI ou un service backend

​
Guides associés

Dernière modification le 2 octobre 2026