> ## Documentation Index
> Fetch the complete documentation index at: https://phaseo.app/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Créer une application de chat web avec Next.js

> Suivez l’application de chat Next.js existante comme tutoriel complet, avec une consigne de création à copier en haut de page.

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.

<Prompt description="Créez une **application de chat web Next.js** avec Phaseo Gateway." icon="message-square" actions={["copy", "cursor"]}>
  {`Vous créez une petite application de chat proche d’un produit prêt pour la production avec Phaseo Gateway.

    Créez une application Next.js avec :
    - une interface de chat
    - un sélecteur de modèles alimenté par GET /v1/models
    - une route côté serveur qui appelle POST /v1/responses
    - la gestion de la clé API côté serveur avec PHASEO_API_KEY
    - des états de chargement, de réussite et d’erreur

    Gardez volontairement l’application compacte et facile à examiner.

    Exigences d’implémentation :
    - Utilisez une route API locale pour découvrir les modèles.
    - Utilisez une route API locale pour générer les réponses.
    - Gardez les secrets uniquement côté serveur.
    - Montrez clairement dans le code le flux de requête et de réponse.
    - Ajoutez un court README avec les étapes de configuration et d’exécution.

    Vérification :
    - Lancez l’application si possible.
    - Vérifiez qu’un échange de chat aboutit.
    - Indiquez les fichiers modifiés, les vérifications effectuées et les hypothèses restantes.`}
</Prompt>

## Projet d’exemple

* GitHub: [examples/web-chat-nextjs](https://github.com/phaseoteam/Phaseo/tree/main/examples/web-chat-nextjs)
* Chemin local du dépôt : `examples/web-chat-nextjs`

## 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

<CodeGroup>
  ```bash npm theme={null}
  cd examples/web-chat-nextjs
  npm install
  cp .env.example .env.local
  ```

  ```bash pnpm theme={null}
  cd examples/web-chat-nextjs
  pnpm install
  cp .env.example .env.local
  ```

  ```bash yarn theme={null}
  cd examples/web-chat-nextjs
  yarn install
  cp .env.example .env.local
  ```

  ```bash bun theme={null}
  cd examples/web-chat-nextjs
  bun install
  cp .env.example .env.local
  ```
</CodeGroup>

Définissez :

* `PHASEO_API_KEY`
* `NEXT_PUBLIC_GATEWAY_URL`

Puis lancez :

<CodeGroup>
  ```bash npm theme={null}
  npm run dev
  ```

  ```bash pnpm theme={null}
  pnpm dev
  ```

  ```bash yarn theme={null}
  yarn dev
  ```

  ```bash bun theme={null}
  bun run dev
  ```
</CodeGroup>

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

* [Consignes pour démarrer une mini-application](./mini-app-starter-prompts.mdx)
* [Exemples](../guides/examples.mdx)
* [Guide rapide](../quickstart.mdx)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.