---
canonical_url: "https://docs.composio.dev/toolkits/inspo_mcp"
markdown_url: "https://docs.composio.dev/toolkits/inspo_mcp.md"
product: "platform"
version: null
last_updated: null
---

# Inspo MCP

Inspo MCP provides read-only design-reference search across captured production websites, components, color palettes, typography, and page structure for coding agents.

- **Category:** model context protocol
- **Auth:** NO_AUTH
- **Composio-managed OAuth available?** N/A
- **Tools:** 15
- **Triggers:** 0
- **Slug:** `INSPO_MCP`
- **Version:** 20260925_00

## Tools

### Compare

**Slug:** `INSPO_MCP_COMPARE`

Compare 2-4 captured sites across palette, typefaces, macrostructure, mode, style tags, type/spacing/radius scales and container width. Returns per-site breakdowns plus what they share - triangulates a house style from a few references.

#### Input Parameters

| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| `slugs` | array | Yes | 2-4 screen slugs to compare, e.g. ['linear-app','stripe-com','vercel-com']. Discover slugs with search_screens / find_similar. |

### Find by color

**Slug:** `INSPO_MCP_FIND_BY_COLOR`

Real sites whose extracted palette sits near a hex colour (OKLAB distance, so 'close' means the same colour family, not just the same hue). Use when a brief names a brand colour.

#### Input Parameters

| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| `hex` | string | Yes | Target colour as a hex string ('#c7402f', 'c7402f', '#fff'). Case-insensitive. 3- or 6-digit. |
| `limit` | integer | No |  |
| `detail` | string ("concise" | "standard" | "full") | No | 'standard' (default): northstar, palette, fonts, axes, macro and tags per row, plus the fold-by-fold autopsy on the top 3. 'full': the autopsy on every row (~300 tokens each; only if you will read them all). 'concise': northstar, palette, fonts. Text profile defaults to concise. |
| `maxTokens` | integer | No | Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive. |
| `tolerance` | number | No | Max OKLAB distance to count as a match. Defaults to 0.15 ('same family'). 0.05 ≈ 'near-identical', 0.30 ≈ 'in the same hue zip code'. |

### Find components

**Slug:** `INSPO_MCP_FIND_COMPONENTS`

Real sites featuring a specific UI component (hero, pricing, features, cta, nav, footer, testimonial, logo-cloud, faq, stat), with a per-element crop where one exists. For copy-pasteable code use get_reference_jsx.

#### Input Parameters

| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| `mode` | string ("light" | "dark") | No |  |
| `type` | string ("hero" | "pricing" | "features" | "cta" | "nav" | "footer" | "testimonial" | "logo-cloud" | "faq" | "stat") | Yes | Which component type to find |
| `vibe` | string ("calm" | "loud" | "playful" | "serious" | "luxe" | "raw" | "soft" | "technical" | "warm" | "cold") | No | Mood - 'calm', 'loud', 'luxe', etc. |
| `color` | string ("warm" | "cool" | "monochrome" | "neon" | "earthy" | "pastel" | "saturated" | "muted" | "high-contrast") | No | Color word - 'warm', 'cool', 'monochrome', etc. |
| `limit` | integer | No |  |
| `style` | string ("minimalism" | "editorial" | "brutalism" | "glassmorphism" | "swiss" | "maximalism" | "playful" | "dark-mode" | "monochrome" | "vintage" | "futurist") | No | Filter the parent site's style |
| `device` | string ("desktop" | "mobile") | No | 'mobile' restricts to sites with a 375px capture pair and inlines the mobile thumbnail. Default: desktop. |
| `industry` | string ("agency" | "ai" | "architecture" | "automotive" | "consumer-tech" | "creator" | "crypto" | "culture" | "developer-tools" | "ecommerce" | "education" | "fashion" | "fintech" | "food-beverage" | "furniture" | "gaming" | "health" | "media" | "music" | "non-profit" | "portfolio" | "saas" | "travel" | "type-foundry") | No |  |
| `pageType` | string ("landing" | "pricing" | "features" | "auth" | "about" | "blog" | "changelog" | "docs" | "other") | No | Only components from this page kind (e.g. 'pricing') |
| `maxTokens` | integer | No | Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive. |
| `macrostructure` | string ("bento-grid" | "long-document" | "marquee-hero" | "stat-led" | "conversational-faq" | "manifesto" | "photographic" | "specimen" | "catalogue" | "letter" | "index-first" | "narrative-workflow" | "split-studio" | "feature-stack" | "type-specimen" | "portfolio-grid" | "map-diagram" | "ecosystem-index" | "component-playground") | No |  |

