Embed the LLM cost calculator on your site
One script tag. 10 current models (Claude 4.x, GPT-5.x, Gemini 2.5, DeepSeek V4). No tracking, no cookies, ~8 KB. Free with a single attribution link.
Live demo
This is the actual widget — interact with it just like an embedded reader would.
Drop-in embed code
Paste this anywhere in the body of your HTML, Markdown, or CMS rich-text block:
<!-- Embed the toksum.dev LLM cost widget -->
<script src="https://toksum.dev/widget/v1.js" async></script>
<div id="toksum-widget"></div>Customise the widget
Add data attributes to pre-fill values, switch theme, or compact the layout:
| Attribute | Values | Effect |
|---|---|---|
| data-default-model | model id (e.g., claude-opus-4-7) | Pre-select a model on first render. |
| data-input-tokens | integer (default 2000) | Pre-fill the input tokens field. |
| data-output-tokens | integer (default 500) | Pre-fill the output tokens field. |
| data-theme | auto (default) / light / dark | Force theme. auto respects the visitor's prefers-color-scheme. |
| data-compact | true / false | Stack form fields vertically. Good for narrow sidebar embeds. |
Customised example
<!-- Customised: dark theme, pre-selected Opus 4.7, compact layout -->
<script src="https://toksum.dev/widget/v1.js" async></script>
<div
id="toksum-widget"
data-default-model="claude-opus-4-7"
data-input-tokens="4000"
data-output-tokens="800"
data-theme="dark"
data-compact="true"
></div>Models included in v1
10 widely-searched frontier and budget models, verified 2026-05-27:
- Claude Opus 4.7 — $5/$25
- Claude Sonnet 4.6 — $3/$15
- Claude Haiku 4.5 — $1/$5
- GPT-5.5 — $5/$30
- GPT-5.4 — $2.50/$15
- GPT-5.4 mini — $0.75/$4.50
- GPT-5.4 nano — $0.20/$1.25
- Gemini 2.5 Pro — $1.25/$10
- Gemini 2.5 Flash — $0.30/$2.50
- DeepSeek V4 Pro — $1.74/$3.48
Want a model that is not in this list (Mistral, Cohere, Grok, Llama 4)? See the full pricing catalog on toksum.dev, or email us to request it for v2.
Frequently asked questions
Does the widget make network requests or track users?
No. The widget is a self-contained ~8 KB JavaScript file with pricing data embedded inline. It does not fetch anything from toksum.dev at runtime, sets no cookies, and does not collect analytics. The only outbound request is the initial script download from your CDN.
How do I keep pricing current?
The widget is versioned. Pricing is embedded at build time and reflects the date listed in the file header. To get fresh pricing, change the script src to a newer version (e.g., v2.js) when we publish one. Or load /widget/latest.js (we publish that alias) for auto-update — at the cost of pricing potentially changing under your readers.
Can I style the widget to match my site?
The widget exposes a few data attributes (data-compact, data-theme, data-default-model, data-input-tokens, data-output-tokens). For deeper customization, the rendered DOM uses .tk-* class names you can override with !important CSS in your site stylesheet. The widget is intentionally minimal so it embeds cleanly without dominating your layout.
Is the "Powered by toksum.dev" link required?
Yes. The widget is free to embed in exchange for a single attribution link. If you would like a no-attribution build (for a paid commercial site), contact us at [email protected].
How accurate is the embedded pricing?
Pricing reflects official provider documentation as of the verification date in the widget source. We update the widget alongside the main site whenever provider rates change. For real-time billing decisions, always cross-check the current pricing page of the provider you are using.