# How to connect Google Stitch to Claude

```json
{
  "title": "How to connect Google Stitch to Claude",
  "toolkit": "Google Stitch",
  "toolkit_slug": "google_stitch",
  "framework": "Claude Cowork",
  "framework_slug": "claude-cowork",
  "url": "https://composio.dev/toolkits/google_stitch/framework/claude-cowork",
  "markdown_url": "https://composio.dev/toolkits/google_stitch/framework/claude-cowork.md",
  "updated_at": "2026-10-27T05:35:05.750Z"
}
```

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

- [ChatGPT](https://composio.dev/toolkits/google_stitch/framework/chatgpt)
- [Hermes](https://composio.dev/toolkits/google_stitch/framework/hermes-agent)
- [Atomic Agent](https://composio.dev/toolkits/google_stitch/framework/atomic-agent)

## Connect Google Stitch to Claude Cowork

### 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](https://claude.ai/customize/connectors?modal=add-custom-connector&connectorName=Composio&connectorUrl=https%3A%2F%2Fconnect.composio.dev%2Fmcp)
### Add manually
In Claude Desktop, click Customize in the left sidebar, then select Connectors and click the + icon at the top.
Click Add custom connector and paste in the Composio MCP server URL:

```bash
https://connect.composio.dev/mcp
```

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

## Supported Tools

| Tool slug | Name | Description |
|---|---|---|
| `GOOGLE_STITCH_APPLY_DESIGN_SYSTEM` | Apply Design System | Apply one design system to 1-20 unique typed screen instances from Get Project. Returns every restyled screen plus any clarification, progress, design-system, or session output. This mutating generation request is sent once and never retried; reconcile an indeterminate failure with project reads. |
| `GOOGLE_STITCH_CREATE_DESIGN_SYSTEM` | Create Design System | Create a typed Stitch design system from explicit current theme fields. Providing project_id creates it for that project; intentionally omitting project_id creates a global asset. This non-idempotent operation is attempted once and is never retried automatically. |
| `GOOGLE_STITCH_CREATE_DESIGN_SYSTEM_FROM_DESIGN_MD` | Create Design System From Markdown | Create a project design system from the exact screen instance returned by Upload Design Markdown. The non-idempotent request is sent once and is never retried by this action. |
| `GOOGLE_STITCH_CREATE_PROJECT` | Create Project | Create a Stitch project container for UI designs and return its project resource name. This non-idempotent operation is sent once and is not retried by the action. |
| `GOOGLE_STITCH_DELETE_PROJECT` | Delete Project | Permanently delete one Google Stitch project. This destructive operation cannot be undone, requires explicit confirmation, and is attempted once without automatic retries. |
| `GOOGLE_STITCH_DOWNLOAD_FILE` | Download Screen File | Retrieve bounded HTML or screenshot content using a provider-owned Stitch file resource name. Arbitrary URLs are never accepted or fetched. |
| `GOOGLE_STITCH_EDIT_SCREENS` | Edit Screens | Apply one text-directed edit to up to 20 existing Stitch screens and return every changed screen or clarification question. This operation may continue after a timeout, so the action sends exactly one request and never retries. |
| `GOOGLE_STITCH_GENERATE_SCREEN` | Generate Screen | Generate screens from a bounded text prompt in an existing Stitch project. Returns every generated screen or recoverable clarification output. This paid or mutating operation is attempted exactly once; a timeout or connection loss is indeterminate and is never retried automatically. |
| `GOOGLE_STITCH_GENERATE_VARIANTS` | Generate Screen Variants | Generate 1-5 variants for up to 20 unique source screens with exact creative-range, aspect, device, and model enums. Returns every generated screen or recoverable clarification output. This generation request is sent once and never retried. |
| `GOOGLE_STITCH_GET_PROJECT` | Get Project | Get one Stitch project by full resource name, including screen instances needed for design-system application. |
| `GOOGLE_STITCH_GET_SCREEN` | Get Screen | Get one Stitch screen by full resource name and return bounded screen metadata plus provider-owned HTML and screenshot file references. |
| `GOOGLE_STITCH_LIST_DESIGN_SYSTEMS` | List Design Systems | List complete Google Stitch design systems for one project. The live provider requires project_id and exposes no pagination. |
| `GOOGLE_STITCH_LIST_PROJECTS` | List Projects | List complete Google Stitch projects owned by the connected account or explicitly shared with it. Owned projects are returned by default. |
| `GOOGLE_STITCH_LIST_SCREENS` | List Screens | List all screens currently returned for one Stitch project, including safe HTML and screenshot file resource references. |
| `GOOGLE_STITCH_UPDATE_DESIGN_SYSTEM` | Update Design System | Replace a Stitch design system's display name and typed nondeprecated theme for one project. Sends only the fixed update_design_system operation, validates the returned asset or project-session identity and bounded fields, and never retries an indeterminate update. |
| `GOOGLE_STITCH_UPLOAD_DESIGN_MD` | Upload Design Markdown | Upload bounded UTF-8 DESIGN.md content to a Stitch project and return the screen instance required by Create Design System From Markdown. The action uploads content only, never reads local files or executes the content, and does not retry after an indeterminate failure. |

## Supported Triggers

None listed.

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

## Creating MCP Server - Stand-alone vs Composio SDK

The Google Stitch MCP server connects Claude Web, Desktop, and Cowork to your Google Stitch account through Composio. Once connected, Claude can use the available Google Stitch tools and triggers to complete tasks on your behalf.

## Complete Code

None listed.

## How to build Google Stitch MCP Agent with another framework

- [ChatGPT](https://composio.dev/toolkits/google_stitch/framework/chatgpt)
- [Hermes](https://composio.dev/toolkits/google_stitch/framework/hermes-agent)
- [Atomic Agent](https://composio.dev/toolkits/google_stitch/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.
- [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.
- [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.
- [Eraser MCP](https://composio.dev/toolkits/eraser_mcp) - Eraser MCP is a workspace for creating and managing technical diagrams and structured documents. It helps teams organize, version, and export diagrams with collaboration-focused tooling.
- [Excalidraw MCP](https://composio.dev/toolkits/excalidraw_mcp) - Excalidraw MCP is a no-auth MCP server for creating hand-drawn style diagrams in Excalidraw. Use it to generate visual sketches with viewport camera control and fullscreen editing.

## Frequently Asked Questions

### What are the differences in Tool Router MCP and Google Stitch MCP?

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.

### Can I use Tool Router MCP with Claude Cowork?

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.

### Can I manage the permissions and scopes for Google Stitch while using Tool Router?

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.

### How safe is my data with Composio Tool Router?

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.

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