Stitch Extension for Gemini CLI

The Stitch extension for Gemini CLI enables you to interact with the Stitch MCP (Model Context Protocol) server using natural language commands. This makes it easier to manage your design projects and assets within Stitch, the AI-powered UI/UX design and code generation tool.

✨ Features

• 🎨 List Projects: View a list of your Stitch projects.
• 🎨 Project Details: Get detailed information about a specific project.
• 🎨 Retrieve Screens: Access all screens within a given project.
• 🎨 Download Assets: Download assets such as images and HTML files.
• 🎨 Generate Screen From Text: Generate new screens from text prompt, using Gemini 3 Pro or Gemini 3 Flash(default) models.
• 🎨 More features coming soon...

📋 Prerequisites

Before using this extension, ensure you have the following installed:

1. Gemini CLI:

   • Install the Gemini CLI (v0.19.0 or newer).
   • Refer to Gemini CLI Documentation for installation instructions.

2. gcloud CLI: (Optional, recommended for ADC authentication)

   • Install and initialize the gcloud CLI.
   • Ensure you have a Google Cloud Project to use with Stitch.

🚀 Installation

Run the following command in your terminal to install the Stitch extension:

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

🔐 Configuration & Authentication

To use the Stitch extension, you need to configure authentication. The Stitch MCP server supports two authentication methods:

• API Key Authentication: Simpler to set up. Use an API key generated from Stitch settings, powered by Google Cloud Managed Projects. Ideal for personal use and quick setup.
• Application Default Credentials (ADC): Uses Google Cloud credentials for authentication. Requires your own Google Cloud project with proper IAM permissions, needs multiple manual steps to set up.

Choose one method below based on your needs.

1. Authenticate with Auth API Key

1. Get API Key:

   • Go to Stitch.
   • Click on your profile icon in the top-right corner.
   • Select "Stitch Settings" from the dropdown menu.
   • Go to the "API Keys" section.
   • Click on "Create Key".
   • Copy the generated API key.

2. Configure Extension: Run the following commands to configure your API key (replace your-api-key-here with your actual API key):

   export API_KEY="your-api-key-here"
   sed "s/YOUR_API_KEY/$API_KEY/g" ~/.gemini/extensions/Stitch/gemini-extension-apikey.json > ~/.gemini/extensions/Stitch/gemini-extension.json
   

2. Authenticate with Application Default Credentials (ADC)

1. Login to gcloud:

   gcloud auth login
   

2. Configure Project and Quota: Set your project ID variable and configure the project. Replace your-project-id with your actual Google Cloud Project ID.

   export PROJECT_ID="your-project-id"
   gcloud config set project $PROJECT_ID
   gcloud auth application-default set-quota-project $PROJECT_ID
   

3. Enable Stitch MCP API: Enable the Stitch MCP service on your project.

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

4. Grant Permissions: Your account needs the roles/serviceusage.serviceUsageConsumer role.

   gcloud projects add-iam-policy-binding $PROJECT_ID \
     --member="user:your-email@gmail.com" \
     --role="roles/serviceusage.serviceUsageConsumer"
   

5. Login to ADC:

   gcloud auth application-default login
   

6. Configure Extension: Run the following command to update the configuration file with your project ID:

   sed "s/YOUR_PROJECT_ID/$PROJECT_ID/g" ~/.gemini/extensions/Stitch/gemini-exten
   

... View full README on GitHub