Smart Metadata: Ein KI-Feature für Sanity Studio — selbst gebaut

Kennst du das? Du lädst ein Bild in dein CMS hoch und da starren dich drei leere Felder an: Alt-Text, Title, Description. Und du denkst dir — ja, mach ich gleich. Machst du aber nicht. Zumindest ich nicht. Jedes Mal dasselbe Spiel, und bei einem privaten Blog ohne Redaktionsteam im Rücken bleibt sowas halt liegen.

Für die Medienverwaltung nutze ich sanity-plugin-media — das ist so das Standard-Plugin, wenn du in Sanity Studio mit Bildern arbeitest. Funktioniert auch super. Nur: Automatisch generierte Metadaten? Gibt's da nicht. Und irgendwann hab ich mir gedacht — Moment mal, das kann doch eine KI übernehmen.

Warum ein eigenes Plugin?

Kurz zu Sanity, falls du es nicht kennst: Das ist ein Headless CMS, bei dem du den kompletten Editor an deine Bedürfnisse anpassen kannst. Eigene Felder, eigene Tools, eigene Oberflächen — alles über Plugins.

Mein erster Reflex war natürlich: Kann ich nicht einfach das bestehende Media Plugin erweitern? Hab ich kurz überlegt und dann gelassen. Das ist ein Fremd-Plugin, und wenn Sanity da ein Update rausbringt, hätte ich ein Kompatibilitätsproblem. Also lieber was Eigenes bauen, das daneben lebt. Kein Fork, keine Abhängigkeit, kein Stress bei Updates.

Für die KI hab ich mich für Googles Gemini API entschieden — ehrlich gesagt vor allem, weil das Free Tier großzügig genug ist. Die Bilderkennung funktioniert gut, die API ist schlank. Muss ja nicht gleich das teuerste Modell sein für einen privaten Blog.

Wie es funktioniert

Im Grunde ist es so: Ich öffne das Smart Metadata Tool im Studio, wähle ein paar Bilder aus, drücke auf „Metadaten generieren" — und die KI spuckt mir Alt-Text, Title und Description aus. Danach kann ich mir die Vorschläge anschauen, was ändern oder einfach übernehmen.

Was ich ziemlich praktisch finde:

• Completeness Score — Jedes Bild kriegt eine Bewertung von 0 bis 3. Auf einen Blick sehe ich, wo noch was fehlt. Klingt simpel, spart aber echt Zeit.
• Batch-Processing — Ich muss nicht jedes Bild einzeln durchklicken, sondern kann so viele auswählen wie ich will. Die werden dann im Hintergrund abgearbeitet, immer mehrere gleichzeitig.
• Automatische Bildverkleinerung — Bevor ein Bild an die KI geht, wird es auf 1024px runterskaliert. Spart Tokens, kostet nix an Qualität bei den Ergebnissen.
• EXIF-Extraktion — Kameradaten wie ISO, Blende, Brennweite werden direkt mit ausgelesen. Nettes Extra, vor allem für meine Fotografie-Posts.

Was mich selbst überrascht hat: Die Metadaten sind nicht nur fürs Frontend nützlich. Im Studio kann ich damit auch viel besser durch meine Medien suchen und filtern. Also nicht nur bessere Bild-Metadaten im Blog, sondern auch mehr Ordnung im Backend. Das hatte ich am Anfang gar nicht so auf dem Schirm.

Ach ja, und der API-Key läuft über eine serverseitige Funktion (in meinem Fall eine Netlify Function), nicht direkt im Browser. So taucht der Key nirgends im Frontend-Code auf.

Die UX-Herausforderung

Das hier war der Teil, der am meisten Spaß gemacht hat. Und gleichzeitig der kniffligste. Denn so ein Metadaten-Tool ist ja kein normales Formular. Wenn die KI dir drei Textvorschläge generiert, willst du die nicht einfach nur sehen — du willst übernehmen, bearbeiten, vielleicht auch komplett ignorieren. Dazu Modals, Fehlermeldungen, Statusanzeigen. Das muss sich alles flüssig anfühlen, sonst nutzt es keiner.

Klar, irgendwo im Netz gibt es bestimmt Vorlagen für sowas. Aber ehrlich gesagt wusste ich nicht, wo genau ich suchen soll und was ich dafür alles runterladen müsste. Also hab ich mir das einfacher gemacht: Das Media Plugin als Referenz genommen und mich an Sanitys UI-Bibliothek gehalten. Dazu kommt, dass ich Sanity Studio erst seit ein paar Monaten kenne — da musste ich mich sowieso erstmal in die Plugin-Architektur reinarbeiten. Aber genau das hat es auch spannend gemacht.

Entwickelt hab ich das Ganze mit Claude Code. Und von Anfang an mehrsprachig — die komplette UI gibt es auf Deutsch und Englisch, mit einem eigenen i18n-System. War mir wichtig, weil ich das Plugin irgendwann auch anderen zur Verfügung stellen will.

Fazit

Was vorher ein lästiges Pflichtfeld war, ist jetzt ein Klick. Ehrlich gesagt bin ich ziemlich zufrieden damit. Die Metadaten sind vollständiger, die Mediensuche im Backend funktioniert besser, und dieses ewige „Mach ich später" hat ein Ende.

Als Nächstes will ich das Plugin als Open-Source-Paket auf npm veröffentlichen und in der Sanity Exchange listen — mal schauen, ob es auch für andere nützlich ist. Weitere Metadaten draufpacken kann ich mir gut vorstellen. Aber eigentlich hat mich das Projekt auf eine größere Idee gebracht: KI auch an anderen Stellen im Studio einzusetzen, wo es bisher keine passenden Features gibt. Die Erfahrung hat gezeigt, dass Sanity Studio sich überraschend einfach erweitern lässt — und das macht Lust auf mehr.

Was ich mitnehme:

• Eigene Tools bauen macht mehr Spaß, als sich mit Workarounds rumzuschlagen
• KI-APIs sind mittlerweile so günstig, dass sich das auch für Hobbyprojekte rechnet. Geminis Free Tier reicht für tausende Bilder im Monat
• Bevor du ein Fremd-Plugin forkst: Überleg dir, ob ein eigenes nicht die sauberere Lösung ist
• Gutes UI für KI-Inhalte ist mehr als ein Textfeld. Der Nutzer muss prüfen, ändern und entscheiden können — sonst vertraut er dem Ergebnis nicht