> For the complete documentation index, see llms.txt.
Skip to main content

Check out Port for yourself ➜ 

Visualize Claude metrics

Implement with AI

Send this guide to your coding agent.

Prerequisite: Install Port MCP

This guide demonstrates how to set up a monitoring dashboard to gain insights into your Claude API usage using Port. You'll learn how to visualize key metrics like token consumption, costs, model distribution, cache efficiency, and track Claude Code activity over time.

Claude API metrics dashboard overview

Common use cases​

  • Monitor Claude API token consumption trends.
  • Track API costs and optimize spending across models.
  • Analyze model distribution to understand which Claude models are used most.
  • Monitor cache efficiency to optimize costs.
  • Track Claude Code sessions, commits, and pull requests.

Prerequisites​

This guide assumes the following:

Create the dashboard​

  1. Navigate to your context lake.

  2. Click on the + button in the left sidebar.

  3. Select New dashboard.

  4. Name the dashboard Claude AI Insights.

  5. Input Monitor Claude API usage, costs, and performance metrics under Description.

  6. Select the Claude icon.

  7. Click Create.

You now have a blank dashboard where you can add widgets to visualize your Claude metrics.

Add widgets​

Create the following widgets to gain insights into your Claude API usage:

Total output tokens widget​

Total output tokens (click to expand)

  1. Click on + Widget and select Number Chart.

  2. Fill in the following details:

    • Title: Total Output Tokens.
    • Description: Total output tokens generated by Claude.
    • Icon: BlankPage.
    • Blueprint: claude_usage_record.
    • Chart type: Select Aggregate by property.
    • Property: output_tokens.
    • Function: Sum.

  3. Click Save.

Total cost widget​

Total cost (click to expand)

  1. Click on + Widget and select Number Chart.

  2. Fill in the following details:

    • Title: Total Cost (USD).
    • Description: Total cost of Claude API usage.
    • Icon: DollarSign.
    • Blueprint: claude_cost_record.
    • Chart type: Select Aggregate by property.
    • Property: amount.
    • Function: Sum.

  3. Click Save.

Total web searches widget​

Total web searches (click to expand)

  1. Click on + Widget and select Number Chart.

  2. Fill in the following details:

    • Title: Total Web Searches.
    • Description: Total web search requests made by Claude.
    • Icon: Search.
    • Blueprint: claude_usage_record.
    • Chart type: Select Aggregate by property.
    • Property: web_search_requests.
    • Function: Sum.

  3. Click Save.

Token usage over time widget​

Token usage over time (click to expand)

  1. Click on + Widget and select Line Chart.

  2. Title: Token Usage Over Time. Description: Track input and output token consumption. Icon: LineChart.

  3. Set X axis:

    • Title: Date.
    • Time interval: Week.
    • Time range: In the past 30 days.

  4. Set Y axis title: Tokens.

  5. Click + Line and configure:

    • Title: Uncached Input Tokens.
    • Chart type: Aggregate by property.
    • Blueprint: claude_usage_record.
    • Property: uncached_input_tokens.
    • Function: Sum.
    • Measure time by: record_date.

  6. Click + Line and configure:

    • Title: Output Tokens.
    • Chart type: Aggregate by property.
    • Blueprint: claude_usage_record.
    • Property: output_tokens.
    • Function: Sum.
    • Measure time by: record_date.

  7. Click Save.

Daily cost trends (click to expand)

  1. Click on + Widget and select Line Chart.

  2. Title: Daily Cost Trends. Description: Track API costs over time. Icon: LineChart.

  3. Set X axis:

    • Title: Date.
    • Time interval: Week.
    • Time range: In the past 30 days.

  4. Set Y axis title: Cost.

  5. Click + Line and configure:

    • Title: Amount.
    • Chart type: Aggregate by property.
    • Blueprint: claude_cost_record.
    • Property: amount.
    • Function: Sum.
    • Measure time by: record_date.

  6. Click Save.

Model usage distribution widget​

Model usage distribution (click to expand)

  1. Click on + Widget and select Pie Chart.

  2. Fill in the following details:

    • Title: Model Usage Distribution.
    • Description: Which Claude models are being used most frequently.
    • Icon: Pie.
    • Blueprint: claude_model_usage.
    • Property: model.

  3. Click Save.

Tokens by model widget​

Tokens by model (click to expand)

  1. Click on + Widget and select Line Chart.

  2. Title: Output Tokens by Model. Description: Track token consumption per model over time. Icon: LineChart.

  3. Set X axis:

    • Title: Date.
    • Time interval: Week.
    • Time range: In the past 30 days.

  4. Set Y axis title: Tokens.

  5. Click + Line and configure:

    • Title: Output Tokens.
    • Chart type: Aggregate by property.
    • Blueprint: claude_model_usage.
    • Property: output_tokens.
    • Function: Sum.
    • Measure time by: record_date.
    • Breakdown by: model.

  6. Click Save.

Claude Code activity widget​

Claude Code activity (click to expand)

  1. Click on + Widget and select Line Chart.

  2. Title: Claude Code Activity. Description: Track Claude Code sessions, commits, and PRs over time. Icon: LineChart.

  3. Set X axis:

    • Title: Date.
    • Time interval: Week.
    • Time range: In the past 30 days.

  4. Set Y axis title: Count.

  5. Click + Line and configure:

    • Title: Sessions.
    • Chart type: Aggregate by property.
    • Blueprint: claude_code_analytics.
    • Property: num_sessions.
    • Function: Sum.
    • Measure time by: record_date.

  6. Click + Line and configure:

    • Title: Commits.
    • Chart type: Aggregate by property.
    • Blueprint: claude_code_analytics.
    • Property: commits.
    • Function: Sum.
    • Measure time by: record_date.

  7. Click + Line and configure:

    • Title: Pull Requests.
    • Chart type: Aggregate by property.
    • Blueprint: claude_code_analytics.
    • Property: pull_requests.
    • Function: Sum.
    • Measure time by: record_date.

  8. Click Save.

Cache efficiency widget​

Cache efficiency (click to expand)

  1. Click on + Widget and select Line Chart.

  2. Title: Cache Efficiency. Description: Track cache read vs creation tokens for cost optimization. Icon: LineChart.

  3. Set X axis:

    • Title: Date.
    • Time interval: Week.
    • Time range: In the past 30 days.

  4. Set Y axis title: Tokens.

  5. Click + Line and configure:

    • Title: Cache Read Input Tokens.
    • Chart type: Aggregate by property.
    • Blueprint: claude_usage_record.
    • Property: cache_read_input_tokens.
    • Function: Sum.
    • Measure time by: record_date.

  6. Click + Line and configure:

    • Title: Cache Creation Tokens.
    • Chart type: Aggregate by property.
    • Blueprint: claude_usage_record.
    • Property: cache_creation_5m_tokens.
    • Function: Sum.
    • Measure time by: record_date.

  7. Click Save.