Integrating Google Stitch MCP with Claude Code: Automate UI Design with AI

Learn how to connect Google Stitch with Claude Code via MCP to generate professional-grade UI designs from text prompts.

Introduction

Google recently launched Stitch, an AI tool that generates high-quality UI designs from text prompts. In this guide, we'll walk through the complete process of integrating Stitch with Claude Code (Anthropic's CLI tool) using the Model Context Protocol (MCP).

What You'll Learn

• Setting up a Google Cloud project
• Creating a service account and configuring permissions
• Configuring the Stitch MCP server
• Real-world UI generation examples

Prerequisites

• Google account
• Node.js 18+ installed
• Claude Code installed (or any MCP-compatible client)
• gcloud CLI installed

Note: This guide uses the stitch-mcp package from this repository. Google's official method uses Remote MCP, but requires manually refreshing the Access Token every hour. The approach in this guide uses a Service Account JSON for automatic token renewal, making it more convenient.

Step 1: Create a Google Cloud Project

1.1 Access Google Cloud Console

Navigate to Google Cloud Console.

1.2 Create a New Project

1. Click the project selector dropdown at the top
2. Click "New Project" button
3. Enter a project name (e.g., my-stitch-project)
4. Click "Create"

Once created, your project will be assigned a Project ID. Note this down—you'll need it later.

Step 2: Enable the Stitch API

2.1 Find Stitch API in the Library

1. In the left menu, click "APIs & Services" > "Library"
2. Search for "Stitch API"
3. Click on "Stitch API"

2.2 Enable the API

1. Click the "Enable" button
2. Wait for activation to complete—you should see "API Enabled" status

Step 3: Create a Service Account

A service account is a special account used by applications to authenticate with Google Cloud APIs.

3.1 Navigate to Service Accounts

1. In the left menu, click "IAM & Admin" > "Service Accounts"
2. Click "+ Create Service Account" at the top

3.2 Enter Service Account Details

1. Service account name: stitch-mcp (or any name you prefer)
2. Service account ID: Auto-generated
3. Description: "Service account for Stitch MCP server" (optional)
4. Click "Create and Continue"

3.3 Grant Roles (Optional)

You can skip this step for now. Click "Done".

Step 4: Generate Service Account Key (JSON)

4.1 Access Key Management

1. Click on the service account email you just created
2. Go to the "Keys" tab
3. Click "Add Key" > "Create new key"

4.2 Download JSON Key

1. Select "JSON" as the key type
2. Click "Create"
3. The JSON file will download automatically

⚠️ Important: This JSON file contains sensitive credentials. Never commit it to a public repository!

Save the downloaded file as service-account.json in your project folder.

Step 5: Enable MCP via gcloud CLI

In addition to the standard API enablement, you need to enable the MCP endpoint separately.

5.1 Login to gcloud

Run the following command in your terminal:

gcloud auth login

A browser window will open—sign in with your Google account.

5.2 Update gcloud

Ensure gcloud is up to date to access MCP commands:

gcloud components update

5.3 Enable MCP Endpoint

gcloud beta services mcp enable stitch.googleapis.com --project=YOUR_PROJECT_ID

Replace YOUR_PROJECT_ID with your actual project ID.

5.4 Grant Permissions to Service Account

Allow the service account to use the API:

gcloud projects add-iam-policy-binding YOUR_PROJECT_ID \
  --member="serviceAccount:stitch-mcp@YOUR_PROJECT_ID.iam.gserviceaccount.com" \
  --role="roles/serviceusage.serviceUsageConsumer"

Step 6: Configure MCP Settings

6.1 Create .mcp.json File

Create a .mcp.json file in your project root:

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "stitch-mcp"],
      "env": {
        "GOOGLE_CLOUD_PROJECT": "YOUR_PROJECT_ID",
        "GOOGLE_APPLICATION_CREDENTIALS": "./service-account.json"
      }
    }
  }
}

6.2 Add Sensitive Files to .gitignore

# Google Cloud credentials
service-account.json

Step 7: Test in Claude Code

7.1 Restart Claude Code

Restart Claude Code to load the MCP server.

7.2 Test the Connection

In Claude Code, try:

List my Stitch projects

If you get an empty result {}, it works! (You just don't have any Stitch projects yet)

Step 8: Generate Your First UI

8.1 Create a Stitch Project

Create a Stitch project called "My App UI"

8.2 Generate a Screen

Generate a dashboard UI with:
- Dark sidebar navigation
- 3 stats cards
- Quick Actions section
- Primary color: orange (#ff6933)

8.3 Fetch the Code

You can fetch the generated HTML/CSS code and convert it to React components for your project.

Available Stitch Tools

Troubleshooting

"Stitch API has not been used in project" Error

The MCP endpoint is not enabled:

gcloud beta services mcp enable stitch.googleapis.com --project=YOUR_PROJECT_ID

"Permission denied" Error

The service account lacks permissions:

gcloud projects add-iam-policy-binding YOUR_PROJECT_ID \
  --member="serviceAccount:YOUR_SERVICE_ACCOUNT_EMAIL" \
  --role="roles/serviceusage.serviceUsageConsumer"

"mcp" Command Not Found in gcloud

Update gcloud to the latest version:

gcloud components update

Conclusion

By combining Google Stitch with MCP, you can generate professional-quality UI designs from simple text prompts. When used with Claude Code, you can seamlessly convert generated designs into React components and apply them directly to your project—significantly boosting development productivity.

Resources

• stitch-mcp GitHub
• Google Cloud MCP Documentation
• Model Context Protocol Official Docs

Tags: Google Stitch, MCP, Claude Code, AI, UI Design, Automation