Google Stitch MCP

Manage Stitch UI design projects and screens remotely, including creating projects, listing and retrieving screens, and generating or editing UI screens via...

Security Scan

The skill's runtime instructions legitimately describe a Stitch MCP HTTP API that uses an API key, but the package metadata does not declare that credential or any required env var — an incoherence that requires user verification before trusting the skill.

Purpose & Capability

The SKILL.md describes a Google Stitch MCP toolset (project/screen management and AI generation) and the documented HTTP endpoints and methods are consistent with that purpose. The described functionality (create/list/get projects/screens, generate/edit screens) aligns with the skill name and description.

Instruction Scope

Instructions are limited to calling a remote MCP HTTP endpoint (https://stitch.googleapis.com/mcp) and handling responses. The runtime guidance does not ask the agent to read unrelated local files or secrets, or to call unexpected endpoints. It does, however, instruct the user/agent to set and send an API key via the STITCH_API_KEY env var — which is not declared in the skill metadata (scope mismatch).

Install Mechanism

This is an instruction-only skill with no install spec and no code files, so there is no local installation or third-party download risk.

Credentials

The SKILL.md explicitly recommends and shows use of an API key (STITCH_API_KEY) passed in X-Goog-Api-Key, but the skill's registry metadata lists no required environment variables or primary credential. That omission is an inconsistency: the skill expects a long-lived API key but does not declare it. The API key is proportionate to the described functionality, but the metadata mismatch raises a transparency and trust concern.

Persistence & Privilege

The skill does not request persistent or elevated platform privileges (always:false). It is user-invocable and allows autonomous invocation by default, which is normal; there is no evidence it modifies other skills or system-wide settings.

What to consider before installing

The skill's instructions clearly use a Stitch API key (STITCH_API_KEY) to call https://stitch.googleapis.com/mcp, but the package metadata did not declare that credential — this mismatch is suspicious. Before installing: verify the publisher/source (is this really an official Google skill?), confirm you obtained the API key from the official Stitch site, and avoid supplying a broad or production API key. Prefer a scoped or test key, restrict allowed origins/referrers if possible, and avoid putting sensitive PII in generation prompts or responses. If you can't verify the publisher or why the metadata omits the required env var, treat the skill as untrusted.

Stitch by Google — MCP Skill

Stitch is Google's AI-powered UI design tool (Beta). This skill covers how to interact with Stitch projects and screens via its Remote MCP server using the HTTP API.

---

Authentication

API Key (Recommended)

Generate your API key at: https://stitch.withgoogle.com/settings (API Keys section)

Set it as an environment variable: export STITCH_API_KEY=YOUR_STITCH_API_KEY

All requests go to: https://stitch.googleapis.com/mcp

Pass the key via header: X-Goog-Api-Key: $STITCH_API_KEY

Making MCP Calls

Stitch exposes a standard MCP HTTP endpoint. To call a tool, POST to the MCP endpoint with the tool name and arguments.

curl -X POST https://stitch.googleapis.com/mcp \
  -H "Content-Type: application/json" \
  -H "X-Goog-Api-Key: YOUR_STITCH_API_KEY" \
  -d '{
    "method": "tools/call",
    "params": {
      "name": "list_projects",
      "arguments": {}
    }
  }'

Note: Stitch is a Remote MCP server (cloud-hosted), unlike local file-based MCP servers. API Keys persist indefinitely; OAuth tokens expire every ~1 hour.

---

Available Tools

Project Management

list_projects

Lists all Stitch projects accessible to the user.

• Read-only: yes
• Input:
  • filter (optional, string): AIP-160 filter on view field. Values: view=owned (default), view=shared
• Output: Array of Project objects

# List all owned projects
curl -X POST https://stitch.googleapis.com/mcp \
  -H "Content-Type: application/json" \
  -H "X-Goog-Api-Key: YOUR_STITCH_API_KEY" \
  -d '{"method":"tools/call","params":{"name":"list_projects","arguments":{}}}'

---

create_project

Creates a new Stitch project (container for UI designs).

• Read-only: no (destructive)
• Input:
  • title (optional, string): Display name of the project
• Output: Created Project resource with name, title, and metadata

