SIGN UPLOG IN
X (Twitter)LinkedInGitHubDiscordYouTube

How to integrate Inspo MCP with Hermes

Connect Hermes 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

Hermes is a 24/7 autonomous agent that lives on your computer or server — it remembers what it learns and evolves as your usage grows.

This guide explains the easiest and most robust way to connect your Inspo account to Hermes. You can do this through either Composio Connect CLI or Composio Connect MCP. For personal use we recommend the CLI, but you won't go wrong with MCP either.

Also integrate Inspo MCP with

ChatGPTClaude CoworkAtomic Agent

What is Composio Connect?

Composio Connect is a consumer offering that lets anyone plug 1,500+ applications directly into their agent harness — including Hermes. It can:

  • Search and load tools from relevant toolkits on-demand, reducing context usage.
  • Chain multiple tools to accomplish complex workflows via a remote workbench, without excessive back-and-forth with the LLM.
  • Manage app authentication end-to-end with zero manual overhead.

Integrating Inspo with Hermes

Using Composio Connect CLI

1. Install the Composio CLI

Run the install script directly, or paste https://composio.dev/hermes into your Hermes chat box to have it installed for you.

bash
curl -fsSL https://composio.dev/install | bash
Hermes authenticating with Composio

2. Authenticate

Once the CLI is installed, ask Hermes to authenticate with Composio.

3. Connect to Inspo

Ask your agent to connect to Inspo, or simply request any Inspo-related task. Hermes will prompt you to authenticate and authorize access.

4. Done. You're all set with a new Inspo connection.

Using Composio Connect MCP

1. Get your MCP URL and API Key

Go to dashboard.composio.dev and copy your Connect MCP URL and API key.

Copy MCP URL and API key from Composio dashboard

2. Open the Hermes config file

bash
nano ~/.hermes/config.yaml

3. Add the Composio Connect MCP server

bash
mcp_servers:
  composio:
    url: "https://connect.composio.dev/mcp"
    headers:
      x-consumer-api-key: "YOUR_COMPOSIO_API_KEY"
    connect_timeout: 60
    timeout: 180

Save with Ctrl + O, Enter, then exit with Ctrl + X.

4. Restart your Hermes agent

Once restarted, ask your agent to connect to Inspo or request any Inspo-related task. It will prompt you to authenticate and authorize access.

5. Done!

What is the Inspo MCP server, 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.

Way Forward

With Inspo connected, Hermes can now act on your behalf whenever it detects a relevant task or you ask it to.

From here, you can extend Hermes further:

  • Connect more apps: Calendar, Slack, Notion, Linear, and hundreds of others are available through the same Composio Connect setup. Each new integration compounds what Hermes can do for you.
  • Build workflows across tools: Once multiple apps are connected, Hermes can chain actions together — turn an email into a calendar invite, a Slack message into a Linear ticket, or a meeting note into a follow-up draft.
  • Let it learn your patterns: The more you use Hermes, the better it gets at anticipating how you'd handle recurring tasks. Give it feedback on drafts and decisions, and it will adapt.

If you run into trouble or want to share what you've built, join the community or check out the Docs for deeper configuration options.

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

Claude Cowork logo

Claude Cowork

Use Inspo MCP with Claude Cowork

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