> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wpos.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Stitch

> Stitch is Google's AI UI design tool. Connect it to WPOS and the agent can use it as part of the work it does on your site.

Stitch is Google's AI UI design tool. Connected to WPOS, the agent can generate
screens from a prompt, read the code and styles behind an existing screen, and
carry a design's fonts, colors, and layout into the site it is building.

**Category:** Design and forms   **Actions available:** 9

<Note>
  Stitch is a first-party WPOS connector, not part of the Composio catalog. It
  runs on Google's own hosted Stitch MCP server, so its tools update as Google
  ships them. Stitch is in **beta**, so expect the interface to move.
</Note>

## What you can do

* Generate new UI screens from a text prompt, straight from chat
* Browse your Stitch projects and screens
* Pull a screen's frontend code and high resolution screenshot for implementation
* Extract Design DNA, meaning fonts, colors, and layout, to keep new work on style

## Example requests

Once Stitch is connected, ask in the [Command Center](/operate/command-center):

```text theme={null}
List my Stitch projects.
Generate a pricing page screen in Stitch, then build it on this site.
Pull the Design DNA from that screen and apply it to the homepage.
```

## Before you connect

* A Stitch account at [stitch.withgoogle.com](https://stitch.withgoogle.com).
* A **Stitch API key**, created from your profile menu. The steps below cover it.
* No popups needed. Stitch takes a key directly, with no OAuth round trip.

## Connect it

<Steps>
  <Step title="Open WPOS">
    In WordPress admin, open **WPOS**. You land on the chat screen.

    <Frame caption="WPOS opens on the chat screen.">
      <img src="https://mintcdn.com/wpos/CKANOPF-4yzpKeQV/images/connectors/stitch/01-wpos-home.png?fit=max&auto=format&n=CKANOPF-4yzpKeQV&q=85&s=22bb5ed7e9aaead0f0d43d989775f136" alt="The WPOS chat screen in WordPress admin." width="1918" height="876" data-path="images/connectors/stitch/01-wpos-home.png" />
    </Frame>
  </Step>

  <Step title="Open a new tab and choose Connectors">
    Click the **+** button to open the launcher panel, then choose **Connectors**.

    <Frame caption="The launcher panel. Connectors is the fifth entry.">
      <img src="https://mintcdn.com/wpos/CKANOPF-4yzpKeQV/images/connectors/stitch/02-new-tab-connectors.png?fit=max&auto=format&n=CKANOPF-4yzpKeQV&q=85&s=1918edb1d5f9354ab8a0ad390ad2c9d4" alt="The WPOS launcher panel listing Preview, Site tree, Files, Skills, Connectors, and Settings." width="1920" height="887" data-path="images/connectors/stitch/02-new-tab-connectors.png" />
    </Frame>
  </Step>

  <Step title="Find the connector">
    Every available connector is listed alphabetically, each with a button showing what it needs.

    <Frame caption="The Connectors panel, sorted alphabetically.">
      <img src="https://mintcdn.com/wpos/CKANOPF-4yzpKeQV/images/connectors/stitch/03-connectors-list.png?fit=max&auto=format&n=CKANOPF-4yzpKeQV&q=85&s=7c7ea152ad3706c7031f7341d16ec98d" alt="The WPOS Connectors panel listing Calendly, Canva, Figma, Google Analytics, Google Calendar, and Google Docs." width="1913" height="891" data-path="images/connectors/stitch/03-connectors-list.png" />
    </Frame>
  </Step>

  <Step title="Search for Stitch and press Connect">
    Type `Stitch` into **Search for integrations**, then press **Connect** on the row.

    <Frame caption="The Stitch row, described as AI UI design, Screens, Design DNA.">
      <img src="https://mintcdn.com/wpos/CKANOPF-4yzpKeQV/images/connectors/stitch/04-search.png?fit=max&auto=format&n=CKANOPF-4yzpKeQV&q=85&s=df73d33fff989de21ad13dce9bf27ab2" alt="The Connectors panel filtered to Stitch with a Connect button." width="1918" height="878" data-path="images/connectors/stitch/04-search.png" />
    </Frame>
  </Step>

  <Step title="The Stitch panel asks for a key">
    Instead of a popup, WPOS opens the Stitch panel with a single field for your API
    key, plus the feature list, notes, and the nine tools it exposes.

    Leave it open and create the key next.

    <Frame caption="The Stitch panel, with the key field above its feature list.">
      <img src="https://mintcdn.com/wpos/CKANOPF-4yzpKeQV/images/connectors/stitch/05-stitch-panel.png?fit=max&auto=format&n=CKANOPF-4yzpKeQV&q=85&s=66bced052d99d5e5347ff34ba2cc0d60" alt="The WPOS Stitch panel showing a key field, key features, notes, and a tools count of nine." width="1916" height="891" data-path="images/connectors/stitch/05-stitch-panel.png" />
    </Frame>
  </Step>

  <Step title="Create an API key in Stitch">
    In [stitch.withgoogle.com](https://stitch.withgoogle.com), open your profile
    picture, then **Stitch settings**, then **API key**. Click **Create key**.

    <Note>
      Stitch runs abuse auto-detection: any key it finds publicly exposed is
      disabled automatically. That protects you, but it also means a key pasted
      into a public repo or a shared screenshot stops working without notice.
    </Note>

    <Frame caption="The Stitch API key page before any key exists.">
      <img src="https://mintcdn.com/wpos/CKANOPF-4yzpKeQV/images/connectors/stitch/06-stitch-api-page.png?fit=max&auto=format&n=CKANOPF-4yzpKeQV&q=85&s=dd7361eb8f8a6d581d5f0c2b3989f9bb" alt="The Stitch API key page showing no keys to display, with a Create key button and an abuse auto-detection notice." width="1902" height="886" data-path="images/connectors/stitch/06-stitch-api-page.png" />
    </Frame>
  </Step>

  <Step title="Copy the key">
    The new key appears in the table with its creation date and last used time.

    <Tip>
      Stitch only ever displays the last few characters of a key, so this page
      cannot leak the full value later. Copy it when it is first shown. If you
      lose it, delete the key and create another.
    </Tip>

    <Frame caption="The key, listed with only its final characters visible.">
      <img src="https://mintcdn.com/wpos/CKANOPF-4yzpKeQV/images/connectors/stitch/07-key-created.png?fit=max&auto=format&n=CKANOPF-4yzpKeQV&q=85&s=ed564fe6427291477660062767ec5904" alt="The Stitch API key table showing one key with a truncated value, a creation date, and a delete icon." width="1908" height="885" data-path="images/connectors/stitch/07-key-created.png" />
    </Frame>
  </Step>

  <Step title="Paste it into WPOS and connect">
    Back in the Stitch panel, paste the key into the field, where it masks as you
    paste, and click **Connect**.

    The row then reads **Connected** with **View Details**, and Stitch's nine tools
    become available to the agent.

    <Note>
      Like Figma and Jotform, Stitch keeps **Disconnect** inside the detail panel.
      Click **View Details** to reach it. The row itself has no Disconnect button.
    </Note>

    <Frame caption="Connected. Disconnect lives behind View Details.">
      <img src="https://mintcdn.com/wpos/CKANOPF-4yzpKeQV/images/connectors/stitch/08-connected.png?fit=max&auto=format&n=CKANOPF-4yzpKeQV&q=85&s=28c7318bd7e9b278c534e90dce18fb23" alt="The Stitch row showing Connected with a View Details button." width="1913" height="892" data-path="images/connectors/stitch/08-connected.png" />
    </Frame>
  </Step>
</Steps>

## Tools

| Tool                        | What it does                                                    |
| --------------------------- | --------------------------------------------------------------- |
| `list_projects`             | List all your available Stitch projects                         |
| `get_project`               | Retrieve details of a specific project                          |
| `create_project`            | Create a new Stitch project                                     |
| `list_screens`              | List all screens within a project                               |
| `get_screen`                | Get metadata for a specific screen                              |
| `generate_screen_from_text` | Generate a new screen from a text prompt and design context     |
| `fetch_screen_code`         | Download the frontend code of a screen                          |
| `fetch_screen_image`        | Download the high resolution screenshot of a screen             |
| `extract_design_context`    | Scan a screen to extract its Design DNA: fonts, colors, layouts |

## Disconnect

Press **View Details** on the row, then **Disconnect** inside the panel. The
stored key is removed from WordPress. Your Stitch projects and screens are
untouched.

To invalidate the key entirely, also delete it in Stitch under **Stitch
settings**, then **API key**, using the delete icon on the row. Disconnecting in
WPOS does not revoke it on Google's side.

## Troubleshooting

<AccordionGroup>
  <Accordion title="The key was accepted but stopped working later">
    Stitch disables keys it detects as publicly exposed. If the key was ever pasted
    into a public repo, a ticket, or a shared screenshot, assume it was caught.
    Create a new key and reconnect.
  </Accordion>

  <Accordion title="The key was lost before it was saved">
    Stitch shows only the last few characters after creation, so there is nothing
    to recover. Delete the key and create another.
  </Accordion>

  <Accordion title="No projects are returned">
    The account behind the key has no Stitch projects yet. Create one at
    stitch.withgoogle.com first, then ask again.
  </Accordion>

  <Accordion title="The row has no Disconnect button">
    Correct behaviour. Stitch, Figma, and Jotform all keep Disconnect inside the
    detail panel. Click **View Details** to reach it.
  </Accordion>

  <Accordion title="Tools changed without an update to WPOS">
    Expected. Stitch runs on Google's hosted MCP server, so the tool set follows
    what Google ships rather than the WPOS release cycle. Stitch is in beta, so
    this happens more often than with other connectors.
  </Accordion>
</AccordionGroup>

For issues shared across every connector, see
[Introducing Connectors](/connect/connectors).

## Related

* [Figma](/connectors/figma), for reading designs you have already built
* [Canva](/connectors/canva), for finished artwork rather than UI screens