Inspo

MCP-Server von Nutlope

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

Ohne Anmeldung (Kein Konto und kein Schlüssel nötig)Streamable HTTP

Mit Inspo verbinden

Keine Anmeldung nötig. Verbinde dich mit der eigenen URL von Inspo:

https://inspomcp.dev/api/mcp

Füg sie in jeden Client ein, der Remote-MCP-Server unterstützt. Dein Client spricht direkt mit Nutlope, nicht über mcp.tc.

Diesen Server teilen

Öffnet diese Seite mit der URL und den Einrichtungsschritten.

mcp.tc/i/inspo

Über den Server

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.

Was du damit machen kannst

  • 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_screensLiest nur

    Search archived website screenshots, returning palette, fonts, components and image URLs.

  • get_screenLiest nur

    Fetch the full record for one screen, including viewport variants and tech stack.

  • get_design_systemLiest nur

    Get the DESIGN.md for a screen: fonts, palette, CSS variables, type ramp.

  • find_similarLiest nur

    Find a screen's nearest design neighbours.

  • compareLiest nur

    Compare 2-4 sites across palette, typefaces, structure and scales.

  • find_by_colorLiest nur

    Find sites whose palette is near a hex color.

  • find_examples_for_macrostructureLiest nur

    Return real sites exemplifying one of 19 named macrostructures.

  • list_collectionsLiest nur

    List editor-curated collections of screens.

  • get_filtersLiest nur

    List every accepted filter value.

  • get_site_pagesLiest nur

    Show a site's captured pages as an ordered flow.

  • find_componentsLiest nur

    Find sites featuring a UI component such as hero, pricing or footer.

  • get_collectionLiest nur

    Fetch one collection with its blurb and ordered screens.

3 weitere Tools anzeigen
  • find_reference_componentsLiest nur

    Index of canonical reference components by type and macrostructure.

  • recommendLiest nur

    From a brief, return a macrostructure pick, exemplars, components and a palette.

  • get_reference_jsxLiest nur

    Return the full JSX source for one reference component.

Am 7. Okt. 2026 vom laufenden Server gelesen. „Liest nur“, „Schreibt“ und „Kann löschen“ sind Hinweise, die der Server selbst angibt; dein Client entscheidet, ob er vor dem Ausführen eines Tools nachfragt.

Beispiel-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

Einrichtung

Jeder Client verbindet sich mit inspomcp.dev. Wähl deinen; die Seite merkt sich deine Wahl.

Claude Code

  1. Führe das in einem Terminal in deinem Projektordner aus:
claude mcp add --transport http inspo https://inspomcp.dev/api/mcp
  1. Starte Claude Code und tippe /mcp. inspo sollte als verbunden angezeigt werden.

Ergänze --scope user, damit er in jedem Projekt verfügbar ist, nicht nur in diesem.

Claude Desktop

  1. Öffne Customize → Connectors, klick auf + Add und dann auf Add custom connector.
  2. Nenne ihn Inspo und füge diese URL ein:
https://inspomcp.dev/api/mcp
  1. Klick auf Add. Seine Tools erscheinen im Tool-Menü des Chats.

Die JSON-Konfigurationsdatei von Claude Desktop startet nur lokale Server. Remote-Server laufen über Connectors, und Connectors, die du auf claude.ai hinzufügst, erscheinen auch hier.

claude.ai

  1. Öffne das Connector-Formular auf claude.ai. Dieser Button füllt Name und URL für dich aus:
  1. Prüfe, dass die URL https://inspomcp.dev/api/mcp lautet, und klick auf Add.
  2. Schalte ihn in einem Chat über das Tool-Menü ein.

Kostenlose Pläne erlauben einen benutzerdefinierten Connector. In Team- und Enterprise-Plänen fügt ihn ein Owner unter Organization settings → Connectors hinzu.

ChatGPT

  1. Öffne auf chatgpt.com Settings → Security and login und schalte Developer mode ein.
  2. Geh zu chatgpt.com/plugins und klick auf +, um eine App für einen Remote-MCP-Server anzulegen.
  3. Füge https://inspomcp.dev/api/mcp als Server-URL ein und wähle No authentication.

Der Entwicklermodus steht im Web für Plus-, Pro-, Business-, Enterprise- und Education-Konten zur Verfügung.

