Skip to main content

Google Stitch

Overview​

Google Stitch is a generative UI tool that lets you create, edit, and iterate on web UI designs (screens) from natural language prompts. It outputs screenshots and production-ready HTML/CSS code.

How to Add Google Stitch​

  1. 1
    Get Your Stitch API Key
    1. Go to stitch.withgoogle.com/settings
    2. Copy your API key
  2. 2
    Add to Civic

    Add the Google Stitch server to your Civic environment through the server directory. You will be prompted to provide your API key.

  3. 3
    Test Connection

    Start with "Create a new Stitch project called 'My App'" to set up a container for your screens, then try generating a screen to verify everything works.

What You Can Do​

Screen Generation

Generate new UI screens from text prompts with automatic design system creation

Screen Editing

Make targeted changes to existing screens — colors, layouts, components, content

Design Variants

Generate layout, color scheme, typography, and content variants of existing screens

Project Management

Create and manage projects, list and retrieve screens with screenshots and HTML

Use Cases​

Creating & Managing Projects​

  • New Project: "Create a new Stitch project called 'My App'"
  • List Projects: "List all my Stitch projects"
  • Project Details: "Get the details of project ID 10337927055765204329"

Generating Screens​

  • Dashboard: "Generate a dark-themed dashboard for a SaaS product with recent activity, connected integrations, and quick action buttons"
  • Login Screen: "Create a mobile login screen with email/password fields and a Google sign-in button"
  • Settings Page: "Generate a settings page with profile info, notification preferences, and a danger zone"

Editing Screens​

  • Add Elements: "Add a notifications bell icon to the header and rename the primary button to 'Add Tool'"
  • Theme Changes: "Change the color scheme to light mode and increase heading font size"
  • Navigation: "Add a sidebar navigation with Home, Tools, Settings, and Help items"

Generating Variants​

  • Layout Variants: "Generate 2 layout and color scheme variants of this screen"
  • Style Exploration: "Create 3 variants — one minimalist, one data-dense, one mobile-optimized"
  • Reimagine: "Reimagine this screen with a completely different visual style"

Available Tools (8)​

Project Management​

create_project

create_project — Create a new Stitch project (container for screens). Projects are private by default.

get_project

get_project — Retrieve metadata and design theme for a project

list_projects

list_projects — List all owned or shared projects

Screen Operations​

list_screens

list_screens — List all screens in a project

get_screen

get_screen — Retrieve a specific screen including screenshot and HTML download URLs

generate_screen_from_text

generate_screen_from_text — Generate a new screen from a text prompt. Supports device types: DESKTOP, MOBILE, TABLET, AGNOSTIC.

edit_screens

edit_screens — Edit one or more existing screens via a targeted prompt

generate_variants

generate_variants — Generate design variants scoped to: LAYOUT, COLOR_SCHEME, IMAGES, TEXT_FONT, TEXT_CONTENT. Creative range: REFINE (subtle), EXPLORE (noticeable), REIMAGINE (fundamentally different).

note

Generation time — Screen generation takes 1–3 minutes. Do not retry if slow; the job continues server-side.

Screen output — Each generated screen includes a screenshot.downloadUrl (image) and htmlCode.downloadUrl (HTML/CSS file). Both are signed Google URLs with a limited lifetime — fetch promptly.

Design system is auto-generated — On first screen creation, Stitch generates a custom design system (colors, typography, component rules) tailored to the prompt. Subsequent edits reuse it for consistency.

Device types — Supported: DESKTOP, MOBILE, TABLET, AGNOSTIC. Matching the device type to your use case improves layout quality.

Edit vs. Variants — Use edit_screens for targeted, instructed changes. Use generate_variants when you want autonomous exploration.

Model selection — Optional modelId accepts GEMINI_3_PRO, GEMINI_3_FLASH, or GEMINI_3_1_PRO.

list_screens caveat — May return empty even when screens exist. Use get_screen directly with a known screen ID from generation responses.

Guardrails​

This server is covered by the 14 universal guardrails. Server-specific guardrails are coming soon.

tip

Configure guardrails via the Civic UI or ask the Configurator Agent: "Add guardrails to my Google Stitch server."