> ## 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 数据与其他数据源结合，可以让 Devin 使用 v3 API 帮你构建一个定制化版本。" prompt="帮我构建一个内部仪表盘，用于展示我们团队对 Devin 的使用情况。你可以查阅 Devin API 文档——使用 v3 API 的用量和指标端点来获取会话数量、每位用户的 ACU 使用量，以及每日活跃用户数。把它做成一个使用 Recharts 的 Next.js 应用。" category="数据与分析" features="API" />

<div className="uc-detail-wrapper">
  <Tip>不想手动配置？将本页链接粘贴到 Devin 会话中，让它为你完成所有设置。</Tip>

  <Steps>
    <Step title="为 API 访问创建服务用户">
      v3 API 使用服务用户 token 进行认证，而不是个人 API key。你需要先创建一个服务用户，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 token——它只会显示一次
      4. 将该 token 作为名为 `DEVIN_SERVICE_USER_TOKEN` 的 [Secret](/zh/product-guides/secrets) 存储起来，这样 Devin 就可以在会话中使用它，而无需将其硬编码在代码中

      有关服务用户认证的详细信息，请参阅 [v3 API Authentication Guide](/zh/api-reference/authentication)。
    </Step>

    <Step title="告诉 Devin 要构建什么">
      Devin 可以通过 [Devin docs MCP](/zh/work-with-devin/mcp) 原生访问其自身文档——你不需要把 API 参考文档粘贴到提示中。只要把 Devin 指向正确的端点，它就会阅读文档以了解请求格式、查询参数和响应结构。

      <PromptBlock>
        ```txt Build usage dashboard theme={null}
        构建一个内部仪表盘，用于展示我们团队对 Devin 的使用情况。使用
        secret DEVIN_SERVICE_USER_TOKEN 进行认证。你可以阅读 Devin
        API 文档来了解可用的 v3 端点。

        从这些 v3 API 端点拉取数据：
        - GET /v3/enterprise/consumption/daily/organizations — 每个组织每天的
          ACU 使用量
        - GET /v3/enterprise/consumption/daily/users — 每个用户的 ACU 使用量
        - GET /v3/enterprise/metrics/sessions — 会话总数
        - GET /v3/enterprise/metrics/active-users — DAU/WAU/MAU

        将其构建为一个使用 Recharts 的 Next.js 应用。包括：
        - 汇总卡片（会话总数、ACU 总量、本周活跃用户数）
        - 过去 30 天每日 ACU 消耗的折线图
        - 按用户划分的 ACU 使用量柱状图
        - 最近会话的表格，包含状态和 ACU 成本

        添加一个日期范围选择器，用于筛选所有视图。附带一个 README，
        说明设置和部署步骤。
        ```
      </PromptBlock>
    </Step>

    <Step title="Devin 会构建什么">
      Devin 通过 docs MCP 阅读 [v3 API docs](/zh/api-reference/v3/overview) 来了解精确的请求格式，然后搭建应用骨架：

      1. **读取 API 文档**——在 Devin docs MCP 中搜索 consumption 和 metrics 端点的 schema，了解 `start_date`、`end_date` 等查询参数以及响应结构
      2. **创建 API 路由**——构建 Next.js API 路由，将请求代理到 `https://api.devin.ai/v3/enterprise/*`，并使用来自 `DEVIN_SERVICE_USER_TOKEN` Secret 的服务用户 token
      3. **构建仪表盘 UI**——使用 Recharts 创建响应式仪表盘页面，包括：
         * 展示会话总数、已消耗 ACU 以及每周活跃用户数的 KPI 卡片
         * 从 `/consumption/daily/organizations` 端点拉取的每日消耗时间序列图
         * 来自 `/consumption/daily/users` 的按用户拆分数据
         * 从会话列表端点获取的会话表格，包含状态、时长和 ACU 成本
      4. **添加筛选功能**——接入日期范围选择器，重新请求所有端点，并使用更新后的 `start_date` 和 `end_date` 参数
      5. **发起一个 PR**——推送该应用，并附带一个 `README.md`，说明环境变量、本地开发设置 (`npm run dev`) 以及部署到 Vercel 的方法
    </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>