Visualize Claude metrics

Implement with AI

Send this guide to your coding agent.

Prerequisite: Install Port MCP

Open in ClaudeOpen in CodexOpen in Cursor

Open plan mode. Implement this Port guide in my org via MCP:

https://docs.port.io/guides/all/visualize-claude-metrics

Goal: get the guide's core flow working end-to-end in my org; adapting it to fit my existing setup takes priority over matching the guide 1:1.

Plan:
1. Confirm MCP is connected, in the right org, with sufficient permissions.
2. Diff the guide's data model (blueprints, properties, relations, actions, agents, automations, integrations, secrets) against mine.
3. Propose adaptations for gaps, reusing existing blueprints/relations over guide-named duplicates.
4. Flag what needs a UI click, credential, or secret from me, testing MCP capability empirically before ruling anything out.
5. Stop on any blocker and give me options. Approving this plan authorizes the writes it lists; pause only for writes beyond what's listed.

Build:
- Extend blueprint schema additively when upserting; don't remove or overwrite existing properties, and treat type conflicts as a blocker, not an auto-fix.
- List any mock data in the plan, minimal and labeled mock; once approved, seed it without re-asking, and tell me what you seeded.
- For anything the guide writes downstream (e.g. a webhook target), use a real entity, not a mock.
- For pages/widgets, use the real page identifier from the app URL, not a guessed slug.
- When you hit a UI step confirmed (not assumed) unsupported via MCP, pause, give exact clicks, then resume via MCP.
- Validate and give links after each meaningful step (only a tool-returned URL, no guessed paths); don't proceed if the last run wasn't a success.

Done:
- Confirm the guide's expected output exists and runs in Port.
- Summarize adaptations, seeded data, what was mocked or skipped, remaining UI steps, and how to verify.

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.

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:

• You have a Port account and have completed the onboarding process.
• Port's Claude AI integration is installed and syncing data.

Create the dashboard

1. Navigate to your software catalog.

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 widget

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.