Stitch, verificado

Descripción

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.

Qué puedes hacer

• 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

Herramientas 15

• create_projectPuede borrar

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

• get_projectSolo lectura

  Retrieve details of a Stitch project by name.

• delete_projectPuede borrar

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

• list_projectsSolo lectura

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

• list_screensSolo lectura

  List all screens in a project.

• get_screenSolo lectura

  Retrieve details of a specific screen in a project.

• generate_screen_from_textPuede borrar

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

• edit_screensPuede borrar

  Edit existing screens in a project using a text prompt.

• generate_variantsPuede borrar

  Generate variants of existing screens using a text prompt.

• upload_design_mdPuede borrar

  Upload a DESIGN.md file to a project.

• create_design_systemPuede borrar

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

• create_design_system_from_design_mdPuede borrar

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

Leídas del servidor en funcionamiento el 3 oct 2026. Solo lectura, Escribe y Puede borrar son indicaciones que declara el servidor; tu cliente decide si te pregunta antes de ejecutar una herramienta.

Prompts de ejemplo

• 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

Configuración

Todos los clientes se conectan a stitch.googleapis.com. Elige el tuyo; la página recuerda tu elección.

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

Preguntas frecuentes

Insertar

Muestra Stitch en un README o en tu web. Cada inserción enlaza a esta página, usa la URL propia del servidor y no instala cookies. Cómo funcionan las inserciones

Insignia para README Tarjeta para web iframe JSON

Insignia para 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>

Sigue el modo claro u oscuro de quien lee. Añade ?theme=light o ?theme=dark para fijarlo, o ?style=compact para mostrar el símbolo sin la palabra.

Tarjeta para web

HTML

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

La tarjeta aparece donde esté la etiqueta. Añade data-theme="dark" o data-size="compact" a la etiqueta para cambiarla. El archivo contiene todo lo que necesita, así que no hace otras solicitudes ni instala 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>

Úsalo en páginas que no permiten scripts. Añade ?theme=light o ?theme=dark a la dirección para fijar los colores.

JSON

La ficha como datos para tus propias páginas y herramientas: nombre, descripción corta, la URL propia del servidor, herramientas y los enlaces «Add to». Cualquier web puede leerla (CORS abierto).

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

Qué significa cada campo