RELATED 01
sideshow
A browser viewer where a coding agent posts diagrams, diffs and sketches and reads your comments on them
633GitHub stars
550/wknpm downloads
61popularity score
Inspo
Design references from real production websites for coding agents building UI
By Hassan El Mghari (individual) JavaScript Remote (hosted) · Streamable HTTPLocal · stdio DesignDeveloper tools
60 popularity score ★ 985 ↓ 1.4k/wk
Connect your client
Remote (hosted)
Add in one click
Opens the app, which asks before it adds the server.
Or add it by command or config
Claude Codeterminal
claude mcp add --transport http inspo https://inspomcp.dev/api/mcpCursor~/.cursor/mcp.json
{ "mcpServers": { "inspo": { "url": "https://inspomcp.dev/api/mcp" } } }Claude (desktop and web)Settings > Connectors, add the URL
https://inspomcp.dev/api/mcpLocal (npm)
Add in one click
Opens the app, which asks before it adds the server.
Or add it by command or config
Claude CodeTerminal
claude mcp add inspo -- npx -y inspo-mcpClaude Desktopclaude_desktop_config.json
{
"mcpServers": {
"inspo": {
"command": "npx",
"args": [
"-y",
"inspo-mcp"
]
}
}
}Cursor~/.cursor/mcp.json
{
"mcpServers": {
"inspo": {
"command": "npx",
"args": [
"-y",
"inspo-mcp"
]
}
}
}VS Code.vscode/mcp.json
{
"servers": {
"inspo": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"inspo-mcp"
]
}
}
}Codex~/.codex/config.toml
[mcp_servers.inspo]
command = "npx"
args = ["-y", "inspo-mcp"]Gemini CLITerminal
gemini mcp add --scope user inspo npx -- -y inspo-mcpSettings 6
TOGETHER_API_KEY |
Optional: Together AI key; enables vector (semantic) ranking in search. |
|---|---|
INSPO_PROFILE |
Optional: full (default, 15 tools) or lite (9 tools). |
INSPO_IMAGES |
Optional: thumbs (default) or none for text-only responses. |
INSPO_MAX_TOKENS |
Optional: Ceiling on tokens one tool response may use, 300-200000; unset by default. |
INSPO_CATALOGUE_URL |
Optional: Points the server at a self-hosted catalogue instead of the project CDN. |
INSPO_BASE_URL |
Optional: Base for component-crop URLs; defaults to https://inspomcp.dev. |
What it does
Inspo is a read-only MCP server over a curated archive of captured websites: 832 sites and 2,320 pages, each shot on desktop and mobile. For every page it holds the traced colour palette, the fonts in use, detected tech, style tags and a fold-by-fold breakdown of the layout, plus a DESIGN.md per site with palette roles, type ramp, spacing and CSS variables. It also carries 68 reference components (heroes, pricing tables, navs, footers) with JSX source.
An agent asked to build a page can call `recommend` with a brief to get a layout pick, exemplar sites, matching components, a palette suggestion and guidance on hero size and section spacing, then drill down with search, colour matching, similar-site lookups and site comparisons. Screenshot and crop URLs are absolute, so a vision model can fetch them.
It runs two ways with the same tools: a free hosted Streamable HTTP endpoint at inspomcp.dev, or a stdio server from npm (`inspo-mcp`) that downloads the catalogue from the project's CDN at runtime. Not in the README: list tools clamp oversized limits rather than rejecting them; `search_screens` returns 6 results by default and at most 20, `find_by_color` 12 by default and at most 40 (apps/mcp/src/tools.ts).
What it needs
| To run it yourself | Node.js |
|---|
For the hosted endpoint, only an MCP client that supports remote Streamable HTTP servers; no account or key. For the npm way, Node.js with npx and network access to the project's CDN, where the catalogue is fetched at start. An optional Together AI API key (`TOGETHER_API_KEY`) turns on vector ranking in search.
Limits
Covers only the sites in its archive (832 per the README); new sites are added by pull request, not on request. Without `TOGETHER_API_KEY` search falls back to lexical matching. List tools are capped rather than paginated (pagination is on the roadmap), and not every component search hit has a crop yet. With `INSPO_PROFILE=lite` only 9 of the 15 tools are exposed, and some clients (Cline, OpenCode, Kimi CLI and others) are switched to lite and text-only automatically over stdio; the hosted endpoint cannot detect the client and needs `?profile=lite&images=none` in the URL instead. Run by hand in a terminal, `npx -y inspo-mcp` prints install help unless given `--stdio`.
Who it suits
Developers who let a coding agent write front-end pages and want it to work from real, shipped designs instead of generic defaults. The hosted endpoint suits most people since it needs no install, key or account; pick the npm stdio form to avoid the hosted call log, to point at a self-hosted catalogue, or to use the automatic lite profile for open-source-model harnesses. It only reads its own archive, so it is not a tool for inspecting your own site or design files.
Tools 15
recommend- Turns a page brief into a layout pick, exemplar sites, matching components, palette and spacing guidance
search_screens- Searches captured pages by text and filters such as style, industry, mode, colour or device
get_screen- Returns the full record for one captured page
get_design_system- Returns a site's DESIGN.md: fonts, palette, CSS variables, type ramp, tech; can fetch the live source to fill gaps
compare- Puts 2-4 sites side by side by shared tags and layout structures
find_by_color- Finds sites whose palette is close to a given hex colour
find_similar- Lists sites that look or are built like a given one
find_examples_for_macrostructure- Gives example sites for one of the 19 named page layouts
find_components- Finds cropped real-site components of a given type
find_reference_components- Lists the canonical reference components, filterable by type or layout
get_reference_jsx- Returns the JSX source of one reference component
get_filters- Lists every accepted filter value so arguments can be picked correctly
get_site_pages- Lists a site's captured pages in order, or all multi-page sites
list_collections- Lists the editor-curated collections
get_collection- Returns one curated collection