SIGN UPLOG IN
X (Twitter)LinkedInGitHubDiscordYouTube

How to connect Inspo MCP to Claude

Connect Claude Web, Desktop and Cowork to Inspo MCP. Find components matching this hero section, list color palettes used on homepage, and more using natural language, with authentication handled for you.

Get started for freeGet a demo
Inspo MCP logoInspo MCP
No Auth

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.

15 Tools

Introduction

Claude is Anthropic's AI assistant, available on the web, in the desktop app, and on mobile. Cowork is its agent for knowledge work, and it runs on all of those surfaces too. Connected to your apps, Claude can work with your files and services to accomplish complex tasks on your behalf.

This guide walks you through the easiest and most secure way to connect your Inspo account to Claude via Composio Connect, enabling it to find components matching this hero section, list color palettes used on homepage, show typography tokens for site header, and more such actions on your behalf without compromising your account security.

Setup is the same on Claude Web, Desktop, and Cowork, and you only need to do it once. The connector is tied to your account, so it's available in all three.

Also integrate Inspo MCP with

ChatGPTHermesAtomic Agent

Connecting Inspo to Claude Web, Desktop, and Cowork

Two ways to add the Composio connector. Pick whichever you prefer.

1. Add with one click

Click the button. Claude opens with the Composio connector filled in. Click Add, then go to step 2.

Add to Claude

Add manually

In Claude Desktop, click Customize in the left sidebar, then select Connectors and click the + icon at the top.

Claude Desktop connectors screen with Add custom connector selected

Click Add custom connector and paste in the Composio MCP server URL:

bash
https://connect.composio.dev/mcp
Add custom connector dialog with Composio MCP server URL

2. Authorize in your browser

Click Connect. You'll be redirected to a browser window where you can authorize Composio to continue.

Composio authorization screen for Claude Web, Desktop, and Cowork

3. Connect your Inspo account

Back in Claude, ask it to connect to Inspo or give it any Inspo-related task.

For example, ask Claude to:

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

It will prompt you to authenticate and authorize access.

That's it. Composio's tools are now available in Claude, and your Inspo account is ready to use.

What is the Inspo Claude Connector, and what's possible with it?

The Inspo MCP server is an implementation of the Model Context Protocol that connects your AI agent and assistants like Claude, Cursor, etc directly to Inspo. It provides structured and secure access to captured production websites, design systems, components, color palettes, typography, and page structures, so your agent can search design references, compare sites, find components, study design systems, and recommend examples on your behalf.

  • Design reference search: Have your agent search real website screenshots using available styles, industries, layouts, modes, vibes, colors, page types, and component types.
  • Component and layout research: Direct your agent to find sites featuring heroes, pricing sections, navigation, testimonials, calls to action, footers, and other supported components or macrostructures.
  • Design system analysis: Let the agent retrieve a screen's fonts, color palette, CSS variables, color roles, type ramp, detected technology, and viewport variants.
  • Site comparison and discovery: Instruct your agent to compare captured sites across palettes, typefaces, structure, style, spacing, radius, and container width, or find similar designs.
  • Curated references and implementation examples: Have your agent browse editor-curated collections, inspect page flows, get canonical component JSX, or recommend references for a design brief.

Troubleshooting

1. Why does Claude not use the Composio connector for Inspo?

The connector can show as connected, but Claude must use it in each Inspo conversation.

  • Click + at the lower left of the chat, or type /.
  • Hover Connectors.
  • Turn on Composio.
  • Ask Claude to connect to Inspo again.

2. Why does Claude show an MCP server error before Inspo connects?

Claude can show Couldn't reach the MCP server or Authorization with the MCP server failed when you add the connector for Inspo.

  • Check that the connector URL is https://connect.composio.dev/mcp.
  • Connectors run from Anthropic's cloud, so your device network is usually not the problem.
  • Add the connector again from Customize > Connectors, then ask Claude to connect Inspo.
  • If it fails again, send the error and the ofid_ reference id to support@composio.dev.