Cursor

Oder trag ihn von Hand in ~/.cursor/mcp.json (alle Projekte) oder .cursor/mcp.json (dieses Projekt) ein:

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

VS Code

Oder aus einem Terminal:

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

Oder committe ihn ins Repository in .vscode/mcp.json:

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

Devin Desktop

  1. Füge ihn zu ~/.config/devin/mcp_config.json (macOS und Linux) oder %APPDATA%\devin\mcp_config.json (Windows) hinzu:
mcp_config.json
{
  "mcpServers": {
    "inspo": {
      "serverUrl": "https://inspomcp.dev/api/mcp"
    }
  }
}
  1. Aktualisiere die Liste der MCP-Server in Cascade.

Devin Desktop ist der neue Name von Windsurf. Für Remote-Server liest es serverUrl (oder url).

Codex

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

Oder bearbeite ~/.codex/config.toml direkt:

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

Gemini CLI

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

Damit fügst du ihn dem aktuellen Projekt hinzu. Ergänze -s user, um ihn überall zu nutzen.

Jeder Client

Die meisten Clients akzeptieren diese Form. Manche nennen das URL-Feld anders: serverUrl in Devin Desktop, httpUrl in der Einstellungsdatei von Gemini CLI.

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

Zed legt Server in seinen Einstellungen unter context_servers ab. Cline braucht "type": "streamableHttp", sonst nimmt es SSE an.

Dein Client startet nur lokale Server? Dann binde den Server über npx -y mcp-remote https://inspomcp.dev/api/mcp ein.

Einbinden

Zeig Inspo in einem README oder auf deiner Website. Jede Einbindung verlinkt auf diese Seite, nutzt die eigene URL des Servers und setzt keine Cookies. So funktionieren Einbindungen

Karte, iframe und JSON sind auf Englisch. Häng ?lang=it, fr, de oder es an ihre Adresse an, um eine andere Sprache zu bekommen.

README-Badge