### Find examples for macrostructure

**Slug:** `INSPO_MCP_FIND_EXAMPLES_FOR_MACROSTRUCTURE`

Real sites exemplifying one of the 19 named macrostructures. Call it at the macrostructure-pick step. Accepts slugs ('bento-grid') or display names ('Bento Grid').

#### Input Parameters

| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| `name` | string | Yes | Macrostructure name. e.g. 'bento-grid', 'Bento Grid', 'specimen', 'Marquee Hero'. |
| `limit` | integer | No |  |
| `detail` | string ("concise" | "standard" | "full") | No | 'standard' (default): northstar, palette, fonts, axes, macro and tags per row, plus the fold-by-fold autopsy on the top 3. 'full': the autopsy on every row (~300 tokens each; only if you will read them all). 'concise': northstar, palette, fonts. Text profile defaults to concise. |
| `device` | string ("desktop" | "mobile") | No | 'mobile' restricts to sites with a 375px capture pair and inlines the mobile thumbnail. Default: desktop. |
| `maxTokens` | integer | No | Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive. |

### Find reference components

**Slug:** `INSPO_MCP_FIND_REFERENCE_COMPONENTS`

The canonical reference components as an index: id, label, macrostructure and a note for each hero / pricing / cta / nav / footer archetype. Pick one, then get_reference_jsx(type, id) for its source.

#### Input Parameters

| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| `type` | string ("hero" | "pricing" | "features" | "cta" | "nav" | "footer" | "testimonial" | "logo-cloud" | "faq" | "stat") | No | Component category (hero, pricing, cta, …). Omit to scan all types. |
| `macro` | string | No | Substring match on the component's macro field - e.g. 'Marquee' matches 'Marquee Hero'. |

### Find similar

**Slug:** `INSPO_MCP_FIND_SIMILAR`

A screen's nearest design neighbours - ranked by design-similarity embeddings where available, else by macrostructure / industry / style overlap. One result per site.

#### Input Parameters

| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| `slug` | string | Yes |  |
| `limit` | integer | No |  |
| `detail` | string ("concise" | "standard" | "full") | No | 'standard' (default): northstar, palette, fonts, axes, macro and tags per row, plus the fold-by-fold autopsy on the top 3. 'full': the autopsy on every row (~300 tokens each; only if you will read them all). 'concise': northstar, palette, fonts. Text profile defaults to concise. |
| `sameSite` | boolean | No | Include other pages of the same site (default false: neighbours are other sites). |
| `maxTokens` | integer | No | Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive. |

### Get collection

**Slug:** `INSPO_MCP_GET_COLLECTION`

Fetch one issue by slug, including the editor's blurb and ordered screen list.

#### Input Parameters

| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| `slug` | string | Yes | Collection slug, e.g. 'editorial-layouts' |
| `detail` | string ("concise" | "standard" | "full") | No | 'standard' (default): northstar, palette, fonts, axes, macro and tags per row, plus the fold-by-fold autopsy on the top 3. 'full': the autopsy on every row (~300 tokens each; only if you will read them all). 'concise': northstar, palette, fonts. Text profile defaults to concise. |
| `maxTokens` | integer | No | Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive. |

### Get design system

**Slug:** `INSPO_MCP_GET_DESIGN_SYSTEM`

The full DESIGN.md for one screen - real fonts, frequency-ranked palette, CSS variables, detected tech, colour roles, type ramp. Thin captured tokens are supplemented by a live fetch of the source; `live=false` skips that.

#### Input Parameters

| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| `live` | boolean | No | If true (default), supplement thin captured tokens by fetching the source URL via study(). Set false to skip the network round-trip. |
| `slug` | string | Yes | Screen slug, e.g. 'linear-app'. Use search_screens or find_similar first to discover slugs. |

### Get filters

**Slug:** `INSPO_MCP_GET_FILTERS`

Every value the filters accept: styles, industries, macrostructures, modes, vibes, colors, page types, component types. Zero input. Call it when unsure - an out-of-vocabulary value errors.

### Get reference jsx

**Slug:** `INSPO_MCP_GET_REFERENCE_JSX`

The full canonical JSX source for one reference component, including the header stamp naming its macrostructure / theme / states. Copy-pasteable; tweak tokens to the target brand.

#### Input Parameters

| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| `id` | string | Yes | Reference id within that type (e.g. 'marquee', 'three-card'). |
| `type` | string ("hero" | "pricing" | "features" | "cta" | "nav" | "footer" | "testimonial" | "logo-cloud" | "faq" | "stat") | Yes | Component category |

### Get screen

**Slug:** `INSPO_MCP_GET_SCREEN`

Fetch the full record for one screen by slug - every viewport variant, palette, fonts, tech stack, designer credit.

#### Input Parameters

| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| `slug` | string | Yes | Screen slug, e.g. 'atelier-mira' |

### Get site pages

**Slug:** `INSPO_MCP_GET_SITE_PAGES`

A site's captured pages as an ordered flow (landing → pricing → features → ...) with titles, northstars and thumbnails - how a real product sequences its pages. No arguments returns the directory of flow-capable sites. Accepts a site or screen slug.

#### Input Parameters

| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| `limit` | integer | No | Directory mode only: max sites to list. |
| `siteSlug` | string | No | Site slug (e.g. 'linear-app') or any screen slug from that site. Omit to list flow-capable sites instead. |
| `maxTokens` | integer | No | Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive. |

### List collections

**Slug:** `INSPO_MCP_LIST_COLLECTIONS`

List every editor-curated issue. Use this for thematic browsing - e.g. all 'Editorial Layouts' or 'Dark Product Pages'.

### Recommend

**Slug:** `INSPO_MCP_RECOMMEND`

Orchestrator - start here for a brief. One call returns a macrostructure pick, 5 real exemplars, matching reference components (source via get_reference_jsx), a palette suggestion, and an `evidence` packet measuring the genre's paper band / display class / accent hue. Pass a macrostructure to skip the pick step. No LLM call.

#### Input Parameters

| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| `mode` | string ("light" | "dark") | No | Optional: 'light' or 'dark'. |
| `vibe` | string ("calm" | "loud" | "playful" | "serious" | "luxe" | "raw" | "soft" | "technical" | "warm" | "cold") | No | Optional vibe filter. |
| `brief` | string | Yes | The user's design brief in plain English. E.g. 'calm meditation app', 'dark dev-tool that helps teams ship faster'. |
| `color` | string ("warm" | "cool" | "monochrome" | "neon" | "earthy" | "pastel" | "saturated" | "muted" | "high-contrast") | No | Optional colour word. |
| `detail` | string ("concise" | "standard" | "full") | No | 'standard' (default): northstar, palette, fonts, axes, macro and tags per row, plus the fold-by-fold autopsy on the top 3. 'full': the autopsy on every row (~300 tokens each; only if you will read them all). 'concise': northstar, palette, fonts. Text profile defaults to concise. |
| `device` | string ("desktop" | "mobile") | No | 'mobile' restricts to sites with a 375px capture pair and inlines the mobile thumbnail. Default: desktop. |
| `pageType` | string ("landing" | "pricing" | "features" | "auth" | "about" | "blog" | "changelog" | "docs" | "other") | No | Optional: 'landing', 'pricing', 'features', etc. |
| `maxTokens` | integer | No | Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive. |
| `macrostructure` | string ("bento-grid" | "long-document" | "marquee-hero" | "stat-led" | "conversational-faq" | "manifesto" | "photographic" | "specimen" | "catalogue" | "letter" | "index-first" | "narrative-workflow" | "split-studio" | "feature-stack" | "type-specimen" | "portfolio-grid" | "map-diagram" | "ecosystem-index" | "component-playground") | No | Optional: a macrostructure already picked. Skips the pick step. |

