Inspiration

Every February around the NBA Trade Deadline, millions of passionate basketball fans, beat writers, podcasters, and sports journalists flock to online trade machines (such as ESPN Trade Machine and Fanspo) to construct and test dream blockbuster trades. But with the introduction of the modern 676-page NBA Collective Bargaining Agreement (CBA), trading has become an unforgiving mathematical minefield:

  • Teams spending in the Second Apron ($188.93M+) face severe trade freezes—they cannot aggregate multiple outgoing player salaries and cannot take back even $1 more than they send out.
  • Trades must satisfy exact piecewise arithmetic brackets ($7.5M tiers, $29M tiers, $250k buffers) across all participating franchises.
  • Complex deals require multi-team routing through Traded Player Exceptions (TPEs) and strict 14–15 contract roster limits.

When a multi-team trade fails in current trade machines, the user is greeted by a dead-end red banner:
❌ "Trade Failed: Incoming salary exceeds allowed bracket by $3,450,000."

Existing tools tell you that a trade failed, but never how to fix it. Fixing it manually requires opening 29 browser tabs, digging through TPE voucher lists, and spending 45 minutes calculating tax arithmetic. We built CapSpace Pro to turn the trade machine from a dumb calculator that only says "NO" into an autonomous Human-AI Co-Pilot that says "HERE IS HOW WE FIX IT."


What it does

CapSace Pro is a real-time, 30-team trade canvas and autonomous CBA constraint solver powered by WebMCP. Built as a prosumer platform, it democratizes NBA Front-Office Capology—giving sports journalists, analysts, and everyday fans the exact financial precision of an NBA General Manager without needing a finance degree or a 676-page rulebook:

  1. Interactive Multi-Team Canvas: Visualizes live payrolls, luxury tax tiers, First/Second Apron lines, draft pick assets, and available TPE vouchers for all 30 NBA franchises.
  2. Sub-Millisecond CBA Engine: Evaluates trades against official CBA rules down to the single dollar in under 1 millisecond.
  3. Superstar Protection & In-Trade Anchors (🔒):
    • Roster Superstar Locks: Protects franchise cornerstones (e.g., Steph Curry, Nikola Jokić) from ever being touched by automated solvers.
    • Trade Card Anchors: Lets humans pin marquee trade targets as immutable centerpieces, instructing the AI to only manipulate flexible bench contracts.
  4. Autonomous Multi-Team Balancing & Facilitator Routing: The AI agent autonomously discovers 3rd-party facilitator teams with matching TPE vouchers or cap space to absorb excess salary, solving multi-million-dollar trade deficits automatically.
  5. Zero-Hallucination WebMCP Bridge: Exposes 8 typed tools (validate_cba_trade, find_facilitator_teams, auto_balance_trade, etc.) directly on navigator.modelContext, letting browser-native agents inspect, validate, and restructure live trade boards with 100% mathematical precision.

How we built it

We engineered CapSpace Pro as a modular, high-performance web application coupled with the new WebMCP standard:

 ┌────────────────────────────────────────────────────────┐
 │                     User Journalist / GM / Fan                      │
 └───────────────────────────┬────────────────────────────┘
                             │  Natural Language & Visual Clicks (🔒)
                             ▼
 ┌────────────────────────────────────────────────────────┐
 │            Browser-Native AI Agent (WebMCP)            │
 └───────────────────────────┬────────────────────────────┘
                             │  Typed JSON Tool Invocations
                             ▼
 ┌────────────────────────────────────────────────────────┐
 │           CapSpace Pro WebMCP Protocol Bridge          │
 │        (navigator.modelContext.registerTool)           │
 └──────────────┬──────────────────────────┬──────────────┘
                │                          │
                ▼                          ▼
 ┌──────────────────────────┐   ┌─────────────────────────┐
 │   Deterministic CBA      │   │     Reactive React      │
 │   Constraint Engine      │   │   30-Team Canvas UI     │
 │   (TypeScript Math)      │   │   (Tailwind CSS 3.4)    │
 └──────────────────────────┘   └─────────────────────────┘

1. Deterministic CBA Mathematical Formulation

