DOCSEARCHbyAlgolia
Submit Docs

Stitch extension for Gemini CLI

repository·main·Indexed 18 days ago

https://github.com/gemini-cli-extensions/stitch

An extension for Gemini CLI (v0.19.0+) that uses the Model Context Protocol (MCP) to manage Stitch UI/UX design projects and assets. It enables users to list projects, retrieve screens, download images and HTML, and generate designs using natural language commands. The extension also includes a prompt enhancer that utilizes the Stitch Effective Prompting Guide to refine design requests into structured markdown documents.

Tokens
1.7K
Snippets
5
Records
8
Agent score
16%

What's inside stitch

  1. Use Stitch via natural language commands

    main

    Once the extension is installed and configured, launch the Gemini CLI by running gemini. You can interact with Stitch using the /stitch command prefix followed by natural language requests.

    Available Capabilities

    • List Projects: /stitch What Stitch projects do I have?
    • Project Details: /stitch Tell me details about my project <PROJECT_ID>
    • List Screens: /stitch Give me all the screens of project <PROJECT_ID>
    • Download Assets: /stitch Download the image of screen <SCREEN_ID> or /stitch Download the HTML of screen <SCREEN_ID>
    • Generate Screens: /stitch Design a mobile app for [description], using Gemini 3 Pro. (Uses Gemini 3 Flash by default).
    • Enhance Prompts: /stitch Enhance this prompt: "[prompt]"

    Inspecting MCP Tools

    You can view all available Model Context Protocol (MCP) tools and their descriptions using:

    • /mcp list
    • /mcp desc
    /stitch What Stitch projects do I have?
/stitch Tell me details about my project 3677573127824787033
/stitch Design a mobile app for people who love skiing in the Alps, using Gemini 3 Pro.

  3. Authenticate with Application Default Credentials (ADC)

    main

    ADC authentication is recommended for users with a Google Cloud Project and requires several manual steps to configure IAM permissions and service enablement.

    1. Login to gcloud: Run gcloud auth login.
    2. Configure Project: Set your PROJECT_ID and configure the quota project.
    3. Enable API: Enable the stitch.googleapis.com service.
    4. Grant Permissions: Ensure your user has the roles/serviceusage.serviceUsageConsumer role.
    5. Login to ADC: Run gcloud auth application-default login.
    6. Configure Extension: Update the extension configuration with your PROJECT_ID.

    Prerequisites:

    • gcloud CLI installed and initialized.
    • A Google Cloud Project ID.
    • Proper IAM permissions.
    # 1. Login
gcloud auth login

# 2. Configure Project
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
gcloud beta services mcp enable stitch.googleapis.com --project=$PROJECT_ID

# 4. Grant Permissions
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
sed "s/YOUR_PROJECT_ID/$PROJECT_ID/g" ~/.gemini/extensions/Stitch/gemini-extension-adc.json > ~/.gemini/extensions/Stitch/gemini-extension.json

  4. Install the Stitch extension

    main

    To install the Stitch extension for the Gemini CLI, use the gemini extensions install command with the repository URL. The --auto-update flag is recommended to ensure the extension stays current.

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

  5. Authenticate with an API Key

    main

    API Key authentication is the simplest method for personal use.

    1. Generate Key: Go to Stitch, click your profile icon, select Stitch Settings, navigate to API Keys, and click Create Key.
    2. Configure Extension: Export your key and use sed to update the extension configuration file.

    Prerequisites:

    • A generated API key from Stitch settings.
    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

  6. Interact with Stitch projects and screens

    main

    When acting as an assistant (the default mode), the Stitch extension can execute specific stitch.* tools to manage your design assets. The extension understands a domain model where a user has projects, and each project contains multiple screens. Each screen consists of an image and a full HTML document (including Tailwind CSS configuration via CDN).

    You can use natural language queries to trigger these capabilities, such as:

    • Listing projects: "list my projects"
    • Viewing screens: "show me my screen for project X"
    • Retrieving code: "Get the code for screen X"
    • Retrieving images: "Get the image for screen X"
    • Generating designs: "Generate a new design for X"

  7. Enhance design prompts with the Stitch Enhancer

    main

    The Stitch extension features a specialized protocol for improving design prompts. When your query includes intent triggers such as enhance, refine, make this better, or improve my prompt, the extension follows PROTOCOL A: ENHANCE:

    1. It fetches the Stitch Effective Prompting Guide from https://discuss.ai.google.dev/t/stitch-prompt-guide/83844.
    2. It rewrites your raw intent into a structured document based on the guide's philosophy and templates.
    3. It automatically saves the result as a new snake_case markdown file (e.g., my_new_design.md).

    Example usage:

    # This will trigger the enhancement protocol
gemini-cli stitch "enhance my prompt for a minimalist dashboard"

  8. Use the Stitch extension via CLI

    main

    The Stitch extension allows you to interface with the Stitch AI UI/UX design and code generation tool directly from the Gemini CLI. You can use it to enhance design prompts or interact with your Stitch projects (listing projects, retrieving screens, images, or code).

    To use the extension, provide a query representing your request or question.

    gemini-cli stitch "your query here"