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

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