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

# Benutzerdefiniertes API-Nutzungs-Dashboard erstellen

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="Ein benutzerdefiniertes Dashboard für die API-Nutzung erstellen" description="Devin verfügt über ein integriertes Nutzungs-Dashboard, aber wenn Sie benutzerdefinierte Kennzahlen benötigen oder Devin-Daten mit anderen Quellen kombinieren möchten, lassen Sie Devin mit der v3-API eine maßgeschneiderte Version erstellen." prompt="Erstellen Sie mir ein internes Dashboard, das die Devin-Nutzung unseres Teams anzeigt. Sie können die Devin-API-Dokumentation lesen – verwenden Sie die v3-API-Endpunkte für Verbrauch und Kennzahlen, um die Anzahl der Sitzungen, die ACU-Nutzung pro Benutzer und täglich aktive Nutzer abzurufen. Erstellen Sie es als Next.js-App mit Recharts." category="Daten & Analysen" features="API" />

<div className="uc-detail-wrapper">
  <Tip>Möchten Sie das nicht manuell einrichten? Fügen Sie einen Link zu dieser Seite in eine Devin-Sitzung ein und bitten Sie Devin, alles für Sie einzurichten.</Tip>

  <Steps>
    <Step title="Einen Dienstbenutzer für den API-Zugriff erstellen">
      Die v3 API authentifiziert sich mit Dienstbenutzer-Token, nicht mit persönlichen API keys. Sie müssen einen anlegen, bevor Devin Daten abrufen kann.

      1. Gehen Sie zu [app.devin.ai](https://app.devin.ai/?utm_source=docs\&utm_medium=use-case-gallery) > **Settings** > **Service Users**
      2. Klicken Sie auf **Create Service User** und weisen Sie ihm eine Rolle mit den Berechtigungen `ViewAccountMetrics` und `ManageBilling` zu — diese werden benötigt, um Sitzungsmetriken und Verbrauchsdaten zu lesen
      3. Kopieren Sie das nach der Erstellung angezeigte API-Token — es wird nur einmal angezeigt
      4. Speichern Sie das Token als [Secret](/de/product-guides/secrets) mit dem Namen `DEVIN_SERVICE_USER_TOKEN`, damit Devin es während der Session verwenden kann, ohne es hardcodieren zu müssen

      Details zur Authentifizierung mit Dienstbenutzern finden Sie im [v3 API Authentication Guide](/de/api-reference/authentication).
    </Step>

    <Step title="Devin sagen, was es bauen soll">
      Devin hat nativen Zugriff auf seine eigene Dokumentation über das [Devin docs MCP](/de/work-with-devin/mcp) — Sie müssen die API-Referenz nicht in den Prompt einfügen. Zeigen Sie Devin einfach die richtigen Endpunkte, und es liest die Doku, um Request-Formate, Query-Parameter und Response-Strukturen zu lernen.

      <PromptBlock>
        ```txt Usage-Dashboard erstellen theme={null}
        Erstelle ein internes Dashboard, das die Devin-Nutzung unseres Teams anzeigt.
        Verwende das Secret DEVIN_SERVICE_USER_TOKEN zur Authentifizierung. Du kannst
        die Devin API-Dokumentation lesen, um die verfügbaren v3-Endpunkte zu verstehen.

        Rufe Daten von diesen v3 API-Endpunkten ab:
        - GET /v3/enterprise/consumption/daily/organizations — ACU-Nutzung
          pro Organisation und Tag
        - GET /v3/enterprise/consumption/daily/users — ACU-Nutzung pro Nutzer
        - GET /v3/enterprise/metrics/sessions — Gesamtzahl der Sessions
        - GET /v3/enterprise/metrics/active-users — DAU/WAU/MAU

        Baue das Ganze als Next.js-App mit Recharts. Enthalten sein sollen:
        - Übersichts-Karten (Gesamtsessions, gesamte ACUs, aktive Nutzer dieser Woche)
        - Liniendiagramm des täglichen ACU-Verbrauchs der letzten 30 Tage
        - Balkendiagramm der ACU-Nutzung pro Nutzer
        - Tabelle der letzten Sessions mit Status und ACU-Kosten

        Füge einen Datumsbereichs-Selektor hinzu, um alle Ansichten zu filtern. Füge
        eine README mit Setup- und Deployment-Anweisungen hinzu.
        ```
      </PromptBlock>
    </Step>

    <Step title="Was Devin baut">
      Devin liest die [v3 API-Dokumentation](/de/api-reference/v3/overview) über das docs MCP, um die exakten Request-Formate zu lernen, und erstellt dann das Grundgerüst der App:

      1. **Liest die API-Dokumentation** — Durchsucht das Devin docs MCP nach den Schemas der Consumption- und Metrics-Endpunkte und lernt dabei Query-Parameter wie `start_date`, `end_date` und Response-Strukturen
      2. **Erstellt API-Routen** — Baut Next.js-API-Routen, die Requests an `https://api.devin.ai/v3/enterprise/*` weiterleiten und dabei das Dienstbenutzer-Token aus dem Secret `DEVIN_SERVICE_USER_TOKEN` verwenden
      3. **Baut das Dashboard-UI** — Erstellt eine responsive Dashboard-Seite mit Recharts, einschließlich:
         * KPI-Karten, die Gesamtsessions, verbrauchte ACUs und wöchentliche aktive Nutzer anzeigen
         * Ein Zeitreihendiagramm des täglichen Verbrauchs aus dem Endpoint `/consumption/daily/organizations`
         * Eine Aufschlüsselung pro Nutzer aus `/consumption/daily/users`
         * Eine Session-Tabelle aus dem Sessions-Listen-Endpunkt mit Status, Dauer und ACU-Kosten
      4. **Fügt Filterung hinzu** — Verdrahtet einen Datumsbereichs-Selektor, der alle Endpunkte mit aktualisierten `start_date`- und `end_date`-Parametern neu abruft
      5. **Öffnet einen PR** — Pusht die App mit einer `README.md`, die Umgebungsvariablen, das lokale Dev-Setup (`npm run dev`) und das Deployment zu Vercel beschreibt
    </Step>

    <Step title="Das Dashboard erweitern">
      Sobald das Basis-Dashboard funktioniert, bitten Sie Devin in Folgenachrichten, weitere Panels hinzuzufügen:

      <PromptBlock>
        ```txt Org-Level-Aufschlüsselung hinzufügen theme={null}
        Füge ein Dropdown hinzu, um das Dashboard nach Organisation zu filtern.
        Verwende GET /v3/enterprise/organizations, um die Liste zu befüllen, und
        beschränke die Verbrauchsdiagramme auf die ausgewählte Organisation.
        ```
      </PromptBlock>

      <PromptBlock>
        ```txt Queue-Health-Monitoring hinzufügen theme={null}
        Füge einen Statusindikator hinzu, der den aktuellen Zustand der
        Sitzungswarteschlange anzeigt. Verwende GET /v3/enterprise/queue — der
        Endpunkt gibt einen Status von normal, elevated oder high zurück.
        Zeige ihn als farbiges Badge im Header an.
        ```
      </PromptBlock>

      <PromptBlock>
        ```txt Kostenschätzung hinzufügen theme={null}
        Füge ein Panel hinzu, das Kosten basierend auf dem ACU-Verbrauch schätzt.
        Verwende einen konfigurierbaren $/ACU-Satz, der in einer Umgebungsvariable
        gespeichert ist. Zeige monatliche Kosten pro Organisation und eine
        30-Tage-Trendlinie an.
        ```
      </PromptBlock>
    </Step>
  </Steps>
</div>