# Google Stitch

```json
{
  "name": "Google Stitch",
  "slug": "google_stitch",
  "url": "https://composio.dev/toolkits/google_stitch",
  "markdown_url": "https://composio.dev/toolkits/google_stitch.md",
  "logo_url": "https://logos.composio.dev/api/google_stitch",
  "categories": [
    "design & creative tools"
  ],
  "is_composio_managed": false,
  "updated_at": "2026-10-27T05:35:05.750Z"
}
```

![Google Stitch logo](https://logos.composio.dev/api/google_stitch)

## Description

Securely connect your AI agents and chatbots (Claude, ChatGPT, Cursor, etc) with Google Stitch MCP or direct API to manage projects, create screens, inspect artifacts, and update design systems through natural language.

## Summary

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.

## Categories

- design & creative tools

## Toolkit Details

- Tools: 16

## Images

- Logo: https://logos.composio.dev/api/google_stitch

## Authentication

- **Api Key**
  - Type: `api_key`
  - Description: Api Key authentication for Google Stitch.
  - Setup:
    - Configure Api Key credentials for Google Stitch.
    - Use the credentials when creating an auth config in Composio.

## Suggested Prompts

- List all my Google Stitch projects
- Create a mobile checkout screen in Stitch
- Inspect artifacts from my latest Stitch project

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

## Installation and MCP Setup

### Path 1: SDK Installation

#### Path 1, Step 1: Install Composio

Install the Composio SDK, the OpenAI provider, and the OpenAI SDK
```python
pip install composio composio_openai openai
```

```typescript
npm install @composio/core @composio/openai openai
```

#### Path 1, Step 2: Create a Composio session

Initialize Composio with the OpenAI Responses provider and create a session scoped to Google Stitch
```python
import json
from openai import OpenAI
from composio import Composio
from composio_openai import OpenAIResponsesProvider

composio = Composio(provider=OpenAIResponsesProvider())
client = OpenAI()

session = composio.create(user_id="your-user-id", toolkits=["google_stitch"])
tools = session.tools()
```

```typescript
import OpenAI from "openai";
import { Composio } from "@composio/core";
import { OpenAIResponsesProvider } from "@composio/openai";

const composio = new Composio({ provider: new OpenAIResponsesProvider() });
const client = new OpenAI();

const session = await composio.create("your-user-id", { toolkits: ["google_stitch"] });
const tools = await session.tools();
```

#### Path 1, Step 3: Run Google Stitch tools with your agent

Send a request, execute the Google Stitch tool calls through the session, and print the final answer
```python
response = client.responses.create(
    model="gpt-5.6-sol",
    tools=tools,
    input=[{"role": "user", "content": "List all my Google Stitch projects"}],
)

while True:
    tool_calls = [o for o in response.output if o.type == "function_call"]
    if not tool_calls:
        break
    results = composio.provider.handle_tool_calls(response=response, session=session)
    response = client.responses.create(
        model="gpt-5.6-sol",
        tools=tools,
        previous_response_id=response.id,
        input=[
            {"type": "function_call_output", "call_id": call.call_id, "output": json.dumps(results[i])}
            for i, call in enumerate(tool_calls)
        ],
    )

print(response.output_text)
```

```typescript
let response = await client.responses.create({
  model: "gpt-5.6-sol",
  tools,
  input: [{ role: "user", content: "List all my Google Stitch projects" }],
});

while (response.output.some((o) => o.type === "function_call")) {
  const outputs = await composio.provider.handleToolCalls(session, response.output);
  response = await client.responses.create({
    model: "gpt-5.6-sol",
    tools,
    previous_response_id: response.id,
    input: outputs,
  });
}

console.log(response.output_text);
```

### Path 2: MCP Server Setup

#### Path 2, Step 1: Install Composio

Install the Composio SDK and your agent framework
```python
pip install composio claude-agent-sdk
```

```typescript
npm install @composio/core ai @ai-sdk/mcp @ai-sdk/openai
```

#### Path 2, Step 2: Create a session with MCP enabled

Create a session scoped to Google Stitch and read its MCP URL and headers
```python
from composio import Composio

composio = Composio()
session = composio.create(user_id="your-user-id", toolkits=["google_stitch"], mcp=True)
```

```typescript
import { Composio } from "@composio/core";

const composio = new Composio();
const { mcp } = await composio.create("your-user-id", {
  toolkits: ["google_stitch"],
  mcp: true,
});
```

#### Path 2, Step 3: Connect your agent to the MCP server

Pass the session's MCP URL and headers to your agent and run a Google Stitch request
```python
import asyncio
from claude_agent_sdk import ClaudeSDKClient, ClaudeAgentOptions, AssistantMessage, TextBlock

options = ClaudeAgentOptions(
    mcp_servers={
        "composio": {
            "type": "http",
            "url": session.mcp.url,
            "headers": session.mcp.headers,
        }
    },
    system_prompt="You are a helpful assistant with access to Google Stitch tools.",
    tools=[],
    allowed_tools=["mcp__composio__*"],
)

async def main():
    async with ClaudeSDKClient(options=options) as client:
        await client.query("List all my Google Stitch projects")
        async for message in client.receive_response():
            if isinstance(message, AssistantMessage):
                for block in message.content:
                    if isinstance(block, TextBlock):
                        print(block.text)

asyncio.run(main())
```

```typescript
import { createMCPClient } from "@ai-sdk/mcp";
import { openai } from "@ai-sdk/openai";
import { generateText, stepCountIs } from "ai";

const client = await createMCPClient({
  transport: { type: "http", url: mcp.url, headers: mcp.headers },
});

const { text } = await generateText({
  model: openai("gpt-5.6-sol"),
  tools: await client.tools(),
  prompt: "List all my Google Stitch projects",
  stopWhen: stepCountIs(10),
});

console.log(text);
await client.close();
```

## Why Use Composio?

### 1. AI Native Google Stitch Integration

- Supports both Google Stitch MCP and direct API based integrations
- Structured, LLM-friendly schemas for reliable project, screen, artifact, and design system actions
- Rich coverage for reading, creating, and updating your Google Stitch design data

### 2. Managed Auth

- Secure API key handling without hard-coded credentials in your agent code
- Central place to manage, scope, and revoke Google Stitch access
- Per user and per environment credentials for safer development and production deployments

### 3. Agent Optimized Design

- Tools are tuned using real error and success rates to improve reliability over time
- Comprehensive execution logs so you always know what ran, when, and on whose behalf

### 4. Enterprise Grade Security

- Fine-grained RBAC so you control which agents and users can access Google Stitch
- Scoped, least privilege access to Google Stitch resources
- Full audit trail of agent actions to support review and compliance

## Use Google Stitch with any AI Agent Framework

Choose a framework you want to connect Google Stitch with:

- [ChatGPT](https://composio.dev/toolkits/google_stitch/framework/chatgpt)
- [Claude Cowork](https://composio.dev/toolkits/google_stitch/framework/claude-cowork)
- [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

### Do I need my own developer credentials to use Google Stitch with Composio?

Yes, Google Stitch requires you to configure your own API key credentials. Once set up, Composio handles secure credential storage and API request handling for you.

### Can I use multiple toolkits together?

Yes! Composio's Tool Router enables agents to use multiple toolkits. [Learn more](https://docs.composio.dev/tool-router/overview).

### Is Composio secure?

Composio is SOC 2 and ISO 27001 compliant with all data encrypted in transit and at rest. [Learn more](https://trust.composio.dev).

### What if the API changes?

Composio maintains and updates all toolkit integrations automatically, so your agents always work with the latest API versions.

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