Mobbin MCP: Real Design Examples for AI Agents

Ask an AI agent to build a paywall and you get the same screen every developer gets: a centered card, three feature bullets, a gradient button. It is not wrong, exactly. It is just the statistical average of every paywall in the training data — and it converts like one. Meanwhile, the teams at Duolingo, Headspace, and Quizlet have spent years A/B testing exactly where the plan toggle goes, how to frame the free trial timeline, and what the close button should look like. That knowledge exists. Your agent just cannot see it.

The Mobbin MCP server changes that. It connects your AI agent to Mobbin’s library of more than 620,000 screens and 130,000 user flows captured from shipped iOS and web products. Instead of hallucinating a “typical” onboarding screen, the agent searches for real ones, looks at the actual screenshots, and builds from evidence. This article covers the official Mobbin MCP in depth, then surveys the other MCP servers that solve the same problem: giving agents access to design examples.

What You’ll Walk Away With

• Setup for the official Mobbin MCP server in Cursor, Claude Code, and Codex
• A reference for its three tools and the query patterns that actually return good results
• Copy-paste prompts for research-before-building, competitor pattern audits, and flow-level UX research
• A map of the alternatives — Refero MCP, community design-inspiration servers, and the DIY browser approach — and when each one fits

What Mobbin MCP Is

Mobbin has been the reference library for product designers since 2018: hand-curated screenshots of real apps, tagged by pattern, flow, and app category, used by over two million designers. The MCP server, launched in 2026, exposes that library to AI agents over the Model Context Protocol.

The practical facts:

Endpoint	https://api.mobbin.com/mcp (remote, Streamable HTTP)
Authentication	OAuth — a browser window opens on first connect; no API key to manage
Plan requirement	Any paid Mobbin plan (Pro, Team, Enterprise). Free accounts cannot connect
Rate limit	60 requests per 60 seconds per user
Platforms searchable	iOS and web (Android exists on the Mobbin site but is not yet a platform value in the MCP tools)
Supported clients	Claude Code, Claude Desktop/Web, Cursor, Codex, ChatGPT, v0, Lovable, Devin, Replit, Antigravity, and any client with Streamable HTTP + OAuth support

Because it is a remote server, there is nothing to install or keep running. The trade-off is that it follows your Mobbin account: MCP access is a paid-plan feature, enforced at the OAuth layer.

Note

In clients that implement the MCP Apps specification (ChatGPT, Claude Desktop and Web, the Codex app), search results also render as an interactive visual gallery inside the conversation. In terminal clients like Claude Code the gallery does not render — but the agent still receives the screenshots and metadata, which is what matters for coding work.

Setup

Cursor

Open Settings > Tools & MCPs and add the server:

{
  "mcpServers": {
    "Mobbin": {
      "type": "http",
      "url": "https://api.mobbin.com/mcp"
    }
  }
}

Click Connect on the Mobbin entry. A browser window opens — sign in with your Mobbin account to authorize. Mobbin’s docs also publish a one-click cursor:// deeplink installer if you prefer not to edit config.

Claude Code

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

Then run /mcp, select mobbin, and choose Authenticate. Your browser opens for the OAuth sign-in. The --scope user flag makes the server available in every project, which fits a reference library better than per-repo config.

Codex

codex mcp add mobbin --url https://api.mobbin.com/mcp
codex mcp login mobbin

The login subcommand runs the OAuth flow. The equivalent ~/.codex/config.toml entry:

[mcp_servers.mobbin]
url = "https://api.mobbin.com/mcp"

To verify, ask the agent something that forces a tool call: “Search Mobbin for iOS onboarding screens with progress indicators and show me what you find.” If the connection works, you get real app names back, not generic advice.

The Three Tools

The server is deliberately small — three search tools, no write operations:

