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

# Crie um Painel Personalizado de Uso da 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="Criar um dashboard personalizado de uso da API" description="Devin possui um dashboard de uso integrado, mas, se você precisar de métricas personalizadas ou quiser combinar dados do Devin com outras fontes, peça ao Devin para criar uma versão sob medida usando a API v3." prompt="Crie um dashboard interno que mostre o uso do Devin pela nossa equipe. Você pode ler a documentação da API do Devin — use os endpoints de consumo e métricas da API v3 para obter a contagem de sessões, o uso de ACU por usuário e os usuários ativos diários. Crie-o como um app Next.js com Recharts." category="Dados e Análises" features="API" />

<div className="uc-detail-wrapper">
  <Tip>Não quer configurar isso manualmente? Cole um link para esta página em uma sessão do Devin e peça que ele configure tudo para você.</Tip>

  <Steps>
    <Step title="Criar um usuário de serviço para acesso à API">
      A API v3 faz autenticação usando tokens de usuário de serviço, não chaves de API pessoais. Você precisará criar um antes que o Devin possa obter dados.

      1. Vá para [app.devin.ai](https://app.devin.ai/?utm_source=docs\&utm_medium=use-case-gallery) > **Settings** > **Service Users**
      2. Clique em **Create Service User** e atribua a ele uma função com permissões `ViewAccountMetrics` e `ManageBilling` — elas são necessárias para ler métricas de sessão e dados de consumo
      3. Copie o token de API mostrado após a criação — ele é exibido apenas uma vez
      4. Armazene o token como um [Secret](/pt-BR/product-guides/secrets) chamado `DEVIN_SERVICE_USER_TOKEN` para que o Devin possa usá-lo durante a sessão sem precisar colocá-lo diretamente no código

      Para detalhes sobre autenticação de usuário de serviço, consulte o [Guia de Autenticação da API v3](/pt-BR/api-reference/authentication).
    </Step>

    <Step title="Informar ao Devin o que construir">
      O Devin tem acesso nativo à própria documentação por meio do [Devin docs MCP](/pt-BR/work-with-devin/mcp) — você não precisa colar a referência da API no prompt. Basta apontar o Devin para os endpoints corretos e ele lerá a documentação para aprender formatos de requisição, parâmetros de consulta e formatos de resposta.

      <PromptBlock>
        ```txt Build usage dashboard theme={null}
        Build an internal dashboard that shows our team's Devin usage. Use the
        secret DEVIN_SERVICE_USER_TOKEN to authenticate. You can read the Devin
        API docs to understand the available v3 endpoints.

        Pull data from these v3 API endpoints:
        - GET /v3/enterprise/consumption/daily/organizations — ACU usage
          per org per day
        - GET /v3/enterprise/consumption/daily/users — ACU usage per user
        - GET /v3/enterprise/metrics/sessions — total session counts
        - GET /v3/enterprise/metrics/active-users — DAU/WAU/MAU

        Build it as a Next.js app with Recharts. Include:
        - Summary cards (total sessions, total ACUs, active users this week)
        - Line chart of daily ACU consumption over the past 30 days
        - Bar chart of ACU usage by user
        - Table of recent sessions with status and ACU cost

        Add a date range picker to filter all views. Include a README with
        setup and deployment instructions.
        ```
      </PromptBlock>
    </Step>

    <Step title="O que o Devin constrói">
      O Devin lê a [documentação da API v3](/pt-BR/api-reference/v3/overview) via docs MCP para aprender os formatos exatos de requisição e então cria o esqueleto do app:

      1. **Lê a documentação da API** — Pesquisa no Devin docs MCP pelos esquemas dos endpoints de consumo e métricas, aprendendo parâmetros de consulta como `start_date`, `end_date` e formatos de resposta
      2. **Cria rotas de API** — Constrói rotas de API do Next.js que fazem proxy das requisições para `https://api.devin.ai/v3/enterprise/*` usando o token do usuário de serviço armazenado no secret `DEVIN_SERVICE_USER_TOKEN`
      3. **Constrói a interface do dashboard** — Cria uma página de dashboard responsiva com Recharts, incluindo:
         * Cartões de KPI mostrando total de sessões, ACUs consumidos e usuários ativos na semana
         * Um gráfico de série temporal do consumo diário obtido do endpoint `/consumption/daily/organizations`
         * Uma visão por usuário a partir de `/consumption/daily/users`
         * Uma tabela de sessões a partir do endpoint de lista de sessões com status, duração e custo em ACU
      4. **Adiciona filtragem** — Conecta um seletor de intervalo de datas que refaz as requisições para todos os endpoints com parâmetros `start_date` e `end_date` atualizados
      5. **Abre um PR** — Envia o app (push) com um `README.md` cobrindo variáveis de ambiente, configuração de desenvolvimento local (`npm run dev`) e implantação na Vercel
    </Step>

    <Step title="Ampliar o dashboard">
      Depois que o dashboard básico estiver funcionando, peça ao Devin para adicionar mais painéis em mensagens de acompanhamento:

      <PromptBlock>
        ```txt Add org-level breakdown theme={null}
        Add a dropdown to filter the dashboard by organization. Use
        GET /v3/enterprise/organizations to populate the list, then
        scope the consumption charts to the selected org.
        ```
      </PromptBlock>

      <PromptBlock>
        ```txt Add queue health monitoring theme={null}
        Add a status indicator that shows the current session queue health.
        Use GET /v3/enterprise/queue — it returns a status of normal,
        elevated, or high. Show it as a colored badge in the header.
        ```
      </PromptBlock>

      <PromptBlock>
        ```txt Add cost estimation theme={null}
        Add a panel that estimates cost from ACU consumption. Use a
        configurable $/ACU rate stored in an environment variable. Show
        monthly cost per org and a 30-day trend line.
        ```
      </PromptBlock>
    </Step>
  </Steps>
</div>