SIGN UPLOG IN
X (Twitter)LinkedInGitHubDiscordYouTube

How to connect Google Stitch to Claude

Connect Claude Web, Desktop and Cowork 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

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 Google Stitch account to Claude via Composio Connect, enabling it to list all your Google Stitch projects, create a mobile checkout screen in Stitch, inspect artifacts from your latest Stitch project, 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 Google Stitch with

ChatGPTHermesAtomic Agent

Connecting Google Stitch 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 Google Stitch account

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

For example, ask Claude to:

  • "List all your Google Stitch projects"
  • "Create a mobile checkout screen in Stitch"
  • "Inspect artifacts from your latest Stitch project"

It will prompt you to authenticate and authorize access.

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

What is the Google Stitch Claude Connector, 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.

Troubleshooting

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

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

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

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

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

  • 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 Google Stitch.
  • If it fails again, send the error and the ofid_ reference id to support@composio.dev.

3. Why does the Google Stitch authorization link not work?

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

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

4. Why do Google Stitch actions fail after they worked before?

The Google Stitch connection can expire or lose permission.

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

5. How do I switch to a different Google Stitch account?

Claude can manage the Google Stitch connection for you.

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

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

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

  • In Claude Desktop, open Customize > Connectors.
  • Next to Composio, click ⋮ and click Clear cache.
  • If Google Stitch 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 Google Stitch.
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

Hermes logo

Hermes

Use Google Stitch MCP with Hermes

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