Tool	What It Searches	Key Parameters
search_screens	Individual UI screens	query, platform (ios/web), limit (1—30, default 20), mode (deep/standard)
search_flows	Multi-step user journeys (onboarding, checkout)	query, platform, limit (1—10, default 5), page
search_sections	Website sections (pricing, hero, footer)	query, limit (1—30), page

Details that matter in practice:

• mode: "deep" (the default for screens) runs an AI-powered pipeline that interprets the intent of your query and scores results for relevance. mode: "standard" is a faster literal search. Deep is noticeably better for nuanced queries like “empty state that converts the user to creating their first project”; standard is fine for “login screen.”
• Flows return evenly-spaced preview images across the journey plus per-screen previews, so the agent sees the progression, not just the first screen.
• search_sections has no platform parameter — sections are a web-only concept (hero, pricing table, footer).
• Images arrive inline as WebP by default; a image_format: "jpg" option exists for clients that cannot render WebP.

What Results Look Like

Each result pairs an inline screenshot with structured metadata. A real search_screens response for “paywall with annual and monthly plan toggle and free trial button” returns entries like:

{
  "id": "1c14274b-c9e0-4c46-bdb5-018567fa5f49",
  "image_url": "https://mobbin.com/api/mcp/short/GMkMMbMT",
  "mobbin_url": "https://mobbin.com/screens/1c14274b-...",
  "app_name": "Quizlet",
  "platform": "ios"
}

— alongside the actual screenshot of Quizlet’s paywall: the “Best Value” badge on the annual plan, the trial timeline (“Today: get instant access / 1 June: trial reminder / 4 June: trial ends”), the single yellow CTA. The mobbin_url is the canonical link, so the agent can cite every screen it references and you can open it in Mobbin to browse the surrounding flow.

That inline image is the point. The agent does not read a text description of Quizlet’s paywall — it looks at the pixels and extracts the layout decisions itself.

Writing Queries That Work

Mobbin’s tool descriptions encode specific guidance, and following it is the difference between reference-quality results and noise:

Describe one screen or one journey per query. “Checkout with payment method selection” works. “Checkout and onboarding and settings” does not — search separately.

Be concretely visual. Name the UI elements and how they relate: “login screen with biometric authentication,” “checkout page with promo code field and Apple Pay button.” Detail helps the deep-search pipeline.

Name an app to filter to it. “Duolingo onboarding” restricts results to Duolingo. This is the fastest way to study one product’s approach.

Avoid what does not work: negations (“without ads”), vague style words (“modern,” “clean”), and disconnected keyword lists. And keep the platform out of the query text — that is what the platform parameter is for.

Workflows

Research Before Building

The highest-leverage pattern: make the agent look at prior art before it writes a line of UI code. This front-loads the design decisions that are usually retrofitted after the first ugly draft.

Tip

Copy-paste prompt for research-first building:

“Before writing any code: search Mobbin for iOS paywall screens with annual/monthly plan toggles and free trials (limit 6). Study the screenshots and write down the recurring decisions — plan card layout, badge placement, trial timeline framing, CTA copy. Then implement our paywall in src/components/Paywall.tsx following those conventions, and list which reference screens informed each decision with their Mobbin URLs.”

Flow-Level UX Research

search_flows answers sequencing questions screenshots cannot: how many steps, in what order, where the permission prompts sit.

Tip

Copy-paste prompt for flow research:

“Search Mobbin flows for ‘onboarding with personalization questions before account creation’ on iOS, limit 3. For each flow, map the step sequence and note where signup actually happens. Then propose an onboarding order for our app that defers signup as late as these apps do.”

Competitor Pattern Audits

Because results carry app_name, the agent can compare specific products’ answers to the same problem.

Tip

Copy-paste prompt for a pattern audit:

“Search Mobbin screens for ‘Airbnb search results with map’ and ‘Booking.com search results with map’ on web. Compare the two side by side: layout split, filter placement, card density, map interaction affordances. Summarize which decisions we should adopt for our listings page and why.”

