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

# Créer un tableau de bord personnalisé d'utilisation de l'API

export const UseCaseHero = ({title, description, prompt, category, features, devinUrl, agent, intent, playbookId, type}) => {
  const encodedPrompt = encodeURIComponent(prompt || '');
  const tag = 'docs-use-case-gallery';
  const utm = 'utm_source=docs&utm_medium=use-case-gallery&utm_campaign=hero-cta';
  const agentParams = (agent ? '&agent=' + agent : '') + (intent ? '&intent=' + intent : '') + (playbookId ? '&playbookId=' + playbookId : '');
  const devinHref = type === 'schedule' ? 'https://app.devin.ai/settings/schedules/create?' + utm + agentParams + (prompt ? '&prompt=' + encodedPrompt : '') : type === 'review' ? 'https://app.devin.ai/review?' + utm : agent === 'ada' ? 'https://app.devin.ai/search?' + utm + '&noSubmit=true' + (prompt ? '&prompt=' + encodedPrompt : '') : devinUrl ? devinUrl.includes('?') ? devinUrl + '&' + utm + agentParams : devinUrl + '?' + utm + agentParams : prompt ? 'https://app.devin.ai/?tags=' + tag + '&' + utm + agentParams + '&prompt=' + encodedPrompt : 'https://app.devin.ai/?' + utm + agentParams;
  const buttonLabel = type === 'schedule' ? 'Schedule in Devin ↗' : type === 'review' ? 'Set Up Devin Review ↗' : agent === 'advanced' ? 'Try in Devin ↗' : agent === 'dana' ? 'Try in Dana ↗' : agent === 'ada' ? 'Try in Ask Devin ↗' : 'Try in Devin ↗';
  const featureList = features ? features.split(',').map(f => f.trim()) : [];
  return <div className="uc-hero">
      <div className="uc-hero-inner">
        <div className="uc-hero-left">
          <h1 className="uc-hero-title">{title}</h1>
          <p className="uc-hero-desc">{description}</p>
          <div>
            <a href={devinHref} target="_blank" rel="noopener noreferrer" className="try-in-devin-btn">
              {buttonLabel}
            </a>
          </div>
        </div>
        <div className="uc-hero-meta">
          <div className="uc-meta-item">
            <span className="uc-meta-label">Author</span>
            <span className="uc-meta-value">Cognition</span>
          </div>
          <div className="uc-meta-item">
            <span className="uc-meta-label">Category</span>
            <span className="uc-meta-value">{category}</span>
          </div>
          {featureList.length > 0 && <div className="uc-meta-item">
              <span className="uc-meta-label">Features</span>
              <span className="uc-meta-value">{featureList.join(', ')}</span>
            </div>}
        </div>
      </div>
    </div>;
};

