For Publishers, Devs, and Dashboards
Embed our AI cost calculator on your site
Two lines of HTML. Live 2026 pricing. Interactive sliders. Zero dependencies. Free under CC-BY-4.0 — just link back.
Live preview
This is the widget running inside a stock iframe — exactly what visitors to your site will see. Move the sliders to recompute the cost in real time.
Theme follows the host page's prefers-color-scheme. Mobile breakpoint at 480px.
Copy-paste snippet (interactive)
The default mode. Renders the model picker, the four sliders (input tokens, output tokens, cache %, batch %), and live-computes per-call / per-month cost.
<!-- Interactive calculator (sliders, live $ output) -->
<div data-aiph-embed="calc/openai-api-cost" data-mode="interactive"></div>
<script async src="https://aipromptshub.co/api/embed-v2.js"></script>Snippet (passive table)
For readers who just want the canonical price table without the controls — same source data, lower visual footprint.
<!-- Passive price table (no controls) -->
<div data-aiph-embed="calc/openai-api-cost" data-mode="table"></div>
<script async src="https://aipromptshub.co/api/embed-v2.js"></script>WordPress + React
WordPress shortcode (drop the plugin zip into /wp-content/plugins/):
[aiph-calc slug="openai-api-cost" mode="interactive"]React (install @aipromptshub/calc-embed from npm):
import { AIPHCalcEmbed } from '@aipromptshub/calc-embed';
export default function MyPage() {
return <AIPHCalcEmbed slug="openai-api-cost" mode="interactive" />;
}Available calculators
Swap openai-api-cost in the snippet above for any of these slugs. Full index at /api/calc.
What you get
- Always-fresh data. The widget fetches the latest price table from
/api/calc/<slug>on every load. When we update a price, your embed updates with no redeploy on your end. - Zero dependencies. Pure vanilla JS, ~20KB gzip. No React, no jQuery, no framework lock-in. Works in WordPress, static HTML, Notion, Webflow, MDX, Substack, anywhere a
<script>tag runs. - Light + dark themes.Automatically follows the host page's
prefers-color-scheme. Override via the.aiph2CSS class. - CORS-open, edge-cached. Fetch from any origin. Cache-Control
s-maxage=3600— the script and the JSON both ride Vercel's edge cache. - Attribution-only license.Free for commercial use under CC-BY-4.0. The widget bakes in a backlink to the canonical page; that's the entire ask.
Real examples
We'll list known embeds here as adoption grows. If you ship the widget on your site, drop us a line at /contact and we'll add you to the wall.