The mathematical engine models the exact piecewise salary-matching brackets defined under the 2023–2030 NBA CBA:

A. Non-Taxpaying Teams (Payroll < $170,814,000)

  • Tier 1 (Outgoing ≤ $7,500,000):
    Allowed Incoming = (200% × Outgoing Salary) + $250,000
  • Tier 2 ($7,500,000 < Outgoing ≤ $29,000,000):
    Allowed Incoming = Outgoing Salary + $7,500,000
  • Tier 3 (Outgoing > $29,000,000):
    Allowed Incoming = (125% × Outgoing Salary) + $250,000

B. Taxpaying Teams Below First Apron ($170,814,000 ≤ Payroll < $178,132,000)

  • Allowed Incoming = (110% × Outgoing Salary) + $250,000

C. First & Second Apron Teams (Payroll ≥ $178,132,000)

  • Allowed Incoming = 100% × Outgoing Salary ($0 allowable surplus)
  • Second Apron Freeze (≥ $188,931,000): Aggregation Allowed = FALSE (prohibits combining multiple outgoing contracts).

D. Traded Player Exception (TPE) Absorption Condition

For an incoming contract to be legally absorbed into an existing TPE by facilitator team F:

  • Contract Incoming ≤ TPE Size + $250,000
  • Roster Size(F) < 15 contracts
  • Post-Trade Payroll(F) ≤ Hard Cap / Apron Ceiling

2. Full Suite of 8 WebMCP Tools

Implemented via modelContextBridge.ts exposing both read-only and mutation interfaces:

  • list_all_teams (readOnly)
  • get_team_cap_status (readOnly)
  • validate_cba_trade (readOnly)
  • find_facilitator_teams (readOnly)
  • set_player_protection (mutation)
  • route_salary_to_tpe (mutation)
  • auto_balance_trade (mutation)
  • reset_trade (mutation)

3. Tech Stack

  • Frontend: React 18, TypeScript 5.5, Vite, Lucide Icons
  • Styling & Design: Tailwind CSS 3.4 with custom glassmorphic sports dark mode
  • Testing: Vitest test suite with 38 unit and integration tests passing with 0 vulnerabilities

Challenges we ran into

  1. Preserving Human Intent during Autonomous Balancing: Early versions of automated balancing would solve financial parity by arbitrarily moving superstar players. We solved this by creating a two-tier locking architecture: Roster Superstar Protection (protects franchise players from leaving) and In-Trade Anchors (pins the trade centerpiece so the AI only optimizes secondary bench assets).
  2. QUick Browser Execution for WebMCP: We had to ensure that the combinatorial search across 30 rosters and dozens of active TPE vouchers executed synchronously in the browser sandbox without causing UI freezes or async lag during live agent conversations.
  3. Google Chrome webmcp on Ubuntu not worked. Hence decided to go with ChatGpt in app browser.

Accomplishments that we're proud of

  • Zero-Hallucination Agent Governance: By offloading mathematical logic to a deterministic TypeScript rule engine, the AI agent is physically incapable of proposing an illegal trade.
  • Democratizing Front-Office Analytics for Fans & Media: Making the complex 676-page CBA accessible to anyone. A journalist evaluating trade rumors or a fan testing deadline theories can simply speak in plain English to an AI co-pilot and get legally vetted, dollar-precise front-office scenarios in sub-milliseconds.
  • Clean, Accessible UX: High information density displaying 30 teams, roster breakdowns, financial health bars, and interactive trade cards without clutter.

What we learned

  • Why WebMCP is the Future of Domain-Specific AI: Large Language Models excel at natural language understanding and strategic high-level reasoning, but struggle with strict multi-tier arithmetic. WebMCP acts as the ultimate bridge: the agent brings user empathy and strategic intent, while the browser tool engine provides mathematical certainty.

What's next for CapSpace Pro

  • Multi-Year Cap Projections: Allowing GMs to simulate trades 2–3 seasons into the future to forecast luxury tax repeater penalties.
  • Multi-League Expansion: Porting the WebMCP constraint engine to other complex salary cap leagues, such as the NFL hard cap and NHL salary ceiling.

Built With

Share this project:

Updates

Submission history