Eine Grafik in Sätzen, mitten im Chat
Das Wichtigste in Kürze
- Die Adresse https://listing-shot.com/mcp/demo, in ChatGPT als App oder in Claude als Konnektor eingetragen, macht aus einem Satz wie „Foto rechts, Text links, Preis groß“ eine Grafik in drei Formaten: Instagram-Post, Story und Link-Vorschau. Ohne Konto und ohne Schlüssel.
- Ein zweiter Satz ändert die Grafik, statt eine neue zu beginnen, und die Antwort sagt in Worten, was sich bewegt hat: „Text jetzt oben · Knopf hinzugefügt“. Was ein Satz verlangt und sich nicht zeichnen lässt, steht unter „Das geht nicht“.
- Gezeichnet werden die sechs Beispiele der Startseite — Sneaker, E-Bike, Rasenmäher, Holzhaus, Finca, Altbauwohnung —, auf Wunsch mit eigener Überschrift, eigenem Preis und bis zu drei eigenen Angaben. Ein eigenes Foto nimmt die Chat-Demo nicht.
- Die Sätze sind für alle Chats zusammen pro Tag begrenzt, weil jeder ein Sprachmodell fragt; das Zeichnen auf einem anderen Beispiel kostet nichts und ist nur gegen Fluten gebremst.
- Im Browser findet ein Assistent, der die Werkzeuge einer Seite benutzen kann (WebMCP, in Chrome derzeit zum Testen), auf der Startseite vier Werkzeuge, die dieselben Knöpfe drücken wie ein Besucher.
Wer eine Grafik beschreiben will, tut das meistens schon irgendwo: in einem Chat. Dort entstehen heute Anzeigen-Entwürfe, Produkttexte, Ideen für den nächsten Post. Seit dem 24.09. kann man ListingShot genau dort ausprobieren — in ChatGPT, in Claude und mit einem Assistenten im Browser — ohne Konto, ohne Schlüssel und ohne die Seite zu verlassen, auf der man gerade schreibt.
Dieser Beitrag zeigt, was man dafür einträgt, was im Chat zurückkommt, und was die Demo bewusst nicht kann.
Eine Adresse
Chat-Assistenten bekommen Werkzeuge über das Model Context Protocol, kurz MCP. Ein Werkzeug ist dabei nichts anderes als eine Funktion mit einer Beschreibung, die der Assistent liest und aufruft, wenn sie zur Bitte passt. Unsere Demo hat drei davon, und die Adresse ist für alle dieselbe:
https://listing-shot.com/mcp/demoIn ChatGPT wird sie als App eingetragen: Einstellungen → Apps → Erweitert, den Entwicklermodus einschalten, eine App erstellen, die Adresse eintragen und als Authentifizierung „keine“ wählen. Den Entwicklermodus bietet OpenAI in den bezahlten Tarifen an. In Claude ist es ein eigener Konnektor unter Einstellungen → Konnektoren. Jeder andere Client, der MCP über HTTP spricht, nimmt dieselbe Adresse.
Die drei Werkzeuge:
| Werkzeug | Was es tut |
|---|---|
| design_graphic | Ein Satz wird zur Grafik in Post, Story und Link-Vorschau. Ein zweiter Satz ändert sie und sagt, was sich bewegt hat. |
| show_graphic | Dieselbe Anordnung auf einem anderen Beispiel oder mit anderen Worten, ohne neuen Satz. |
| list_examples | Die sechs Beispiele: Sneaker, E-Bike, Rasenmäher, Holzhaus, Finca, Altbauwohnung. |
Alle drei lesen nur. Sie legen nichts an, speichern nichts und ändern an keinem Konto etwas.
Der erste Satz
Wir haben die Demo für diesen Beitrag so benutzt, wie es ein Shop tun würde, mit dem Sneaker aus den Beispielen und dem Satz „Foto rechts, Text links, Preis groß“. Die Antwort, wie sie im Chat ankommt:
Das Foto steht rechts, der Text links und der Preis fällt besonders groß aus;
ein Knopf ist nicht vorgesehen.
Beispiel: Sneaker
Instagram Post (1080×1080): https://listing-shot.com/api/demo/image/…
Instagram Story (1080×1920): https://listing-shot.com/api/demo/image/…
Link-Vorschau (1200×630): https://listing-shot.com/api/demo/image/…Ein Chat, der Ansichten zeichnet, zeigt die drei Bilder nebeneinander unter der Antwort; einer, der das nicht kann, gibt die drei Adressen weiter. So sehen sie aus:
Das Sprachmodell liest den Satz genau einmal und übersetzt ihn in eine feste Beschreibung: Foto rechts, eine Hälfte breit, Text auf einer Fläche daneben, Preis betont, kein Knopf. Gezeichnet wird diese Beschreibung, nicht der Satz. Sie gilt in jedem Format, deshalb kommen drei Bilder aus einem Satz, und Preis und Titel stehen als gesetzter Text darin, nicht als gemalte Buchstaben.
Der zweite und der dritte Satz
Der eigentliche Nutzen liegt im zweiten Satz. Der Assistent gibt die Anordnung aus der letzten Antwort mit, und „Mit Knopf, und die Überschrift ganz nach oben“ ändert genau das, statt von vorn anzufangen. Die Antwort beginnt mit dem, was sich bewegt hat:
Geändert: Text jetzt oben · Knopf hinzugefügtIm ersten Bild sieht man auch, was nicht gut aussah: Neben dem großen Preis bleibt den Angaben zu wenig Platz. „Gr. 38–47“ bricht in drei Zeilen um, und das Material passt gar nicht mehr daneben. Also ein dritter Satz, so, wie man ihn einem Menschen sagen würde: „Die Angaben bitte unter den Preis, die sind zu gequetscht.“ Die Antwort: „Geändert: Eckdaten unter dem Preis“.
Das rechte Bild kostet keinen Satz. „Und wie sieht das beim Holzhaus aus?“ ruft das zweite Werkzeug auf, das die letzte Anordnung auf einem anderen Beispiel zeichnet, ohne ein Sprachmodell zu fragen. Dieselbe Anordnung trägt einen Schuh und ein Haus, weil sie Rollen kennt — Foto, Marke oder Ort, Titel, Preis, Angaben, Knopf, Absender — und keine Branche.
Verlangt ein Satz etwas, das sich nicht zeichnen lässt, etwa ein zweites Foto oder ein frei gesetztes Logo, steht es in der Antwort unter „Das geht nicht“. Es fehlt nie still.
Mit eigenen Worten
Statt der Beispieltexte kann der Assistent eigene mitgeben: eine Überschrift, einen Preis und bis zu drei Angaben — Marke, Größe, Material, oder Ort, Zimmer, Fläche. „Zeig das mit meinem Rucksack Fjellweg 28 l für 89 €, 28 Liter, Recycling-Nylon“ zeichnet dieselbe Anordnung mit diesen Angaben, auch das ohne neuen Satz.
Foto, Badge und Absender bleiben dabei die des Beispiels: Der Rucksack steht über dem Bild eines Sneakers. Für einen ersten Eindruck, ob die Anordnung zum eigenen Titel und Preis passt, reicht das; für mehr ist es nicht gedacht. Ein eigenes Produkt samt Foto und den Farben der eigenen Website zeigt die Startseite, wenn man dort den Link zur Produktseite einfügt; wie das funktioniert, steht in „Ihr Produkt per Link, in Ihren Farben“.
Im Browser
Die dritte Tür hat keine Adresse. Manche Browser geben ihrem eingebauten Assistenten die Werkzeuge der Seite, die gerade offen ist; der Vorschlag dazu heißt WebMCP, und in Chrome lässt er sich derzeit zum Testen einschalten. Auf unserer Startseite findet ein solcher Assistent vier Werkzeuge: eine Grafik in einem Satz gestalten, ein Beispiel wählen, eigene Angaben eintragen, neu anfangen.
Sie drücken dieselben Knöpfe wie ein Besucher, mit denselben Grenzen und denselben Statuszeilen. Man sieht die Grafik auf der Seite sich ändern, während der Assistent antwortet. In einem Browser ohne diese Schnittstelle passiert nichts, und die Seite funktioniert wie immer.
Was die Demo nicht ist
Unbegrenzt. Jeder Satz fragt ein Sprachmodell, und hinter ChatGPT kommen alle Aufrufe von denselben wenigen Adressen. Eine Grenze pro Besucher wäre dort eine Grenze für alle. Darum ist die Zahl der Sätze pro Tag für alle Chats zusammen begrenzt; ist sie erreicht, sagt die Antwort das. Das Zeichnen auf einem anderen Beispiel geht weiter, weil es nichts kostet. Auf der Startseite gilt eine eigene Grenze von fünf Sätzen pro Stunde und Besucher.
Ein Gedächtnis. Der Server merkt sich nichts zwischen zwei Aufrufen. Die Anordnung reist im Gespräch mit, als Teil der letzten Antwort, die der Assistent beim nächsten Satz zurückgibt. Ein neues Gespräch fängt bei der Standardanordnung an.
Die Arbeit mit eigenen Daten. Dafür gibt es den MCP Server mit eigenem Schlüssel: neun Werkzeuge, die einen Datensatz in alle Formate setzen, einen Import planen und starten, eine Anordnung unter einem Namen speichern und einen Bestand anschließen. Jedes nennt seinen Preis, bevor es läuft: Ein Satz kostet dort 20 ct, jede Grafik ist kostenlos. Der Server ist gebaut und getestet; bis er auf npm erscheint, schicken wir ihn auf Anfrage.
Die Demo ist dafür da, die Frage zu beantworten, die vor allem anderen kommt: Versteht das, was ich meine? Dafür reichen ein Satz und ein Sneaker.
Häufige Fragen
Wie richte ich die Demo in ChatGPT ein?
In den Einstellungen unter Apps → Erweitert den Entwicklermodus einschalten, eine App erstellen, die Adresse https://listing-shot.com/mcp/demo eintragen und als Authentifizierung „keine“ wählen. Den Entwicklermodus bietet OpenAI in den bezahlten Tarifen an. Danach im Chat: „Mach mir eine Grafik für den Sneaker: Foto rechts, Text links, Preis groß.“
Und in Claude?
In den Einstellungen unter Konnektoren einen eigenen Konnektor hinzufügen und dieselbe Adresse eintragen. Jeder andere Client, der MCP über HTTP spricht, nimmt sie ebenso.
Kann ich mein eigenes Produkt sehen?
Mit Ihren Worten, ja: Überschrift, Preis und bis zu drei Angaben wie Marke, Größe oder Material gehen mit. Foto, Badge und Absender bleiben die des Beispiels. Ihr eigenes Produkt samt Foto und den Farben Ihrer Website zeigt die Startseite, wenn Sie dort den Link zur Produktseite einfügen.
Was kostet die Chat-Demo?
Nichts, und sie ändert an keinem Konto etwas. Die Zahl der Sätze pro Tag ist für alle zusammen begrenzt; ist sie erreicht, sagt die Antwort das, und dieselbe Anordnung lässt sich weiter auf anderen Beispielen zeigen.
Was ist der Unterschied zum MCP Server mit Schlüssel?
Die Demo zeichnet Beispiele. Der MCP Server mit eigenem Schlüssel hat neun Werkzeuge und arbeitet mit Ihren Daten: einen Datensatz in alle Formate setzen, einen Import planen und starten, eine Anordnung unter einem Namen speichern, einen Bestand anschließen. Er ist gebaut und getestet; bis er auf npm erscheint, schicken wir ihn auf Anfrage.
Weiterlesen
Warum wir keinen Editor bauen Fast jedes Werkzeug für Bildautomatisierung hat einen Vorlagen-Editor, und fast jede Beschwerde darüber ist eine Editor-Beschwerde. Wir haben keinen. Was wir stattdessen gebaut haben: eine geprüfte Beschreibung der Anordnung, die man in einem Satz sagt, aus einem Screenshot liest und für jedes Format zugleich bekommt — für einen Schuh wie für ein Exposé. 
Ihr Produkt per Link, in Ihren Farben Auf der Startseite genügt jetzt der Link zu einer Produktseite: ListingShot liest Name, Marke, Preis und Foto aus den Daten, die ein Shop für Suchmaschinen veröffentlicht, die Farbe von der Website, und setzt das Produkt in die Mitte. Was dafür nötig war, welche drei Fehler wir dabei gefunden haben, und wo es nicht geht.