Documentation
Give your coding agent 189 real websites and apps and 2,429 screenshots to look at before it writes UI. Search by visual direction, then put a small set of references straight into the agent's vision context. Search and metadata are free, and a free account is all the server asks for.
swaggin is an MCP for the visual-reference part of UI work: helping an agent look at real interfaces before it decides what to build.
Search real website and app screenshots by visual direction, screen pattern, and product category. Start with metadata, make a shortlist, then send at most six screenshots into the context window when the agent needs visual evidence.
swaggin does not read your Figma files or provide a component library. Use it to study what shipped products look like, then apply that direction to your own design system and codebase.
Ask your agent to find real examples of the screen you are building, explain the recurring visual choices, and only then draft the UI. The prompting examples below show the exact workflow.
One hosted server over Streamable HTTP. Nothing to install: your client registers itself, opens a browser when sign-in is needed, and free previews work from the first call.
claude mcp add --transport http swaggin https://mcp.swaggin.devAny other MCP host takes the same endpoint. If you would rather your agent did the wiring, the setup section has a prompt that configures the connection and verifies the tools.
The hosted server is an OAuth 2.1 resource server. Sign-in happens in a browser, from inside your client.
Your client requests the scopes openid asset:read offline_access and gets an access token issued for this server specifically. In Claude Code, open /mcp. In Codex, run codex mcp login swaggin. Sign in with the email you used at checkout and Pro access applies on its own.
Pro access is stamped into the token when it is issued, so a purchase made mid-session is not visible to a token that predates it. Reconnect the server and the next token carries it.
A key is not a bearer token: the hosted server accepts OAuth access tokens only, and rejects anything else, including a valid key and a valid token issued for another swaggin service. What a key does is link an existing licence to the account you sign in with, which is what you need if you sign in through GitHub with a different address than the one you bought with. The browser flow asks for it at the point it is needed.
Where no browser can open, the CLI runs the same tools over stdio and reads a key from the environment instead. An OAuth session still wins when one exists, because it is per-user, short-lived, and revocable, and the key is the fallback.
SWAGGIN_LICENSE=your-keyThe CLI is not published to npm yet, so this path means running it from a checkout. Email hi@swaggin.dev if you need it before then.
What it takes to use the connector, and the ceilings it enforces once you are in.
The hosted server authorises every call, so taxonomy, search, and free previews all need a signed-in account. The account itself is free and takes one browser round trip through GitHub or a magic link, which your client starts for you when it first connects. A licence is only the difference between preview resolution and full resolution.
A token needs the asset:read scope and has to have been issued for this server. A token minted for another swaggin service is refused here even though it is otherwise valid.
Licensed images are capped at 60 per minute and 10,000 per calendar month for each account, counted in UTC and reset at the start of the next month. Hitting the minute limit returns a retry delay rather than a failure you have to guess at. Search, metadata, taxonomy, and free previews are not counted against either number.
get_screenshots returns at most six images in one call. Extra ids are dropped and the response says so, so shortlist with search_designs first.
The server runs at Cloudflare's edge and is available everywhere. There is no country gating, no waitlist, and no per-seat or per-organisation limit: one account can connect from as many clients as you like.
6 tools. Search metadata first, then retrieve a coherent reference pack or selected screenshots.
Every valid style, category, pattern, platform, and viewport id, with the written cues behind each style. Filters are a controlled vocabulary, so an id that was guessed rather than read from here matches nothing.
Returns Text. No images, no licence needed.
Find entries by free text, taxonomy filters, or both. Metadata only, so it is cheap to call broadly and the right way to build a shortlist before spending any image budget.
Returns Text: matching entries with their screenshot ids. No images, no licence needed.
The images themselves, for the handful of designs worth looking at. Six per call at most, because images are the expensive thing in a context window.
Returns Images. Low-resolution folds are free. Crisp folds, full-page overviews, and segments need a licence, and licensed objects answer 402 without one.
A coherent reference from one site, page and theme, with overview, readable desktop, section detail and mobile roles. Missing evidence is reported explicitly.
Returns Up to four images with a role manifest, missing roles and capture warnings. Licensed originals require a licence.
The full record for one entry, including every screenshot id and caption. Accepts a slug, a URL, or a product name.
Returns Text. No images, no licence needed.
A sampled set of entries for when the brief is open-ended and you want a starting point rather than an answer.
Returns Text. No images, no licence needed.
The same reference in the form an agent reads is at the agent guide, also served as llms.txt.
Vague prompts get one search call and no images, which is the same as not using swaggin at all. These are the asks that make it earn its place.
Name what you are building, then tell the agent to look at real examples before it writes any code. That one clause is the whole product.
The hardest question to answer from memory and the easiest to answer from six screenshots.
Three real directions with references beat one description in prose.
Screenshots are the input. Tokens are the output you keep.
Empty states, error states, changelogs, command palettes. The screens that make a product feel finished.
The free tier is real. Everything except full-resolution imagery costs nothing, and a free account is the only thing standing in front of it.
All registry metadata, the full taxonomy, every search, and low-resolution fold previews. The gallery on this site needs no account at all.
Crisp folds, full-page overviews, and page segments. Licensed objects answer HTTP 402 without one, so an agent can detect the boundary from the response instead of guessing at it.
Pro is $9.99 per month and Lifetime is $199 as a single payment. Both include 10,000 image requests per month as fair use. Search, metadata, taxonomy, and free previews do not touch that allowance. See pricing or the FAQ for billing questions.
Screenshots belong to the sites they depict. They are reference material for design decisions, not assets to redistribute, and any site owner can request removal.
The server lives at mcp.swaggin.dev. Something here wrong or missing? Email hi@swaggin.dev.