Shadcn AI Usage Blocks: Spend, Edge Nodes and Local Models

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.

When to use

A self-serve planner where an admin sets next month's token volume, model and add-ons against a budget
A month to date breakdown of AI spend by model, team, agent and API key, with the caps at risk
Inference on your own hardware: edge nodes under a power budget, or open weight models sized to a GPU server

When not to use

Staff back office for invoices, subscriptions, dunning and metered charges: use the Billing blocks
Public plan tiers or an upgrade paywall shown before anyone has usage: use the Pricing blocks
An operator console for provider health, routing and quotas across an org: use the AI Ops blocks

Agent notes

AiUsage takes no props and calls no API; its figures are typed constants, mostly in components/data.tsx, so swap them for your data
Money prints through en-US USD helpers such as formatDollars in formatters.ts, so another currency starts there

Third-party API docs

Motion v12: API reference, docs, used by 3 of 4 blocks (the docs follow the latest Motion, with no React API break since v12)
Sonner v2: API reference, docs, used by 3 of 4 blocks
Recharts v3: API reference, docs, used by 1 of 4 blocks

Markdownhttps://web.dev.reui.io/blocks/ai-agents/ai-usage.md

MCPsearch({ query: "ai usage", type: "block", category: "ai-usage" })

Full index for agents:llms.txtReUI MCP setup

AI Usage Blocks for Spend, Edge Nodes and Local Models

AI products bill by tokens, models and add-ons, and the people paying want to see the bill before it lands. The Usage Planner prices next month on a stepped token ruler from 1M to 10B with graduated volume discounts, 4 model cards, 5 add-on chips and an annual commit, and draws a budget runway that names the day a $1,500 cap would be reached. The Spend Map shows month to date spend from a budget dial that fans out by model, team, agent and API key, flags the caps at risk, and opens one item's daily spend and projection.

Edge Nodes runs a fleet of on-prem inference boxes: a grouped node picker, an isometric box whose lid lifts to show memory lit per model, power modes of 15, 30 or 40 W that cap the NPU, and usage, models, power and settings tabs. Local Models sizes open weight models for a GPU server drawn as a cutaway, whose 4 cards light LEDs for the memory each model takes, with a row per model, an inspector and pending changes that wait for Apply.

Every block computes its figures from typed constants on the client, so each works as a front end over your own metering or fleet data. They are built from ReUI Frame, Badge and Alert with shadcn Slider, ToggleGroup, Tabs, Combobox, Sheet, Progress and DropdownMenu, and 3 of them animate with Motion.

All AI Usage Blocks

Open any block on its own page for a live preview, the components it is built from, and the install command.

Usage Planner Usage planner with a stepped token ruler, model cards and a live spend estimate
Spend Map Spend map that fans monthly AI spend out by model, team, agent and API key
Edge Nodes Edge AI node fleet with an isometric inference box you open, inspect and power cap
Local Models Local model settings with a GPU server cutaway whose card LEDs show model memory

What the AI Usage Blocks Cover

Token ruler and volume bands Drag or arrow through 81 steps from 1M to 10B tokens while a band row shows which graduated discount, from list price to 30 percent off, the volume reaches.
Models, add-ons and annual commit Pick a default model by rate and latency, toggle add-ons such as web search or zero retention, and see a 12 percent annual discount applied.
Budget runway Projected spend through the month against the monthly cap, red past it, with the day the cap is reached and the share of the budget used.
Spend fan map A budget dial fans out to models, teams, agents and API keys, each ranked by cost or by tokens, with caps that are near or over called out.
Inspector and Ask Nimbus One item's month to date spend and projection, a daily spend area, its cap meter and usage stats, plus an Ask box with canned answers to wire to your model.
Edge node fleet A grouped node picker flags the nodes that need a look, an isometric box lifts its lid to show memory lit per model, and a power mode of 15, 30 or 40 W caps NPU watts.
Deploys and node actions Deploy or undeploy a model in 2 GB blocks of a node's 32 GB, and restart, update or decommission a node behind a confirm, with Undo on a rename, an undeploy or a decommission.
GPU server cutaway A server drawn with its lid off, 4 cards whose LEDs show the memory each model takes, and an inspector that sizes the picked model by precision, context and parallel requests.

Related Shadcn Block Categories

Billing Subscription, invoice, metering, plan, upgrade, and failed payment pages.
AI Ops AI startup control plane pages for model providers, prompts, token cost, routing, and quotas.
Pricing Pricing sections with plan tier columns, a monthly or yearly billing toggle, a featured plan, and per-seat team pricing.
Agent Activity Agent run views, from live step feeds and approvals to research traces, MCP call tables, and run reports.
Dashboard Dashboard components and layouts that combine stats, charts, and tables into a complete overview screen.

All Shadcn Block Groups

Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.

Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.

Frequently Asked Questions

Do these blocks connect to my billing or metering API?

Not on their own. Every figure is computed on the client from typed constants: the bands, the model rates, the budget, each split's spend, the fleet and the server's models. Replace those with your own data, or lift them into props, and the totals, shares and projections follow. Save Plan, Contact Sales, deploys, power modes, Apply and Restart only update state or show a toast, and Ask Nimbus answers from canned text, so wire those to your own API.

Can the planner price per message or per run instead of per token?

Not as shipped. Its units, rates, ruler and copy are all per token, with rates per 1M tokens. Another unit means new steps for the ruler, new rates on the model cards and new labels, while the band, budget and runway logic can stay.

What changes when I switch the Spend Map from Cost to Tokens?

The split bars, the captions, the leaf values and their order, and the footer's top 2 line switch to tokens. The budget dial and the inspector's spend, chart and cap stay in dollars, because budgets and caps are set in money, and its stats do not switch.

What do the blocks install?

The shadcn CLI adds each block with its ReUI and shadcn components. The planner, the spend map and Edge Nodes add Motion, the planner, Edge Nodes and Local Models add Sonner for their toasts, and Edge Nodes adds Recharts through the shadcn Chart for its usage tab. Toasts show only where your app already mounts a Sonner toaster.

Do Edge Nodes and Local Models need WebGL or a 3D library?

No. Both devices are isometric SVG drawn from plain data, the edge box in node-scene.ts and the GPU server in server-scene.ts, so they render anywhere React does.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.