Inspo

Serveur MCP par Nutlope

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

Sans compte (Ni compte ni clé nécessaires)Streamable HTTP

Connecter Inspo

Aucun compte nécessaire. Connectez votre client à l’URL de Inspo :

https://inspomcp.dev/api/mcp

Collez-la dans n’importe quel client compatible avec les serveurs MCP distants. Votre client parle directement à Nutlope, sans passer par mcp.tc.

Partager ce serveur

Ouvre cette page, avec l’URL et les étapes de configuration.

mcp.tc/i/inspo

Présentation

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.

Ce que vous pouvez faire

  • 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

Outils 15

  • search_screensLecture seule

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

  • get_screenLecture seule

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

  • get_design_systemLecture seule

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

  • find_similarLecture seule

    Find a screen's nearest design neighbours.

  • compareLecture seule

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

  • find_by_colorLecture seule

    Find sites whose palette is near a hex color.

  • find_examples_for_macrostructureLecture seule

    Return real sites exemplifying one of 19 named macrostructures.

  • list_collectionsLecture seule

    List editor-curated collections of screens.

  • get_filtersLecture seule

    List every accepted filter value.

  • get_site_pagesLecture seule

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

  • find_componentsLecture seule

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

  • get_collectionLecture seule

    Fetch one collection with its blurb and ordered screens.

Afficher 3 outils de plus
  • find_reference_componentsLecture seule

    Index of canonical reference components by type and macrostructure.

  • recommendLecture seule

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

  • get_reference_jsxLecture seule

    Return the full JSX source for one reference component.

Lus directement sur le serveur le 7 oct. 2026. Lecture seule, Écriture et Peut supprimer sont des indications déclarées par le serveur ; c’est votre client qui décide de vous demander confirmation avant d’exécuter un outil.

Exemples de 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

Configuration

Chaque client se connecte à inspomcp.dev. Choisissez le vôtre ; la page retient votre choix.

Claude Code

  1. Lancez ceci dans un terminal, dans le dossier de votre projet :
claude mcp add --transport http inspo https://inspomcp.dev/api/mcp
  1. Démarrez Claude Code et tapez /mcp. inspo devrait apparaître comme connecté.

Ajoutez --scope user pour le rendre disponible dans tous vos projets, pas seulement celui-ci.

Claude Desktop

  1. Ouvrez Customize → Connectors, cliquez sur + Add, puis sur Add custom connector.
  2. Nommez-le Inspo et collez cette URL :
https://inspomcp.dev/api/mcp
  1. Cliquez sur Add. Ses outils apparaissent dans le menu des outils de la conversation.

Le fichier de configuration JSON de Claude Desktop ne lance que des serveurs locaux. Les serveurs distants passent par les Connectors, et les connecteurs ajoutés sur claude.ai apparaissent aussi ici.

claude.ai

  1. Ouvrez le formulaire des connecteurs sur claude.ai. Ce bouton remplit le nom et l’URL pour vous :
  1. Vérifiez que l’URL est https://inspomcp.dev/api/mcp et cliquez sur Add.
  2. Activez-le dans une conversation depuis le menu des outils.

Les offres gratuites permettent un connecteur personnalisé. Sur les offres Team et Enterprise, un propriétaire l’ajoute dans Organization settings → Connectors.

ChatGPT

  1. Sur chatgpt.com, ouvrez Settings → Security and login et activez Developer mode.
  2. Allez sur chatgpt.com/plugins et cliquez sur + pour créer une application pour un serveur MCP distant.
  3. Collez https://inspomcp.dev/api/mcp comme URL du serveur et choisissez No authentication.

Le mode développeur est disponible sur le web pour les comptes Plus, Pro, Business, Enterprise et Education.

Cursor

Ou ajoutez-le à la main dans ~/.cursor/mcp.json (tous les projets) ou .cursor/mcp.json (ce projet) :

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

VS Code

Ou depuis un terminal :

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

Ou committez-le dans le dépôt, dans .vscode/mcp.json :

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

Devin Desktop

  1. Ajoutez-le à ~/.config/devin/mcp_config.json (macOS et Linux) ou %APPDATA%\devin\mcp_config.json (Windows) :
mcp_config.json
{
  "mcpServers": {
    "inspo": {
      "serverUrl": "https://inspomcp.dev/api/mcp"
    }
  }
}
  1. Actualisez la liste des serveurs MCP dans Cascade.

Devin Desktop est le nouveau nom de Windsurf. Pour les serveurs distants, il lit serverUrl (ou url).

Codex

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

Ou modifiez directement ~/.codex/config.toml :

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

Gemini CLI

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

Cela l’ajoute au projet en cours. Ajoutez -s user pour l’utiliser partout.

Tout client

La plupart des clients acceptent cette forme. Certains nomment autrement le champ de l’URL : serverUrl dans Devin Desktop, httpUrl dans le fichier de réglages de Gemini CLI.

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

Zed place les serveurs sous context_servers dans ses réglages. Cline a besoin de "type": "streamableHttp", sinon il suppose SSE.

Votre client ne lance que des serveurs locaux ? Reliez-le avec npx -y mcp-remote https://inspomcp.dev/api/mcp.

Intégrer