curl -X POST https://stitch.googleapis.com/mcp \
  -H "Content-Type: application/json" \
  -H "X-Goog-Api-Key: YOUR_STITCH_API_KEY" \
  -d '{"method":"tools/call","params":{"name":"create_project","arguments":{"title":"My Ad Landing Page"}}}'

---

get_project

Retrieves details of a specific project.

• Read-only: yes
• Input:
  • name (required, string): Resource name. Format: projects/{project}. Example: projects/4044680601076201931
• Output: Project resource object

---

Screen Management

list_screens

Lists all screens within a Stitch project.

• Read-only: yes
• Input:
  • projectId (required, string): Project ID without projects/ prefix
• Output: Array of Screen objects

curl -X POST https://stitch.googleapis.com/mcp \
  -H "Content-Type: application/json" \
  -H "X-Goog-Api-Key: YOUR_STITCH_API_KEY" \
  -d '{"method":"tools/call","params":{"name":"list_screens","arguments":{"projectId":"4044680601076201931"}}}'

---

get_screen

Retrieves details of a specific screen including HTML, screenshot, and Figma export.

• Read-only: yes
• Input:
  • name (required): projects/{project}/screens/{screen}
  • projectId (required, deprecated): Project ID without prefix
  • screenId (required, deprecated): Screen ID without prefix

  All three are currently required even though projectId/screenId are deprecated.

• Output: Screen object with htmlCode, screenshot, figmaExport download URLs

---

AI Generation

generate_screen_from_text

Generates a new UI screen from a text prompt. Takes a few minutes.

• Read-only: no (destructive)
• ⚠️ Don't retry on connection errors — generation may still be in progress. Use get_screen after a few minutes to check.
• Input:
  • projectId (required, string)
  • prompt (required, string): Describe the screen to generate
  • deviceType (optional): MOBILE | DESKTOP | TABLET | AGNOSTIC
  • modelId (optional): GEMINI_3_FLASH | GEMINI_3_1_PRO (GEMINI_3_PRO is deprecated)
• Output: Generated Screen objects + SessionOutputComponent entries (may include suggestions)
  • If output_components has suggestions, present them to user. If accepted, call again with the suggestion as the new prompt.

curl -X POST https://stitch.googleapis.com/mcp \
  -H "Content-Type: application/json" \
  -H "X-Goog-Api-Key: YOUR_STITCH_API_KEY" \
  -d '{
    "method": "tools/call",
    "params": {
      "name": "generate_screen_from_text",
      "arguments": {
        "projectId": "YOUR_PROJECT_ID",
        "prompt": "A mobile landing page for a Medicare insurance offer with a bold headline, trust badges, and a prominent CTA button",
        "deviceType": "MOBILE",
        "modelId": "GEMINI_3_1_PRO"
      }
    }
  }'

---

edit_screens

Edits existing screens using a text prompt. Takes a few minutes.

• Read-only: no (destructive)
• ⚠️ Don't retry on connection errors
• Input:
  • projectId (required, string)
  • selectedScreenIds (required, string[]): Screen IDs without screens/ prefix
  • prompt (required, string): Edit instruction
  • deviceType (optional)
  • modelId (optional): GEMINI_3_FLASH | GEMINI_3_1_PRO
• Output: Updated Screen objects

---

generate_variants

Generates design variants of existing screens.

• Read-only: no (destructive)
• ⚠️ Don't retry on connection errors
• Input:
  • projectId (required, string)
  • selectedScreenIds (required, string[])
  • prompt (required, string): Guide variant generation
  • variantOptions (required, object): See VariantOptions below
  • deviceType (optional)
  • modelId (optional)
• Output: Variant Screen objects

VariantOptions schema:

{
  "variantCount": 3,
  "creativeRange": "EXPLORE",
  "aspects": ["COLOR_SCHEME", "LAYOUT"]
}

• variantCount: 1–5 (default: 3)
• creativeRange: REFINE | EXPLORE | REIMAGINE
• aspects: LAYOUT | COLOR_SCHEME | IMAGES | TEXT_FONT | TEXT_CONTENT

---

Shared Types

Screen Object

