> Discover all available pages from the documentation index: https://mastra.zisheng.pro/fr/llms.txt

# Utiliser Assistant UI

[Assistant UI](https://assistant-ui.com) est une bibliothèque TypeScript/React pour le chat IA. Basée sur shadcn/ui et Tailwind CSS, elle permet aux développeurs de créer en quelques minutes de belles expériences de chat adaptées aux entreprises.

> **Info:** Pour une approche d’intégration full-stack où Mastra s’exécute directement dans vos routes d’API Next.js, consultez le [guide d’intégration full-stack](https://www.assistant-ui.com/docs/integrations/frameworks/mastra/full-stack) dans la documentation d’Assistant UI.

Consultez le [**« UI Dojo »**](https://ui-dojo.mastra.ai/) de Mastra pour voir des exemples concrets d’intégration d’Assistant UI avec Mastra.

## Guide d’intégration

Exécutez Mastra comme serveur autonome et connectez votre frontend Next.js (avec Assistant UI) à ses endpoints d’API.

1. Configurez la structure de vos répertoires. Elle peut par exemple ressembler à ceci :

   ```bash
   project-root
   ├── mastra-server
   │   ├── src
   │   │   └── mastra
   │   └── package.json
   └── my-app
       └── package.json
   ```

   Initialisez votre serveur Mastra :

   ```bash
   npx create-mastra@latest
   ```

   Cette commande lance un assistant interactif qui vous aide à générer un nouveau projet Mastra, notamment en vous demandant un nom de projet et en définissant la configuration de base. Suivez les instructions pour créer votre projet serveur.

   Accédez au répertoire de votre serveur Mastra nouvellement créé :

   ```bash
   cd mastra-server # Replace with the actual directory name you provided
   ```

   Vous disposez désormais d’un projet de serveur Mastra de base. Vous devez avoir les fichiers et répertoires suivants :

   ```bash
   src
   └── mastra
       ├── agents
       │   └── weather-agent.ts
       ├── scorers
       │   └── weather-scorer.ts
       ├── tools
       │   └── weather-tool.ts
       ├── workflows
       │   └── weather-workflow.ts
       └── index.ts
   ```

   > **Remarque:** Vérifiez que vous avez défini dans le fichier `.env` les variables d’environnement appropriées pour votre Provider LLM.

2. Créez une route de chat pour le frontend Assistant UI à l’aide de l’utilitaire `chatRoute()` de `@mastra/ai-sdk`. Ajoutez-le à votre projet Mastra :

   **npm**:

   ```bash
   npm install @mastra/ai-sdk@latest
   ```

   **pnpm**:

   ```bash
   pnpm add @mastra/ai-sdk@latest
   ```

   **Yarn**:

   ```bash
   yarn add @mastra/ai-sdk@latest
   ```

   **Bun**:

   ```bash
   bun add @mastra/ai-sdk@latest
   ```

   Dans votre fichier `src/mastra/index.ts`, enregistrez la route de chat :

   ```typescript
   import { Mastra } from '@mastra/core/mastra'
   import { chatRoute } from '@mastra/ai-sdk'
   // Rest of the imports...

   export const mastra = new Mastra({
     // Rest of the configuration...
     server: {
       apiRoutes: [
         chatRoute({
           path: '/chat/:agentId',
         }),
       ],
     },
   })
   ```

   Tous les agents seront ainsi disponibles dans des formats compatibles avec AI SDK, y compris `weatherAgent` à l’endpoint `/chat/weatherAgent`.

3. Exécutez le serveur Mastra à l’aide de la commande suivante :

   ```bash
   npm run dev
   ```

   Par défaut, le serveur Mastra s’exécute sur `http://localhost:4111`. Gardez ce serveur en cours d’exécution pendant les étapes suivantes, où nous configurerons le frontend Assistant UI pour s’y connecter.

4. Remontez d’un répertoire jusqu’à la racine de votre projet.

   ```bash
   cd ..
   ```

   Créez un nouveau projet `assistant-ui` avec la commande suivante.

   ```bash
   npx assistant-ui@latest create
   ```

   > **Remarque:** Pour des instructions de configuration détaillées, y compris l’ajout de clés API, la configuration de base et les étapes d’installation manuelle, consultez la [documentation officielle d’assistant-ui](https://assistant-ui.com/docs).

5. La configuration Assistant UI par défaut configure le runtime de chat pour utiliser une route d’API locale (`/api/chat`) du projet Next.js. Comme notre agent Mastra s’exécute sur un serveur distinct, nous devons mettre à jour le frontend pour qu’il pointe vers l’endpoint de ce serveur.

   Ouvrez le fichier de votre projet frontend assistant-ui qui contient le hook `useChatRuntime` (généralement `app/assistant.tsx` ou `src/app/assistant.tsx`). Recherchez le hook `useChatRuntime` et remplacez la propriété `api` par l’URL complète de l’endpoint de streaming de votre agent Mastra :

   ```tsx
   'use client'

   // Rest of the imports...

   export const Assistant = () => {
     const runtime = useChatRuntime({
       transport: new AssistantChatTransport({
         api: 'http://localhost:4111/chat/weatherAgent',
       }),
     })

     // Rest of the component...
   }
   ```

   Le frontend Assistant UI envoie maintenant les requêtes de chat directement à votre serveur Mastra en cours d’exécution.

6. Vous êtes prêt à relier les différents éléments ! Vérifiez que le serveur Mastra et le frontend Assistant UI sont tous deux en cours d’exécution. Démarrez le serveur de développement Next.js :

   ```bash
   npm run dev
   ```

   Vous devriez maintenant pouvoir discuter avec votre agent dans le navigateur.

Félicitations ! Vous avez intégré Mastra à Assistant UI à l’aide d’une approche avec serveur séparé. Votre frontend Assistant UI communique maintenant avec un serveur d’agents Mastra autonome.