Prevent Unexpected Claude Code Costs with This VSCode/Cursor Extension

Recently, a CLI tool for visualizing Claude Code usage costs has been making waves in Japan. But...

Recently, a CLI tool for visualizing Claude Code usage costs has been making waves in Japan. But wouldn’t it be even more convenient to check your usage right inside your IDE—without running any commands?

That’s why I quickly built a VSCode (and Cursor) extension to do exactly that—of course, coded with Claude Code itself!

Source code and install instructions are here:

https://github.com/suzuki0430/ccusage-vscode-extension

What This Extension Can Do

• Displays today’s Claude Code usage cost in the status bar (auto-updates every 30 seconds)
• Click to see a table of usage and token counts for the past 7 days
• Works in both VSCode and Cursor!

Here’s how it looks in action:

Click to open details:

Installation (Takes About 3 Minutes)

1. Clone & Build

git clone https://github.com/suzuki0430/ccusage-vscode-extension.git
cd ccusage-vscode-extension

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Package the extension
npm run package

This will create a file called ccusage-vscode-0.1.0.vsix in your current directory.

2. Import into VSCode

• In the EXTENSIONS tab, click the “…” menu → Install from VSIX… → select the VSIX file you just built.

• After importing, the cost will appear in the status bar. (If it doesn’t, try restarting VSCode.)

3. Import into Cursor

• Simply drag and drop the VSIX file into the EXTENSIONS sidebar.

Why Use This?

Whether you’re worried about overusing the Claude API or just want to check if your MAX plan is worth it, this extension makes it super easy to keep an eye on your costs. Give it a try and let me know what you think!

References

https://github.com/ryoppippi/ccusage