### Search screens

**Slug:** `INSPO_MCP_SEARCH_SCREENS`

Search the archive of real website screenshots. Returns screens with palette, fonts, components and image URLs.

#### Input Parameters

| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| `mode` | string ("light" | "dark") | No | light or dark |
| `vibe` | string ("calm" | "loud" | "playful" | "serious" | "luxe" | "raw" | "soft" | "technical" | "warm" | "cold") | No | Mood / vibe - 'calm', 'loud', 'luxe', 'technical', 'soft', etc. |
| `color` | string ("warm" | "cool" | "monochrome" | "neon" | "earthy" | "pastel" | "saturated" | "muted" | "high-contrast") | No | Color word - 'warm', 'cool', 'monochrome', 'neon', 'earthy' |
| `limit` | integer | No |  |
| `query` | string | No | Natural-language description of what you're looking for. e.g. 'minimalist editorial agency portfolio' |
| `style` | string ("minimalism" | "editorial" | "brutalism" | "glassmorphism" | "swiss" | "maximalism" | "playful" | "dark-mode" | "monochrome" | "vintage" | "futurist") | No | Filter to one visual style (e.g. 'minimalism', 'editorial') |
| `detail` | string ("concise" | "standard" | "full") | No | 'standard' (default): northstar, palette, fonts, axes, macro and tags per row, plus the fold-by-fold autopsy on the top 3. 'full': the autopsy on every row (~300 tokens each; only if you will read them all). 'concise': northstar, palette, fonts. Text profile defaults to concise. |
| `device` | string ("desktop" | "mobile") | No | 'mobile' restricts to sites with a 375px capture pair and inlines the mobile thumbnail. Default: desktop. |
| `industry` | string ("agency" | "ai" | "architecture" | "automotive" | "consumer-tech" | "creator" | "crypto" | "culture" | "developer-tools" | "ecommerce" | "education" | "fashion" | "fintech" | "food-beverage" | "furniture" | "gaming" | "health" | "media" | "music" | "non-profit" | "portfolio" | "saas" | "travel" | "type-foundry") | No | Filter to one industry (e.g. 'saas', 'fintech', 'portfolio') |
| `pageType` | string ("landing" | "pricing" | "features" | "auth" | "about" | "blog" | "changelog" | "docs" | "other") | No | Filter to a page kind: 'landing' (default homepages), 'pricing', 'features', 'auth', 'about', 'blog', 'changelog', 'docs', 'other' |
| `accentHue` | string ("warm" | "cool" | "neutral" | "chromatic-other") | No | Accent temperature: 'warm' (10-60°), 'cool' (200-300°), 'neutral' (unsaturated), 'chromatic-other' (greens, magentas, everything else). |
| `maxTokens` | integer | No | Approximate token ceiling for this response. Trims lower-ranked results and thumbnails; the top result and all URLs survive. |
| `paperBand` | string ("dark" | "mid" | "light") | No | Surface lightness, measured from the capture: 'dark' (<30% L), 'mid' (30-85%), 'light' (>85%). More reliable than `mode`, which is tagged and disagrees with the measurement on ~15% of rows. |
| `displayClass` | string ("grotesk-sans" | "geometric-sans" | "roman-serif" | "italic-serif" | "slab-serif" | "mono" | "display-condensed-bold" | "display-heavy" | "system-native" | "handwritten") | No | Construction of the display face: 'grotesk-sans', 'geometric-sans', 'roman-serif', 'mono', 'display-condensed-bold', etc. |
| `macrostructure` | string ("bento-grid" | "long-document" | "marquee-hero" | "stat-led" | "conversational-faq" | "manifesto" | "photographic" | "specimen" | "catalogue" | "letter" | "index-first" | "narrative-workflow" | "split-studio" | "feature-stack" | "type-specimen" | "portfolio-grid" | "map-diagram" | "ecosystem-index" | "component-playground") | No | Filter to a macrostructure (e.g. 'bento-grid') |