# Inspo MCP server

> Search an archive of real production websites for palettes, fonts, page structures and reference JSX before writing UI.

- Listing: https://mcp.tc/i/inspo
- Connect: use the server's own URL `https://inspomcp.dev/api/mcp` (no sign-in); clients connect to it directly. The listing link is a page, not an MCP endpoint.
- Type: remote (Streamable HTTP)
- Auth: none
- Category: [Design, Websites & CMS](https://mcp.tc/c/design)
- Vendor: Nutlope
- Homepage: <https://inspomcp.dev>
- Repository: <https://github.com/Nutlope/inspo>
- Package: npm `inspo-mcp`

## About

Inspo is a curated archive of about 800 shipped websites, with screenshots, extracted palettes, fonts, detected tech, named macrostructures and desktop and mobile captures. An assistant can search by style, industry, color or page type, compare sites, pull a full DESIGN.md for one site, and fetch reference component source.

It runs as a hosted streamable HTTP endpoint that needs no sign-in or API key. The same tools are available locally through the npm package inspo-mcp over stdio. An optional TOGETHER\_API\_KEY enables semantic query search in the local package.

## What it can do

- Get a design brief recommendation with example sites and palette
- Search real website screens by style, industry, color or page type
- Fetch the full DESIGN.md for a site
- Compare two to four sites side by side
- Find sites near a given hex color
- Browse examples of named layout macrostructures
- Fetch reference component JSX for heroes, pricing, nav and more

## Tools (15)

- `search_screens`: Search archived website screenshots, returning palette, fonts, components and image URLs. (read-only)
- `get_screen`: Fetch the full record for one screen, including viewport variants and tech stack. (read-only)
- `get_design_system`: Get the DESIGN.md for a screen: fonts, palette, CSS variables, type ramp. (read-only)
- `find_similar`: Find a screen's nearest design neighbours. (read-only)
- `compare`: Compare 2-4 sites across palette, typefaces, structure and scales. (read-only)
- `find_by_color`: Find sites whose palette is near a hex color. (read-only)
- `find_examples_for_macrostructure`: Return real sites exemplifying one of 19 named macrostructures. (read-only)
- `list_collections`: List editor-curated collections of screens. (read-only)
- `get_filters`: List every accepted filter value. (read-only)
- `get_site_pages`: Show a site's captured pages as an ordered flow. (read-only)
- `find_components`: Find sites featuring a UI component such as hero, pricing or footer. (read-only)
- `get_collection`: Fetch one collection with its blurb and ordered screens. (read-only)
- `find_reference_components`: Index of canonical reference components by type and macrostructure. (read-only)
- `recommend`: From a brief, return a macrostructure pick, exemplars, components and a palette. (read-only)
- `get_reference_jsx`: Return the full JSX source for one reference component. (read-only)

## Example prompts

- "Find design references for a dark SaaS landing page"
- "Show sites with a palette close to #1F6FEB"
- "Compare the design systems of three editorial portfolio sites"
- "Get reference JSX for a bento grid hero"

## Install

### Claude Code

1. Run this in a terminal, in your project folder:

```bash
claude mcp add --transport http inspo https://inspomcp.dev/api/mcp
```

2. Start Claude Code and type `/mcp`. **inspo** should show as connected.

Add `--scope user` to make it available in every project, not just this one.

### Claude Desktop

1. Open **Customize → Connectors**, click **+ Add**, then **Add custom connector**.

2. Name it **Inspo** and paste this URL:

```url
https://inspomcp.dev/api/mcp
```

3. Click **Add**. Its tools appear in the chat’s tools menu.

Claude Desktop’s JSON config file only starts local servers. Remote servers go through Connectors, and connectors you add on claude.ai show up here too.

### claude.ai

1. Open the connector form on claude.ai. This button fills in the name and URL for you:

[Add to claude.ai](<https://claude.ai/customize/connectors?modal=add-custom-connector&connectorName=Inspo&connectorUrl=https%3A%2F%2Finspomcp.dev%2Fapi%2Fmcp>) (opens connector settings)

2. Check that the URL reads `https://inspomcp.dev/api/mcp` and click **Add**.

3. Turn it on in a chat from the tools menu.

Free plans allow one custom connector. On Team and Enterprise plans an owner adds it under **Organization settings → Connectors**.

### ChatGPT

1. On chatgpt.com, open **Settings → Security and login** and turn on **Developer mode**.

2. Go to `chatgpt.com/plugins` and click **+** to create an app for a remote MCP server.

3. Paste `https://inspomcp.dev/api/mcp` as the server URL and choose **No authentication**.

Developer mode is available on the web for Plus, Pro, Business, Enterprise and Education accounts.

### Cursor

[Add to Cursor](<https://cursor.com/install-mcp?name=inspo&config=eyJ1cmwiOiJodHRwczovL2luc3BvbWNwLmRldi9hcGkvbWNwIn0%3D>) (opens Cursor)

Or add it by hand to `~/.cursor/mcp.json` (all projects) or `.cursor/mcp.json` (this project):

`mcp.json`:

```json
{
  "mcpServers": {
    "inspo": {
      "url": "https://inspomcp.dev/api/mcp"
    }
  }
}
```

### VS Code

[Install in VS Code](<https://vscode.dev/redirect/mcp/install?name=inspo&config=%7B%22type%22%3A%22http%22%2C%22url%22%3A%22https%3A%2F%2Finspomcp.dev%2Fapi%2Fmcp%22%7D>) (opens VS Code)

Or from a terminal:

```bash
code --add-mcp '{"name":"inspo","type":"http","url":"https://inspomcp.dev/api/mcp"}'
```

Or commit it to the repo in `.vscode/mcp.json`:

`.vscode/mcp.json`:

```json
{
  "servers": {
    "inspo": {
      "type": "http",
      "url": "https://inspomcp.dev/api/mcp"
    }
  }
}
```

### Devin Desktop

1. Add it to `~/.config/devin/mcp_config.json` (macOS and Linux) or `%APPDATA%\devin\mcp_config.json` (Windows):

`mcp_config.json`:

```json
{
  "mcpServers": {
    "inspo": {
      "serverUrl": "https://inspomcp.dev/api/mcp"
    }
  }
}
```

2. Refresh the MCP server list in Cascade.

Devin Desktop is the new name for Windsurf. It reads `serverUrl` (or `url`) for remote servers.

### Codex

```bash
codex mcp add inspo --url https://inspomcp.dev/api/mcp
```

Or edit `~/.codex/config.toml` directly:

`config.toml`:

```toml
[mcp_servers.inspo]
url = "https://inspomcp.dev/api/mcp"
```

### Gemini CLI

```bash
gemini mcp add --transport http inspo https://inspomcp.dev/api/mcp
```

This adds it to the current project. Add `-s user` to use it everywhere.

### Any client

Most clients accept this shape. Some name the URL field differently: `serverUrl` in Devin Desktop, `httpUrl` in Gemini CLI’s settings file.

```json
{
  "mcpServers": {
    "inspo": {
      "type": "http",
      "url": "https://inspomcp.dev/api/mcp"
    }
  }
}
```

Zed puts servers under `context_servers` in its settings. Cline needs `"type": "streamableHttp"`, or it assumes SSE.

Client only starts local servers? Bridge it with `npx -y mcp-remote https://inspomcp.dev/api/mcp`.

## Recent changes

- 2026-10-07 04:20 UTC: Tracking started: 15 tools read. Source: automatic check.

More on the History tab, with descriptions before and after for the newest entries: https://mcp.tc/i/inspo#history (Atom feed: https://mcp.tc/i/inspo/history.xml). It records what mcp.tc's anonymous checks saw, every 3 hours where the tool list can be read without sign-in; it is not a security review.

## Details

- Server version: hosted-0e1e636
- MCP protocol version: 2025-11-25
- Last checked: 2026-10-07 (reachable)
- Listed: 2026-10-07
- Updated: 2026-10-07

---
Source: https://mcp.tc/i/inspo (mcp.tc is an independent directory, not affiliated with this server's publisher). Corrections: https://mcp.tc/report