mcp-mockuuups

MCP-Server für Mockuuups Studio — durchsuche ~5.300 Geräte- und Druck-Mockups und rendere dann einen Screenshot oder dein eigenes Bild hinein.

Ein Design — der WTDIB Berliner Stadtführer — gerendert in vier Mockups aus einem einzigen Fotoshooting, sodass der Raum gleich bleibt, während sich das Gerät ändert. Zwei Tool-Aufrufe, kein Bild-Hosting irgendwo.

Warum es das gibt

Mockuuups bieten ihren eigenen gehosteten MCP-Server unter https://mcp.mockuuups.studio/mcp an. Er stellt ein einziges generate_mockup-Tool bereit, das eine Mockup-ID benötigt, die du bereits kennst, und ein Bild, das du bereits irgendwo öffentlich gehostet hast.

Dieser Server kapselt stattdessen die zugrunde liegende REST-API und schließt die beiden Lücken, die den gehosteten Server in der Praxis umständlich machten:

• Du kannst suchen. Der Upstream-Katalogendpunkt akzeptiert überhaupt keine Suchparameter — q, type, family und tag werden stillschweigend ignoriert, und jede Anfrage liefert dieselbe ungefilterte Seite. Der gesamte Katalog wird einmal abgerufen und lokal durchsucht, sodass „ein Tablet auf einem Schreibtisch“ oder „Poster“ tatsächlich etwas findet.

• Du kannst hochladen. Mockuuups rendert nur von einer URL. Übergib diesem Server rohe Bildbytes, und er legt sie unter einem kurzlebigen, unerratbaren Link ab, den der Renderer abruft — so braucht ein lokales Design keinen Bucket, kein CDN und kein Hosting.

Ein lokal vorliegendes Bild rendern

Mockuuups rendert ausschließlich von einer URL. Übergib image_base64, und dieser Server legt die Bytes unter einem kurzlebigen, unerratbaren Link ab, lässt den Renderer sie abrufen und sie anschließend verfallen — kein Bucket, kein CDN, kein Hosting-Konto.

Das iPad-Rendering oben, von der Festplatte hochgeladen und in ein gerahmtes A3-Poster gerendert.

Related MCP server: Store Screenshot Generator MCP

Werkzeuge

Ein Design geräteübergreifend rendern

Szenen, die zusammen aufgenommen wurden, teilen sich ein Tag. Um also einen konsistenten Look über Geräte hinweg zu erhalten, sucht man sich eines heraus und filtert dann nach dessen Tag:

search_mockups(query="ipad", tag="update-august-2024-meeting-room")
create_mockups(
    mockup_ids=["Zkn1GMTfiAFX5ZOn", "Zkn2DsTfiAFX5ZPD", "Zkn15MTfiAFX5ZO_"],
    screenshot_url="https://wtdib.cdit-works.de/",
)

Konfiguration

Siehe .env.example. Die beiden, die wichtig sind:

• MOCKUUUPS_API_KEY — ein Entwicklerschlüssel von mockuuups.studio/developers.

• PUBLIC_BASE_URL — die öffentliche Basis-URL dieses Servers. Uploads benötigen sie, weil der Renderer von Mockuuups das abgelegte Bild über das öffentliche Internet zurückholt. Screenshot- und Bild-URL-Renderings funktionieren ohne sie.

Wissenswerte Planlimits

Die API rechnet in Credits ab: ein Rendering = 1 Credit, +1 für einen Website-Screenshot, +1 für Hi-Res. Nur erfolgreiche Renderings werden berechnet.

Zwei Verhaltensweisen werden dir zum Verhängnis, wenn du sie nicht kennst:

• Wird size weggelassen, bedeutet das Hi-Res, was auf jedem Plan ohne diese Option hart mit feature-not-available fehlschlägt. Dieser Server sendet size immer explizit, begrenzt durch MOCKUUUPS_MAX_SIZE (Standard 1000, die Trial-Obergrenze). Erhöhe ihn, wenn das Konto über die hires-Funktion verfügt.

• Bei Plänen mit cdn-temporary verfallen Zustell-Links nach ~24 Stunden. Lade alles herunter, was aufbewahrenswert ist. account_status meldet dies.

Entwicklung

uv sync
uv run pytest
uv run mcp-mockuuups          # stdio
TRANSPORT=http uv run mcp-mockuuups   # streamable-http on /mcp

Lizenz

MIT