{"id":51061842,"url":"https://github.com/kardelruveyda/github-usage-based-billing","last_synced_at":"2026-06-23T03:01:13.059Z","repository":{"id":363195176,"uuid":"1261615532","full_name":"KardelRuveyda/github-usage-based-billing","owner":"KardelRuveyda","description":"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/","archived":false,"fork":false,"pushed_at":"2026-06-07T21:21:10.000Z","size":143,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-07T22:19:35.398Z","etag":null,"topics":["ai-credits","billing","copilot","developer-relations","explainer","github-copilot","github-pages","interactive-presentation","nextjs","pricing","react","slide-deck","tailwindcss","typescript","usage-based-billing"],"latest_commit_sha":null,"homepage":"https://kardelruveyda.github.io/github-usage-based-billing/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KardelRuveyda.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-06-06T23:42:15.000Z","updated_at":"2026-06-07T21:21:13.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/KardelRuveyda/github-usage-based-billing","commit_stats":null,"previous_names":["kardelruveyda/github-usage-based-billing"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/KardelRuveyda/github-usage-based-billing","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KardelRuveyda%2Fgithub-usage-based-billing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KardelRuveyda%2Fgithub-usage-based-billing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KardelRuveyda%2Fgithub-usage-based-billing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KardelRuveyda%2Fgithub-usage-based-billing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KardelRuveyda","download_url":"https://codeload.github.com/KardelRuveyda/github-usage-based-billing/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KardelRuveyda%2Fgithub-usage-based-billing/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34673437,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-23T02:00:07.161Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-credits","billing","copilot","developer-relations","explainer","github-copilot","github-pages","interactive-presentation","nextjs","pricing","react","slide-deck","tailwindcss","typescript","usage-based-billing"],"created_at":"2026-06-23T03:01:10.934Z","updated_at":"2026-06-23T03:01:13.049Z","avatar_url":"https://github.com/KardelRuveyda.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GitHub Copilot · Usage-Based Billing, Explained\n\nAn 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.\n\n\u003e 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.\n\n**Live demo:** https://kardelruveyda.github.io/github-usage-based-billing/\n\n---\n\n## What's inside\n\n- **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).\n- **Interactive widgets** on most slides — sliders, model pickers, wallet presets, scenario builders.\n- **Two flagship demos:**\n  - **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.\n  - **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.\n- **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.\n- **Built-in pricing data** that mirrors the public GitHub docs (AI credit rates per model, plan pool sizes, promo windows).\n\n## Sections\n\n| #    | Section       | Theme                                                     |\n| ---- | ------------- | --------------------------------------------------------- |\n| 01–02 | Intro         | Why UBB exists, what changed                              |\n| 03–04 | What's billed | Free vs metered Copilot features                          |\n| 05–06 | AI Credits    | Tokens · USD · credits                                    |\n| 07–08 | Plans         | Pool sizes by plan + promo period                         |\n| 09–10 | Calculator    | Live token → credit math                                  |\n| 11–12 | Estimator     | Monthly per-user credit estimator                         |\n| 13–14 | Budgets       | The four budget controls                                  |\n| 15   | Admin         | What the admin panel really looks like                    |\n| 16–17 | Dashboard     | The AI usage dashboard, walked through                    |\n| 18–19 | Overage       | Four phases + Acme FinTech month-long case study          |\n| 20–21 | Migration     | 5-step rollout + minimum IDE versions                     |\n| 22   | Your topology | ScenarioBuilder demo                                      |\n| 23–24 | Playground    | Live Copilot playground                                   |\n| 25–26 | FAQ           | 10 common questions                                       |\n\n## Tech stack\n\n- **Next.js 16** App Router with `output: 'export'` for fully static hosting\n- **React 19**\n- **TypeScript 5**\n- **Tailwind CSS v4** (CSS-first config via `@theme inline`)\n- **framer-motion** for slide transitions and micro-interactions\n- **chart.js** for charts in the dashboard / calculator sections\n\nEverything is client-side. No server, no API, no telemetry — drop it on any static host.\n\n## Running locally\n\n```powershell\nnpm install\nnpm run dev\n```\n\nOpen http://localhost:3000.\n\nNavigation:\n\n- `→` / `←` or `PageDown` / `PageUp` — next / previous slide\n- Click any section in the bottom rail to jump\n- Each slide has a stable URL hash (e.g. `#overage-more`) so you can deep-link\n\n## Building a static export\n\n```powershell\nnpm run build\n```\n\nProduces a static site in `out/`. To preview it locally with the GitHub Pages base path:\n\n```powershell\n$env:NEXT_PUBLIC_BASE_PATH = \"/github-usage-based-billing\"\nnpm run build\nnpx serve out\n```\n\n## Deploying to GitHub Pages\n\n[.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:\n\n1. Repository **Settings → Pages → Source: GitHub Actions**.\n2. Push to `main` — the workflow does the rest.\n\nThe workflow sets `NEXT_PUBLIC_BASE_PATH=/github-usage-based-billing` so assets resolve under the project-scoped Pages URL.\n\n## Author\n\n**Kardel Rüveyda Çetin** — Digital Cloud Solution Architect\n\nIf 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.\n\n## References\n\nEvery 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:\n\n- [About billing for GitHub Copilot](https://docs.github.com/en/copilot/concepts/billing/billing-for-individual-usage)\n- [About Usage-Based Billing for Copilot](https://docs.github.com/en/copilot/how-tos/manage-your-account/about-usage-based-billing)\n- [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)\n- [Managing your Copilot subscription as an individual](https://docs.github.com/en/copilot/how-tos/manage-your-account/manage-your-subscription)\n- [Budgets for Usage-Based Billing](https://docs.github.com/en/billing/managing-your-billing/preventing-overspending/budgets-for-usage-based-billing)\n- [AI credit rates for premium models](https://docs.github.com/en/copilot/reference/ai-models/model-comparison)\n- [Monitoring your Copilot usage](https://docs.github.com/en/copilot/how-tos/administer-your-organization/monitor-copilot-usage)\n- [Minimum IDE versions for the new billing experience](https://docs.github.com/en/copilot/reference/copilot-clients/supported-ides)\n- [Copilot plans comparison (Business / Enterprise)](https://docs.github.com/en/copilot/about-github-copilot/plans-for-github-copilot)\n\n## Disclaimer\n\nPricing, 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkardelruveyda%2Fgithub-usage-based-billing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkardelruveyda%2Fgithub-usage-based-billing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkardelruveyda%2Fgithub-usage-based-billing/lists"}