Stitch, verifiziert

Über den Server

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.

Was du damit machen kannst

• 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

Tools 15

• create_projectKann löschen

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

• get_projectNur lesen

  Retrieve details of a Stitch project by name.

• delete_projectKann löschen

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

• list_projectsNur lesen

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

• list_screensNur lesen

  List all screens in a project.

• get_screenNur lesen

  Retrieve details of a specific screen in a project.

• generate_screen_from_textKann löschen

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

• edit_screensKann löschen

  Edit existing screens in a project using a text prompt.

• generate_variantsKann löschen

  Generate variants of existing screens using a text prompt.

• upload_design_mdKann löschen

  Upload a DESIGN.md file to a project.

• create_design_systemKann löschen

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

• create_design_system_from_design_mdKann löschen

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

Am 3. Okt. 2026 vom laufenden Server gelesen. Nur lesen, Schreibt und Kann löschen sind Hinweise, die der Server selbst angibt; dein Client entscheidet, ob er vor dem Ausführen eines Tools nachfragt.

Beispiel-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

Einrichtung

Jeder Client verbindet sich mit stitch.googleapis.com. Wähl deinen; die Seite merkt sich deine Wahl.

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>"
      }
    }
  }
}

Häufige Fragen

Einbinden

Zeig Stitch in einem README oder auf deiner Website. Jede Einbindung verlinkt auf diese Seite, nutzt die eigene URL des Servers und setzt keine Cookies. So funktionieren Einbindungen

README-Badge Website-Karte iframe JSON

README-Badge

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>

Es folgt dem hellen oder dunklen Modus der Lesenden. Hänge ?theme=light oder ?theme=dark an, um ihn festzulegen, oder ?style=compact, um das Zeichen ohne Schriftzug zu zeigen.

Website-Karte

HTML

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

Die Karte erscheint dort, wo das Tag steht. Füge dem Tag data-theme="dark" oder data-size="compact" hinzu, um sie zu ändern. Die Datei enthält alles, was sie braucht, stellt also keine weiteren Anfragen und setzt keine Cookies.

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>

Nutze es auf Seiten, die keine Skripte erlauben. Hänge ?theme=light oder ?theme=dark an die Adresse an, um die Farben festzulegen.

JSON

Der Eintrag als Daten für deine eigenen Seiten und Tools: Name, Kurzbeschreibung, die eigene URL des Servers, Tools und die „Add to“-Links. Jede Website kann ihn lesen (CORS ist offen).

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

Was jedes Feld bedeutet