Personal Tool · Free · Open Source

A Weekend-Long Pet Project:
Claude MCP 101

Claude's built-in interface shows percentages. This dashboard gives you a persistent local view: session window, weekly plan, API credits, and live fetch, all in a single HTML file.

See how it works

Live fetch can work quickly once Claude Desktop, Claude in Chrome, and MCP Filesystem are connected. Requires a paid Claude plan.

Works with Pro · Max · Team · Enterprise

Component ecosystem

The Claude product universe.

From Anthropic's AI models down to the tools you use daily, including the MCP Protocol layer at the base, which is an open standard not exclusive to Claude.

← scroll to explore →

1At the top of everything sits Anthropic

Anthropic is the company that builds and trains the Claude AI models. When you hear names like Haiku, Sonnet, and Opus, those are the actual models behind every Claude experience. They come in different sizes and price points: Haiku is fast and cheap for simple tasks, Sonnet covers most everyday use, and Opus is the most capable for complex reasoning. Everything else in this diagram is a way of accessing one of these models.

2The Claude API, the developer gateway

The Claude API lives at platform.claude.com and is the developer gateway for programmatic access to Claude models. If you are building an app, a workflow, or a custom integration, this is where you authenticate and send requests. The API runs on a pay-as-you-go credit system that is separate from the regular Claude chat subscription. Most regular users never interact with it directly, but understanding it helps explain how Claude can be extended beyond the chat window.

3Three very different interfaces, same AI underneath

From the API, three distinct products branch out. Claude.ai is the browser and mobile chat interface, the one most people start with. It requires no setup and works like any web app. Claude Desktop is the downloadable application for Windows and Mac, and it is the interface used in this project because it supports MCP, an open protocol that lets AI models interact with local files, browsers, and external services. Claude Code is a command-line tool built for developers who want Claude to write, test, and reason about code directly in their environment. Same AI underneath all three, very different experiences on top.

4Extensions and tools that plug into each interface

Each of those three interfaces has its own set of tools that extend it further. From claude.ai, you can reach the Claude for Excel and Claude for PowerPoint add-ins, which bring AI directly into Microsoft Office documents. From Claude Desktop, you get Cowork (a tool for automating file and task workflows) and Claude for Chrome, the browser extension that lets Claude navigate web pages on your behalf. From Claude Code, there are extensions for VS Code and JetBrains that embed Claude right inside your code editor. These tools are not standalone products; they work because of the interface they are attached to.

5The MCP Protocol layer — what makes automation possible

Running along the bottom of the diagram is the MCP Protocol layer. MCP stands for Model Context Protocol. It is an open standard, created by Anthropic but open to any AI model or platform, that allows AI systems to connect to external tools: local file systems, browsers, third-party APIs, databases, and more. Several frontier models and platforms are adopting it. In this project, Claude Desktop uses MCP to read a web page via the Chrome extension and write to a local file via the filesystem server. Those are two separate MCP capabilities working together. The live data fetch that powers this dashboard is a straightforward example of both in action.

What it tracks

Four numbers worth watching.

Usage data Claude normally buries in percentages. This makes it readable, persistent, and actionable.

Resets every ~5 hours

Session Window

Claude resets conversation capacity on a rolling window. This is a proprietary unit; Anthropic doesn't publish the exact token equivalence. Knowing your current level helps you pace work and avoid mid-session surprises.

Above 30% remaining — room to work
10–30% remaining — wrap up heavy tasks
Below 10% — a reset is coming

Reset shown in your account

Weekly Plan

Covers all conversations across the whole week. If you use Claude regularly for work, this is the number that catches people off guard on Thursday.

Same capacity unit as sessions. The reset timing should follow the schedule displayed inside your Claude account.

Developer credits · Pay as you go

API Budget

Separate from your chat plan. Shows your prepaid developer balance in real dollars, relevant if you build automations via n8n, scripts, or custom tools.

Does not reset weekly. Only counts direct API calls, not chat conversations.

Live scrape via Claude in Chrome

Fetch Data

Say something like "fetch my dashboard data" in any Claude conversation. Claude navigates to your usage and billing pages and updates the visible values live. No manual entry. No copy-paste.

Claude in Chrome extension (free, by Anthropic)
Works best from a conversation with tool access enabled
The fetch phrase is flexible, not exact
A more explicit prompt helps after reconnecting tools

How it works

Claude takes over the browser.
You watch it happen.

Two MCP capabilities working together — filesystem access and browser control through the Chrome extension. Here is exactly what you see at each step.

Filesystem MCP · Claude Desktop

You point Claude at a local folder

A one-line config in claude_desktop_config.json tells Claude Desktop which folder it can read and write. Claude stores the dashboard file there and updates it automatically after each fetch.

C:\CODE\claude-usage.html

Claude in Chrome · The trigger

You type a phrase. Claude starts moving.

In Claude Desktop, say something like "update my Claude usage dashboard" or "fetch my dashboard data." Once the tools are connected, Claude can usually infer the workflow. If it hesitates, use a more explicit prompt: "Open my Claude usage pages, extract the visible metrics, then update claude-usage.html in my MCP filesystem folder."

The Claude (MCP) badge on your browser tab changes color as Claude works — green checkmark means active and ready, yellow bell means it is processing, orange hourglass means it is mid-task.

Chrome extension · Browser handoff

The browser tells you Claude is in control

