Inspo

Descrizione

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.

Cosa puoi fare

• 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

Tool 15

• search_screensSola lettura

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

• get_screenSola lettura

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

• get_design_systemSola lettura

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

• find_similarSola lettura

  Find a screen's nearest design neighbours.

• compareSola lettura

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

• find_by_colorSola lettura

  Find sites whose palette is near a hex color.

• find_examples_for_macrostructureSola lettura

  Return real sites exemplifying one of 19 named macrostructures.

• list_collectionsSola lettura

  List editor-curated collections of screens.

• get_filtersSola lettura

  List every accepted filter value.

• get_site_pagesSola lettura

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

• find_componentsSola lettura

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

• get_collectionSola lettura

  Fetch one collection with its blurb and ordered screens.

Letti dal server attivo (7 ott 2026). Sola lettura, Scrive e Può eliminare sono indicazioni dichiarate dal server; è il tuo client a decidere se chiederti conferma prima di eseguire un tool.

Prompt di esempio

• 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

Configurazione

Ogni client si collega a inspomcp.dev. Scegli il tuo; la pagina ricorda la tua scelta.

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

https://inspomcp.dev/api/mcp

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

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

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

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

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

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

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

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

Embed

Mostra Inspo in un README o sul tuo sito. Ogni embed rimanda a questa pagina, usa l’URL del server stesso e non imposta cookie. Come funzionano gli embed

Card, iframe e JSON sono in inglese. Aggiungi ?lang=it, fr, de o es al loro indirizzo per un’altra lingua.

Badge per il README Card per il sito iframe JSON Prompt per l’AI

Badge per il README

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>

Segue la modalità chiara o scura di chi legge. Aggiungi ?theme=light o ?theme=dark per fissarla, oppure ?style=compact per mostrare il simbolo senza la scritta.

Card per il sito

HTML

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

La card compare dove si trova il tag. Aggiungi data-theme="dark" o data-size="compact" al tag per cambiarla. Il file contiene tutto ciò che serve, quindi non fa altre richieste e non imposta 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>

Usalo nelle pagine che non consentono script. Aggiungi ?theme=light o ?theme=dark all’indirizzo per fissare i colori.

JSON

La scheda come dati per le tue pagine e i tuoi strumenti: nome, descrizione breve, URL del server, tool e i link «Add to». Qualsiasi sito può leggerla (CORS aperto).

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

Cosa significa ogni campo

Prompt per l’AI

Incollalo in un assistente di programmazione con l’AI, come Claude Code o Cursor, e aggiungerà la card di Inspo al tuo sito.

Markdown

Aggiungi al mio sito la card di mcp.tc per Inspo, un server MCP. È un solo script statico: niente build, nessun pacchetto da installare, nessun cookie.

Metti questo tag dove deve comparire la card. La card appare subito prima del tag:

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

Per mostrarla altrove, metti lì questo segnaposto e carica lo stesso script una volta sola, per esempio prima di `</body>`. Lascia il link al suo interno: lo vede chi non ha JavaScript.

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

Opzioni:
- `data-theme="light"` o `"dark"` sul tag o sul segnaposto fissa i colori. Senza l’attributo, la card segue la modalità chiara o scura di chi visita.
- `data-size="compact"` dà una card più piccola, senza la descrizione breve.
- La variabile CSS `--mcptc-max-width` sul segnaposto o su un elemento padre imposta la larghezza (predefinita `520px`).
- `?lang=` nell’URL dello script imposta la lingua della card: `en`, `it`, `fr`, `de` o `es`.

Se il sito ha una Content Security Policy, consenti `script-src https://mcp.tc` e `img-src data:` (l’icona è inline).

Per un README o altra documentazione in Markdown, usa invece il badge:

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

Riferimento: https://mcp.tc/it/embed

Cronologia delle modifiche

Leggiamo l’elenco dei tool di questo server ogni 3 ore e registriamo cosa cambia. Ultima lettura: 8 ott 2026, 10:35 UTC.

1. 7 ott 2026, 04:20 UTC, Controllo automatico

   Inizio del tracciamento: 15 tool.

Domande frequenti