Am Ende dieses Tutorials hast du eine einzige HTML-Datei auf deinem Rechner, die per Doppelklick aufgeht und dir die aktuelle Temperatur und die nächsten sieben Tage für deinen Ort anzeigt. Echte Zahlen aus echten Wettermodellen, keine Attrappe. Kosten: keine. API-Schlüssel: keiner. Zeit bis zum ersten Ergebnis: 15 Minuten, für den kompletten Ausbau rund 40.
Möglich macht das Open-Meteo, eine Wetter-API der OpenMeteo GmbH aus Bürglen in der Schweiz. Das Besondere: kein Konto, keine Registrierung, kein API-Schlüssel. Du rufst eine URL auf und bekommst JSON zurück. Genau deshalb geht das so schnell, denn der übliche Zeitfresser bei API-Projekten ist die Anmeldung, nicht der Code. Stufe 1 bringt dich zum lauffähigen Dashboard, Stufe 2 und 3 bauen es aus und stellen es online.
Du brauchst: einen Browser, einen kostenlosen Account auf claude.ai und einen Texteditor. Sonst nichts. Der kostenlose Claude-Plan hat ein Nachrichtenlimit pro Zeitfenster. Wenn dich das mitten in Stufe 2 ausbremst, machst du nach der Pause weiter, dein Zwischenstand liegt ja längst als Datei auf der Platte.
Stufe 1: Anfänger, dein erstes Ergebnis in 15 Minuten
Schritt 1: Die API einmal im Browser ansehen
Bevor Claude irgendetwas baut, schau dir an, woher die Zahlen kommen. Kopiere diese URL in die Adresszeile deines Browsers und drück Enter:
https://api.open-meteo.com/v1/forecast?latitude=53.55&longitude=9.99¤t=temperature_2m,weather_code&daily=temperature_2m_max,temperature_2m_min,precipitation_probability_max,weather_code&timezone=Europe/Berlin&forecast_days=7
Was du siehst, ist rohes JSON: ein Block current mit der aktuellen Temperatur und dem aktuellen Wettercode und ein Block daily mit sieben Werten je Reihe. Die Koordinaten im Beispiel zeigen auf Hamburg. Tausch latitude und longitude gegen deine eigenen, und die Zahlen ändern sich sofort.
Die Parameter, die dein Dashboard braucht:
| Parameter | Was er tut | Beispielwert |
|---|---|---|
latitude / longitude | Ort in WGS84, Breite zuerst | 53.55 / 9.99 |
current | aktuelle Messwerte, kommagetrennt | temperature_2m,weather_code |
daily | Tageswerte, kommagetrennt | temperature_2m_max,weather_code |
timezone | IANA-Zeitzone, sonst GMT | Europe/Berlin |
forecast_days | Anzahl Tage, 0 bis 16 | 7 |
Merk dir eine Sache: weather_code liefert eine Zahl, keinen Text. Das sind WMO-Codes, 0 heißt klar, 61 heißt leichter Regen. Die Übersetzung muss dein Dashboard selbst mitbringen. Genau das steht deshalb im Prompt.
Schritt 2: Den Starter-Prompt an Claude senden
Öffne claude.ai, starte ein neues Gespräch und schick diesen Prompt. Setz vorher deine eigenen Koordinaten und deinen Ortsnamen ein, den Rest lässt du wie er ist.
Schritt 3: Speichern und öffnen
Kopiere den kompletten Code aus Claudes Antwort. Öffne einen Texteditor, füg ihn ein und speichere die Datei als dashboard.html. Wichtig unter Windows: im Speichern-Dialog bei Dateityp auf “Alle Dateien” stellen, sonst landet die Datei als dashboard.html.txt auf der Platte.
Doppelklick auf die Datei. Nach einem kurzen Moment stehen echte Werte auf dem Bildschirm. Das ist dein erstes Ergebnis, und es hat keinen Cent gekostet.
Falls die Seite leer bleibt: drück F12, geh auf den Tab “Konsole”, kopier die rote Fehlermeldung und schick sie an Claude. Ein Satz reicht: “Die Seite bleibt weiß, in der Konsole steht das hier.” Claude findet den Fehler zuverlässiger, als du ihn beschreiben kannst.
Stufe 2: Fortgeschritten, Ortssuche und Fehlerfälle
Feste Koordinaten raus, Suchfeld rein
Koordinaten im Code sind unpraktisch. Open-Meteo hat dafür eine zweite, ebenfalls schlüsselfreie API unter https://geocoding-api.open-meteo.com/v1/search. Du schickst einen Ortsnamen, du bekommst Breite, Länge, Land und Zeitzone zurück.
Die drei Stolpersteine
Vertauschte Koordinaten. Breitengrad steht immer zuerst, Längengrad danach. Wer die beiden tauscht, bekommt kein Fehlerfenster, sondern das Wetter eines anderen Kontinents. Hamburg liegt bei 53,55 und 9,99. Steht bei dir 9,99 vorn, ist es falsch herum.
Fehlende Zeitzone. Ohne den Parameter timezone rechnet die API in GMT. Höchst- und Tiefstwert beziehen sich dann auf den GMT-Tag, im Sommer also auf den Zeitraum von 02:00 bis 02:00 deutscher Zeit. Die Zahlen sind nicht falsch, sie gehören nur zu einem anderen Tag als dem, den du meinst. Für Deutschland gehört Europe/Berlin in jede Anfrage. Wer die Ortssuche eingebaut hat, nimmt einfach das Feld timezone aus dem Geocoding-Treffer.
Wettercodes ohne Übersetzung. Wenn auf deinen Karten Zahlen wie 61 oder 95 stehen, fehlt ein Eintrag in der Übersetzungstabelle. Sag Claude, welcher Code unübersetzt auftaucht, dann ergänzt es ihn.
Ein leerer Treffer sieht übrigens anders aus als ein Fehler. Sucht jemand nach einem Ort, den es nicht gibt, antwortet die Geocoding-API mit einem JSON-Objekt ohne das Feld results. Wer stattdessen auf eine leere Liste prüft, fängt diesen Fall nie ab. Das ist der häufigste Grund, warum eine Ortssuche stumm hängen bleibt.
Werte gegenprüfen
Ein Dashboard, das plausibel aussieht, kann trotzdem falsch sein. Ruf open-meteo.com auf, gib denselben Ort ein und vergleiche Höchstwert und Regenwahrscheinlichkeit für morgen mit deiner Seite. Weichen die Zahlen deutlich ab, stimmt meist die Zeitzone oder die Koordinate nicht.
Stufe 3: Experte, Feinschliff und Veröffentlichung
Online stellen mit GitHub Pages
Die Datei läuft lokal, weil Open-Meteo den Header access-control-allow-origin: * mitschickt. Genau deshalb funktioniert sie auch auf einer öffentlichen Seite.
- Kostenlosen Account auf github.com anlegen
- Neues Repository erstellen, öffentlich
- Benenne
dashboard.htmlauf deinem Rechner inindex.htmlum, denn der Upload-Dialog übernimmt den Dateinamen und kann ihn nicht ändern. Dann “Add file” und “Upload files”, Datei hochladen - “Settings”, dann “Pages”: unter “Build and deployment” bei “Source” die Option “Deploy from a branch” wählen, darunter bei “Branch” den Branch
mainund den Ordner/ (root)setzen und speichern - Nach ein paar Minuten liegt dein Dashboard unter
https://dein-name.github.io/repository-name/
Die Menüpunkte können je nach Version leicht anders heißen, der Weg über Settings und Pages bleibt gleich.
Was du dabei einhalten musst
Der kostenlose Zugang ist an Bedingungen geknüpft, und die sind kurz genug, um sie ernst zu nehmen (Stand: 30. August 2026, geprüft auf open-meteo.com/en/pricing und /en/terms):
| Bedingung | Wert |
|---|---|
| API-Schlüssel | keiner nötig |
| Nutzung | ausdrücklich nicht-kommerziell |
| Limit pro Minute | 600 Aufrufe |
| Limit pro Stunde | 5.000 Aufrufe |
| Limit pro Tag | 10.000 Aufrufe |
| Limit pro Monat | 300.000 Aufrufe |
| Lizenz der Daten | CC BY 4.0, Quellenangabe Pflicht |
Nicht-kommerziell heißt laut den Terms: private oder gemeinnützige Seiten und Apps ohne Abo und ohne Werbung, Heimautomatisierung im eigenen Haushalt, öffentliche Forschung an öffentlichen Einrichtungen und Bildungsinhalte. Ausdrücklich als kommerziell gelten dagegen Seiten mit Abo oder Werbung, die Integration in kommerzielle Produkte und nicht offengelegte Forschung in Unternehmen. Sobald so etwas dranhängt, brauchst du einen bezahlten Plan. Und die Quellenangabe auf der Seite ist keine Höflichkeit, sondern Teil der Lizenz.
Wie oft du abfragen darfst, rechnest du leicht nach: ein Dashboard, das alle zehn Minuten aktualisiert, kommt auf 144 Aufrufe am Tag. Das Tageslimit liegt bei 10.000. Du bist weit davon entfernt, selbst wenn du die Seite den ganzen Tag offen lässt.
Häufige Fragen
Brauche ich einen API-Schlüssel, und was kostet Open-Meteo privat?
Keinen Schlüssel und keinen Cent. Weder die Forecast- noch die Geocoding-API verlangen ein Konto, eine Kreditkarte oder Zahlungsdaten. Einen Schlüssel gibt es erst bei den bezahlten Plänen, und die brauchst du erst bei kommerzieller Nutzung oder oberhalb der Limits. Genau das macht dieses Projekt anfängertauglich.
Darf ich das Dashboard öffentlich stellen?
Ja, solange es nicht-kommerziell bleibt und die Quellenangabe sichtbar auf der Seite steht. Eine private Seite ohne Werbung ist ausdrücklich erlaubt. Ein werbefinanziertes Projekt nicht.
Woher kommen die Daten?
Aus den Modellen nationaler Wetterdienste, unter anderem DWD ICON, ECMWF, GFS, Météo-France und Met Norway. Open-Meteo rechnet sie zusammen und liefert sie über eine einheitliche Schnittstelle aus.
Warum weicht die Temperatur von meiner Wetter-App ab?
Weil deine App wahrscheinlich ein anderes Modell nutzt und auf einen anderen Messpunkt interpoliert. Abweichungen von ein bis zwei Grad sind normal. Sind es zehn Grad, prüf Koordinaten und Zeitzone.
Was tun bei CORS-Fehlern?
Open-Meteo antwortet mit access-control-allow-origin: *, die lokale Datei darf also zugreifen. Steht trotzdem ein CORS-Fehler in der Konsole, blockiert meist eine Browser-Erweiterung oder ein Firmennetz die Anfrage. Ruf die API-URL direkt im Browser auf: kommt dort JSON an, liegt es nicht an deinem Code.
Dein nächster Schritt
Du hast jetzt etwas gebaut, das die meisten Leute für kompliziert halten: eine Seite, die live Daten aus dem Netz zieht, aufbereitet und anzeigt. Der Aufwand lag nicht im Code, sondern darin, die API einmal im Browser anzuschauen und Claude präzise zu sagen, was rauskommen soll.
Dasselbe Muster funktioniert mit jeder offenen Schnittstelle ohne Schlüssel: Feinstaubdaten, Fahrpläne, Wechselkurse, Wasserstände. URL im Browser prüfen, Datenstruktur verstehen, Prompt schreiben, Datei speichern.
Wenn du noch am Anfang stehst, fang mit dem Browser-Spiel mit Claude an, dort lernst du den Prompt-und-Korrektur-Rhythmus ohne API drumherum. Und wenn du wissen willst, was Open-Meteo sonst noch liefert, von historischen Daten bis zu Klimaszenarien, steht das im Überblick zu Open-Meteo.
Wie gut kennst du dein Wetter-Dashboard?
10 Fragen, von den API-Parametern bis zur Veröffentlichung auf GitHub Pages. Wer alle schafft, bekommt ein Zertifikat zum Teilen.