Mobbin MCP Server

Connect any AI agent to Mobbin — the world's largest library of real mobile & web app UI/UX designs.

Research design patterns, search 400,000+ screens, explore user flows, and get AI-powered design guidance — all from real shipped products.

Works with Claude Desktop, Cursor, VS Code, Claude Code, Lovable, Replit, Windsurf, and any MCP-compatible tool.

Features

• 9 MCP Tools — search apps, screens, flows + deep-dive analysis + AI design guidance
• Structured Metadata — UX patterns, UI elements, screen types, categories
• 3 Platforms — iOS, Android, Web
• Dual Transport — stdio (local) + HTTP (remote) for universal compatibility
• Research-First Methodology — SKILL.md + 7 craft reference guides
• Anti-AI-Slop — built-in guidance to avoid generic AI designs

---

Quick Start

1. Clone & Install

git clone https://github.com/rayopavri/mobbinMCP.git
cd mobbin-mcp
npm install
npm run build

2. Login to Mobbin (one-time)

npm run login

A browser opens — log in with your Mobbin account. Cookies are saved locally.

3. Connect to your AI tool

Choose your setup below ↓

---

Setup by Tool

Claude Desktop

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "mobbin": {
      "command": "node",
      "args": ["/path/to/mobbin-mcp/build/index.js"]
    }
  }
}

Restart Claude Desktop.

---

Cursor

Add to .cursor/mcp.json in your project:

{
  "mcpServers": {
    "mobbin": {
      "command": "node",
      "args": ["/path/to/mobbin-mcp/build/index.js"]
    }
  }
}

---

VS Code (GitHub Copilot)

Add to .vscode/settings.json:

{
  "mcp.servers": {
    "mobbin": {
      "command": "node",
      "args": ["/path/to/mobbin-mcp/build/index.js"]
    }
  }
}

---

Claude Code

claude mcp add mobbin -- node /path/to/mobbin-mcp/build/index.js

---

Lovable, Replit, Windsurf (Remote / HTTP)

These tools require an HTTP server. Three steps:

Step 1: Generate a bearer token:

npm run token

Step 2: Deploy the server (see Deployment below)

Step 3: Connect in your tool:

Lovable:

Settings → Connectors → New MCP server
Name: Mobbin
URL: https://your-server.fly.dev/mcp
Auth: Bearer <your-token>

Replit:

Integrations → MCP Servers → Add MCP server
Name: Mobbin
URL: https://your-server.fly.dev/mcp
Header: Authorization → Bearer <your-token>

Windsurf / Others:

{
  "mcpServers": {
    "mobbin": {
      "url": "https://your-server.fly.dev/mcp",
      "headers": {
        "Authorization": "Bearer <your-token>"
      }
    }
  }
}

---

Deployment

For remote clients (Lovable, Replit, etc.), deploy the HTTP server:

Option A: Fly.io (Recommended — free tier available)

# Install Fly CLI
brew install flyctl

# Login
fly auth login

# Deploy
fly launch        # first time
fly deploy        # updates

# Upload your cookies
fly ssh console
# then copy cookies.json into /app/users/<hash>/

Option B: Docker (Self-hosted)

docker compose up -d

Your server runs at http://localhost:3000/mcp.

Option C: Run locally with ngrok

# Start HTTP server
npm run start:http

# In another terminal, expose it
ngrok http 3000

Use the ngrok URL in Lovable/Replit.

---

Tools

Tool	Description
search_apps	Find apps by name or keyword
search_screens	Find screens by UI pattern (onboarding, paywall, etc.)
search_flows	Find user flows (checkout, sign up, etc.)
get_app_screens	All screens for a specific app, by category
get_app_flows	All flows for a specific app with step counts
get_screen_detail	Deep-dive: UX patterns, UI elements, similar screens
get_flow_detail	Step-by-step journey breakdown
get_design_guidance	AI analysis: must_do, consider, avoid, examples
take_screenshot	Screenshot any Mobbin page as PNG

Skill System

Includes a complete design research methodology:

File	Content
mobbin.md	Full SKILL.md — discovery → research → analyze → design
references/typography.md	Scale, letter-spacing, pairing, responsive type
references/color.md	Palette structure, dark mode, tokens
references/motion.md	Timing, easing, micro-interactions
references/icons.md	Sizing, optical corrections, libraries
references/anti-ai-slop.md	Avoiding generic AI designs
references/craft-details.md	Focus states, forms, touch targets
references/example-workflow.md	Full design walkthrough example

Requirements

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

How It Works

Mobbin doesn't have a public API, so this server uses Playwright to automate an authenticated browser session. Your session cookies are stored locally in cookies.json (gitignored, never shared).

Two transport modes:

• stdio (default) — for local tools (Claude Desktop, Cursor, VS Code, Claude Code)
• HTTP (--http flag) — for remote tools (Lovable, Replit, Windsurf)

Scripts

Command	Description
npm run build	Compile TypeScript
npm run start	Start in stdio mode
npm run start:http	Start HTTP server on port 3000
npm run login	Login to Mobbin (saves cookies)
npm run token	Generate a bearer token for HTTP mode

License

MIT