How to integrate Google Stitch MCP with Atomic Agent

Connect Atomic Agent to Google Stitch MCP. List all your google stitch projects, create a mobile checkout screen in stitch, and more using natural language, with authentication handled for you.

Google Stitch logoGoogle Stitch
Api Key

Google Stitch is an AI interface-design service for creating and managing digital product designs. It provides structured tools for projects, screens, artifacts, and design systems.

16 Tools

Introduction

Atomic Agent is an open-source AI agent that runs on your machine and supports local models through llama.cpp. Connect it to 1,500+ apps through Composio, including Google Stitch.

This guide uses Atomic Agent's built-in Composio integration. You need Atomic Agent v0.5.6 or later, your own Composio API key, and a Google Stitch account. See the Atomic Agent documentation for installation instructions.

Also integrate Google Stitch with

How Atomic Agent connects to Google Stitch

Atomic Agent connects to Composio's Tool Router over Streamable HTTP MCP. It discovers the tools needed for your request, and Composio handles account authentication.

Execution and account-connection tools follow Atomic Agent's configured approval policy. Review any approval prompt before allowing an action on your connected account.

Connect Google Stitch to Atomic Agent

  1. Sign up or sign in to the Composio dashboard. Copy your API key.
  2. In Atomic Agent, open the Integrations tab and select Composio. Select API key, press e, paste the key, and press Enter. The tools become available immediately, without a restart.
  3. Ask Atomic Agent to do something in Google Stitch. It searches Composio for the right tool.
  4. On first use, open the sign-in link returned in the chat. Connect your Google Stitch account, then return to Atomic Agent to continue.

Headless setup

Add the following line to ~/.atomic-agent/.env, replacing YOUR_COMPOSIO_API_KEY with your key. Start Atomic Agent after saving the file.

bash
COMPOSIO_API_KEY=YOUR_COMPOSIO_API_KEY

What is the Google Stitch MCP server, and what's possible with it?

The Google Stitch MCP server is an implementation of the Model Context Protocol that connects your AI agent and assistants like Claude, Cursor, etc directly to your Google Stitch account. It provides structured and secure access to your projects, screens, design systems, and design files, so your agent can create interface designs, edit screens, generate variants, apply design systems, and manage project assets on your behalf.

  • Project creation and management: Have your agent create, list, inspect, and permanently delete Google Stitch projects.
  • AI screen generation and editing: Direct your agent to generate screens from text prompts, edit existing screens with text instructions, and retrieve screen details.
  • Design exploration with variants: Let the agent create multiple screen variants with specified creative ranges, aspect ratios, device types, and supported models.
  • Design system workflows: Instruct your agent to create, update, list, and apply design systems across screens, or build a design system from uploaded DESIGN.md content.
  • Screen file access: Have your agent list screens and download available HTML or screenshot files for use in your design workflow.

Use Google Stitch from Atomic Agent

With your account connected, ask Atomic Agent to work with Google Stitch in natural language. You can connect more apps through the same Composio integration as you need them.

Visit the Atomic Agent website or inspect the Atomic Agent source code.

Troubleshooting

Why is my API key rejected?

Copy the key directly from the Composio dashboard. Atomic Agent requires ASCII characters because it sends the key in an HTTP header. Remove any extra characters introduced when copying.

Why are Composio tools unavailable after saving a key?

Check that you use Atomic Agent v0.5.6 or later and that Composio is enabled in your configuration. A "composio": { "enabled": false } setting disables the integration while keeping the saved key on disk.

Does Composio have a free plan?

The Hobby plan includes 100,000 tool calls per month. Composio-managed OAuth apps have a lower included allowance. See Composio pricing for the current limits that apply to your connection.

TOOLS

Supported Tools

Every Google Stitch action and event your agent gets out of the box.

Apply Design System

Apply one design system to 1-20 unique typed screen instances from Get Project.

Create Design System

Create a typed Stitch design system from explicit current theme fields.

Create Design System From Markdown

Create a project design system from the exact screen instance returned by Upload Design Markdown.

Create Project

Create a Stitch project container for UI designs and return its project resource name.

Delete Project

Permanently delete one Google Stitch project.

Download Screen File

Retrieve bounded HTML or screenshot content using a provider-owned Stitch file resource name.

Edit Screens

Apply one text-directed edit to up to 20 existing Stitch screens and return every changed screen or clarification question.

Generate Screen

Generate screens from a bounded text prompt in an existing Stitch project.

Generate Screen Variants

Generate 1-5 variants for up to 20 unique source screens with exact creative-range, aspect, device, and model enums.

Get Project

Get one Stitch project by full resource name, including screen instances needed for design-system application.

Get Screen

Get one Stitch screen by full resource name and return bounded screen metadata plus provider-owned HTML and screenshot file references.

List Design Systems

List complete Google Stitch design systems for one project.

List Projects

List complete Google Stitch projects owned by the connected account or explicitly shared with it.

List Screens

List all screens currently returned for one Stitch project, including safe HTML and screenshot file resource references.

Update Design System

Replace a Stitch design system's display name and typed nondeprecated theme for one project.

Upload Design Markdown

Upload bounded UTF-8 DESIGN.

FAQ

Frequently asked questions

With a standalone Google Stitch MCP server, the agents and LLMs can only access a fixed set of Google Stitch tools tied to that server. However, with the Composio Tool Router, agents can dynamically load tools from Google Stitch and many other apps based on the task at hand, all through a single MCP endpoint.

Yes, you can. Atomic Agent fully supports MCP integration. You get structured tool calling, message history handling, and model orchestration while Tool Router takes care of discovering and serving the right Google Stitch tools.

Yes, absolutely. You can configure which Google Stitch scopes and actions are allowed when connecting your account to Composio. You can also bring your own OAuth credentials or API configuration so you keep full control over what the agent can do.

All sensitive data such as tokens, keys, and configuration is fully encrypted at rest and in transit. Composio is SOC 2 Type 2 compliant and follows strict security practices so your Google Stitch data and credentials are handled as safely as possible.

Start with Google Stitch.It takes 30 seconds.

Managed auth, hosted MCP servers, and every Google Stitch tool your agent needs.Free to start.

Start building