About inspo
Inspo is an MCP server that gives coding agents a library of captured production websites, including palettes, fonts, page autopsies and reference JSX. It is aimed at agents and developers who want design references before writing UI.
Key features
- 01Archive of 2,320 pages across 832 sites
- 0268 reference components with copy-pasteable JSX
- 03Per-site DESIGN.md extracted from the DOM
- 04recommend tool combines several lookups in one call
- 05Read-only tools with an SSRF guard on live fetches
- 06stdio and Streamable HTTP transports
Use cases
- 01Coding agents studying real site layouts and palettes before building UI
- 02Finding reference sections such as pricing tables or footers
- 03Extracting type scales, spacing and CSS variables from a site's DOM
MCP support
This project is an MCP server that exposes fifteen tools for querying the website archive, reference components and design systems to MCP clients.
Configuration
Remote servers need no local install. Pick your client, then copy the config or install in one click.
https://inspomcp.dev/api/mcpclaude mcp add --transport http nutlope-inspo https://inspomcp.dev/api/mcp{"mcpServers":{"nutlope-inspo":{"type":"http","url":"https://inspomcp.dev/api/mcp"}}}Open in Cursor{"servers":{"nutlope-inspo":{"type":"http","url":"https://inspomcp.dev/api/mcp"}}}Open in VS Code{"mcpServers":{"nutlope-inspo":{"type":"http","url":"https://inspomcp.dev/api/mcp"}}}{"mcpServers":{"nutlope-inspo":{"serverUrl":"https://inspomcp.dev/api/mcp"}}}Run commands in a terminal; paste JSON into the client’s MCP config and restart. Servers that need sign-in will prompt on first connect.
Tools
15| Parameter | Type | Required | Description |
|---|---|---|---|
| mode | enum | No | light or darklight | dark |
| vibe | enum | No | Mood / vibe - 'calm', 'loud', 'luxe', 'technical', 'soft', etc.calm | loud | playful | serious | luxe | raw | soft | technical | warm | cold |
| color | enum | No | Color word - 'warm', 'cool', 'monochrome', 'neon', 'earthy'warm | cool | monochrome | neon | earthy | pastel | saturated | muted | high-contrast |
| limit | integer | No | |
| query | string | No | Natural-language description of what you're looking for. e.g. 'minimalist editorial agency portfolio' |
| style | enum | No | Filter to one visual style (e.g. 'minimalism', 'editorial')minimalism | editorial | brutalism | glassmorphism | swiss | maximalism | playful | dark-mode | monochrome | vintage | futurist |
| detail | enum | No | 'standard' (default): northstar, palette, fonts, axes, macro and tags per row, plus the fold-by-fold autopsy on the top 3. 'full': the autopsy on every row (~300 tokens each; only if you will read them all). 'concise': northstar, palette, fonts. Text profile defaults to concise.concise | standard | full |
| device | enum | No | 'mobile' restricts to sites with a 375px capture pair and inlines the mobile thumbnail. Default: desktop.desktop | mobile |
| industry | enum | No | Filter to one industry (e.g. 'saas', 'fintech', 'portfolio')agency | ai | architecture | automotive | consumer-tech | creator | crypto | culture | developer-tools | ecommerce | education | fashion | fintech | food-beverage | furniture | gaming | health | media | music | non-profit | portfolio | saas | travel | type-foundry |
| pageType | enum | No | Filter to a page kind: 'landing' (default homepages), 'pricing', 'features', 'auth', 'about', 'blog', 'changelog', 'docs', 'other'landing | pricing | features | auth | about | blog | changelog | docs | other |
| accentHue | enum | No | Accent temperature: 'warm' (10-60°), 'cool' (200-300°), 'neutral' (unsaturated), 'chromatic-other' (greens, magentas, everything else).warm | cool | neutral | chromatic-other |
| maxTokens | integer | No | Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive. |
| paperBand | enum | No | Surface lightness, measured from the capture: 'dark' (<30% L), 'mid' (30-85%), 'light' (>85%). More reliable than `mode`, which is tagged and disagrees with the measurement on ~15% of rows.dark | mid | light |
| displayClass | enum | No | Construction of the display face: 'grotesk-sans', 'geometric-sans', 'roman-serif', 'mono', 'display-condensed-bold', etc.grotesk-sans | geometric-sans | roman-serif | italic-serif | slab-serif | mono | display-condensed-bold | display-heavy | system-native | handwritten |
| macrostructure | enum | No | Filter to a macrostructure (e.g. 'bento-grid')bento-grid | long-document | marquee-hero | stat-led | conversational-faq | manifesto | photographic | specimen | catalogue | letter | index-first | narrative-workflow | split-studio | feature-stack | type-specimen | portfolio-grid | map-diagram | ecosystem-index | component-playground |
Details
From the project README
Inspo
Real production websites your coding agent can study, over MCP, before it writes UI. inspomcp.dev
With and without
Same brief, same model, no design skill on either run. The only difference: the page on the right was built with Inspo MCP on the session.
That gap is the product. Agents have tools but not taste, and the open web already holds every reference they need: Inspo assembles, tags, and addresses it.
What's inside
- 2,320 pages across 832 real sites, each captured on desktop and mobile, with traced palettes, real fonts, detected tech, and a fold-by-fold autopsy on every page.
- 68 canonical reference components (heroes, pricing, footers, navs, and more), each demonstrating one named macrostructure, with copy-pasteable JSX.
- A DESIGN.md for every site, extracted from its DOM: semantic palette roles, type ramp, spacing scale, CSS variables, container width.
Fifteen tools expose all of it; recommend(brief) composes most of them into one call. The full tool table lives in apps/mcp/README.md.
Tech stack
- TypeScript MCP server with two transports: stdio via npm, and Streamable HTTP served by the site's own Vercel deployment. No database at query time; the catalogue ships as a static seed.
- Next.js 16 + Tailwind v4 gallery: the archive browser and the curator dashboard.
- Playwright capture worker: desktop and mobile shots, palette, type ramp and CSS variable extraction, tag and autopsy passes via Together AI.
- Together AI embeddings behind semantic search and
find_similar. - A smoke harness that boots the server in-process and exercises the core tools.
Cloning & running
- One command, any client:
npx -y inspo-mcp install(detects Claude Code, Cursor, Codex, VS Code, Windsurf, Zed, Claude Desktop and writes the config;--dry-runshows the plan) - Or point a client at the hosted endpoint yourself:
claude mcp add --transport http inspo https://inspomcp.dev/api/mcp - Or clone:
git clone https://github.com/Nutlope/inspo.git && cd inspo && pnpm install - Gallery:
pnpm dev, then openlocalhost:3000 - Dev loop:
pnpm --filter @inspo/mcp test
Per-client snippets (Cursor, Windsurf, Zed, Claude Desktop) are on the MCP page; the self-host runbook is DEPLOY.md.
Roadmap
- show the desktop and mobile capture side by side on every screen page
- backfill component crops so
find_componentsreturns a crop for every hit - paginate the list tools instead of capping them
- re-shoot the mobile set at retina scale
- Accounts and paywalls are skipped on purpose: the archive is more useful free.
Want a site in the archive? Append it to apps/worker/src/seed-urls.ts and open a PR. The bar: does it make the archive better for someone building a website?
Security
Every tool is read-only. The one path that touches the outside world - get_design_system(live:true), which supplements thin captured tokens from the screen's own source - passes each URL and redirect through an SSRF guard: public named hosts only, ports 80 and 443, byte-capped body, no JS execution. The hosted endpoint logs tool name, success and duration per call, never IPs or query text.
MIT, copyright Together AI and contributors. The screenshots remain the work of their designers: every screen credits and links its source, and takedowns are honoured at /dmca.
Comments
New to MCP?
From what the protocol is to installing your first server, these answers cover most first questions.
An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.