Stitch, vérifié

Présentation

Connects to Google Stitch, a tool that generates mobile and web UI designs. You can create and manage projects, generate screens from text prompts, edit existing screens, produce variants, and create, update and apply design systems, including ones built from a DESIGN.md file.

Runs as a hosted streamable HTTP endpoint at stitch.googleapis.com. Authentication uses an API key sent in the X-Goog-Api-Key header, created in the Stitch settings, or Google OAuth. The service is in beta. Screen generation can take a few minutes.

Ce que vous pouvez faire

• Create, list, get and delete Stitch projects
• Generate new screens from a text prompt
• Edit existing screens with a text prompt
• Generate variants of existing screens
• Create, update and list design systems
• Upload a DESIGN.md and build a design system from it
• Apply a design system to selected screens

Outils 15

• create_projectPeut supprimer

  Create a new Stitch project that holds UI designs and frontend code.

• get_projectLecture seule

  Retrieve details of a Stitch project by name.

• delete_projectPeut supprimer

  Delete a Stitch project by name. This cannot be undone.

• list_projectsLecture seule

  List Stitch projects accessible to the user, owned projects by default.

• list_screensLecture seule

  List all screens in a project.

• get_screenLecture seule

  Retrieve details of a specific screen in a project.

• generate_screen_from_textPeut supprimer

  Generate a new screen in a project from a text prompt.

• edit_screensPeut supprimer

  Edit existing screens in a project using a text prompt.

• generate_variantsPeut supprimer

  Generate variants of existing screens using a text prompt.

• upload_design_mdPeut supprimer

  Upload a DESIGN.md file to a project.

• create_design_systemPeut supprimer

  Create a design system with colors, typography, shape and appearance.

• create_design_system_from_design_mdPeut supprimer

  Create a design system from an uploaded DESIGN.md file.

Lus sur le serveur en direct le 3 oct. 2026. Lecture seule, Écrit et Peut supprimer sont des indications déclarées par le serveur ; c’est votre client qui décide de vous demander confirmation avant d’exécuter un outil.

Exemples de prompts

• Create a Stitch project called Fitness App and generate a mobile home screen

• Generate three variants of my login screen with a darker palette

• Create a design system with Inter font and rounded corners, then apply it to all screens

• List my Stitch projects and show the screens in the latest one

Configuration

Chaque client se connecte à stitch.googleapis.com. Choisissez le vôtre ; la page retient votre choix.

claude mcp add --transport http stitch https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: <YOUR_API_KEY>"

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://stitch.googleapis.com/mcp",
        "--header",
        "X-Goog-Api-Key: <YOUR_API_KEY>"
      ]
    }
  }
}

{
  "mcpServers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "<YOUR_API_KEY>"
      }
    }
  }
}

{
  "servers": {
    "stitch": {
      "type": "http",
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "${input:x-goog-api-key}"
      }
    }
  },
  "inputs": [
    {
      "type": "promptString",
      "id": "x-goog-api-key",
      "description": "X-Goog-Api-Key",
      "password": true
    }
  ]
}

{
  "mcpServers": {
    "stitch": {
      "serverUrl": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "<YOUR_API_KEY>"
      }
    }
  }
}

codex mcp add stitch --url https://stitch.googleapis.com/mcp

[mcp_servers.stitch]
url = "https://stitch.googleapis.com/mcp"
env_http_headers = { "X-Goog-Api-Key" = "X_GOOG_API_KEY" }

gemini mcp add --transport http --header "X-Goog-Api-Key: <YOUR_API_KEY>" stitch https://stitch.googleapis.com/mcp

{
  "mcpServers": {
    "stitch": {
      "type": "http",
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "<YOUR_API_KEY>"
      }
    }
  }
}

FAQ

Intégrer

Affichez Stitch dans un README ou sur votre site. Chaque intégration renvoie à cette page, utilise l’URL du serveur et ne dépose aucun cookie. Comment fonctionnent les intégrations

Badge pour README Carte pour site web iframe JSON

Badge pour README

Markdown

[![Stitch on mcp.tc](https://mcp.tc/i/stitch/badge.svg)](https://mcp.tc/i/stitch)

HTML

<a href="https://mcp.tc/i/stitch"><img src="https://mcp.tc/i/stitch/badge.svg" alt="Stitch on mcp.tc" height="20"></a>

Il suit le mode clair ou sombre du lecteur. Ajoutez ?theme=light ou ?theme=dark pour le fixer, ou ?style=compact pour afficher le symbole sans le nom.

Carte pour site web

HTML

<script src="https://mcp.tc/w/stitch.js" async></script>

La carte apparaît à l’endroit de la balise. Ajoutez data-theme="dark" ou data-size="compact" à la balise pour la modifier. Le fichier contient tout ce qu’il lui faut : il ne fait aucune autre requête et ne dépose aucun cookie.

iframe

HTML

<iframe src="https://mcp.tc/embed/stitch" title="Stitch on mcp.tc" width="420" height="200" loading="lazy" allow="clipboard-write" style="border:0;border-radius:8px;max-width:100%"></iframe>

Utilisez-la sur les pages qui n’autorisent pas les scripts. Ajoutez ?theme=light ou ?theme=dark à l’adresse pour fixer les couleurs.

JSON

La fiche sous forme de données pour vos pages et vos outils : nom, accroche, URL du serveur, outils et liens « Add to ». N’importe quel site peut la lire (CORS ouvert).

https://mcp.tc/i/stitch.json

Ce que signifie chaque champ