Assistant

Ajoutez un chat propulsé par l'IA à votre documentation qui répond aux questions, cite les sources et génère des exemples de code.

À propos de l'Assistant

L'assistant répond aux questions sur votre documentation via des requêtes en langage naturel. Il est intégré directement dans votre site de documentation, permettant aux utilisateurs de trouver rapidement des réponses.

Lorsque les utilisateurs posent des questions, l'assistant :

Recherche et récupère le contenu pertinent de votre documentation en utilisant un serveur MCP.
Cite les sources avec des liens navigables vers les pages référencées.
Génère des exemples de code copiables pour aider les utilisateurs à implémenter les solutions.

L'assistant nécessite une clé API AI Gateway pour fonctionner.

Comment ça fonctionne

L'assistant utilise une architecture multi-agents :

Agent principal - Reçoit les questions des utilisateurs et décide quand rechercher dans la documentation
Agent de recherche - Utilise les outils du serveur MCP pour trouver le contenu pertinent
Génération de réponse - Synthétise les informations en réponses utiles et conversationnelles

Par défaut, l'assistant se connecte au serveur MCP intégré de votre documentation à /mcp, lui donnant accès à toutes vos pages sans configuration supplémentaire. Vous pouvez également vous connecter à un serveur MCP externe si nécessaire.

Démarrage rapide

1. Obtenir une clé API

Obtenez une clé API depuis Vercel AI Gateway. AI Gateway fonctionne avec plusieurs fournisseurs d'IA (OpenAI, Anthropic, Google, et plus) via une API unifiée.

2. Configurer la variable d'environnement

Ajoutez votre clé API à votre environnement :

.env

AI_GATEWAY_API_KEY=votre-cle-api

3. Déployer

C'est tout ! L'assistant est automatiquement activé lorsqu'une clé API est détectée. Déployez votre documentation et l'assistant sera disponible pour vos utilisateurs.

Utiliser l'Assistant

Les utilisateurs peuvent interagir avec l'assistant de plusieurs façons :

Input flottant

Sur les pages de documentation, un champ de saisie flottant apparaît en bas de l'écran. Les utilisateurs peuvent taper leurs questions directement et appuyer sur Entrée pour obtenir des réponses.

Utilisez le raccourci clavier I pour activer l'input flottant.

Expliquer avec l'IA

Chaque page de documentation inclut un bouton Explain with AI dans la barre latérale de la table des matières. Cliquer sur ce bouton ouvre l'assistant avec la page actuelle comme contexte.

Chat en panneau latéral

Lorsqu'une conversation commence, un panneau coulissant s'ouvre sur le côté droit de l'écran. Ce panneau affiche l'historique de la conversation et permet aux utilisateurs de continuer à poser des questions.

Configuration

Configurez l'assistant via app.config.ts :

app.config.ts

export default defineAppConfig({
  assistant: {
    // Afficher l'input flottant sur les pages de documentation
    floatingInput: true,

    // Afficher le bouton "Expliquer avec l'IA" dans la barre latérale
    explainWithAi: true,

    // Questions FAQ à afficher quand le chat est vide
    faqQuestions: [],

    // Raccourcis clavier
    shortcuts: {
      focusInput: 'meta_i'
    },

    // Icônes personnalisées
    icons: {
      trigger: 'i-lucide-sparkles',
      explain: 'i-lucide-brain'
    }
  }
})

Questions FAQ

Affichez des questions suggérées quand le chat est vide. Cela aide les utilisateurs à découvrir ce qu'ils peuvent demander.

Format simple

app.config.ts

export default defineAppConfig({
  assistant: {
    faqQuestions: [
      'Comment installer Docus ?',
      'Comment personnaliser le thème ?',
      'Comment ajouter des composants à mes pages ?'
    ]
  }
})

Format avec catégories

Organisez les questions en catégories :

app.config.ts

export default defineAppConfig({
  assistant: {
    faqQuestions: [
      {
        category: 'Démarrage',
        items: [
          'Comment installer Docus ?',
          'Quelle est la structure du projet ?'
        ]
      },
      {
        category: 'Personnalisation',
        items: [
          'Comment changer les couleurs du thème ?',
          'Comment ajouter un logo personnalisé ?'
        ]
      }
    ]
  }
})

Format multilingue

Pour une documentation multilingue, fournissez les questions FAQ par locale :

app.config.ts

export default defineAppConfig({
  assistant: {
    faqQuestions: {
      en: [
        { category: 'Getting Started', items: ['How do I install?'] }
      ],
      fr: [
        { category: 'Démarrage', items: ['Comment installer ?'] }
      ]
    }
  }
})

Raccourcis clavier

Configurez le raccourci clavier pour activer l'input flottant :

app.config.ts

export default defineAppConfig({
  assistant: {
    shortcuts: {
      // Par défaut : 'meta_i' (Cmd+I sur Mac, Ctrl+I sur Windows)
      focusInput: 'meta_k' // Changer pour Cmd/Ctrl+K
    }
  }
})

Le format de raccourci utilise des underscores pour séparer les touches. Exemples courants :

meta_i - Cmd+I (Mac) / Ctrl+I (Windows)
meta_k - Cmd+K (Mac) / Ctrl+K (Windows)
ctrl_shift_p - Ctrl+Shift+P

