# inspo

Inspo gives coding agents real website references, design tokens, and JSX before they build UI. Use it when a brief needs concrete visual direction.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 919
- Author: Nutlope
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/Nutlope/inspo
- Updated: 2026-10-01
- HTML: https://affpapa.org/en/nevibecode/mcp/inspo

## What it 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.

## Requirements
- Needs: Node.js (commands run via npx)
- Remote server: `https://inspomcp.dev/api/mcp`
- Environment variables: `TOGETHER_API_KEY`, `INSPO_CATALOGUE_URL`, `INSPO_PROFILE`, `INSPO_IMAGES`, `INSPO_MAX_TOKENS` — keys and tokens: ask the human for the values, never commit them or put them in shared files.
- Works with: Playwright

## Install

### Claude Code (native platform)

1. **Platform CLI: remote server**
```bash
claude mcp add --transport http inspo https://inspomcp.dev/api/mcp
```

2. **Platform CLI**
```bash
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-mcp
```
Replace <…> with your own values

### Codex

1. **Platform CLI: remote server**
```bash
codex mcp add inspo --url https://inspomcp.dev/api/mcp
```

2. **Platform CLI**
```bash
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-mcp
```
Replace <…> with your own values

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "inspo": {
            "url": "https://inspomcp.dev/api/mcp"
        }
    }
}
```
File `.cursor/mcp.json`:
```json
{
    "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

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "inspo": {
            "type": "http",
            "url": "https://inspomcp.dev/api/mcp"
        }
    }
}
```
File `.vscode/mcp.json`:
```json
{
    "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

### Gemini CLI

1. **Platform CLI: remote server**
```bash
gemini mcp add -t http inspo https://inspomcp.dev/api/mcp
```

2. **Platform CLI**
```bash
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-mcp
```
Replace <…> with your own values

## When to use it
- 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
- Use `recommend` to find references for this landing-page brief.
- Run `find_similar` and show pages close to this interface.
- Find a hero component and return its reference JSX.

## Similar
- [ux-extract](https://affpapa.org/en/nevibecode/skills/ux-extract.md) — skill · 664 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/adobe-prototype.md) — skill · 524 installs
- [frontend-visual-qa](https://affpapa.org/en/nevibecode/skills/frontend-visual-qa.md) — skill · 572 installs
- [frontend-app-builder](https://affpapa.org/en/nevibecode/skills/frontend-app-builder.md) — skill · 252 installs
- [frontend-developer](https://affpapa.org/en/nevibecode/skills/frontend-developer.md) — skill · 1300 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/commands/webapp-testing.md) — command · 259 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md