3. Why does the Inspo authorization link not work?

The Composio connector is one server. Your Inspo account connects separately when Claude asks for it.

  • If the browser does not open, or the link expires, ask Claude to retry the Inspo connection.
  • Composio creates a fresh Inspo authorization link.
  • Open that link in your browser and finish the Inspo sign-in.

4. Why do Inspo actions fail after they worked before?

The Inspo connection can expire or lose permission.

  • Ask Claude to inspect the Inspo connection.
  • If the connection is unhealthy, disconnect it when Claude prompts you.
  • Reconnect the Inspo account and retry the action.
  • If Claude shows a permission prompt, approve it before Claude changes data in Inspo.
  • If the action still fails with a permission error, check that the connected account has that permission in Inspo itself.

5. How do I switch to a different Inspo account?

Claude can manage the Inspo connection for you.

  • Ask Claude to disconnect or delete the current Inspo account.
  • Ask Claude to connect Inspo again.
  • Open the new Composio authorization link for Inspo.
  • Sign in with the other Inspo account in the browser.
  • After the account connects, ask Claude to retry the Inspo task.

6. Why is my Inspo connection missing in Claude Desktop or on a Team plan?

The connector belongs to your Claude account, so your Inspo connection works in Claude Web, Desktop, and Cowork.

  • In Claude Desktop, open Customize > Connectors.
  • Next to Composio, click ⋮ and click Clear cache.
  • If Inspo tools still do not appear, click ⋮, disconnect, remove the connector, and add it again.
  • On Team or Enterprise, an Owner or Primary Owner must enable the connector before you can connect Inspo.
TOOLS

Supported Tools

Every Inspo MCP action and event your agent gets out of the box.

Compare

Compare 2-4 captured sites across palette, typefaces, macrostructure, mode, style tags, type/spacing/radius scales and container width.

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).

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.

Find examples for macrostructure

Real sites exemplifying one of the 19 named macrostructures.

Find reference components

The canonical reference components as an index: id, label, macrostructure and a note for each hero / pricing / cta / nav / footer archetype.

Find similar

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

Get collection

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

Get design system

The full DESIGN.

Get filters

Every value the filters accept: styles, industries, macrostructures, modes, vibes, colors, page types, component types.

Get reference jsx

The full canonical JSX source for one reference component, including the header stamp naming its macrostructure / theme / states.

Get screen

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

Get site pages

A site's captured pages as an ordered flow (landing → pricing → features → .

List collections

List every editor-curated issue.

Recommend

Orchestrator - start here for a brief.

Search screens

Search the archive of real website screenshots.

FRAMEWORKS

How to build Inspo MCP Agent with another framework

ChatGPT logo

ChatGPT

Use Inspo MCP with ChatGPT

Hermes logo

Hermes

Use Inspo MCP with Hermes

Atomic Agent logo

Atomic Agent

Use Inspo MCP with Atomic Agent

FAQ

Frequently asked questions

With a standalone Inspo MCP server, the agents and LLMs can only access a fixed set of Inspo tools tied to that server. However, with the Composio Tool Router, agents can dynamically load tools from Inspo and many other apps based on the task at hand, all through a single MCP endpoint.

Yes, you can. Claude Cowork fully supports MCP integration. You get structured tool calling, message history handling, and model orchestration while Tool Router takes care of discovering and serving the right Inspo tools.

Yes, absolutely. You can configure which Inspo scopes and actions are allowed when connecting your account to Composio. You can also bring your own OAuth credentials or API configuration so you keep full control over what the agent can do.

All sensitive data such as tokens, keys, and configuration is fully encrypted at rest and in transit. Composio is SOC 2 Type 2 compliant and follows strict security practices so your Inspo data and credentials are handled as safely as possible.

Start with Inspo MCP.It takes 30 seconds.

Managed auth, hosted MCP servers, and every Inspo MCP tool your agent needs.Free to start.

Start building