Ein KI-Tool verbinden

Ein KI-Tool verbinden

Wenn MCP für diese AppScreenshots-Bereitstellung aktiviert ist, verbinde ein kompatibles KI-Tool mit:

https://appscreenshots.net/api/mcp

Wähle HTTP/Streamable HTTP und OAuth. Melde dich im Browser mit deinem AppScreenshots-Konto an, wähle die Projekte und Assets, die das Tool nutzen darf, und entscheide, ob es Projekte erstellen darf. Datenbankzugriff oder ein API-Key sind nicht erforderlich.

Verbinde deinen Client

Die folgenden Befehle registrieren den Endpoint bei jedem Client. Schließe nach dem Verbinden die Browser-Anmeldung ab, sobald der Client sie anzeigt.

claude mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcp

codex mcp add appscreenshots --url https://appscreenshots.net/api/mcp
codex mcp login appscreenshots

gemini mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcp

{
  "mcpServers": {
    "appscreenshots": {
      "url": "https://appscreenshots.net/api/mcp"
    }
  }
}

{
  "mcp": {
    "servers": {
      "appscreenshots": {
        "type": "http",
        "url": "https://appscreenshots.net/api/mcp",
        "oauth": {
          "type": "authorization_code",
          "scope": "projects:read projects:write assets:read offline_access"
        }
      }
    }
  }
}

Verbindungskit

Das öffentliche Repository appscreenshots-mcp liefert fertige Konfigurationsdateien für alle Clients oben, ein optionales Agent-Skill, das den Screenshot-Workflow vermittelt, und einen Doctor-Befehl, der den Server vom Terminal aus prüft:

git clone https://github.com/horace68/appscreenshots-mcp.git
node bin/appscreenshots.mjs config claude    # gibt ein Konfigurations-Snippet aus
node bin/appscreenshots.mjs install-skill claude
node bin/appscreenshots.mjs doctor

Der Helfer gibt nur Konfiguration aus und installiert das Skill. Er ist kein lokaler stdio-Server — nutze die native Remote-Verbindung deines Clients.

Tools

Die folgenden neun Tools werden über Streamable HTTP bereitgestellt. Clients können den Namen Präfixe voranstellen. Für Eingabe-Schemata und Kontoberechtigungen ist der gehostete Server die Quelle der Wahrheit.

Bearbeitungsoperationen

update_project nimmt eine diskriminierte Liste von Operationen entgegen:

• set_name — Projekt umbenennen
• add_frame / remove_frame / reorder_frames — Frames verwalten
• upsert_element — Element einfügen oder ersetzen; erfordert vollständige Geometrie und erhält bei gleichem Typ weggelassene Felder
• patch_element — Teilbearbeitung per Element-id; ein Typwechsel ist nicht erlaubt
• remove_element — Element löschen
• set_background — Hintergrund eines Frames setzen; geteilte Hintergründe werden pro Frame materialisiert
• set_locales — 1–20 Sprachen und die Standardsprache festlegen
• set_canvas — Canvas-Größe (100–5000) und Modus (separate oder continuous)

Elemente tragen Typografie, Device-Mockup-Felder, Bild-assetId-Referenzen, Formen, Icons, rotation und stackOrder. Bilder werden ausschließlich über autorisierte assetId-Werte referenziert — nie per URL oder lokalem Pfad; bestehende Bildreferenzen bleiben serverseitig erhalten, sende sie also nicht zurück.

Verwende für jede logische Schreiboperation einen frischen Idempotenz-Schlüssel; verwende ihn nur für einen identischen Wiederholungsversuch erneut. Lese nach einem Revisionskonflikt zuerst die neueste Version ein. Nutze niemals SQL, HTML oder Skripte als Bearbeitungsanweisung.

Fehler

Fehler geben einen JSON-Körper {code, message} mit isError: true zurück:

Autorisierung und Limits

Der Server nutzt OAuth 2.1 mit PKCE und Browser-Anmeldung:

• Scopes: projects:read, projects:write (nur wenn du Erstellen oder Bearbeiten erlaubst), assets:read und offline_access.
• Access-Tokens gelten eine Stunde, Refresh-Tokens 30 Tage.
• Access-Tokens erfordern einen aktiven Grant: Widerrufst du die Verbindung, funktionieren bestehende Tokens sofort nicht mehr.
• Rate-Limits: 60 MCP-Aufrufe pro Minute im Free-Plan, 120 pro Minute in Bezahlplänen. Bei Überschreitung kommt HTTP 429 mit Retry-After: 60.
• Request-Bodies sind auf 2 MB begrenzt; Projekte auf 20 Frames und 100 Elemente pro Frame.

Deine Plan-Berechtigungen gelten unverändert: Einschränkungen für Projekte, Bezahl-Vorlagen, benutzerdefinierte Fonts und Batch-Export bleiben bestehen, und es gibt keine Gebühren für gehostete KI — Design und Texte liefert die verbundene KI.

Beginne mit deinen Screenshots

Lade die Original-Screenshots zuerst im Web-Editor hoch. Autorisiere dann dieses Projekt oder wähle auf der Zustimmungsseite einzelne Assets. MCP stellt keine Binär-Upload-Tools bereit; eine im Chat angehängte Datei ist für diesen Dienst nicht automatisch erreichbar.

Probiere diesen Prompt:

Die verbundene KI liefert Design und Texte; MCP speichert editierbare Projekte. get_project_preview gibt den Editor-Link und Prüfanweisungen zurück, keine Bilddaten. Ein Agent mit Browser-Tools kann den Editor öffnen, die Screenshots prüfen, das Design per MCP korrigieren und sicher neu laden, um die neueste Version zu sehen. Die Browser-Anmeldung ist getrennt vom MCP-OAuth, und ungespeicherte Änderungen müssen vor dem Neuladen erhalten bleiben. Vorschau und Export machst du im Web-Editor.

Zugriff verwalten

Öffne Settings → Connected AI tools, um ausgewählte Projekte/Assets zu ändern oder eine Verbindung zu widerrufen. Das Tool kann nicht auf nicht ausgewählte Projekte zugreifen. Bearbeiten Website und KI-Tool dasselbe Projekt gleichzeitig, lade vor dem Speichern konfliktträchtiger Änderungen die neueste Version.

Für die Browser-Prüfung sind weder Browserless noch eine Render-Warteschlange im Hintergrund nötig. Dieses MCP stellt Projekt-Tools und Browser-Prüfanleitungen bereit, kein Cloud-Rendering. Ohne Browser-/Bild-Tools sollte der Agent den Editor-Link zurückgeben und die visuelle Prüfung als ausstehend melden, statt eine Verifikation zu behaupten.

Fehlerbehebung

Client-spezifische Hinweise und die aktuelle Verifikationsmatrix findest du im Fehlerbehebungsguide des Verbindungskits.