SIGN UPLOG IN
X (Twitter)LinkedInGitHubDiscordYouTube

How to integrate Google Stitch MCP with Hermes

Connect Hermes to Google Stitch MCP. List all your google stitch projects, create a mobile checkout screen in stitch, and more using natural language, with authentication handled for you.

Get started for freeGet a demo
Google Stitch logoGoogle Stitch
Api Key

Google Stitch is an AI interface-design service for creating and managing digital product designs. It provides structured tools for projects, screens, artifacts, and design systems.

16 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 Google Stitch 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 Google Stitch 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 Google Stitch 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 Google Stitch

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

4. Done. You're all set with a new Google Stitch 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 Google Stitch or request any Google Stitch-related task. It will prompt you to authenticate and authorize access.

5. Done!

What is the Google Stitch MCP server, and what's possible with it?

The Google Stitch MCP server is an implementation of the Model Context Protocol that connects your AI agent and assistants like Claude, Cursor, etc directly to your Google Stitch account. It provides structured and secure access to your projects, screens, design systems, and design files, so your agent can create interface designs, edit screens, generate variants, apply design systems, and manage project assets on your behalf.

  • Project creation and management: Have your agent create, list, inspect, and permanently delete Google Stitch projects.
  • AI screen generation and editing: Direct your agent to generate screens from text prompts, edit existing screens with text instructions, and retrieve screen details.
  • Design exploration with variants: Let the agent create multiple screen variants with specified creative ranges, aspect ratios, device types, and supported models.
  • Design system workflows: Instruct your agent to create, update, list, and apply design systems across screens, or build a design system from uploaded DESIGN.md content.
  • Screen file access: Have your agent list screens and download available HTML or screenshot files for use in your design workflow.

Way Forward

With Google Stitch 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 Google Stitch action and event your agent gets out of the box.

Apply Design System

Apply one design system to 1-20 unique typed screen instances from Get Project.

Create Design System

Create a typed Stitch design system from explicit current theme fields.

Create Design System From Markdown

Create a project design system from the exact screen instance returned by Upload Design Markdown.

Create Project

Create a Stitch project container for UI designs and return its project resource name.

Delete Project

Permanently delete one Google Stitch project.

Download Screen File

Retrieve bounded HTML or screenshot content using a provider-owned Stitch file resource name.

Edit Screens

Apply one text-directed edit to up to 20 existing Stitch screens and return every changed screen or clarification question.

Generate Screen

Generate screens from a bounded text prompt in an existing Stitch project.

Generate Screen Variants

Generate 1-5 variants for up to 20 unique source screens with exact creative-range, aspect, device, and model enums.

Get Project

Get one Stitch project by full resource name, including screen instances needed for design-system application.

Get Screen

Get one Stitch screen by full resource name and return bounded screen metadata plus provider-owned HTML and screenshot file references.

List Design Systems

List complete Google Stitch design systems for one project.

List Projects

List complete Google Stitch projects owned by the connected account or explicitly shared with it.

List Screens

List all screens currently returned for one Stitch project, including safe HTML and screenshot file resource references.

Update Design System

Replace a Stitch design system's display name and typed nondeprecated theme for one project.

Upload Design Markdown

Upload bounded UTF-8 DESIGN.

FRAMEWORKS

How to build Google Stitch MCP Agent with another framework

ChatGPT logo

ChatGPT

Use Google Stitch MCP with ChatGPT

Claude Cowork logo

Claude Cowork

Use Google Stitch MCP with Claude Cowork

Atomic Agent logo

Atomic Agent

Use Google Stitch MCP with Atomic Agent

FAQ

Frequently asked questions

With a standalone Google Stitch MCP server, the agents and LLMs can only access a fixed set of Google Stitch tools tied to that server. However, with the Composio Tool Router, agents can dynamically load tools from Google Stitch 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 Google Stitch tools.

Yes, absolutely. You can configure which Google Stitch 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 Google Stitch data and credentials are handled as safely as possible.

Start with Google Stitch.It takes 30 seconds.

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

Start building