Icônes personnalisées

Personnalisez les icônes utilisées par l'assistant :

app.config.ts

export default defineAppConfig({
  assistant: {
    icons: {
      // Icône pour le bouton déclencheur et l'en-tête du panneau
      trigger: 'i-lucide-bot',

      // Icône pour le bouton "Expliquer avec l'IA"
      explain: 'i-lucide-lightbulb'
    }
  }
})

Les icônes utilisent le format Iconify (ex: i-lucide-sparkles, i-heroicons-sparkles).

Internationalisation

Tous les textes de l'interface sont automatiquement traduits selon la locale de l'utilisateur. Docus inclut des traductions intégrées pour l'anglais et le français.

Les textes suivants sont traduits :

Titre et placeholder du panneau
Textes des infobulles
Libellés des boutons ("Effacer le chat", "Fermer", "Expliquer avec l'IA")
Messages de statut ("Réflexion...", "Le chat est effacé au rechargement")

Si aucun title ou placeholder personnalisé n'est défini dans app.config.ts, les valeurs traduites des fichiers i18n seront utilisées automatiquement.

Désactiver des fonctionnalités

Désactiver l'input flottant

Masquez l'input flottant en bas des pages de documentation :

app.config.ts

export default defineAppConfig({
  assistant: {
    floatingInput: false
  }
})

Désactiver "Explain with AI"

Masquez le bouton "Explain with AI" dans la barre latérale de documentation :

app.config.ts

export default defineAppConfig({
  assistant: {
    explainWithAi: false
  }
})

Désactiver l'assistant entièrement

L'assistant est automatiquement désactivé quand aucune clé API n'est configurée. Pour le désactiver explicitement, supprimez simplement la variable d'environnement :

.env

# Commentez ou supprimez la clé API
# AI_GATEWAY_API_KEY=votre-cle-api

Configuration avancée

Configurez les options avancées dans nuxt.config.ts :

nuxt.config.ts

export default defineNuxtConfig({
  assistant: {
    // Modèle IA (utilise le format AI SDK Gateway)
    model: 'google/gemini-3-flash',

    // Serveur MCP (chemin ou URL)
    mcpServer: '/mcp',

    // Chemin de l'endpoint API
    apiPath: '/__docus__/assistant'
  }
})

Configuration du serveur MCP

L'assistant utilise un serveur MCP pour accéder à votre documentation. Vous avez deux options :

Utiliser le serveur MCP intégré (par défaut)

Par défaut, l'assistant utilise le serveur MCP intégré de Docus à /mcp :

nuxt.config.ts

export default defineNuxtConfig({
  assistant: {
    mcpServer: '/mcp'
  }
})

Assurez-vous que le serveur MCP est activé dans votre configuration. Si vous avez personnalisé le chemin MCP, mettez à jour mcpServer en conséquence.

Utiliser un serveur MCP externe

Connectez-vous à n'importe quel serveur MCP externe en fournissant une URL complète :

nuxt.config.ts

export default defineNuxtConfig({
  assistant: {
    mcpServer: 'https://autre-docs.exemple.com/mcp'
  }
})

C'est utile lorsque vous voulez que l'assistant réponde aux questions d'une autre source de documentation, ou lors de la connexion à une base de connaissances centralisée.

Modèle IA personnalisé

L'assistant utilise google/gemini-3-flash par défaut. Vous pouvez le changer pour n'importe quel modèle supporté par AI SDK Gateway :

nuxt.config.ts

export default defineNuxtConfig({
  assistant: {
    model: 'anthropic/claude-opus-4.5'
  }
})

Nom du site dans les réponses

L'assistant utilise automatiquement le nom de votre site dans ses réponses. Configurez le nom du site dans nuxt.config.ts :

nuxt.config.ts

export default defineNuxtConfig({
  site: {
    name: 'Ma Documentation'
  }
})

Cela permet à l'assistant de répondre en tant qu'"assistant de Ma Documentation" et de parler avec autorité sur votre produit spécifique.

Accès programmatique

Utilisez le composable useAssistant pour contrôler l'assistant programmatiquement :

<script setup>
const { isEnabled, isOpen, open, close, toggle } = useAssistant()

function askQuestion() {
  // Ouvrir l'assistant avec une question pré-remplie
  open('Comment configurer le thème ?', true)
}
</script>

<template>
  <UButton v-if="isEnabled" @click="askQuestion">
    Demander sur les thèmes
  </UButton>
</template>

API du composable

Propriété	Type	Description
`isEnabled`	`ComputedRef<boolean>`	Si l'assistant est activé (clé API présente)
`isOpen`	`Ref<boolean>`	Si le panneau est ouvert
`open(message?, clearPrevious?)`	`Function`	Ouvrir l'assistant, optionnellement avec un message
`close()`	`Function`	Fermer le panneau de l'assistant
`toggle()`	`Function`	Basculer l'assistant ouvert/fermé
`clearMessages()`	`Function`	Effacer l'historique de conversation

Éditer cette pageouSignaler un problème

Images et intégrations

Ajoutez des images, vidéos et autres éléments HTML

Serveur MCP

Connectez votre documentation aux outils IA avec un serveur MCP natif.