Google Stitch MCP API Released: AI Agents Can Now Directly Manipulate UI Designs

Google Labs' experimental AI UI design tool Stitch now officially supports MCP (Model Context Protocol) servers. You can now directly manipulate Stitch projects from AI coding tools like Cursor, Claude Code, and Gemini CLI.

What is Stitch?

Stitch is Google's AI design tool that transforms text prompts into complete UI designs and production-ready code. Unveiled at Google I/O 2025, it uses Gemini 2.5 Pro/Flash to generate mobile and web app interfaces in seconds.

Key features:

Generate UI designs from text prompts
Export to Figma or extract HTML/CSS code
Free to use (350 generations per month)

What is an MCP Server?

MCP (Model Context Protocol) is a standard protocol for AI agents to communicate with external tools. The Stitch MCP server is a Remote MCP that runs in the cloud, requiring secure authentication to allow AI agents to modify designs on your behalf.

Authentication: API Key vs OAuth

Stitch MCP supports two authentication methods:

Scenario	API Key	OAuth
Client Support	Tools like Cursor, Antigravity, Gemini CLI that accept keys in config files	Web-based tools requiring "Sign In" flow
Storage Policy	Local machine where saving secrets in .json or .env is standard	Zero-Trust environments where persistent secrets on disk are restricted
Session	Stays active indefinitely	Can expire and require re-approval

In most cases, API Keys are simpler.

API Key Setup

Go to the Stitch Settings page
Click "Create API Key" in the API Keys section
Save the generated key securely

Warning: Never commit your API key to public repositories or include it in client-side code.

Client Setup

Claude Code

bash

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

Cursor

Create a .cursor/mcp.json file:

json

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

Gemini CLI

bash

gemini extensions install https://github.com/gemini-cli-extensions/stitch

VSCode

Command Palette (Cmd+Shift+P) → "MCP: Add Server"
Select HTTP → URL: https://stitch.googleapis.com/mcp
Name: "stitch"
Add API key header to mcp.json:

json

{
  "servers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "type": "http",
      "headers": {
        "Accept": "application/json",
        "X-Goog-Api-Key": "YOUR-API-KEY"
      }
    }
  }
}

Available Tools

Tools available to AI agents after authentication:

Project Management

create_project: Create a new project
list_projects: Retrieve list of active designs

Screen Management

list_screens: Fetch all screens within a project
get_project: Retrieve project details
get_screen: Retrieve screen details

Design Generation

generate_screen_from_text: Create new design from text prompt

- project_id: Project ID

- prompt: Design generation prompt

- model_id: GEMINI_3_PRO or GEMINI_3_FLASH

Real Usage Example

With Stitch MCP connected to Claude Code:

text

User: "Add a login screen to my Stitch project"

Claude: Using Stitch MCP, I'll query your project list and
        generate a login screen using the generate_screen_from_text tool.

AI agents can now create and manage UI designs directly, not just write code.

Pricing

Google Stitch is currently free:

Standard Mode (Gemini 2.5 Flash): 350 generations/month
Experimental Mode (Gemini 2.5 Pro): 50 generations/month
No credit card required, just a Google account

OAuth Setup (Advanced)

For Zero-Trust environments or session-based authentication:

Install Google Cloud SDK
Perform dual authentication:

bash

gcloud auth login
gcloud auth application-default login

Configure project and permissions:

bash

PROJECT_ID="YOUR_PROJECT_ID"
gcloud config set project "$PROJECT_ID"
gcloud beta services mcp enable stitch.googleapis.com --project="$PROJECT_ID"

USER_EMAIL=$(gcloud config get-value account)
gcloud projects add-iam-policy-binding "$PROJECT_ID" \
    --member="user:$USER_EMAIL" \
    --role="roles/serviceusage.serviceUsageConsumer" \
    --condition=None

Generate access token:

bash

TOKEN=$(gcloud auth application-default print-access-token)
echo "GOOGLE_CLOUD_PROJECT=$PROJECT_ID" > .env
echo "STITCH_ACCESS_TOKEN=$TOKEN" >> .env

Note: Access tokens expire after approximately 1 hour. You'll need to regenerate when expired.

Conclusion

The Stitch MCP API represents a significant step in integrating UI design capabilities into AI agent workflows. From code generation to UI design, AI now handles more aspects of software development.

Stitch: stitch.withgoogle.com
MCP Docs: stitch.withgoogle.com/docs/mcp/setup

Google Stitch MCP API Released: AI Agents Can Now Directly Manipulate UI Designs