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.
- 🎨 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...
Before using this extension, ensure you have the following installed:
-
Gemini CLI:
- Install the Gemini CLI (v0.19.0 or newer).
- Refer to Gemini CLI Documentation for installation instructions.
-
gcloud CLI:
- Install and initialize the gcloud CLI.
- Ensure you have a Google Cloud Project to use with Stitch.
Run the following command in your terminal to install the Stitch extension:
gemini extensions install https://github.com/gemini-cli-extensions/stitch --auto-updateTo use the Stitch extension, you need to configure authentication.
-
Login to gcloud:
gcloud auth login
-
Configure Project and Quota: Set your project ID variable and configure the project. Replace
your-project-idwith 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
-
Enable Stitch MCP API: Enable the Stitch MCP service on your project.
gcloud beta services mcp enable stitch.googleapis.com --project=$PROJECT_ID
-
Grant Permissions: Your account needs the
roles/serviceusage.serviceUsageConsumerrole.gcloud projects add-iam-policy-binding $PROJECT_ID \ --member="user:your-email@gmail.com" \ --role="roles/serviceusage.serviceUsageConsumer"
-
Login to ADC:
gcloud auth application-default login
-
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
Coming soon...
-
Start Gemini CLI: Launch the Gemini CLI with the Stitch extension enabled:
gemini
-
List Available Tools: To see all available MCP tools, including those from Stitch, use:
/mcp list /mcp desc -
Interact with Stitch: Use the
/stitchcommand 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."
-
- Stitch MCP is free of charge.
- Stitch: The official Stitch web application.
- Gemini CLI Extensions: Documentation on using extensions in Gemini CLI.
- GitHub Issues: Report bugs or request new features.
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.