inspo — Claude Code MCP server: what it does, install
Inspo gives coding agents real website references, design tokens, and JSX before they build UI. Use it when a brief needs concrete visual direction.
claude mcp add --transport http inspo https://inspomcp.dev/api/mcpWhat inspo does
inspo exposes a catalogue of production websites through MCP. Each page includes captured desktop and mobile views, traced colours, real fonts, detected technologies, and a section-by-section fold review. The catalogue contains 2,320 pages from 832 sites, plus 68 reference components with copyable JSX.
The server offers fifteen tools, with recommend(brief) combining the main lookups. Other tools include find_similar, find_components, and get_design_system. It runs over stdio with npx or through Streamable HTTP at https://inspomcp.dev/api/mcp. All tools are read-only. For get_design_system(live:true), only public named hosts on ports 80 and 443 pass the SSRF guard, so local endpoints will not work.
What it helps with
- find visual references for a UI brief
- choose a palette and type direction
- compare pages with a similar structure
- reuse JSX for a hero or pricing section
- inspect a site's design system
Example prompts for the agent
- Use
recommendto find references for this landing-page brief. - Run
find_similarand show pages close to this interface. - Find a hero component and return its reference JSX.
How to install inspo
1Platform CLI: remote server
claude mcp add --transport http inspo https://inspomcp.dev/api/mcp2Platform CLI
claude mcp add --env TOGETHER_API_KEY=<TOGETHER_API_KEY> --env INSPO_CATALOGUE_URL=<INSPO_CATALOGUE_URL> --env INSPO_PROFILE=<INSPO_PROFILE> --env INSPO_IMAGES=<INSPO_IMAGES> --env INSPO_MAX_TOKENS=<INSPO_MAX_TOKENS> --transport stdio inspo -- npx -y inspo-mcpReplace <…> with your own values
1Platform CLI: remote server
codex mcp add inspo --url https://inspomcp.dev/api/mcp2Platform CLI
codex mcp add inspo --env TOGETHER_API_KEY=<TOGETHER_API_KEY> --env INSPO_CATALOGUE_URL=<INSPO_CATALOGUE_URL> --env INSPO_PROFILE=<INSPO_PROFILE> --env INSPO_IMAGES=<INSPO_IMAGES> --env INSPO_MAX_TOKENS=<INSPO_MAX_TOKENS> -- npx -y inspo-mcpReplace <…> with your own values
Config file
{
"mcpServers": {
"inspo": {
"url": "https://inspomcp.dev/api/mcp"
}
}
}{
"mcpServers": {
"inspo": {
"command": "npx",
"args": [
"-y",
"inspo-mcp"
],
"env": {
"TOGETHER_API_KEY": "<TOGETHER_API_KEY>",
"INSPO_CATALOGUE_URL": "<INSPO_CATALOGUE_URL>",
"INSPO_PROFILE": "<INSPO_PROFILE>",
"INSPO_IMAGES": "<INSPO_IMAGES>",
"INSPO_MAX_TOKENS": "<INSPO_MAX_TOKENS>"
}
}
}
}Replace <…> with your own values
Config file
{
"servers": {
"inspo": {
"type": "http",
"url": "https://inspomcp.dev/api/mcp"
}
}
}{
"servers": {
"inspo": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"inspo-mcp"
],
"env": {
"TOGETHER_API_KEY": "<TOGETHER_API_KEY>",
"INSPO_CATALOGUE_URL": "<INSPO_CATALOGUE_URL>",
"INSPO_PROFILE": "<INSPO_PROFILE>",
"INSPO_IMAGES": "<INSPO_IMAGES>",
"INSPO_MAX_TOKENS": "<INSPO_MAX_TOKENS>"
}
}
}
}Replace <…> with your own values
1Platform CLI: remote server
gemini mcp add -t http inspo https://inspomcp.dev/api/mcp2Platform CLI
gemini mcp add -e TOGETHER_API_KEY=<TOGETHER_API_KEY> -e INSPO_CATALOGUE_URL=<INSPO_CATALOGUE_URL> -e INSPO_PROFILE=<INSPO_PROFILE> -e INSPO_IMAGES=<INSPO_IMAGES> -e INSPO_MAX_TOKENS=<INSPO_MAX_TOKENS> inspo npx -y inspo-mcpReplace <…> with your own values
Step by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about inspo
How do I install inspo in Claude Code?
Add the hosted HTTP server with claude mcp add --transport http inspo https://inspomcp.dev/api/mcp.
What does inspo do?
It gives a coding agent access to real website references, palettes, fonts, page breakdowns, design-system files, and JSX components. recommend(brief) combines the main catalogue lookups for a brief.
What does get_design_system(live:true) require?
The URL must use a public named host and port 80 or 443. The server does not execute JavaScript during this live lookup.
