Claude Code usage bijhouden met Clawdmeter: zo bouw je je eigen dashboard

Een desktop-dashboard voor je Claude Code-verbruik? Slim idee, maar je kunt verder gaan

Wat is er gebeurd?

Er is een open source tool gelanceerd genaamd Clawdmeter. Het is een klein desktop-dashboard dat je Claude Code-gebruiksstatistieken live bijhoudt: hoeveel tokens verbruikt, hoeveel sessies, welke modellen. Speciaal gebouwd voor makers die elke dag met Claude Code werken en willen weten hoeveel ze opmaken.

Dat is al handig op zich. Maar het interessantere signaal voor jou als maker: usage-inzicht wordt een serieus onderdeel van het AI-tooling-ecosysteem.

Wat betekent dit voor jouw project?

Als jij een SaaS bouwt die gebruik maakt van de Claude API (voor je klanten, of intern voor je eigen workflow), wil je weten hoeveel tokens er per gebruiker of per taak omgaan. Niet alleen voor je eigen rekening, maar ook als je klanten ooit wil factureren op verbruik of quota wil instellen. Clawdmeter lost dit voor je eigen desktop op, maar voor je product moet je dit zelf bouwen. En dat is makkelijker dan je denkt.

Vanavond bouwen we een simpele usage-logger die elke Claude API-call bijhoudt in een Supabase-tabel, zodat je later een mooi dashboardje kunt bouwen voor jezelf of je gebruikers.

Hoe pak je het aan met Claude Code?

Stap 1: Maak een Supabase-tabel voor je usage-logs

Open Claude Code in je project en geef dit als eerste opdracht:

Maak een SQL-migratie aan voor Supabase met een tabel ai_usage_logs. De tabel moet de volgende kolommen hebben: id (uuid, primary key), user_id (uuid, foreign key naar auth.users), model (text), input_tokens (integer), output_tokens (integer), total_tokens (integer), endpoint (text, bijv. 'summarize' of 'generate-email'), created_at (timestamptz, default now()). Voeg ook Row Level Security toe zodat gebruikers alleen hun eigen logs kunnen zien.

Claude Code genereert de migratie. Controleer het resultaat en run het via de Supabase CLI:

npx supabase db push

Stap 2: Bouw een wrapper-functie die elke API-call logt

Nu laat je Claude Code een herbruikbare wrapper schrijven:

Schrijf een TypeScript-functie callClaudeWithLogging die de Anthropic SDK gebruikt om een bericht te sturen naar Claude. Na elke succesvolle response moet de functie automatisch de token-usage (input_tokens, output_tokens, total_tokens), het gebruikte model, en de endpoint-naam opslaan in de Supabase-tabel ai_usage_logs. De functie moet de huidige ingelogde user_id ophalen via de Supabase auth-session. Gebruik de bestaande supabase-client en anthropic-client die al in het project staan.

Je krijgt zoiets als dit terug:

import { anthropic } from '@/lib/anthropic';
import { supabase } from '@/lib/supabase';
import type { MessageParam } from '@anthropic-ai/sdk/resources/messages';

export async function callClaudeWithLogging(
  messages: MessageParam[],
  endpoint: string,
  model = 'claude-opus-4-5'
) {
  const response = await anthropic.messages.create({
    model,
    max_tokens: 1024,
    messages,
  });

  const { data: { session } } = await supabase.auth.getSession();

  if (session?.user?.id) {
    await supabase.from('ai_usage_logs').insert({
      user_id: session.user.id,
      model,
      input_tokens: response.usage.input_tokens,
      output_tokens: response.usage.output_tokens,
      total_tokens: response.usage.input_tokens + response.usage.output_tokens,
      endpoint,
    });
  }

  return response;
}

Stap 3: Vervang je bestaande API-calls

Als je al ergens in je project Claude aanroept, laat Claude Code dat voor je omzetten:

Zoek in de codebase alle plekken waar anthropic.messages.create direct wordt aangeroepen. Vervang die door de nieuwe callClaudeWithLogging wrapper. Geef elke aanroep een beschrijvende endpoint-naam mee, zoals 'summarize-document' of 'generate-subject-line'.

Stap 4: Bouw een simpel usage-overzicht voor je dashboard

Als je al een dashboard-pagina hebt in je app, voeg dan dit component toe:

Maak een React-component UsageStats dat de ai_usage_logs tabel ophaalt voor de huidige gebruiker. Toon: het totaal aantal tokens deze maand, het totaal aantal API-calls, en een uitsplitsing per endpoint (welke functie hoeveel tokens gebruikt). Gebruik een eenvoudige tabel of kaarten. Haal data op met een Supabase query, gefilterd op de huidige maand.

// Voorbeeld van de Supabase query die Claude Code voor je genereert
const { data } = await supabase
  .from('ai_usage_logs')
  .select('endpoint, total_tokens, created_at')
  .gte('created_at', startOfMonth.toISOString())
  .order('created_at', { ascending: false });

Stap 5: Optioneel - stel een maandlimiet in

Wil je voorkomen dat je of je klanten onverwacht veel kosten maken? Laat Claude Code een check toevoegen:

Voeg aan de callClaudeWithLogging functie een check toe die eerst het totale tokenverbruik van de huidige gebruiker deze maand ophaalt uit ai_usage_logs. Als dat boven de 500.000 tokens zit, gooi dan een error met de melding 'Maandlimiet bereikt'. Maak de limiet configureerbaar via een constante.

Wat te checken na afloop

• Open de Supabase Table Editor en kijk of er rijen in ai_usage_logs verschijnen als je een Claude-functie in je app aanroept.
• Controleer of de user_id correct gevuld is (niet null).
• Ga naar je dashboard-pagina: zie je de totalen en de uitsplitsing per endpoint?
• Test de RLS door in te loggen als een andere testgebruiker: die mag alleen zijn eigen logs zien.

Als dat allemaal klopt, heb je Clawdmeter eigenlijk nagegebouwd voor je eigen product. Maar dan ingebakken in je SaaS, voor al je gebruikers.