Live demo

This is the real engine (@formata/limitr) running in your browser as WebAssembly, with a small policy of four entitlements: AI tokens, seats, outcomes, and storage.

Each dot is a call. Dots that cross the line were allowed (allow(...) returned true) and were metered and priced; the rest were denied by a limit. Change a price, a cost, a limit, its mode, or how often it resets, and the next calls use the new policy. The charts show usage, denials, revenue, cost, and margin as they happen.

note

The controls change the policy directly, in your browser. With Limitr Cloud, a published policy change reaches every running engine the same way, in seconds.

Simulation

Loading the runtime…

---

How it works

The demo is a small React app around the same package you'd install (npm i @formata/limitr), with Chart.js for the charts.

1. Load the policy with Limitr.new(policy), and create one customer on the demo plan.
2. Every dot carries an entitlement and an amount, and calls allow('demo', entitlement, amount) when it reaches the line. It continues if the answer is true.
3. Revenue and cost are counted by two observe_only spend caps in USD: one counts overage (what the customer is billed), the other counts cost (overhead_cost: true). They reset every minute. Margin is the difference. Prices, costs, and limits change while the demo runs, so these are never a simple usage times price.
4. An event handler (meter-changed, meter-overage, meter-limit, meter-reset) reads the meters and caps after every call and updates the charts.
5. The controls change the policy's prices, costs, limits, modes, and resets in place.

Dots come in four kinds. Higher weights appear more often, and each dot's amount is in its range:

const demoKinds = [
    { kind: 'tokens', label: 'AI Tokens', color: '#5b8dee', weight: 3, amountRange: [500, 4000] },
    { kind: 'seats', label: 'Seats', color: '#9b7ede', weight: 1, amountRange: [-1, 3] },
    { kind: 'outcomes', label: 'Outcomes', color: '#4dbbb0', weight: 2, amountRange: [1, 5] },
    { kind: 'storage', label: 'Storage (MB)', color: '#c9a227', weight: 2, amountRange: [1, 10] },
];

The policy

One plan, with short periods so the charts move:

• tokens: $4 per million charged, $3 per million cost, 1,000 included every 20 seconds, soft (overage billed).
• seats: $5 a seat past the limit, a hard limit of 10, resets every minute.
• outcomes: $0.25 charged, $0.10 cost, 20 included every 10 seconds, soft.
• storage: $0.003 per MB charged, $0.001 cost, 5 MiB included, soft, resets every minute.
• denials: an observe limit that counts denied calls for the chart (you wouldn't need this in a real policy).

policy: {
    credits: {
        token: { unit: 'token', price: { amount: 0.000004 }, overhead_cost: 0.000003, stof_units: 'int' }
        seat: { unit: 'seat', price: { amount: 5 }, overhead_cost: 0, stof_units: 'int' }
        outcome: { unit: 'outcome', price: { amount: 0.25 }, overhead_cost: 0.10, stof_units: 'int' }
        mb_storage: { unit: 'mb_storage', price: { amount: 0.003 }, overhead_cost: 0.001, stof_units: 'MB' }
        denial: { stof_units: 'int' }
    }
    plans: {
        demo: {
            label: 'Demo Plan'
            entitlements: {
                tokens: { limit: { credit: 'token', mode: 'soft', value: 1000, minimum: 0, resets: true, reset_inc: 20s } }
                seats: { limit: { credit: 'seat', mode: 'hard', value: 10, minimum: 0, resets: true, reset_inc: 60s } }
                outcomes: { limit: { credit: 'outcome', mode: 'soft', value: 20, minimum: 0, resets: true, reset_inc: 10s } }
                storage: { limit: { credit: 'mb_storage', mode: 'soft', value: 5MiB, minimum: 0, resets: true, reset_inc: 60s } }
                denials: { limit: { credit: 'denial', mode: 'observe', resets: true, reset_inc: 1min } }
            }
        }
    }
}