Mobbin MCP Server

Mobbin MCP Server

Enables users to search and browse Mobbin's extensive library of mobile app designs, screenshots, and user flows directly from Claude. It allows for detailed exploration of UI patterns, elements, and personal collections using reverse-engineered API access.

Category
Visit Server

README

Mobbin MCP Server

An unofficial MCP server that connects to Mobbin — the design inspiration platform with 600k+ screens from 1,100+ apps. Search apps, browse screenshots, explore user flows, and access your saved collections directly from Claude.

Mobbin has no public API. This server was built by reverse-engineering their internal endpoints.

Tools

Tool Description
mobbin_search_apps Search and browse apps by category and platform
mobbin_search_screens Search screens by UI patterns, elements, or text content
mobbin_search_flows Search user flows by action type (e.g., onboarding, checkout)
mobbin_quick_search Fast autocomplete search for apps by name
mobbin_popular_apps Get popular apps grouped by category
mobbin_list_collections List your saved collections
mobbin_get_screen_detail Fetch a full screenshot image for a specific screen, with optional dominant color extraction
mobbin_get_filters Get all available filter values (categories, patterns, elements, actions)

Setup

Prerequisites

  • Node.js 18+
  • A Mobbin account (free or paid)

1. Authenticate

Option A: CLI command (recommended)

npx -y mobbin-mcp auth

This will walk you through copying your session cookie from the browser:

  1. Open mobbin.com and log in
  2. Open the browser console (Cmd+Option+J)
  3. Run copy(document.cookie) to copy your cookies to clipboard
  4. Paste into the CLI prompt

Your session is saved to ~/.mobbin-mcp/auth.json and automatically refreshed.

What does copy(document.cookie) do? It copies your browser's cookies for the current site (mobbin.com) to your clipboard. This includes your Supabase session tokens, which the MCP server needs to make API requests on your behalf. The cookies are stored locally on your machine at ~/.mobbin-mcp/auth.json and are never sent anywhere except to Mobbin's API.

Option B: Environment variable (manual)

  1. Open mobbin.com in Chrome and log in
  2. Open DevTools (Cmd+Option+I) → Application tab → Cookieshttps://mobbin.com
  3. Find the cookies named sb-ujasntkfphywizsdaapi-auth-token.0 and sb-ujasntkfphywizsdaapi-auth-token.1
  4. Copy the full value of each cookie
  5. Combine them into a single string:
sb-ujasntkfphywizsdaapi-auth-token.0=<value0>; sb-ujasntkfphywizsdaapi-auth-token.1=<value1>
  1. Set MOBBIN_AUTH_COOKIE to that value (see step 2 below)

2. Add to Claude Code

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

If you used the CLI auth command (Option A), no additional config is needed — the server reads from ~/.mobbin-mcp/auth.json automatically.

If using the environment variable (Option B), pass it when adding:

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

Add to your Claude Desktop config (~/Library/Application Support/Claude/claude_desktop_config.json):

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

Example prompts

  • "I'm designing a checkout flow for a food delivery app — show me how top apps like DoorDash and Uber Eats handle it"
  • "Pull up the Duolingo onboarding flow and walk me through each screen's design decisions"
  • "Find login screens that use bottom sheets and extract the color palette — I need inspiration for our auth redesign"
  • "Compare how fintech apps handle settings screens — show me examples from Robinhood, Cash App, and Venmo"
  • "Search for screens with card-based layouts in travel apps, then show me the best one in detail"
  • "What UI patterns are trending right now on iOS? Show me the top screens"

How it works

Mobbin is a Next.js app backed by Supabase. This server calls Mobbin's internal API routes (/api/content/search-apps, /api/content/search-screens, etc.) using your session cookie for authentication. Tokens are automatically refreshed via Supabase's /auth/v1/token endpoint before they expire, and persisted back to ~/.mobbin-mcp/auth.json when using the CLI auth method.

Screen images are served through Mobbin's Bytescale CDN. The mobbin_get_screen_detail tool automatically converts Supabase storage URLs from search results into CDN URLs, fetches the image, and returns it as base64 content that the model can see and analyze. Optional color extraction uses sharp to return dominant hex colors from the screenshot.

Project structure

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

License

ISC

Recommended Servers

playwright-mcp

playwright-mcp

A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.

Official
Featured
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.

Official
Featured
Local
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.

Official
Featured
Local
TypeScript
VeyraX MCP

VeyraX MCP

Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.

Official
Featured
Local
graphlit-mcp-server

graphlit-mcp-server

The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.

Official
Featured
TypeScript
Kagi MCP Server

Kagi MCP Server

An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.

Official
Featured
Python
E2B

E2B

Using MCP to run code via e2b.

Official
Featured
Neon Database

Neon Database

MCP server for interacting with Neon Management API and databases

Official
Featured
Exa Search

Exa Search

A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.

Official
Featured
Qdrant Server

Qdrant Server

This repository is an example of how to create a MCP server for Qdrant, a vector search engine.

Official
Featured