Mobbin MCP Server gives AI agents access to Mobbin’s library of real-world UI design references, letting them search app screens, user flows, and website sections such as onboarding, checkout, pricing pages, and footers for design inspiration and research.
The official MCP SDK for TypeScript lets Node and edge services call MCP servers directly, with an API key for headless auth.
This guide connects Mobbin MCP to TypeScript through MewCP, so TypeScript can use Mobbin MCP's 3 tools, like search_screens, search_flows and search_sections, without your Mobbin MCP credentials ever reaching the app.
Mobbin MCP signs in through managed OAuth. MewCP stores the token encrypted, refreshes it before it expires and injects it only at call time. Your agent never holds it, so it can never leak it.
More apps
Turn your AI agent into a creative studio The world's best image, video, audio and 3D models, inside the AI assistant you already use.
Give AI coding agents access to a curated library of real-world website designs, screenshots, design systems, and reusable UI components. Search visual references, find similar designs, analyze layouts, extract colors and typography, compare websites, and retrieve copy-ready JSX components for building better interfaces
Build a website or web app in minutes! Generate, design, write code, and create copy for your website.
Create and manage Lucid diagrams with AI agents, including flowcharts, process maps, architecture diagrams, and visual documentation. Search existing Lucid content and update diagrams using natural language.
Other clients
Mobbin MCP works the same way in every client below. Pick yours for its own guide.
Free to start.
Scope access to the exact Mobbin MCP tools and accounts you allow, work and personal side by side. Anything outside that scope is refused at call time, even when the model asks for it.
Each call is logged: what ran, on which account, and whether it worked. Failures come back structured, so the agent knows whether to retry instead of guessing.
Every app sits behind one secure MCP URL, and there is no server for you to deploy or keep running. Add an integration in the dashboard and it is live on the next call, with no config to change and no new credentials to wire up. Tools load only when a task needs them, so your agent stays fast and focused however many apps you connect.
SDK clients sign in with an API key. Create one in your dashboard and replace API_KEY in the code below.
SDK clients run without a browser, so they sign in with your API key. Needs Node 18+ as an ES module (for example npx tsx script.ts).
Search Mobbin for UI screens using natural language. Returns matching screens with inline images and metadata. Examine the returned images to understand each screen's actual content — do not describe or summarize screens based solely on metadata. Each screen has a `mobbin_url` — the canonical Mobbin link for that screen. When you present results to the user, ALWAYS cite each screen you mention as a markdown link to its `mobbin_url` so the user can open it on Mobbin. Inline images are low-res previews for you to read, not for the user. Each result's `image_url` is the high-resolution image. Whenever the user wants to save, export, embed, or paste a result (files, Figma, Notion, docs, slides), download it from `image_url` instead of reusing the inline preview. Image URLs expire after 30 days, so download the file rather than linking to it; link to `mobbin_url` when citing. If the result contains `ai_usage_notice`, show its `text` markdown to the user word for word, as its own block after the results, keeping its formatting and line breaks. Do not paraphrase, shorten, or merge it with other text. On hosts that support MCP Apps, also renders an interactive gallery of the results.
Search Mobbin for multi-step user flows (e.g. onboarding, checkout) using natural language. Returns evenly-spaced preview images inline along with metadata for each flow, including per-screen previews. Examine the returned images to understand each flow's actual content — do not describe screens based solely on metadata. Inline images are low-res previews for you to read, not for the user. Each result's `image_url` is the high-resolution image. Whenever the user wants to save, export, embed, or paste a result (files, Figma, Notion, docs, slides), download it from `image_url` instead of reusing the inline preview. Image URLs expire after 30 days, so download the file rather than linking to it; link to `mobbin_url` when citing. On hosts that support MCP Apps, also renders an interactive gallery of the results.
Search Mobbin for website sections (e.g. About, Pricing, Footer) using natural language. Returns section images inline along with metadata. Examine the returned images to understand each section's actual content — do not describe or summarize sections based solely on metadata. Inline images are low-res previews for you to read, not for the user. Each result's `image_url` is the high-resolution image. Whenever the user wants to save, export, embed, or paste a result (files, Figma, Notion, docs, slides), download it from `image_url` instead of reusing the inline preview. Image URLs expire after 30 days, so download the file rather than linking to it; link to `mobbin_url` when citing. On hosts that support MCP Apps, also renders an interactive gallery of the results.
