Mobbin MCP-Server

Ein inoffizieller MCP-Server, der eine Verbindung zu Mobbin herstellt – der Design-Inspirationsplattform mit über 600.000 Screens aus mehr als 1.100 Apps. Durchsuche Apps, durchstöbere Screenshots, erkunde User Flows und greife direkt aus Claude auf deine gespeicherten Sammlungen zu.

Mobbin verfügt über keine öffentliche API. Dieser Server wurde durch Reverse-Engineering ihrer internen Endpunkte erstellt.

Tools

Untersuchung einer spezifischen App

mobbin_search_screens und mobbin_search_flows indizieren Mobbin global – sie akzeptieren keinen app_id-Filter (die Upstream-API ignoriert App-spezifische Filter stillschweigend). Für Anfragen wie "Zeige mir das Onboarding von Notion" verwende den zweistufigen Pfad: mobbin_quick_search, um die id der App nachzuschlagen, dann mobbin_get_app_screens oder mobbin_get_app_flows mit dieser app_id. Die Detail-Tools lesen von Mobbins SSR-App-Detailseite, daher geben sie alles zurück, was Mobbin für diese App gespeichert hat.

Migration: mobbin_get_filters

Die Form ohne Argumente wurde entfernt. Die vollständige Taxonomie in einer Antwort überschritt das MCP-Token-Limit pro Tool-Ergebnis und zwang den Agenten, das Ergebnis aus einer temporären Datei zurückzulesen. Übergebe ein kind, um die Antwort auf eine Facette zu begrenzen:

mobbin_get_filters({ kind: "patterns" })                               // newline list of names
mobbin_get_filters({ kind: "patterns", include_definitions: true })    // bullets with descriptions
mobbin_get_filters({ kind: "patterns", include_counts: true })         // bullets with content counts

Related MCP server: figma-mcp-server

Einrichtung

Voraussetzungen

• Node.js 18+

• Ein Mobbin-Konto (kostenlos oder kostenpflichtig)

1. Authentifizierung

Option A: CLI-Befehl (empfohlen)

npx -y mobbin-mcp@latest auth

Dies führt dich durch das Kopieren deines Session-Cookies aus dem Browser:

1. Öffne mobbin.com und logge dich ein

2. Öffne die Browser-Konsole (Cmd+Option+J)

3. Führe copy(document.cookie) aus, um deine Cookies in die Zwischenablage zu kopieren

4. Füge sie in die CLI-Eingabeaufforderung ein

Deine Session wird unter ~/.mobbin-mcp/auth.json gespeichert und automatisch aktualisiert.

Was macht copy(document.cookie)? Es kopiert die Cookies deines Browsers für die aktuelle Seite (mobbin.com) in deine Zwischenablage. Dies beinhaltet deine Supabase-Session-Token, die der MCP-Server benötigt, um API-Anfragen in deinem Namen zu stellen. Die Cookies werden lokal auf deinem Rechner unter ~/.mobbin-mcp/auth.json gespeichert und niemals irgendwohin gesendet, außer an die API von Mobbin.

Option B: Umgebungsvariable (manuell)

1. Öffne mobbin.com in Chrome und logge dich ein

2. Öffne die Entwicklertools (Cmd+Option+I) → Tab Anwendung → Cookies → https://mobbin.com

3. Suche die Cookies mit den Namen sb-ujasntkfphywizsdaapi-auth-token.0 und sb-ujasntkfphywizsdaapi-auth-token.1

4. Kopiere den vollständigen Wert jedes Cookies

5. Kombiniere sie zu einem einzigen String:

sb-ujasntkfphywizsdaapi-auth-token.0=<value0>; sb-ujasntkfphywizsdaapi-auth-token.1=<value1>

6. Setze MOBBIN_AUTH_COOKIE auf diesen Wert (siehe Schritt 2 unten)

2. Zu Claude Code hinzufügen

claude mcp add mobbin -- npx -y mobbin-mcp

Wenn du den CLI-Authentifizierungsbefehl (Option A) verwendet hast, ist keine zusätzliche Konfiguration erforderlich – der Server liest automatisch aus ~/.mobbin-mcp/auth.json.

Wenn du die Umgebungsvariable (Option B) verwendest, übergebe sie beim Hinzufügen:

claude mcp add mobbin -e MOBBIN_AUTH_COOKIE="sb-ujasntkfphywizsdaapi-auth-token.0=...; sb-ujasntkfphywizsdaapi-auth-token.1=..." -- npx -y mobbin-mcp

Alternative: Claude Desktop

Füge dies zu deiner Claude Desktop-Konfiguration hinzu (~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "mobbin": {
      "command": "npx",
      "args": ["-y", "mobbin-mcp"]
    }
  }
}

Beispiel-Prompts

• "Ich entwerfe einen Checkout-Flow für eine Essensliefer-App – zeige mir, wie Top-Apps wie DoorDash und Uber Eats das handhaben"

• "Rufe den Duolingo-Onboarding-Flow auf und gehe mit mir die Design-Entscheidungen jedes Screens durch"

• "Finde Login-Screens, die Bottom Sheets verwenden, und extrahiere die Farbpalette – ich brauche Inspiration für unser Auth-Redesign"

• "Vergleiche, wie Fintech-Apps mit Einstellungs-Screens umgehen – zeige mir Beispiele von Robinhood, Cash App und Venmo"

• "Suche nach Screens mit kartenbasierten Layouts in Reise-Apps und zeige mir dann den besten im Detail"

• "Welche UI-Muster sind aktuell auf iOS im Trend? Zeige mir die Top-Screens"

Funktionsweise

Mobbin ist eine Next.js-App, die auf Supabase basiert. Dieser Server ruft Mobbins interne API-Routen (/api/content/search-apps, /api/content/search-screens usw.) unter Verwendung deines Session-Cookies zur Authentifizierung auf. Token werden automatisch über den /auth/v1/token-Endpunkt von Supabase aktualisiert, bevor sie ablaufen, und bei Verwendung der CLI-Authentifizierungsmethode wieder in ~/.mobbin-mcp/auth.json gespeichert.

Screen-Bilder werden über das Bytescale CDN von Mobbin bereitgestellt. Das Tool mobbin_get_screen_detail konvertiert automatisch Supabase-Speicher-URLs aus Suchergebnissen in CDN-URLs, ruft das Bild ab und gibt es als Base64-Inhalt zurück, den das Modell sehen und analysieren kann. Die optionale Farbextraktion verwendet sharp, um dominante Hex-Farben aus dem Screenshot zurückzugeben.

Projektstruktur

src/
  index.ts              # MCP server entry point, CLI routing, and tool registration
  constants.ts          # API URLs, keys, and config
  types.ts              # TypeScript interfaces for all Mobbin data models
  cli/
    auth.ts             # Interactive CLI authentication flow
  services/
    auth.ts             # Token parsing, expiry checks, and auto-refresh
    api-client.ts       # HTTP client for all Mobbin API endpoints
  utils/
    auth-store.ts       # Persistent session storage (~/.mobbin-mcp/auth.json)
    formatting.ts       # Markdown formatters for tool responses

Lizenz

ISC