# inspo [Health: Active]

**Category:** 📐 Architecture & Design  
**Repository:** https://github.com/Nutlope/inspo  
**GitHub Stars:** 994  
**npm Downloads (last month):** 4553  
**Views:** 10  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/inspo

## Description
Real production websites for coding agents: palettes, fonts, fold autopsies and reference JSX.

## Tools
Capabilities this server exposes over MCP:

- **search_screens** — Search the archive of real website screenshots. Returns screens with palette, fonts, components and image URLs.
- **get_screen** — Fetch the full record for one screen by slug - every viewport variant, palette, fonts, tech stack, designer credit.
- **get_design_system** — The full DESIGN.md for one screen - real fonts, frequency-ranked palette, CSS variables, detected tech, colour roles, type ramp. Thin captured tokens are supplemented by a live fetch of the source; `live=false` skips that.
- **find_similar** — A screen's nearest design neighbours - ranked by design-similarity embeddings where available, else by macrostructure / industry / style overlap. One result per site.
- **compare** — Compare 2-4 captured sites across palette, typefaces, macrostructure, mode, style tags, type/spacing/radius scales and container width. Returns per-site breakdowns plus what they share - triangulates a house style from a few references.
- **find_by_color** — Real sites whose extracted palette sits near a hex colour (OKLAB distance, so 'close' means the same colour family, not just the same hue). Use when a brief names a brand colour.
- **find_examples_for_macrostructure** — Real sites exemplifying one of the 19 named macrostructures. Call it at the macrostructure-pick step. Accepts slugs ('bento-grid') or display names ('Bento Grid').
- **list_collections** — List every editor-curated issue. Use this for thematic browsing - e.g. all 'Editorial Layouts' or 'Dark Product Pages'.
- **get_filters** — Every value the filters accept: styles, industries, macrostructures, modes, vibes, colors, page types, component types. Zero input. Call it when unsure - an out-of-vocabulary value errors.
- **get_site_pages** — A site's captured pages as an ordered flow (landing → pricing → features → ...) with titles, northstars and thumbnails - how a real product sequences its pages. No arguments returns the directory of flow-capable sites. Accepts a site or screen slug.
- **find_components** — Real sites featuring a specific UI component (hero, pricing, features, cta, nav, footer, testimonial, logo-cloud, faq, stat), with a per-element crop where one exists. For copy-pasteable code use get_reference_jsx.
- **get_collection** — Fetch one issue by slug, including the editor's blurb and ordered screen list.
- **find_reference_components** — The canonical reference components as an index: id, label, macrostructure and a note for each hero / pricing / cta / nav / footer archetype. Pick one, then get_reference_jsx(type, id) for its source.
- **recommend** — Orchestrator - start here for a brief. One call returns a macrostructure pick, 5 real exemplars, matching reference components (source via get_reference_jsx), a palette suggestion, and an `evidence` packet measuring the genre's paper band / display class / accent hue. Pass a macrostructure to skip the pick step. No LLM call.
- **get_reference_jsx** — The full canonical JSX source for one reference component, including the header stamp naming its macrostructure / theme / states. Copy-pasteable; tweak tokens to the target brand.

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

```json
"mcpServers": {
  "inspo": {
    "command": "npx",
    "args": ["-y","inspo-mcp"]
  }
}
```

## Documentation

## What inspo MCP server does

The inspo MCP server gives coding agents access to a curated archive of real production websites before they generate interface code. The catalogue contains 2,320 pages from 832 sites, with desktop and mobile captures, traced color palettes, identified fonts, detected technologies, and a fold-by-fold analysis of each page. It also includes 68 reference components covering structures such as heroes, pricing sections, navigation, and footers.

Each archived site has a generated DESIGN.md record. That record describes semantic color roles, typography scales, spacing values, CSS variables, and container width extracted from the site's rendered structure. The archive is intended for research and reference: an agent can inspect how existing sites solve a visual problem, then use that information while writing a new UI.

## How it works

The inspo MCP server is implemented in TypeScript and supports two connection methods: stdio through npm and Streamable HTTP through the site's Vercel deployment. Its catalogue is packaged as a static seed, so normal queries do not require a database. The gallery and archive browser are built with Next.js and Tailwind, while the capture pipeline uses Playwright to collect desktop and mobile views and extract visual tokens.

Semantic search uses Together AI embeddings. Capture processing also applies Together AI to tagging and fold analysis. The `recommend(brief)` operation combines several types of archive lookup for a written design brief. Other documented capabilities include similarity search, component discovery, and design-system retrieval.

## Setup and configuration

The simplest installation is `npx -y inspo-mcp install`. The installer detects Claude Code, Cursor, Codex, VS Code, Windsurf, Zed, and Claude Desktop, then writes the relevant MCP configuration. Use `--dry-run` to inspect the planned changes without applying them.

A client can instead connect to the hosted endpoint with `claude mcp add --transport http inspo https://inspomcp.dev/api/mcp`. For local development, clone the repository, install dependencies with `pnpm install`, and start the gallery with `pnpm dev`. The repository also provides a test command, `pnpm --filter @inspo/mcp test`, for the MCP package.

## Tools and capabilities

Available archive functions include:

- Recommend references from a written brief with `recommend(brief)`.
- Find semantically similar pages with `find_similar`.
- Locate canonical interface structures with `find_components`.
- Retrieve extracted site tokens and layout values with `get_design_system`.
- Inspect screenshots, responsive captures, fonts, palettes, technology tags, fold analyses, and copyable JSX references.

The listed tools are read-only. The live option on `get_design_system` can supplement sparse captured tokens from a page's source, while retaining URL and response safeguards.

## Limitations and notes

The archive intentionally skips accounts and paywalled pages. List operations are currently capped rather than paginated, and component crops are not guaranteed for every component match. The mobile capture set is not yet consistently shot at retina scale.

For live design-system requests, URLs and redirects are restricted to public named hosts on ports 80 and 443. Responses are byte-limited and JavaScript is not executed. The hosted service records the tool name, success status, and duration for each call, but not IP addresses or query text. Screenshots remain credited to their original designers, with source links and a takedown process.

_Full upstream README: https://allmcps.com/mcp/inspo/readme_