Skip to content

The Stitch extension for Gemini CLI enables you to interact with the Stitch MCP server using natural language commands.

License

Notifications You must be signed in to change notification settings

gemini-cli-extensions/stitch

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:

  2. gcloud CLI:

    • 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.

1. 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 -i.bak "s/YOUR_PROJECT_ID/$PROJECT_ID/g" ~/.gemini/extensions/Stitch/gemini-extension.json

2. Authenticate with Auth API Key

Coming soon...

💡 Usage

  1. Start Gemini CLI: Launch the Gemini CLI with the Stitch extension enabled:

    gemini
  2. List Available Tools: To see all available MCP tools, including those from Stitch, use:

    /mcp list
    
    /mcp desc
    
  3. Interact with Stitch: Use the /stitch command prefix to send natural language requests. Examples:

    • List Projects:

      /stitch What Stitch projects do I have?
      
    • Get Project Details:

      /stitch Tell me details about my project 3677573127824787033
      
    • List Screens:

      /stitch Give me all the screens of project 3677573127824787033
      
    • Download Assets:

      /stitch Download the image of screen 6393b8177be0490f89eb8f2c1e4cfb37
      /stitch Download the HTML of screen 6393b8177be0490f89eb8f2c1e4cfb37
      
    • Generate new Screens:

      You can generate new screens from text prompt, using Gemini 3 Pro or Gemini 3 Flash (default) models.

      /stitch Design a mobile app for people who love skiing in the Alps, using Gemini 3 Pro.
      
    • Enhance a Prompt:

      /stitch Enhance this prompt: "Design a landing page for a podcast about the latest in Design and AI."
      

💸 Pricing

  • Stitch MCP is free of charge.

🔧 Resources

📄 Legal

Your use of the Stitch API is governed by the Google Terms and Use Policy, and the Google APIs Terms, and your Stitch settings. The Stitch Privacy Notice describes how your data is handled.

About

The Stitch extension for Gemini CLI enables you to interact with the Stitch MCP server using natural language commands.

Topics

Resources

License

Contributing

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •