Anmelden
Loslegen

Mockups mit einer KI bauen (MCP)

MCP (Model Context Protocol) ist der Standard, über den KI-Programme Werkzeuge benutzen. Verbindest du Showoff mit deiner KI, kann sie die Vorlagen ansehen, Projekte anlegen, Screenshots hochladen und aufs Display legen, Hintergrund und Text setzen und eine Vorschau ansehen, alles in deiner Organisation.

Die KI arbeitet dabei nicht frei. Jede Änderung prüft vorher die Regie auf Geräte, die sich berühren, unnatürliche Winkel, Text über einem Gerät, abgeschnittene Screenshots, doppelte Statusleisten und schwache Kontraste. Was einen Fehler einführt, wird nicht gespeichert, und die KI bekommt die Korrektur gleich mit.

Einrichten#

  1. Die Adresse des Servers in deiner KI eintragen. Mehr braucht es nicht, auch keinen Schlüssel.
  2. Beim ersten Verbinden öffnet sich der Browser. Dort meldest du dich bei Showoff an, wählst die Organisation und stimmst zu.
  3. In der KI um ein Mockup bitten, zum Beispiel „Bau mir ein App-Store-Bild mit zwei iPhones und diesem Screenshot.“
https://showoff.dev/mcp

Die Adresse des Servers

Clients#

In Claude oder Claude Desktop die Einstellungen öffnen, unter Konnektoren einen eigenen Konnektor hinzufügen, die Adresse einfügen und auf Verbinden klicken.

Ohne Browser mit API-Schlüssel#

Für Skripte, CI oder Clients ohne Anmeldung im Browser gibt es API-Schlüssel. Du legst sie in den Einstellungen im Bereich MCP an, jeder steht genau einmal auf dem Bildschirm. Der Schlüssel geht als Kopfzeile mit oder, wenn ein Client nur eine Adresse kennt, als letztes Stück der Adresse.

claude mcp add --transport http showoff https://showoff.dev/mcp --header "Authorization: Bearer <API-SCHLÜSSEL>"

Was die KI kann#

Werkzeug Wofür
list_templates, list_compositions Vorlagen und bewährte Anordnungen ansehen.
create_project Ein Projekt anlegen, mit Geräten, Anordnung und Screenshots in einem Schritt.
upload_media Screenshots per Adresse hochladen.
get_upload_link Screenshots von der eigenen Platte hochladen, per Link ohne Umweg über den Chat.
edit_scene Geräte, Kamera, Hintergrund, Text und Bewegung ändern.
render_preview Eine schnelle Vorschau des Bildes ansehen und kritisch prüfen.
edit_scene mit match_image Eine Anordnung aus einem Bild exakt nachbauen, samt Kamera und Perspektive.
export_image Das fertige Bild rendern und als Datei mit Link übergeben, ohne Umweg über den Editor.
review_scene, finish Die Regieprüfung laufen lassen und das fertige Projekt übergeben.
create_launch_video, update_launch_video, get_launch_video Ein Launch-Video im Hochformat, frei aus Bausteinen gebaut (Held, Feature, MacBook, Chat mit Claude, Duo, Schlusskarte) und auf deinen Song geschnitten. Tempo, Takt und Drop werden erkannt, das Video rendert danach in deinem Browser.

Hinweis

Ist das Projekt im Editor offen, siehst du der KI live zu. Das Ergebnis exportierst du wie jedes andere Projekt im Editor.

Sicherheit#

Eine Verbindung gilt für dich in einer Organisation und kann nichts, was du dort nicht auch kannst. In den Einstellungen im Bereich MCP siehst du alle verbundenen Apps und trennst sie mit einem Klick, das wirkt sofort. Wer eine Organisation verlässt, verliert dort auch den Zugang der KI.

Achtung

Stimm im Browser nur zu, wenn du die Verbindung eben selbst begonnen hast. Ein API-Schlüssel ist wie ein Passwort, teile ihn nicht und leg ihn nicht in ein öffentliches Repository.

Verwandte Themen