Affichez Inspo dans un README ou sur votre site. Chaque intégration renvoie à cette page, utilise l’URL du serveur et ne dépose aucun cookie. Comment fonctionnent les intégrations

La carte, l’iframe et le JSON sont en anglais. Ajoutez ?lang=it, fr, de ou es à leur adresse pour une autre langue.

Badge pour README

Aperçu du badge, clairAperçu du badge, sombre
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>

Il suit le mode clair ou sombre du lecteur. Ajoutez ?theme=light ou ?theme=dark pour le fixer, ou ?style=compact pour afficher le symbole sans le nom.

Carte pour site web

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

La carte apparaît à l’endroit de la balise. Ajoutez data-theme="dark" ou data-size="compact" à la balise pour la modifier. Le fichier contient tout ce qu’il lui faut : il ne fait aucune autre requête et ne dépose aucun cookie.

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>

Utilisez-la sur les pages qui n’autorisent pas les scripts. Ajoutez ?theme=light ou ?theme=dark à l’adresse pour fixer les couleurs.

JSON

La fiche sous forme de données pour vos pages et vos outils : nom, accroche, URL du serveur, outils et liens « Add to ». N’importe quel site peut la lire (CORS ouvert).

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

Ce que signifie chaque champ

Prompt pour l’IA

Collez-le dans un assistant de code IA, comme Claude Code ou Cursor, et il ajoutera la carte de Inspo à votre site.

Markdown
Ajoute à mon site la carte mcp.tc de Inspo, un serveur MCP. C’est un seul script statique : pas de build, aucun paquet à installer, aucun cookie.

Place cette balise là où la carte doit apparaître. La carte s’affiche juste avant elle :

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

Pour l’afficher ailleurs, mets ce conteneur à cet endroit et charge le même script une seule fois, par exemple avant `</body>`. Garde le lien à l’intérieur : les visiteurs sans JavaScript le voient.

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

Options :
- `data-theme="light"` ou `"dark"` sur la balise ou le conteneur fixe les couleurs. Sans cela, la carte suit le mode clair ou sombre du visiteur.
- `data-size="compact"` donne une carte plus petite, sans l’accroche.
- La variable CSS `--mcptc-max-width` sur le conteneur ou un parent fixe la largeur (`520px` par défaut).
- `?lang=` dans l’URL du script choisit la langue de la carte : `en`, `it`, `fr`, `de` ou `es`.

Si le site a une Content Security Policy, autorise `script-src https://mcp.tc` et `img-src data:` (l’icône est intégrée).

Pour un README ou une autre doc en Markdown, utilise plutôt le badge :

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

Référence : https://mcp.tc/fr/embed

Historique des changements

Nous lisons la liste d’outils de ce serveur toutes les 3 heures et notons ce qui change. Dernière lecture : 8 oct. 2026, 10:35 UTC.

Suivez Inspo et nous vous enverrons un e-mail quand quelque chose change.

  1. , Vérification automatique

    Début de l’observation : 15 outils.

FAQ

Puis-je coller mcp.tc/i/inspo dans mon client MCP ?

Non. Les liens mcp.tc sont des pages, pas des adresses de serveur. Connectez votre client à https://inspomcp.dev/api/mcp, pour qu’il parle directement à Inspo. Le lien rapide sert au partage : il ouvre cette page, avec les étapes de configuration pour chaque client.

Inspo a-t-il besoin d’une clé API ou d’une connexion ?

Non. Inspo ne demande ni compte ni clé.

Inspo est-il un serveur distant ou local ?

Distant. Nutlope l’héberge à https://inspomcp.dev/api/mcp, et il utilise Streamable HTTP. Il n’y a rien à installer.

Que peut faire Inspo ?

Il a 15 outils, dont search_screens, get_screen et get_design_system.

Quels clients peuvent l’utiliser ?

Tout client compatible avec les serveurs MCP distants : Claude Code, Claude Desktop, claude.ai, ChatGPT en mode développeur, Cursor, VS Code, Devin Desktop, Codex, Gemini CLI, Zed et d’autres. Les étapes de configuration couvrent chacun d’eux.

mcp.tc suit-il les changements de Inspo ?

Oui. L’onglet Historique de Inspo montre chaque changement que nous trouvons dans ses outils, jusqu’aux descriptions et aux paramètres, ainsi que les nouvelles versions et les modifications de son propriétaire. Suivez la fiche pour recevoir un e-mail quand elle change.

Qui a rédigé cette page ?

Le robot de mcp.tc a lu les métadonnées de Inspo (son handshake MCP, sa liste d’outils et ses pages publiques), et un modèle d’IA en a tiré le texte. Une personne examine tout ce que les vérifications ne peuvent pas confirmer. Le texte peut encore contenir des erreurs : si vous en repérez une, utilisez Signaler cette fiche sur cette page.

mcp.tc n’est pas affilié à Nutlope. Cette page a été construite à partir des métadonnées publiques de Inspo, vérifiées pour la dernière fois le 7 oct. 2026, et un modèle d’IA a rédigé la description : elle peut contenir des erreurs. Les noms et marques appartiennent à leurs propriétaires. Quelque chose cloche ? Signaler cette fiche.