# Inspo MCP

```json
{
  "name": "Inspo MCP",
  "slug": "inspo_mcp",
  "url": "https://composio.dev/toolkits/inspo_mcp",
  "markdown_url": "https://composio.dev/toolkits/inspo_mcp.md",
  "logo_url": "https://logos.composio.dev/api/inspo_mcp",
  "categories": [
    "design & creative tools"
  ],
  "is_composio_managed": false,
  "updated_at": "2026-10-04T17:37:47.796Z"
}
```

![Inspo MCP logo](https://logos.composio.dev/api/inspo_mcp)

## Description

Securely connect your AI agents and chatbots (Claude, ChatGPT, Cursor, etc) with Inspo MCP or direct API to search captured pages, find UI components, retrieve color palettes, and inspect typography and page structure through natural language.

## Summary

Inspo MCP is a read-only design-reference search across captured production websites, components, palettes, typography, and page structure.
Use it to quickly surface real-world UI examples, component implementations, and style details.

## Categories

- design & creative tools

## Toolkit Details

- Tools: 15

## Images

- Logo: https://logos.composio.dev/api/inspo_mcp

## Authentication

- **No Auth**
  - Type: `custom`
  - Description: No Auth authentication for Inspo MCP.
  - Setup:
    - Configure No Auth credentials for Inspo MCP.
    - Use the credentials when creating an auth config in Composio.

## Suggested Prompts

- Find components matching this hero section
- List color palettes used on homepage
- Show typography tokens for site header

## Supported Tools

| Tool slug | Name | Description |
|---|---|---|
| `INSPO_MCP_COMPARE` | 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. |
| `INSPO_MCP_FIND_BY_COLOR` | 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. |
| `INSPO_MCP_FIND_COMPONENTS` | 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. |
| `INSPO_MCP_FIND_EXAMPLES_FOR_MACROSTRUCTURE` | 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'). |
| `INSPO_MCP_FIND_REFERENCE_COMPONENTS` | 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. |
| `INSPO_MCP_FIND_SIMILAR` | 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. |
| `INSPO_MCP_GET_COLLECTION` | Get collection | Fetch one issue by slug, including the editor's blurb and ordered screen list. |
| `INSPO_MCP_GET_DESIGN_SYSTEM` | 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. |
| `INSPO_MCP_GET_FILTERS` | 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. |
| `INSPO_MCP_GET_REFERENCE_JSX` | 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. |
| `INSPO_MCP_GET_SCREEN` | Get screen | Fetch the full record for one screen by slug - every viewport variant, palette, fonts, tech stack, designer credit. |
| `INSPO_MCP_GET_SITE_PAGES` | 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. |
| `INSPO_MCP_LIST_COLLECTIONS` | List collections | List every editor-curated issue. Use this for thematic browsing - e.g. all 'Editorial Layouts' or 'Dark Product Pages'. |
| `INSPO_MCP_RECOMMEND` | 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. |
| `INSPO_MCP_SEARCH_SCREENS` | Search screens | Search the archive of real website screenshots. Returns screens with palette, fonts, components and image URLs. |

## Supported Triggers

None listed.

## Installation and MCP Setup

### Path 1: SDK Installation

#### Path 1, Step 1: Install Composio

Install the Composio SDK, the OpenAI provider, and the OpenAI SDK
```python
pip install composio composio_openai openai
```

```typescript
npm install @composio/core @composio/openai openai
```

#### Path 1, Step 2: Create a Composio session

Initialize Composio with the OpenAI Responses provider and create a session scoped to Inspo MCP
```python
import json
from openai import OpenAI
from composio import Composio
from composio_openai import OpenAIResponsesProvider

composio = Composio(provider=OpenAIResponsesProvider())
client = OpenAI()

session = composio.create(user_id="your-user-id", toolkits=["inspo_mcp"])
tools = session.tools()
```

```typescript
import OpenAI from "openai";
import { Composio } from "@composio/core";
import { OpenAIResponsesProvider } from "@composio/openai";

const composio = new Composio({ provider: new OpenAIResponsesProvider() });
const client = new OpenAI();

const session = await composio.create("your-user-id", { toolkits: ["inspo_mcp"] });
const tools = await session.tools();
```

#### Path 1, Step 3: Run Inspo MCP tools with your agent

Send a request, execute the Inspo MCP tool calls through the session, and print the final answer
```python
response = client.responses.create(
    model="gpt-5.6-sol",
    tools=tools,
    input=[{"role": "user", "content": "Find components matching this hero section"}],
)

while True:
    tool_calls = [o for o in response.output if o.type == "function_call"]
    if not tool_calls:
        break
    results = composio.provider.handle_tool_calls(response=response, session=session)
    response = client.responses.create(
        model="gpt-5.6-sol",
        tools=tools,
        previous_response_id=response.id,
        input=[
            {"type": "function_call_output", "call_id": call.call_id, "output": json.dumps(results[i])}
            for i, call in enumerate(tool_calls)
        ],
    )

print(response.output_text)
```

```typescript
let response = await client.responses.create({
  model: "gpt-5.6-sol",
  tools,
  input: [{ role: "user", content: "Find components matching this hero section" }],
});

while (response.output.some((o) => o.type === "function_call")) {
  const outputs = await composio.provider.handleToolCalls(session, response.output);
  response = await client.responses.create({
    model: "gpt-5.6-sol",
    tools,
    previous_response_id: response.id,
    input: outputs,
  });
}

console.log(response.output_text);
```

### Path 2: MCP Server Setup

#### Path 2, Step 1: Install Composio

Install the Composio SDK and your agent framework
```python
pip install composio claude-agent-sdk
```

```typescript
npm install @composio/core ai @ai-sdk/mcp @ai-sdk/openai
```

#### Path 2, Step 2: Create a session with MCP enabled

Create a session scoped to Inspo MCP and read its MCP URL and headers
```python
from composio import Composio

composio = Composio()
session = composio.create(user_id="your-user-id", toolkits=["inspo_mcp"], mcp=True)
```

```typescript
import { Composio } from "@composio/core";

const composio = new Composio();
const { mcp } = await composio.create("your-user-id", {
  toolkits: ["inspo_mcp"],
  mcp: true,
});
```

#### Path 2, Step 3: Connect your agent to the MCP server

Pass the session's MCP URL and headers to your agent and run a Inspo MCP request
```python
import asyncio
from claude_agent_sdk import ClaudeSDKClient, ClaudeAgentOptions, AssistantMessage, TextBlock

options = ClaudeAgentOptions(
    mcp_servers={
        "composio": {
            "type": "http",
            "url": session.mcp.url,
            "headers": session.mcp.headers,
        }
    },
    system_prompt="You are a helpful assistant with access to Inspo MCP tools.",
    tools=[],
    allowed_tools=["mcp__composio__*"],
)

async def main():
    async with ClaudeSDKClient(options=options) as client:
        await client.query("Find components matching this hero section")
        async for message in client.receive_response():
            if isinstance(message, AssistantMessage):
                for block in message.content:
                    if isinstance(block, TextBlock):
                        print(block.text)

asyncio.run(main())
```

```typescript
import { createMCPClient } from "@ai-sdk/mcp";
import { openai } from "@ai-sdk/openai";
import { generateText, stepCountIs } from "ai";

const client = await createMCPClient({
  transport: { type: "http", url: mcp.url, headers: mcp.headers },
});

const { text } = await generateText({
  model: openai("gpt-5.6-sol"),
  tools: await client.tools(),
  prompt: "Find components matching this hero section",
  stopWhen: stepCountIs(10),
});

console.log(text);
await client.close();
```

## Why Use Composio?

### 1. AI Native Inspo MCP Integration

- Supports both Inspo MCP and direct API based integrations
- Structured, LLM-friendly schemas for reliable tool execution
- Rich coverage for reading and querying your captured design data

### 2. Managed Auth

- Built-in OAuth handling with automatic token refresh and rotation
- Central place to manage, scope, and revoke Inspo MCP access
- Per user and per environment credentials instead of hard-coded keys

### 3. Agent Optimized Design

- Tools are tuned using real error and success rates to improve reliability over time
- Comprehensive execution logs so you always know what ran, when, and on whose behalf

### 4. Enterprise Grade Security

- Fine-grained RBAC so you control which agents and users can access Inspo MCP
- Scoped, least privilege access to Inspo MCP resources
- Full audit trail of agent actions to support review and compliance

## Use Inspo MCP with any AI Agent Framework

Choose a framework you want to connect Inspo MCP with:

- [ChatGPT](https://composio.dev/toolkits/inspo_mcp/framework/chatgpt)
- [Claude Cowork](https://composio.dev/toolkits/inspo_mcp/framework/claude-cowork)
- [Hermes](https://composio.dev/toolkits/inspo_mcp/framework/hermes-agent)
- [Atomic Agent](https://composio.dev/toolkits/inspo_mcp/framework/atomic-agent)

## Related Toolkits

- [Figma](https://composio.dev/toolkits/figma) - Figma is a collaborative interface design tool for teams and individuals. It streamlines design workflows with real-time collaboration and easy sharing.
- [Abyssale](https://composio.dev/toolkits/abyssale) - Abyssale is a creative automation platform for generating images, videos, GIFs, PDFs, and HTML5 content programmatically. It streamlines and scales visual content production for marketing, design, and operations teams.
- [Alttext ai](https://composio.dev/toolkits/alttext_ai) - AltText.ai is a service that generates alt text for images automatically. It helps boost accessibility and SEO for your visual content.
- [Are.na](https://composio.dev/toolkits/arena) - Are.na is a creative research platform for collecting images, links, notes, and ideas in channels. Use it to organize inspiration, build knowledge maps, and connect research across projects.
- [Bannerbear](https://composio.dev/toolkits/bannerbear) - Bannerbear is an API-driven platform for generating images and videos automatically at scale. It helps businesses create custom graphics, social visuals, and marketing assets using powerful templates.
- [Bannerbite](https://composio.dev/toolkits/bannerbite) - Bannerbite is a creative automation platform for generating images and videos from reusable projects and templates. It helps teams produce on-brand visual assets faster without rebuilding designs from scratch.
- [BeatAPI](https://composio.dev/toolkits/beatapi) - BeatAPI is an asynchronous API platform for AI image, video, and music workflows. It enables scalable generation, video analysis, uploads, and ecommerce video pipelines.
- [Builder.io](https://composio.dev/toolkits/builder_io) - Builder.io is a visual development platform for managing content, models, assets, and Space configuration. Use it to ship editable digital experiences faster without waiting on every code change.
- [Canva](https://composio.dev/toolkits/canva) - Canva is a drag-and-drop design suite for creating professional graphics, presentations, and marketing materials. It makes it easy for anyone to design with beautiful templates and a vast library of elements.
- [Canva MCP](https://composio.dev/toolkits/canva_mcp) - Canva MCP is Canva's remote MCP server for accessing designs and content. It centralizes design assets and enables programmatic design workflows.
- [Claid ai](https://composio.dev/toolkits/claid_ai) - Claid.ai delivers AI-driven image editing APIs for tasks like background removal, upscaling, and color correction. It helps automate and enhance image workflows with powerful, developer-friendly tools.
- [Cloudinary](https://composio.dev/toolkits/cloudinary) - Cloudinary is a cloud-based platform for managing, uploading, and transforming images and videos. It streamlines media workflows and delivers optimized assets globally.
- [Contentdrips](https://composio.dev/toolkits/contentdrips) - Contentdrips is an asynchronous rendering API for branded graphics and carousels. It turns reusable templates into on-brand social visuals at scale.
- [Creatomate](https://composio.dev/toolkits/creatomate) - Creatomate is an API for generating automated videos, images, GIFs, and reusable media templates. Use it to turn structured data into polished visual content at scale.
- [Cults](https://composio.dev/toolkits/cults) - Cults is a digital marketplace for 3D printing models, connecting designers and makers. It lets creators share, sell, and discover a huge variety of printable designs easily.
- [DeepImage](https://composio.dev/toolkits/deepimage) - DeepImage is an AI-powered image enhancer and upscaler. Get higher-quality images with just a few clicks.
- [Dreamstudio](https://composio.dev/toolkits/dreamstudio) - DreamStudio is Stability AI’s platform for generating and editing images with AI. It lets you easily turn ideas into stunning visuals, fast.
- [Dribbble](https://composio.dev/toolkits/dribbble) - Dribbble is a design community and publishing platform for managing shots, projects, and attachments. Use it to showcase work, collect feedback, and organize creative designs.
- [Dynamic Mockups](https://composio.dev/toolkits/dynamic_mockups) - Dynamic Mockups is an API platform for generating product mockups, rendering templates, and managing visual asset catalogs. Use it to automate high-quality product visuals, AI images, and motion assets at scale.
- [Dynapictures](https://composio.dev/toolkits/dynapictures) - Dynapictures is a cloud-based platform for generating personalized images at scale. Instantly create hundreds of custom visuals using your data sources, like Google Sheets.

## Frequently Asked Questions

### Do I need my own developer credentials to use Inspo MCP with Composio?

No — Inspo MCP uses no authentication, so you don't need developer credentials to get started. Composio will still handle session and tool routing so your agents can query the read-only design reference data immediately.

### Can I use multiple toolkits together?

Yes! Composio's Tool Router enables agents to use multiple toolkits. [Learn more](https://docs.composio.dev/tool-router/overview).

### Is Composio secure?

Composio is SOC 2 and ISO 27001 compliant with all data encrypted in transit and at rest. [Learn more](https://trust.composio.dev).

### What if the API changes?

Composio maintains and updates all toolkit integrations automatically, so your agents always work with the latest API versions.

---
[See all toolkits](https://composio.dev/toolkits) · [Composio docs](https://docs.composio.dev/llms.txt)