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

# カスタム 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="カスタム API 利用状況ダッシュボードを構築する" description="Devin には利用状況ダッシュボードが組み込まれていますが、カスタムメトリクスが必要な場合や Devin のデータを他のデータソースと組み合わせたい場合は、v3 API を使って Devin に要件に合わせたカスタム版を作成させることができます。" prompt="チームの Devin 利用状況を表示する社内ダッシュボードを作成してください。Devin API ドキュメントを参照し、v3 API の consumption エンドポイントと metrics エンドポイントを使って、セッション数、ユーザーごとの ACU 使用量、日次のアクティブユーザー数を取得してください。Next.js アプリとして、Recharts を使って構築してください。" category="データと分析" features="API" />

<div className="uc-detail-wrapper">
  <Tip>手動でのセットアップが面倒ですか？このページのリンクを Devin のセッションに貼り付けて、すべてのセットアップを依頼してください。</Tip>

  <Steps>
    <Step title="APIアクセス用のサービスユーザーを作成する">
      v3 API は、個人の APIキー ではなくサービスユーザー用トークンで認証します。Devin がデータを取得できるようにするには、事前にサービスユーザーを作成しておく必要があります。

      1. [app.devin.ai](https://app.devin.ai/?utm_source=docs\&utm_medium=use-case-gallery) > **Settings** > **Service Users** に移動します
      2. **Create Service User** をクリックし、`ViewAccountMetrics` と `ManageBilling` 権限を含むロールを割り当てます — セッションメトリクスと利用データを読み取るのに必要です
      3. 作成後に表示される API トークンをコピーします — 表示されるのは一度きりです
      4. トークンを [Secret](/ja/product-guides/secrets) として `DEVIN_SERVICE_USER_TOKEN` という名前で保存します。これにより、ハードコードせずに Devin がセッション中にトークンを使用できます

      サービスユーザー認証の詳細については、[v3 API Authentication Guide](/ja/api-reference/authentication) を参照してください。
    </Step>

    <Step title="Devin に何を作るか伝える">
      Devin は [Devin docs MCP](/ja/work-with-devin/mcp) を通じて自分自身のドキュメントにネイティブアクセスできます。そのため、プロンプトに API リファレンスを貼り付ける必要はありません。適切なエンドポイントを指定すれば、リクエスト形式、クエリパラメータ、レスポンス構造を学ぶためにドキュメントを読み込みます。

      <PromptBlock>
        ```txt Build usage dashboard theme={null}
        私たちのチームの Devin 利用状況を表示する社内ダッシュボードを構築してください。
        認証にはシークレット DEVIN_SERVICE_USER_TOKEN を使用してください。利用可能な v3
        エンドポイントを理解するために Devin API ドキュメントを参照してかまいません。

        次の v3 API エンドポイントからデータを取得してください:
        - GET /v3/enterprise/consumption/daily/organizations — 組織ごとの1日あたりの
          ACU使用量
        - GET /v3/enterprise/consumption/daily/users — ユーザーごとの ACU使用量
        - GET /v3/enterprise/metrics/sessions — セッション総数
        - GET /v3/enterprise/metrics/active-users — DAU/WAU/MAU

        Next.js と Recharts を使ってアプリを構築してください。次を含めてください:
        - サマリーカード（総セッション数、総 ACU、今週のアクティブユーザー数）
        - 過去30日間の1日あたりの ACU 消費量の折れ線グラフ
        - ユーザー別 ACU 使用量の棒グラフ
        - 最近のセッションをステータスと ACU コスト付きで表示するテーブル

        すべてのビューを絞り込むための日付範囲ピッカーを追加してください。
        セットアップとデプロイ手順を記載した README も含めてください。
        ```
      </PromptBlock>
    </Step>

    <Step title="Devin が構築するもの">
      Devin は docs MCP 経由で [v3 API docs](/ja/api-reference/v3/overview) を読み、正確なリクエスト形式を把握したうえで、次のようにアプリの骨組みを作成します。

      1. **API ドキュメントを読む** — Devin docs MCP から consumption および metrics のエンドポイントスキーマを検索し、`start_date`、`end_date` などのクエリパラメータやレスポンス構造を学習します
      2. **API ルートを作成する** — `DEVIN_SERVICE_USER_TOKEN` シークレットからサービスユーザー用トークンを取得し、それを用いて `https://api.devin.ai/v3/enterprise/*` へのリクエストをプロキシする Next.js API ルートを構築します
      3. **ダッシュボード UI を構築する** — Recharts を使ってレスポンシブなダッシュボードページを作成し、次を含めます:
         * 総セッション数、消費された ACU、週間アクティブユーザー数を表示する KPI カード
         * `/consumption/daily/organizations` エンドポイントから取得した日次消費量の時系列チャート
         * `/consumption/daily/users` から取得したユーザー別の内訳
         * セッションリストエンドポイントから取得したステータス、継続時間、ACU コスト付きのセッションテーブル
      4. **フィルタリングを追加する** — すべてのエンドポイントを、更新された `start_date` と `end_date` パラメータで再フェッチする日付範囲ピッカーを接続します
      5. **PR を作成する** — 環境変数、ローカル開発セットアップ (`npm run dev`) 、および Vercel へのデプロイ方法を説明した `README.md` とともにアプリをプッシュします
    </Step>

    <Step title="ダッシュボードを拡張する">
      ベースのダッシュボードが動作したら、後続のメッセージでパネルを追加するよう Devin に依頼できます。

      <PromptBlock>
        ```txt Add org-level breakdown theme={null}
        ダッシュボードを組織でフィルタリングできるドロップダウンを追加してください。
        一覧を取得するために GET /v3/enterprise/organizations を使用し、選択された組織に
        スコープされた消費チャートを表示してください。
        ```
      </PromptBlock>

      <PromptBlock>
        ```txt Add queue health monitoring theme={null}
        現在のセッションキューの健全性を表示するステータスインジケーターを追加してください。
        GET /v3/enterprise/queue を使用してください。このエンドポイントは normal、
        elevated、high のいずれかのステータスを返します。ヘッダーに色付きバッジとして表示してください。
        ```
      </PromptBlock>

      <PromptBlock>
        ```txt Add cost estimation theme={null}
        ACU 消費量からコストを見積もるパネルを追加してください。
        環境変数に保存された設定可能な $/ACU レートを使用し、
        組織ごとの月次コストと30日間のトレンドラインを表示してください。
        ```
      </PromptBlock>
    </Step>
  </Steps>
</div>