Field	Type	Description
name	string	Resource name: projects/{project}/screens/{screen}
id	string	(Deprecated) Screen ID
title	string	Screen title
prompt	string	Prompt used to generate
screenshot	File	Screenshot image
htmlCode	File	HTML code of the screen
figmaExport	File	Figma export file
theme	DesignTheme	Theme used
deviceType	DeviceType	Device target
screenMetadata	ScreenMetadata	Status, agent type, display mode
width / height	string	Screen dimensions
groupId	string	Group ID for variants

File Object

Field	Type	Description
name	string	projects/{project}/files/{file}
downloadUrl	string	Direct download URL
mimeType	string	e.g. image/png, text/html

ScreenMetadata

Field	Values
status	IN_PROGRESS | COMPLETE | FAILED
agentType	TURBO_AGENT, PRO_AGENT, GEMINI_3_AGENT, etc.
displayMode	SCREENSHOT | HTML | CODE | MARKDOWN | STICKY_NOTE

---

Common Workflows

Generate a new landing page ad creative

import requests
import json

API_KEY = "YOUR_STITCH_API_KEY"
MCP_URL = "https://stitch.googleapis.com/mcp"
HEADERS = {
    "Content-Type": "application/json",
    "X-Goog-Api-Key": API_KEY
}

def stitch_call(tool_name, args):
    payload = {
        "method": "tools/call",
        "params": {"name": tool_name, "arguments": args}
    }
    r = requests.post(MCP_URL, headers=HEADERS, json=payload)
    r.raise_for_status()
    return r.json()

# 1. Create a project
project = stitch_call("create_project", {"title": "Medicare Q4 Campaign"})
project_id = project["result"]["name"].split("/")[1]

# 2. Generate initial screen
result = stitch_call("generate_screen_from_text", {
    "projectId": project_id,
    "prompt": "Mobile landing page for Medicare Advantage with emotional headline, plan comparison table, and green CTA button",
    "deviceType": "MOBILE",
    "modelId": "GEMINI_3_1_PRO"
})

# 3. Get screen details once complete
# (generation takes a few minutes — poll with get_screen)
screens = result["result"].get("screens", [])
if screens:
    screen_name = screens[0]["name"]
    # screen_name format: projects/{id}/screens/{screen_id}
    parts = screen_name.split("/")
    project_id = parts[1]
    screen_id = parts[3]
    
    screen = stitch_call("get_screen", {
        "name": screen_name,
        "projectId": project_id,
        "screenId": screen_id
    })
    
    # Download HTML
    html_url = screen["result"]["htmlCode"]["downloadUrl"]
    print(f"HTML download URL: {html_url}")
    
    # Download screenshot
    screenshot_url = screen["result"]["screenshot"]["downloadUrl"]
    print(f"Screenshot URL: {screenshot_url}")

Generate variants for A/B testing

# After generating a base screen, create variants
variants = stitch_call("generate_variants", {
    "projectId": project_id,
    "selectedScreenIds": [screen_id],
    "prompt": "Test different color schemes and CTA button styles",
    "variantOptions": {
        "variantCount": 3,
        "creativeRange": "EXPLORE",
        "aspects": ["COLOR_SCHEME", "TEXT_CONTENT"]
    },
    "deviceType": "MOBILE",
    "modelId": "GEMINI_3_FLASH"
})

---

Tips for Ad Creative Use

• Effective prompts include: device type, ad vertical, emotional tone, specific UI components (hero, CTA, trust badges, form)
• Pixel-perfect HTML: Use htmlCode.downloadUrl to grab the actual HTML — hand it to Marcus for landing page deployment
• Figma export: Available via figmaExport.downloadUrl for design review
• Generation takes 2–5 minutes — don't retry on network errors; check status with get_screen → screenMetadata.status
• Model choice: GEMINI_3_1_PRO for highest quality, GEMINI_3_FLASH for faster iteration

---

MCP Client Config (for direct Claude Code / Cursor integration)

{
  "mcpServers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "YOUR_STITCH_API_KEY"
      }
    }
  }
}

Or via Claude Code CLI:

claude mcp add stitch --transport http https://stitch.googleapis.com/mcp \
  --header "X-Goog-Api-Key: YOUR_STITCH_API_KEY" -s user

---

Docs Reference

• Setup & Auth: https://stitch.withgoogle.com/docs/mcp/setup/
• Reference: https://stitch.withgoogle.com/docs/mcp/reference/
• Guide: https://stitch.withgoogle.com/docs/mcp/guide/