Aller au contenu principal

Utiliser Assistant UI

Assistant UI 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 dans la documentation d’Assistant UI.

Consultez le « UI Dojo » de Mastra pour voir des exemples concrets d’intégration d’Assistant UI avec Mastra.

Guide d’intégration
Lien direct vers 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 :

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

    Initialisez votre serveur Mastra :

    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éé :

    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 :

    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 install @mastra/ai-sdk@latest

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

    src/mastra/index.ts
    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 :

    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.

    cd ..

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

    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.

  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 :

    app/assistant.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 :

    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.

On this page