Landing Pages with search_sections

For marketing sites, section-level search beats screen-level: you assemble a page from best-of-breed sections.

Tip

Copy-paste prompt for a landing page:

“Search Mobbin sections for ‘pricing section with three-tier comparison table and highlighted recommended plan’, limit 5. Study the structure of the strongest examples, then rebuild our pricing section in src/components/PricingSection.astro following that structure with our real plans and copy.”

Pairing with shadcn/ui MCP

Mobbin answers what to build; a component registry answers what to build it with. Together they close the loop: reference screenshot in, production component out.

Tip

Copy-paste prompt for reference-to-component:

“Search Mobbin for web settings pages with grouped sections and inline toggles (limit 4). Pick the clearest layout. Then use the shadcn MCP server to find the matching components — Switch, Separator, Card — and implement the settings page with them, keeping the grouping and hierarchy from the reference.”

Managing Context Cost

Every screen result is an image in your agent’s context window, and images are expensive. The default limit of 20 screens can eat a meaningful slice of a session in one call. Practical defaults:

• Ask for 3—8 screens in coding sessions. That is enough signal to extract a pattern; ask for more only when auditing broadly.
• Use exclude_screen_ids to paginate past screens you have already seen instead of re-fetching them.
• Do research early in a session, extract the decisions into text (a design-notes file or a plan), and let the screenshots fall out of context. The distilled conventions are what you need for the build, not the pixels.

The 60 requests/minute rate limit is generous for interactive use; you will hit context limits long before you hit it. For broader token strategy, see Reducing MCP Token Cost.

Caution

Mobbin screens are copyrighted UI from real products, provided as references. Using them to study patterns and conventions is the intended use. Instructing an agent to clone a specific app’s screen pixel-for-pixel is a different thing legally and ethically — extract the pattern, not the identity.

Similar Solutions: Design Examples over MCP

Mobbin was not first to this idea and is not alone. The field splits into three tiers: curated libraries with official MCP servers, community servers that scrape or search-proxy the galleries, and the DIY approach of screenshotting live products yourself.

Refero MCP — the Direct Competitor

Refero is the other curated screenshot library with an official MCP server, and the comparison is close:

	Mobbin MCP	Refero MCP
Library	620,000+ screens, 130,000+ flows	135,000+ screens, 10,000+ flows
Platforms	iOS + web	Web + iOS (web-first library)
Endpoint	https://api.mobbin.com/mcp	https://api.refero.design/mcp
Auth	OAuth only	Bearer token or OAuth
Plan	Any paid plan	Refero Pro
Usage cap	60 requests/min rate limit	8,000 MCP tool calls per month
Tools	3 (screens, flows, sections)	4 (search + detail for screens and flows)
Extras	Interactive gallery in MCP Apps clients	Official agent skill (refero_skill) that wraps the MCP in a research-first workflow

The honest read: Mobbin’s library is several times larger and its mobile coverage is deeper; Refero’s catalog leans into well-designed web products (Linear, Stripe, Notion territory) and its published skill gives agents a more opinionated research procedure out of the box. If your work is web-first SaaS, evaluate both; if mobile patterns matter, Mobbin’s depth wins. Refero’s monthly call cap is also a real constraint for heavy agent use, where Mobbin only rate-limits per minute.

Community Servers: Search Proxies and Scrapers

Before official servers existed, the community built its own access — and those projects are instructive about what not to depend on:

• design-inspiration-mcp-server (community, MIT) does not access any library directly. It runs Google searches via the Serper API with site: filters for Dribbble, Behance, Awwwards, Mobbin, and Pinterest, and can extract design tokens (colors, typography, spacing) from live websites. You get breadth across galleries for the cost of a free Serper key — but you get whatever Google indexed, not semantic search over a curated taxonomy.
• Gallery scrapers exist for Godly, Land-book, SiteInspire, and similar collections, exposing browse_* tools per gallery. Same trade-off, more fragility.
• The unofficial mobbin-mcp (pdcolandrea/mobbin-mcp) is the cautionary tale. It reverse-engineered Mobbin’s private API, required you to extract session cookies from your browser, and exposed ten tools — more than the official server does today. It was archived in May 2026 when the official server shipped, with the author’s own recommendation to switch. Community servers built on private APIs have exactly this lifespan.