export const PromptBlock = ({children, type, agent, intent, playbookId}) => {
  var utm = 'utm_source=docs&utm_medium=use-case-gallery&utm_campaign=prompt-block';
  var tag = 'docs-use-case-gallery';
  var agentParams = (agent ? '&agent=' + agent : '') + (intent ? '&intent=' + intent : '') + (playbookId ? '&playbookId=' + playbookId : '');
  var label = type === 'schedule' ? 'Schedule in Devin' : type === 'playbook' ? 'Create Playbook' : type === 'knowledge' ? 'Add to Knowledge' : agent === 'advanced' ? 'Try in Devin' : agent === 'dana' ? 'Try in Dana' : agent === 'ada' ? 'Try in Ask Devin' : 'Try in Devin';
  var buildUrl = function (text) {
    var encoded = encodeURIComponent(text);
    if (type === 'schedule') return 'https://app.devin.ai/settings/schedules/create?' + utm + agentParams + '&prompt=' + encoded;
    if (type === 'playbook') return 'https://app.devin.ai/settings/playbooks/create?' + utm + '&body=' + encoded;
    if (type === 'knowledge') return 'https://app.devin.ai/knowledge?' + utm + '&body=' + encoded;
    if (agent === 'ada') return 'https://app.devin.ai/search?' + utm + '&noSubmit=true&prompt=' + encoded;
    return 'https://app.devin.ai/?tags=' + tag + '&' + utm + agentParams + '&prompt=' + encoded;
  };
  const ref = React.useRef(null);
  const [href, setHref] = React.useState('#');
  React.useEffect(() => {
    if (!ref.current) return;
    var codeEl = ref.current.querySelector('pre code');
    if (codeEl) {
      var text = codeEl.textContent.trim();
      if (text) setHref(buildUrl(text));
    }
    var header = ref.current.querySelector('[data-component-part="code-block-header"]');
    if (header && !header.querySelector('.prompt-block-devin-link')) {
      var link = document.createElement('a');
      link.href = href;
      link.target = '_blank';
      link.rel = 'noopener noreferrer';
      link.className = 'prompt-block-devin-link';
      link.style.cssText = 'display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:#fff;font-size:11px;font-weight:500;padding:4px 10px;border-radius:6px;white-space:nowrap;background:#317CFF;transition:background 0.2s;margin-left:8px;';
      link.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg> ' + label;
      link.onmouseenter = function () {
        link.style.background = '#2968D9';
      };
      link.onmouseleave = function () {
        link.style.background = '#317CFF';
      };
      header.appendChild(link);
    }
    var existingLink = ref.current.querySelector('.prompt-block-devin-link');
    if (existingLink && href !== '#') existingLink.href = href;
  });
  return <div className="prompt-block" ref={ref}>{children}</div>;
};

<UseCaseHero title="Créer un tableau de bord personnalisé d'utilisation de l'API" description="Devin dispose d'un tableau de bord d'utilisation intégré, mais si vous avez besoin de métriques personnalisées ou souhaitez combiner les données de Devin avec d'autres sources, demandez à Devin de créer une version sur mesure en utilisant l'API v3." prompt="Crée un tableau de bord interne qui affiche l'utilisation de Devin par notre équipe. Consulte la documentation de l'API Devin — utilise les endpoints de consommation et de métriques de l'API v3 pour récupérer le nombre de sessions, l'utilisation d'ACU par utilisateur et le nombre d'utilisateurs actifs quotidiens. Crée-le sous forme d'application Next.js avec Recharts." category="Données et analytique" features="API" />

