https://github.com/kardelruveyda/github-usage-based-billing
An interactive 26-slide explainer for GitHub Copilot's Usage-Based Billing — plans, AI credits, budgets, overage flow, and live calculators. Live demo: https://kardelruveyda.github.io/github-usage-based-billing/
https://github.com/kardelruveyda/github-usage-based-billing
ai-credits billing copilot developer-relations explainer github-copilot github-pages interactive-presentation nextjs pricing react slide-deck tailwindcss typescript usage-based-billing
Last synced: 4 days ago
JSON representation
An interactive 26-slide explainer for GitHub Copilot's Usage-Based Billing — plans, AI credits, budgets, overage flow, and live calculators. Live demo: https://kardelruveyda.github.io/github-usage-based-billing/
- Host: GitHub
- URL: https://github.com/kardelruveyda/github-usage-based-billing
- Owner: KardelRuveyda
- Created: 2026-06-06T23:42:15.000Z (20 days ago)
- Default Branch: main
- Last Pushed: 2026-06-07T21:21:10.000Z (19 days ago)
- Last Synced: 2026-06-07T22:19:35.398Z (19 days ago)
- Topics: ai-credits, billing, copilot, developer-relations, explainer, github-copilot, github-pages, interactive-presentation, nextjs, pricing, react, slide-deck, tailwindcss, typescript, usage-based-billing
- Language: TypeScript
- Homepage: https://kardelruveyda.github.io/github-usage-based-billing/
- Size: 140 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# GitHub Copilot · Usage-Based Billing, Explained
An interactive 26-slide deck that walks you through GitHub Copilot's **Usage-Based Billing (UBB)** end to end — plans, AI credits, premium models, budgets, overage flow, migration timeline, and live calculators you can play with.
> Built for solution architects, customer success teams, and engineering managers who need to *explain* UBB to a real audience without flipping through 12 different docs pages.
**Live demo:** https://kardelruveyda.github.io/github-usage-based-billing/
---
## What's inside
- **26 slides** organized as analogy-first → technical detail (most sections have a `1/2` everyday-life analogy panel and a `2/2` deep-dive panel).
- **Interactive widgets** on most slides — sliders, model pickers, wallet presets, scenario builders.
- **Two flagship demos:**
- **Slide 22 · Your topology** — *ScenarioBuilder*: pick seat count, profile mix, % heavy users, and a model, then watch per-user cost / pool consumption / overage update live.
- **Slide 24 · Playground** — *CopilotPlayground*: pick a wallet preset (200 demo / 1,900 Business / 3,900 Enterprise / promo variants), choose a model from a tier-grouped picker, type a prompt, and see token → credit → wallet math in real time.
- **Slide 19 · Acme FinTech case study** — a full month of overage played out day by day, with the developer's IDE banner *and* the admin's email inbox both visible at every step.
- **Built-in pricing data** that mirrors the public GitHub docs (AI credit rates per model, plan pool sizes, promo windows).
## Sections
| # | Section | Theme |
| ---- | ------------- | --------------------------------------------------------- |
| 01–02 | Intro | Why UBB exists, what changed |
| 03–04 | What's billed | Free vs metered Copilot features |
| 05–06 | AI Credits | Tokens · USD · credits |
| 07–08 | Plans | Pool sizes by plan + promo period |
| 09–10 | Calculator | Live token → credit math |
| 11–12 | Estimator | Monthly per-user credit estimator |
| 13–14 | Budgets | The four budget controls |
| 15 | Admin | What the admin panel really looks like |
| 16–17 | Dashboard | The AI usage dashboard, walked through |
| 18–19 | Overage | Four phases + Acme FinTech month-long case study |
| 20–21 | Migration | 5-step rollout + minimum IDE versions |
| 22 | Your topology | ScenarioBuilder demo |
| 23–24 | Playground | Live Copilot playground |
| 25–26 | FAQ | 10 common questions |
## Tech stack
- **Next.js 16** App Router with `output: 'export'` for fully static hosting
- **React 19**
- **TypeScript 5**
- **Tailwind CSS v4** (CSS-first config via `@theme inline`)
- **framer-motion** for slide transitions and micro-interactions
- **chart.js** for charts in the dashboard / calculator sections
Everything is client-side. No server, no API, no telemetry — drop it on any static host.
## Running locally
```powershell
npm install
npm run dev
```
Open http://localhost:3000.
Navigation:
- `→` / `←` or `PageDown` / `PageUp` — next / previous slide
- Click any section in the bottom rail to jump
- Each slide has a stable URL hash (e.g. `#overage-more`) so you can deep-link
## Building a static export
```powershell
npm run build
```
Produces a static site in `out/`. To preview it locally with the GitHub Pages base path:
```powershell
$env:NEXT_PUBLIC_BASE_PATH = "/github-usage-based-billing"
npm run build
npx serve out
```
## Deploying to GitHub Pages
[.github/workflows/deploy.yml](.github/workflows/deploy.yml) builds the site on every push to `main` and publishes to GitHub Pages automatically. To enable it on a fresh fork:
1. Repository **Settings → Pages → Source: GitHub Actions**.
2. Push to `main` — the workflow does the rest.
The workflow sets `NEXT_PUBLIC_BASE_PATH=/github-usage-based-billing` so assets resolve under the project-scoped Pages URL.
## Author
**Kardel Rüveyda Çetin** — Digital Cloud Solution Architect
If you want to use this deck in your own customer conversations: fork it, swap the example numbers in [src/lib/models.ts](src/lib/models.ts) and [src/lib/sections.ts](src/lib/sections.ts), and you're set.
## References
Every number, behavior, and policy in this deck comes from the public GitHub documentation listed below — nothing here relies on private or partner-only material. If you want to verify a specific figure (rate per model, pool size, what triggers a block, who gets the email, etc.), start here:
- [About billing for GitHub Copilot](https://docs.github.com/en/copilot/concepts/billing/billing-for-individual-usage)
- [About Usage-Based Billing for Copilot](https://docs.github.com/en/copilot/how-tos/manage-your-account/about-usage-based-billing)
- [Usage-Based Billing for organizations and enterprises](https://docs.github.com/en/copilot/how-tos/administer-your-organization/usage-based-billing-for-organizations-and-enterprises)
- [Managing your Copilot subscription as an individual](https://docs.github.com/en/copilot/how-tos/manage-your-account/manage-your-subscription)
- [Budgets for Usage-Based Billing](https://docs.github.com/en/billing/managing-your-billing/preventing-overspending/budgets-for-usage-based-billing)
- [AI credit rates for premium models](https://docs.github.com/en/copilot/reference/ai-models/model-comparison)
- [Monitoring your Copilot usage](https://docs.github.com/en/copilot/how-tos/administer-your-organization/monitor-copilot-usage)
- [Minimum IDE versions for the new billing experience](https://docs.github.com/en/copilot/reference/copilot-clients/supported-ides)
- [Copilot plans comparison (Business / Enterprise)](https://docs.github.com/en/copilot/about-github-copilot/plans-for-github-copilot)
## Disclaimer
Pricing, pool sizes, model rates, and behavior described here reflect publicly documented Copilot Usage-Based Billing as of mid-2026 and are subject to change. This project is **not affiliated with, endorsed by, or maintained by GitHub or Microsoft** — always cross-check with the [official docs](https://docs.github.com/en/copilot/concepts/billing/billing-for-individual-usage) for the latest numbers before quoting them to a customer.