Customer Dashboard & Billing Portal for an Agent Cloud

Overview

The customer-facing dashboard and billing portal for the agent-cloud platform, where users manage projects, API keys, agent jobs and schedules, monitor compute usage, and handle subscriptions and pre-paid credit.

The Challenge

A usage-based AI agent platform needs a control surface that ties together identity, project/key management, real-time compute metering, and a fairly complex billing model (monthly plan allowance plus rolling pre-paid pools plus credit balance). It has to stay in sync with the edge runtime that actually does the metering.

What We Built

A React + Vite single-page app (React Router) with a Convex reactive backend. The Convex schema models customers (Clerk identity, ak_live_ account keys, subscription tier hobby/starter/pro, plan-seconds allowance, rolling pool-seconds, credit balance, period usage), projects (per-project hk_live_ HMAC keys and stored Anthropic keys), and creditTransactions (top-ups vs usage). Convex functions cover billing, customers, dodo (Dodo Payments), deviceAuth (CLI device-flow login), cronJobs, and sync to Cloudflare D1 and KV (cloudflareD1.ts, cloudflareKv.ts) so the portal and the edge runtime share state. The UI (src/components) is built on Radix/shadcn primitives with a dashboard (usage charts via Recharts, project cards, activity feed, CLI quick-start, API-key display) and a jobs area (runs list, schedules list). Auth is Clerk; object access uses aws4fetch (S3/R2). It ships to Cloudflare Pages with staging/production deploy scripts.

Technologies & Approach

Convex provides a reactive, type-safe document backend so usage and billing UI update live, while a sync layer pushes the authoritative keys and limits down to Cloudflare D1/KV for the edge runtime to enforce. Clerk handles auth (including a device-auth flow for the CLI), and Dodo Payments handles subscriptions and credit purchases.

Outcome / Impact

Gives customers a single pane to provision projects, manage keys, watch spend in real time, and pay, and gives the platform a billing/identity source of truth that stays consistent with the edge metering layer.

Capabilities Demonstrated

• Usage-based billing and subscription portal (plan + pool + credit model)
• Reactive backend with Convex synced to Cloudflare D1/KV
• API-key and HMAC-key lifecycle management
• Real-time usage analytics dashboard (Recharts)
• Clerk auth with CLI device-flow login and Dodo Payments billing