Badge-Vorschau, hellBadge-Vorschau, dunkel
Markdown
[![Inspo on mcp.tc](https://mcp.tc/i/inspo/badge.svg)](https://mcp.tc/i/inspo)
HTML
<a href="https://mcp.tc/i/inspo"><img src="https://mcp.tc/i/inspo/badge.svg" alt="Inspo on mcp.tc" height="20"></a>

Es folgt dem hellen oder dunklen Modus der Lesenden. Hänge ?theme=light oder ?theme=dark an, um ihn festzulegen, oder ?style=compact, um das Zeichen ohne Schriftzug zu zeigen.

Website-Karte

HTML
<script src="https://mcp.tc/w/inspo.js" async></script>

Die Karte erscheint dort, wo das Tag steht. Füge dem Tag data-theme="dark" oder data-size="compact" hinzu, um sie zu ändern. Die Datei enthält alles, was sie braucht, stellt also keine weiteren Anfragen und setzt keine Cookies.

iframe

HTML
<iframe src="https://mcp.tc/embed/inspo" title="Inspo on mcp.tc" width="420" height="200" loading="lazy" allow="clipboard-write" style="border:0;border-radius:8px;max-width:100%"></iframe>

Nutze es auf Seiten, die keine Skripte erlauben. Hänge ?theme=light oder ?theme=dark an die Adresse an, um die Farben festzulegen.

JSON

Der Eintrag als Daten für deine eigenen Seiten und Tools: Name, Kurzbeschreibung, die eigene URL des Servers, Tools und die „Add to“-Links. Jede Website kann ihn lesen (CORS ist offen).

https://mcp.tc/i/inspo.json

Was jedes Feld bedeutet

KI-Prompt

Füg ihn in einen KI-Coding-Assistenten wie Claude Code oder Cursor ein, und er baut die Karte von Inspo in deine Website ein.

Markdown
Füge meiner Website die mcp.tc-Karte für den MCP-Server Inspo hinzu. Es ist ein einziges statisches Skript: kein Build-Schritt, kein Paket zu installieren, keine Cookies.

Setz dieses Tag dorthin, wo die Karte erscheinen soll. Die Karte erscheint direkt davor:

```html
<script src="https://mcp.tc/w/inspo.js" async></script>
```

Um sie woanders zu zeigen, setz dort diesen Platzhalter ein und lade dasselbe Skript nur einmal, zum Beispiel vor `</body>`. Lass den Link darin stehen: Besucher ohne JavaScript sehen ihn.

```html
<div data-mcptc="inspo"><a href="https://mcp.tc/i/inspo">Inspo on mcp.tc</a></div>
```

Optionen:
- `data-theme="light"` oder `"dark"` am Tag oder Platzhalter legt die Farben fest. Ohne das Attribut folgt die Karte dem hellen oder dunklen Modus der Besucher.
- `data-size="compact"` ergibt eine kleinere Karte ohne Kurzbeschreibung.
- Die CSS-Variable `--mcptc-max-width` am Platzhalter oder einem Elternelement legt die Breite fest (Standard `520px`).
- `?lang=` in der Skript-URL legt die Sprache der Karte fest: `en`, `it`, `fr`, `de` oder `es`.

Wenn die Website eine Content Security Policy hat, erlaube `script-src https://mcp.tc` und `img-src data:` (das Icon ist eingebettet).

Für ein README oder andere Markdown-Dokumentation nimm stattdessen das Badge:

```markdown
[![Inspo on mcp.tc](https://mcp.tc/i/inspo/badge.svg)](https://mcp.tc/i/inspo)
```

Referenz: https://mcp.tc/de/embed

Änderungsverlauf

Wir lesen die Tool-Liste dieses Servers alle 3 Stunden und halten fest, was sich ändert. Zuletzt gelesen: 8. Okt. 2026, 10:35 UTC.

Folge Inspo, und wir schicken dir eine E-Mail, wenn sich etwas ändert.

  1. , Automatische Prüfung

    Beginn der Beobachtung: 15 Tools.

Häufige Fragen

Kann ich mcp.tc/i/inspo in meinen MCP-Client einfügen?

Nein. mcp.tc-Links sind Seiten, keine Server-Adressen. Verbinde dich mit https://inspomcp.dev/api/mcp, damit dein Client direkt mit Inspo spricht. Der Quick-Link ist zum Teilen da: Er öffnet diese Seite, mit Einrichtungsschritten für jeden Client.

Braucht Inspo einen API-Schlüssel oder eine Anmeldung?

Nein. Inspo verlangt weder Konto noch Schlüssel.

Ist Inspo ein Remote- oder ein lokaler Server?

Remote. Nutlope hostet ihn unter https://inspomcp.dev/api/mcp, und er spricht Streamable HTTP. Es gibt nichts zu installieren.

Was kann Inspo?

Er hat 15 Tools, darunter search_screens, get_screen und get_design_system.

Welche Clients können ihn nutzen?

Jeder Client, der Remote-MCP-Server unterstützt: Claude Code, Claude Desktop, claude.ai, ChatGPT im Entwicklermodus, Cursor, VS Code, Devin Desktop, Codex, Gemini CLI, Zed und andere. Die Einrichtungsschritte decken jeden davon ab.

Verfolgt mcp.tc Änderungen an Inspo?

Ja. Der Tab Verlauf von Inspo zeigt jede Änderung, die wir an seinen Tools finden, bis hin zu Beschreibungen und Parametern, dazu neue Versionen und Änderungen seines Betreibers. Folge dem Eintrag, um eine E-Mail zu bekommen, wenn er sich ändert.

Wer hat diese Seite geschrieben?

Der Roboter von mcp.tc hat die eigenen Metadaten von Inspo (seinen MCP-Handshake, seine Tool-Liste und öffentliche Seiten) gelesen, und ein KI-Modell hat daraus den Text entworfen. Ein Mensch prüft alles, was die Prüfungen nicht bestätigen können. Der Text kann trotzdem falsch sein; wenn dir ein Fehler auffällt, nutze Eintrag melden auf dieser Seite.

mcp.tc steht in keiner Verbindung zu Nutlope. Diese Seite entstand aus den öffentlichen Metadaten von Inspo, zuletzt geprüft am 7. Okt. 2026, und ein KI-Modell hat die Beschreibung geschrieben, sie kann also Fehler enthalten. Namen und Marken gehören ihren Inhabern. Stimmt etwas nicht? Eintrag melden.