<div className="uc-detail-wrapper">
  <Tip>Vous ne souhaitez pas effectuer cette configuration manuellement ? Collez un lien vers cette page dans une session Devin et demandez-lui de tout configurer pour vous.</Tip>

  <Steps>
    <Step title="Créer un utilisateur de service pour l’accès à l’API">
      L’API v3 utilise des jetons d’utilisateur de service, et non des API keys personnelles, pour l’authentification. Vous devez en créer un avant que Devin puisse récupérer des données.

      1. Accédez à [app.devin.ai](https://app.devin.ai/?utm_source=docs\&utm_medium=use-case-gallery) > **Settings** > **Service Users**
      2. Cliquez sur **Create Service User** et assignez-lui un rôle avec les permissions `ViewAccountMetrics` et `ManageBilling` — elles sont nécessaires pour lire les métriques de session et les données de consommation
      3. Copiez le jeton d’API affiché après la création — il n’est affiché qu’une seule fois
      4. Stockez le jeton comme un [Secret](/fr/product-guides/secrets) nommé `DEVIN_SERVICE_USER_TOKEN` afin que Devin puisse l’utiliser pendant la session sans le coder en dur

      Pour plus de détails sur l’authentification des utilisateurs de service, consultez le [Guide d’authentification de l’API v3](/fr/api-reference/authentication).
    </Step>

    <Step title="Indiquer à Devin quoi construire">
      Devin a un accès natif à sa propre documentation via le [Devin docs MCP](/fr/work-with-devin/mcp) — vous n’avez pas besoin de coller la référence d’API dans le prompt. Pointez simplement Devin vers les bons endpoints et il lira la documentation pour apprendre les formats de requête, les paramètres de requête et la structure des réponses.

      <PromptBlock>
        ```txt Build usage dashboard theme={null}
        Crée un tableau de bord interne qui montre l’utilisation de Devin par notre équipe. Utilise
        le secret DEVIN_SERVICE_USER_TOKEN pour t’authentifier. Tu peux lire la
        documentation de l’API Devin pour comprendre les endpoints v3 disponibles.

        Récupère les données à partir de ces endpoints v3 de l’API :
        - GET /v3/enterprise/consumption/daily/organizations — utilisation des ACU
          par organisation et par jour
        - GET /v3/enterprise/consumption/daily/users — utilisation des ACU par utilisateur
        - GET /v3/enterprise/metrics/sessions — nombre total de sessions
        - GET /v3/enterprise/metrics/active-users — DAU/WAU/MAU

        Construis-le comme une application Next.js avec Recharts. Inclut :
        - Des cartes de synthèse (sessions totales, ACUs totaux, utilisateurs actifs cette semaine)
        - Un graphique linéaire de la consommation quotidienne d’ACU sur les 30 derniers jours
        - Un histogramme de l’utilisation des ACU par utilisateur
        - Un tableau des sessions récentes avec statut et coût en ACU

        Ajoute un sélecteur de plage de dates pour filtrer toutes les vues. Ajoute un fichier README avec
        les instructions de configuration et de déploiement.
        ```
      </PromptBlock>
    </Step>

    <Step title="Ce que Devin construit">
      Devin lit la [documentation de l’API v3](/fr/api-reference/v3/overview) via le docs MCP pour apprendre les formats de requête exacts, puis met en place l’ossature de l’application :

      1. **Lit la documentation de l’API** — Recherche dans le Devin docs MCP les schémas des endpoints de consommation et de métriques, en apprenant les paramètres de requête comme `start_date`, `end_date`, et la structure des réponses
      2. **Crée les routes d’API** — Construit des routes d’API Next.js qui servent de proxy aux requêtes vers `https://api.devin.ai/v3/enterprise/*` en utilisant le jeton d’utilisateur de service provenant du secret `DEVIN_SERVICE_USER_TOKEN`
      3. **Construit l’interface du tableau de bord** — Crée une page de tableau de bord responsive avec Recharts, comprenant :
         * Des cartes de KPI affichant le nombre total de sessions, les ACUs consommés et les utilisateurs actifs hebdomadaires
         * Un graphique de séries temporelles de la consommation quotidienne provenant de l’endpoint `/consumption/daily/organizations`
         * Une répartition par utilisateur à partir de `/consumption/daily/users`
         * Un tableau des sessions à partir de l’endpoint de liste des sessions, avec statut, durée et coût en ACU
      4. **Ajoute des filtres** — Connecte un sélecteur de plage de dates qui relance toutes les requêtes vers les endpoints avec des paramètres `start_date` et `end_date` mis à jour
      5. **Ouvre une PR** — Pousse l’application avec un `README.md` couvrant les variables d’environnement, la configuration de développement local (`npm run dev`) et le déploiement sur Vercel
    </Step>

    <Step title="Étendre le tableau de bord">
      Une fois que le tableau de bord de base fonctionne, demandez à Devin d’ajouter d’autres panneaux dans des messages de suivi :

      <PromptBlock>
        ```txt Add org-level breakdown theme={null}
        Ajoute une liste déroulante pour filtrer le tableau de bord par organisation. Utilise
        GET /v3/enterprise/organizations pour remplir la liste, puis
        limite les graphiques de consommation à l’organisation sélectionnée.
        ```
      </PromptBlock>

      <PromptBlock>
        ```txt Add queue health monitoring theme={null}
        Ajoute un indicateur de statut qui montre l’état actuel de la file d’attente des sessions.
        Utilise GET /v3/enterprise/queue — cela renvoie un statut normal,
        elevated ou high. Affiche-le sous forme de badge coloré dans l’en-tête.
        ```
      </PromptBlock>

      <PromptBlock>
        ```txt Add cost estimation theme={null}
        Ajoute un panneau qui estime le coût à partir de la consommation d’ACU. Utilise un
        tarif configurable $/ACU stocké dans une variable d’environnement. Affiche
        le coût mensuel par organisation et une courbe de tendance sur 30 jours.
        ```
      </PromptBlock>
    </Step>
  </Steps>
</div>