Chrome shows a notification band at the top of the screen. This is the browser's own security feature, telling you that an external process (Claude Desktop, via the MCP protocol) has been granted access to inspect and interact with your browser tabs.

"Claude started debugging this browser" is Chrome confirming that Claude Desktop has taken over via the Chrome extension. You will see this every time a fetch runs.

This is not a warning to be alarmed about. It is standard Chrome behavior when Claude in Chrome starts interacting with browser tabs. Depending on your browser state and Claude session, Chrome may ask you to approve browser or connector permissions again.

claude.ai/settings/usage · DOM read

Claude opens your usage page and reads the numbers

Claude navigates to your Claude usage and billing pages, reads the visible percentage values directly from the page DOM, and passes them back to Claude Desktop. This is the same page you would visit manually. Claude is just doing the repetitive reading for you.

Claude.ai usage page showing session and weekly limits

This is the page Claude navigates to and reads. Session window, weekly limits, Design usage, and routine runs: all pulled from the visible page values and written into your dashboard file.

Result

Press F5. Your dashboard is live.

Claude writes the updated values into your local HTML file via the filesystem MCP. Open the file in Chrome and press F5 — all metrics reflect the numbers Claude just pulled. No API call from the dashboard. No credential storage. No manual copy-and-paste.

Word of caution

Hurdles I've encountered along the way.

Even after running the cycle a few times, I still occasionally hit situations where Claude does not execute the workflow right away. MCP is powerful, but it depends on several moving parts being aligned at the same time.

When the simple prompt works

A cold conversation can often handle a simple prompt if the setup is already in good shape.

Claude Desktop is already configured with the Filesystem MCP.
The MCP folder is accessible.
claude-usage.html already exists in that folder.
Claude in Chrome is installed and connected.
Browser permissions were previously granted.
The current conversation has tool access enabled.

Update my Claude usage dashboard Fetch my dashboard data

What can break the chain

When one component is disconnected, expired, blocked, or simply in an inconsistent state, Claude may only complete part of the chain.

Claude in Chrome silently disconnected.
Browser permissions needed reapproval.
MCP filesystem folder path mismatch.
Conversation opened without tool access enabled.
Chrome tabs already open but inaccessible to Claude.
Claude Desktop needed a full restart after MCP changes.
HTML file moved or renamed outside the mounted folder.
Prompt too vague during a fresh conversation.

What Claude is trying to infer

When everything is connected, Claude can usually infer the whole workflow from a short instruction.

1Open the Claude usage pages

2Read the visible metrics

3Find the dashboard HTML file

4Update the file through MCP

Windows user-switching caution: if you switch Windows users, expect to re-check the setup almost from scratch. Claude Desktop settings, the Chrome extension session, browser permissions, and the MCP filesystem folder may not carry over cleanly between Windows profiles.

Architecture

Where each number comes from.

Two sources. One method each. Both read directly from the browser DOM via the Chrome extension.

Data	Source	Method
Session %, Weekly %, Routines, Design	claude.ai/settings/usage	Claude in Chrome reads DOM
API credit balance	platform.claude.com/settings/billing	Claude in Chrome reads DOM

Setup

MCP 101 in beginner-friendly steps.

A practical setup path for beginners and a quick path for experienced users.

New to Claude Desktop or MCP? The step-by-step guide below walks you through everything, including Node.js setup, config file location, and how to verify the installation worked.

Already using Node.js, npx, and Claude Desktop? You can probably move quickly. Quick path below. The GitHub README includes the config snippet to paste.

⬡

Node.js

Any recent version. Needed so Claude Desktop can launch the filesystem MCP server via npx.

◈

Claude Desktop

The desktop app, not just the browser version. This is where MCP servers run.

⬡

Claude for Chrome

Official extension published by Anthropic. Enables browser interaction for live data fetch.

Configure claude_desktop_config.json — point the filesystem MCP at your working folder. The GitHub README includes the config snippet and the downloadable JSON file.

Restart Claude Desktop — completely close and reopen. The MCP server activates on startup.

Trigger the fetch — from a Claude Desktop conversation with tool access enabled, say something like "update my Claude usage dashboard" or "fetch my dashboard data." Approve browser or connector permissions if prompted.

Refresh the file — open claude-usage.html in Chrome and press F5. Done.

Not an official Anthropic product. This is an educational and exploratory project. It uses only official tools: Claude Desktop, the Claude Chrome extension, and MCP permissions you explicitly approve. Always review MCP configurations before granting filesystem access.

All your Claude usage metrics in one dashboard.
Ready in under 20 minutes.

Open source. No sign-up. Everything runs locally on your machine.

View on GitHub ↗ Download Dashboard HTML ↓

🔔

Coming next

Dashboard v2, with an 80% session alert.

The next version of the dashboard will include a browser popup notification that fires when your current session reaches 80% of its allowance, giving you enough time to wrap up or pace yourself before Claude cuts you off. The rest of the metrics and fetch workflow stay the same.

🌗

Dark background version

This dashboard uses a light theme. A dark background version was built during development. If you would like to see it published, vote for it on LinkedIn: posted on May 27 as "Building a Claude usage dashboard in 8 beginner-friendly steps, a weekend-long MCP 101 project." Leave a comment on that post and if there is enough interest, the dark version goes live.

A Weekend-Long Pet Project:Claude MCP 101