Community servers make sense when you need galleries the official servers do not cover (Dribbble concepts, Awwwards-tier art direction) and can tolerate breakage. For production workflows, the official servers’ semantic search over licensed libraries is the sturdier foundation.

The DIY Approach: Screenshot Live Products

The zero-subscription alternative: point a browser-automation MCP server (Playwright MCP or similar) at products you admire and let the agent take its own screenshots. This works, and it reaches things no library has — your competitor’s app behind a login, yesterday’s redesign, internal tools.

What you lose is the curation: no taxonomy, no “43 fintech paywalls” in one query, no historical versions, and you burn agent time navigating instead of studying. The pragmatic split: use a library MCP for pattern research (“how do successful apps do X”), use the browser for targeted reconnaissance (“what exactly does competitor Y do”).

Adjacent, but Solving a Different Problem

Several design MCP servers get mentioned alongside Mobbin but answer different questions — worth disambiguating so you pick the right tool:

Server	What it actually provides	The question it answers
Figma MCP	Your own design files: layers, tokens, variables	”What did our designer specify?“
shadcn/ui MCP	Component registry, docs, install commands	”What do I build it with?“
21st.dev MCP	10,000+ community React/Tailwind components, AI generation	”Give me a ready-made component”
Magic Patterns MCP	AI design generation in the Magic Patterns tool	”Generate a new design for me”

A complete design-capable agent setup often combines three layers: a reference library (Mobbin or Refero) for what good looks like, your design system (Figma MCP) for what your product looks like, and a component source (shadcn/ui MCP) for what the code looks like.

MCP vs. the Mobbin REST API

Mobbin also ships a REST API (https://api.mobbin.com, Bearer-token auth, endpoints like /v1/screens/search) — but it is gated to Team and Enterprise plans, while the MCP works on Pro. For agent workflows the MCP is the right interface anyway: OAuth instead of key management, inline images instead of URL lists, and tool descriptions the agent can read. Reach for the REST API only when you are building your own product integration rather than equipping an agent.

When This Breaks

Tools connect but every call fails with an authorization error. You are on a free Mobbin plan. MCP access requires Pro, Team, or Enterprise — the OAuth handshake succeeds, but tool calls are gated.

OAuth window never completes. The flow needs to redirect back to a local port. VPNs and strict firewalls that block localhost callbacks are the usual culprits; disconnect the VPN for the initial authentication.

HTTP 429 responses. You hit the 60-requests-per-60-seconds limit. The response includes a Retry-After header; agents that batch many parallel searches (workflow fan-outs) are the typical cause. Serialize the searches or lower the fan-out.

The interactive gallery renders as broken UI. Known client-side issue in Claude Code inside the Claude desktop app and in Claude Cowork. Cosmetic only — the agent still receives images and metadata. Judge by what the agent does, not by the gallery.

Results are irrelevant. Almost always a query problem: multiple intents in one query, negations, or style adjectives. Rewrite as one concrete visual description and switch to mode: "deep" if you were using standard.

You need Android patterns. The MCP’s platform parameter currently accepts ios and web only. Android content exists on the Mobbin site — browse it manually until the MCP catches up.

What’s Next

Figma and Design System MCP Connect your own design files -- the other half of a design-capable agent.

shadcn/ui MCP Turn the patterns you found into production components.

Reducing MCP Token Cost Keep image-heavy MCP servers from eating your context window.

Browser Automation MCP The DIY alternative -- screenshot live products yourself.