MCP Server

Active

MIT

io.github.Nutlope/inspo MCP Server

io.github.Nutlope/inspo

Real production websites for coding agents to study: palettes, fonts, and reference components before writing UI.

What is the io.github.Nutlope/inspo MCP server?

Inspo is an MCP server that gives coding agents access to a curated archive of 2,320 real production website pages across 832 sites, each with extracted design tokens, typography, color palettes, and reference JSX components. It helps AI agents build better-designed UIs by providing concrete design references and semantic search over real-world design patterns.

Inspo assembles real production websites into a queryable design reference library for coding agents. Instead of agents generating UI from scratch, they can study actual design patterns, color palettes, typography systems, and component structures from the open web. The server provides 15 tools including semantic search, component lookup, design system extraction, and a `recommend()` function that composes multiple references into one call based on a design brief.

How to install io.github.Nutlope/inspo

Copy-paste configuration for popular MCP clients.

transport: stdio

Config generated by PluginBench — verify against the source before use.

Environment / auth

TOGETHER_API_KEY
secret
Optional. Enables query-embedding semantic search; everything else works without it.
INSPO_CATALOGUE_URL
Optional. Point at a self-hosted catalogue instead of the public CDN.
INSPO_PROFILE
Optional. 'lite' or 'full' tool surface (auto-detected per client by default).
INSPO_IMAGES
Optional. 'thumbs' or 'none' - whether tool results inline thumbnail image blocks.
INSPO_MAX_TOKENS
Optional. Token ceiling per tool response (300 to 200000); trims lower-ranked results first.

~/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "inspo": {
      "command": "npx",
      "args": [
        "-y",
        "inspo-mcp"
      ],
      "env": {
        "TOGETHER_API_KEY": "<YOUR_TOGETHER_API_KEY>",
        "INSPO_CATALOGUE_URL": "<YOUR_INSPO_CATALOGUE_URL>",
        "INSPO_PROFILE": "<YOUR_INSPO_PROFILE>",
        "INSPO_IMAGES": "<YOUR_INSPO_IMAGES>",
        "INSPO_MAX_TOKENS": "<YOUR_INSPO_MAX_TOKENS>"
      }
    }
  }
}

Tools & capabilities

Tools this server exposes to the agent.

recommend — Compose design references based on a brief; the primary entry point that combines multiple tools
find_similar — Semantic search to find similar pages or designs
find_components — Search for canonical reference components (heroes, pricing, footers, navs, etc.)
get_design_system — Extract design tokens, typography, color palettes, and CSS variables from a site
get_page_autopsy — Fold-by-fold analysis of a page structure
search_pages — Query across 2,320 pages in the archive

Use cases

Study real design patterns and color palettes before generating a new UI component or page layout
Extract typography systems and spacing scales from production websites to apply to your own design
Find reference implementations of common UI patterns like pricing tables, navigation bars, or hero sections
Analyze how real sites structure their design systems and CSS variables
Get semantic recommendations for design direction based on a brief or design goal

io.github.Nutlope/inspo MCP server FAQ

What is Inspo MCP?

Inspo is an MCP server that gives coding agents access to a curated archive of 2,320 real production website pages with extracted design tokens, typography, palettes, and reference JSX components. It helps agents build better-designed UIs by studying actual design patterns.

Is Inspo free?

Yes, Inspo is free and open-source (MIT license). The hosted endpoint at inspomcp.dev/api/mcp is available for free use.

How do I install Inspo in Claude or Cursor?

Run `npx -y inspo-mcp install` to auto-detect your client and write the config. Or manually add it via `claude mcp add --transport http inspo https://inspomcp.dev/api/mcp`.

Does Inspo require authentication?

No authentication is required. The server is read-only and the hosted endpoint is publicly accessible.

What design data does Inspo provide?

Each page includes desktop and mobile captures, traced color palettes, real fonts, detected tech stack, fold-by-fold autopsy, and a DESIGN.md with semantic palette roles, type ramp, spacing scale, and CSS variables.

Can I self-host Inspo?

Yes, you can clone the repository and run it locally. Instructions are in the README; the deployment runbook is in DEPLOY.md.

README (reference)

Source of truth, from the repository.

<p align="center"> <a href="https://inspomcp.dev"><img alt="Inspo" src="docs/img/og.png"></a> </p> <h1 align="center">Inspo</h1> <p align="center">Real production websites your coding agent can study, over MCP, before it writes UI. <a href="https://inspomcp.dev">inspomcp.dev</a></p>

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-run shows 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 open localhost: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_components returns 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.

Related MCP servers

io.github.NyxToolsDev/calendly-mcp-server

Maintained

Connect Claude to Calendly — schedule meetings, check availability, manage events

Python

MIT

View repository →

io.github.NyxToolsDev/claude-memory-manager

Maintained

Cross-session memory for Claude Code — context capture, semantic search, recall

Python

MIT

View repository →

DICOM/HL7/FHIR Interoperability MCP Server

Maintained

Bridges DICOM, HL7v2, and FHIR with cross-standard mapping and optional PACS connectivity.

Python

MIT

View repository →

io.github.NyxToolsDev/quickbooks-mcp-server

Maintained

Connect Claude to QuickBooks Online — query finances, create invoices, run reports

Python

MIT

View repository →

io.github.O-mega-Enterprise/founden-mcp

Maintained

Build your company over chat: website, app, and admin built in the cloud. One API key.

JavaScript

MIT

View repository →

io.github.O-mega-Enterprise/suprsonic-mcp

Maintained

One API key, dozens of capabilities for your AI agent. Zero provider auth.

JavaScript

MIT

View repository →