How Do You Connect Google Stitch to Codex?

The short answer

Yes, this belongs under MCP. Stitch creates and stores interface designs. Codex implements, changes, and verifies the frontend in your repository. Stitch MCP is the connection layer between them.

Stitch projects and screens
          ↓
     Stitch MCP
          ↓
Codex reads the design and edits local code

MCP and Skills solve different problems:

• MCP provides the connection and tools that let Codex access Stitch.
• Stitch Skills and plugins provide reusable methods for generating components, extracting a design system, or synchronizing screens.

Installing Skills without a working Stitch MCP connection does not give Codex access to your Stitch projects.

When the connection is worth it

MCP can remove repeated copy-and-paste when your workflow is:

1. Generate or revise a screen in Stitch.
2. Let Codex read the matching project and screen.
3. Implement the design in the current repository.
4. Run the app and check responsive behavior, interactions, and accessibility.

For an occasional one-screen handoff, a manual export is lighter. Google's Stitch announcement explicitly documents frontend-code export and paste-to-Figma as development handoff paths.

What you need

• A working local Codex client or CLI.
• A Stitch account with access to the target project.
• An API key created through Stitch MCP Setup.

Recommended setup: an environment-backed header

The Stitch remote MCP endpoint is:

https://stitch.googleapis.com/mcp

Codex supports Streamable HTTP MCP servers and can obtain HTTP header values from environment variables. Make STITCH_API_KEY available to the local process that runs Codex. For example, when launching Codex CLI from the same terminal:

export STITCH_API_KEY="YOUR_KEY"

Add this to the user-level ~/.codex/config.toml, or to .codex/config.toml in a trusted project:

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

The value on the right is the environment-variable name, not the API key itself.

Sources: Codex HTTP MCP and env_http_headers configuration, Stitch MCP Setup, and the Stitch SDK.

A simpler but more sensitive configuration

Codex also supports static HTTP headers:

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

This stores the key as plain text in a local configuration file. Use it only if you understand the risk and know that the file will not enter Git or uncontrolled cloud sync. Revoke the old key in Stitch if it is exposed or no longer needed.

Verify the connection

Restart the Codex client after saving the configuration, then inspect MCP status:

codex mcp list
codex mcp get stitch

In a Codex conversation or terminal UI, you can also enter:

/mcp

Start with a read-only request:

List the Stitch projects I can access. Do not create or modify anything.

Only after the expected project appears should you name a project and screen for Codex to read. Avoid starting with a bulk generation or an overwrite of existing components.

Current compatibility note

As of September 10, 2026, Issue #367 in google-labs-code/stitch-sdk remains open. It reports that the remote server can authenticate and connect while some strict MCP clients fail to register the tools because of references in an output Schema. The visible result can be a connected server with no tools, or an error mentioning $defs/ScreenInstance.

This is not evidence that every Codex environment fails, and it does not automatically mean that your API key is wrong. Separate the likely causes:

• 401 or 403: check the credential, permissions, and header configuration.
• tools fetch failed or $defs: check the current tool-schema compatibility issue.
• Connection works but the project is missing: verify the account and project access behind the key.

Do not install an unknown proxy or patch a third-party script merely to bypass the problem. Check the official Setup page and public issue for updated status first.

Use a manual handoff when MCP is blocked

Stitch already provides a supported fallback:

1. Finalize the target screen in Stitch.
2. Export its frontend code or save the target screenshot.
3. Put the export in a separate directory in the repository; do not overwrite the current implementation.
4. Ask Codex to implement it within the existing stack, components, and design tokens.
5. Run the site locally and compare desktop and mobile results.

This path loses the live connection but makes each design input and code change easy to review. Source: Google's Stitch announcement.

Should you also install Stitch Skills?

Connect MCP first, then decide. The Google Labs Code stitch-skills repository provides design, build, and utility plugins for Codex. They can improve the workflow, but they are not a replacement for the Stitch connection.

The repository currently documents this Codex Marketplace command:

codex plugin marketplace add google-labs-code/stitch-skills --ref main \
  --sparse .agents/plugins \
  --sparse plugins/stitch-design \
  --sparse plugins/stitch-build \
  --sparse plugins/stitch-utilities

You can also open Settings → Plugin Marketplaces → Add in Codex and use:

https://github.com/google-labs-code/stitch-skills

Install only the part your workflow needs:

• stitch-design for screen generation, editing, uploads, and extraction.
• stitch-build for continuing from Stitch screens into frontend components.
• stitch-utilities for design-system and supporting workflows.

The repository is under Google Labs Code and states that it is not an officially supported Google product. Review its code, permissions, and dependencies before installing it. A design-to-frontend workflow does not require all three plugins.

Source: Stitch Skills repository.

A minimal workflow

Create one target screen in Stitch
→ confirm Codex can read it with a read-only request
→ implement it in a new component or branch
→ run the app and compare screenshots
→ synchronize the next screen only after review

Prove one end-to-end path before adding Skills or automation. For the general Codex commands, continue with How to add an MCP server to Codex.

Remove the connection

If it is no longer useful, remove the MCP configuration:

codex mcp remove stitch

This removes the Codex MCP entry. It does not delete Stitch projects or revoke the API key. Revoke the credential separately in Stitch when it is no longer needed.