Live-Preise auf Ihrer Website einbetten
Sie können die aktuellen Preise von UberLLM auf Ihrem Blog, in Ihrer Dokumentation oder in Ihrer README anzeigen. Die Preise aktualisieren sich von selbst, und Sie benötigen keinen API key und kein Konto. Es gibt vier Möglichkeiten:
| Sie möchten | Verwenden Sie |
|---|---|
| Eine Preistabelle auf einer Webseite | Das script tag |
| Dieselbe Tabelle, wo scripts nicht erlaubt sind | Ein einfaches iframe |
| Ein Preis-Badge in einer README | Das Preis-Badge |
| Die Zahlen, um Ihre eigene Tabelle zu erstellen | Die JSON price API |
Die Preisseiten auf uberllm.dev haben einen Link Live-Preistabelle einbetten, und jede Modellseite hat Diesen Preis einbetten. Beide geben Ihnen diesen Code, fertig zum Einfügen.
Das Skript-Tag
Fügen Sie dies dort ein, wo die Tabelle erscheinen soll:
<script async src="https://uberllm.dev/embed.js"
data-models="anthropic/claude-sonnet-4.5,openai/gpt-5.5,deepseek/deepseek-v4-flash"></script>
Das Skript platziert die Tabelle direkt nach sich selbst und hält ihre Höhe gleich der Höhe der Tabelle, sodass kein leerer Raum und keine Scrollleiste entstehen.
Ohne Optionen erhalten Sie die 10 Chat-Modelle ganz oben auf dem uberllm.dev Board:
<script async src="https://uberllm.dev/embed.js"></script>
Optionen
Alle Optionen sind optional.
| Attribut | Was es bewirkt |
|---|---|
data-models |
Die anzuzeigenden Modelle, als durch Kommas getrennte IDs, in der gewünschten Reihenfolge. Eine ID ist das, was Sie als model in einer Anfrage senden, zum Beispiel openai/gpt-5.5. |
data-type |
Zeigt text, image, video oder audio Modelle an. Ohne data-models und ohne diese Option zeigt die Tabelle Chat-Modelle an (text). |
data-limit |
Wie viele Modelle angezeigt werden sollen, wenn Sie keine benennen. Von 1 bis 50. Der Standardwert ist 10. |
data-theme |
light, dark oder auto. auto ist der Standardwert und folgt der Systemeinstellung des Lesers. Setzen Sie light oder dark, um es an Ihre Seite anzupassen. |
data-lang |
Die Sprache der Spaltennamen: en, fr, es, de, pt, it, nl, zh, vi, ja, ko oder id. auto verwendet die Browsersprache des Lesers. Der Standardwert ist en. |
data-max-width |
Die maximale Breite der Tabelle, zum Beispiel 600px oder 100%. Der Standardwert ist 720px. |
data-title |
Der Name, den Screenreader für die Tabelle ankündigen. |
Eine Videotabelle auf einer dunklen Seite:
<script async src="https://uberllm.dev/embed.js"
data-type="video" data-limit="5" data-theme="dark"></script>
Ein einfaches iframe
Manche Websites entfernen Skript-Tags. Nutzen Sie dort ein iframe. Die Optionen sind dieselben, in der Adresse geschrieben ohne data-:
<iframe src="https://uberllm.dev/embed/prices?models=anthropic/claude-sonnet-4.5,openai/gpt-5.5"
title="AI model API prices" width="100%" height="178" loading="lazy"
style="border:0;max-width:720px"></iframe>
Ein iframe kann seine eigene Höhe nicht ändern, daher legen Sie sie selbst fest: 76 px plus 51 px pro Modell. Zwei Modelle benötigen 178,, fünf benötigen 331 und zehn benötigen 586.
Was die Tabelle zeigt
- Chat-Modelle: der Preis für 1 Millionen Input-Tokens und 1 Millionen Output-Tokens.
- Bild-, Video- und Audio-Modelle: der Preis für eine Einheit, zum Beispiel eine Sekunde Video oder ein Bild.
- Unter Listenpreis: wie weit der Preis unter dem Listenpreis des Modellherstellers liegt. Die Spalte wird weggelassen, wenn kein Modell in der Tabelle einen Listenpreis über unserem hat.
Dies sind die gleichen Zahlen wie auf der Seite jedes Modells: der niedrigste Verkäuferpreis im Moment. Eine Anfrage kann mehr kosten, wenn die günstigsten Verkäufer ausgelastet sind. Siehe Preise.
Jeder Modellname verlinkt auf seine Seite auf uberllm.dev, und die Tabelle hat einen kleinen Link "Preise von UberLLM".
Die Tabelle wird mit den Preisen der letzten Stunde erstellt und liest dann die aktuellen aus der Preis-API. Wenn dieser Lesevorgang fehlschlägt, behält sie die Preise, die sie hat. Ein Modell, das im Moment niemand anbietet, wird weggelassen, ebenso wie Modelle, die für Inhalte für Erwachsene gemacht sind. Eine Modell-ID, die nicht existiert, wird übersprungen.
Das Preis-Badge
Ein kleines Bild mit dem Namen eines Modells und seinem Preis jetzt, für ein README:
[](https://uberllm.dev/models/anthropic/claude-sonnet-4.5?utm_source=embed&utm_medium=referral&utm_campaign=price-badge)
Fügen Sie die Modell-ID wie sie ist, inklusive Schrägstrichen, in die Adresse ein und beenden Sie sie mit .svg.
Price API und Preis-Badge enthält das HTML-Formular und die
anderen Optionen.
Die JSON-Preis-API
Um Ihre eigene Tabelle zu erstellen, lesen Sie die Preise als JSON. Jede Webseite kann sie vom Browser aus aufrufen:
const res = await fetch("https://api.uberllm.dev/api/v1/public/prices?type=text&limit=10");
const { models } = await res.json();
for (const m of models) console.log(m.name, m.price_text);
Preis-API und Preis-Badge listet jeden Parameter und jedes Feld auf.
Datenschutz und Geschwindigkeit
- Die Tabelle ist eine kleine Datei. Sie lädt keine Schriftarten, keine Analysen und keine anderen Skripte.
- Sie setzt keine Cookies und liest nichts von Ihrer Seite. Das Einzige, was sie an Ihre Seite sendet, ist ihre eigene Höhe.
- Links aus der Tabelle tragen
utm_source=embedund den Namen Ihrer Website, damit wir sehen können, welche Websites Besucher senden. - Suchmaschinen wird mitgeteilt, die Tabelle selbst nicht zu indexieren, damit sie nicht mit Ihrer Seite konkurriert.
Limits
Die Preis-API erlaubt 300 Anfragen pro Minute von einer IP-Adresse. Eine Tabelle stellt bis zu vier kleine Anfragen, wenn sie geöffnet wird, und erneut alle 5 Minuten, während sie angezeigt wird.