Log inSubmit server
Inspo logo

Inspo

Study real production websites through palettes, typography, layout analyses, design systems, and JSX references over MCP.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Inspo

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "inspo": {
      "command": "npx",
      "args": [
        "-y",
        "inspo-mcp"
      ]
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

Automated check passed— started and listed 15 tools correctly (23d ago).

Overview

The inspo MCP server gives coding agents a searchable archive of real production website captures and reusable interface references. It exposes page metadata such as palettes, fonts, detected technologies, responsive screenshots, fold analyses, and extracted design-system details, along with canonical JSX components. Use it before implementing a UI when an agent needs concrete visual references rather than generating a design from a brief alone. The server runs over npm-based stdio or a hosted Streamable HTTP endpoint.

Use cases

  • Find visual references for a new landing page
  • Compare production palettes and typography choices
  • Retrieve JSX patterns for common interface sections
  • Inspect extracted design tokens before coding

Key features

  • Searches 2,320 pages across 832 production sites
  • Provides desktop and mobile captures with fold analyses
  • Exposes palettes, fonts, technologies, and design tokens
  • Includes 68 canonical JSX reference components
  • Supports brief recommendations and semantic similarity search

Tools15

What Inspo lets your agent do. Expand a tool for its parameters.

Verified live~4.1k tokens of context

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked 1d ago

Recent health check succeeded.

16/16 checks healthy over the last 45d

What it can do

From the 15 tools this server returned when we ran it; 15 declare their own safety hints.

Handles credentials · 2Makes network requests · 3Read-only tools · 15
Network at startup4 connections
Files written at startupNone
Install scriptsNone
npm provenanceNot published
Package age119 days
Maintainers2

Observed 2026-10-20 in an isolated sandbox. A description of reach, not a security audit.

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 14d ago via OSV.dev · inspo-mcp (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars994Stargazers on the source repository.
npm downloads4.6kPackage downloads in the last 30 days.
Last commit15d agoMost recent push to the default branch.
Availability100%Our rolling endpoint + install checks that succeeded.
Install checkPassedOur sandbox started it and listed its tools.
Tools exposed15Callable tools this server registers over MCP.
Directory activity10 viewsConfig copies, upvotes, and views on AllMCPs.

How Inspo works

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.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Inspo

inspo is an MCP server that connects coding agents to a catalogue of real production website captures and reference components. Its main tools support brief-based recommendations, semantic similarity search, component discovery, and design-system lookup, including palettes, fonts, layout analyses, and copyable JSX for UI work.

Install it with `npx -y inspo-mcp install`. The command detects supported clients including Claude Code, Cursor, Codex, VS Code, Windsurf, Zed, and Claude Desktop, then writes the MCP configuration. Add `--dry-run` to preview the changes.

Yes, inspo works with Cursor. The installer detects Cursor and writes its configuration, and the repository also provides client-specific setup snippets on the Inspo MCP page.

Yes, connect to the hosted Streamable HTTP endpoint at `https://inspomcp.dev/api/mcp`. For example, the README uses `claude mcp add --transport http inspo https://inspomcp.dev/api/mcp` to register it with Claude.

Yes, all tools are read-only. The live design-system option can read a public page to supplement captured tokens, but it applies host, port, response-size, redirect, and JavaScript-execution restrictions.

Related MCP servers

All in Architecture & Design All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewInspo AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/inspo?style=directory)](https://allmcps.com/mcp/inspo)
HTML Embed
<a href="https://allmcps.com/mcp/inspo"><img src="https://allmcps.com/api/badge/inspo?style=directory" alt="Inspo on AllMCPs" /></a>