Stitch-MCP

Stitch-MCP

An MCP server that exposes Google Stitch's AI-powered UI design capabilities as local tools. It enables project management, screen generation/editing, and design system operations by forwarding requests to Google's Stitch API.

Category
Visit Server

README

Stitch-MCP

An MCP (Model Context Protocol) server that exposes Google Stitch capabilities as local tools by forwarding requests to the remote Stitch MCP endpoint.

What this does

This server:

  • Runs a local MCP tool server (stdio) using mcp.server.fastmcp.FastMCP
  • Forwards tool calls to https://stitch.googleapis.com/mcp
  • Requires a Stitch API key provided via the STITCH_API_KEY environment variable

Requirements

  • Python 3.11+
  • A Stitch API key (STITCH_API_KEY)

Installation

Create and activate a virtual environment, then install the package:

python -m venv .venv
source .venv/bin/activate
pip install -e .

Configuration

The server loads environment variables from a local .env file (via python-dotenv) if present.

Create a .env file:

STITCH_API_KEY=your_api_key_here

Run the server

You can run it via the installed script:

stitch-mcp

Or directly:

python server.py

In your MCP client, register a stdio server that runs stitch-mcp (or python server.py) and ensure STITCH_API_KEY is available in that process environment.

Available tools

Project management:

  • list_projects(filter: Optional[str] = None)
  • create_project(title: str)
  • get_project(name: str)

Screen management:

  • list_screens(projectId: str)
  • get_screen(name: str, projectId: str, screenId: str)

AI generation:

  • generate_screen_from_text(projectId: str, prompt: str, deviceType: str = "MOBILE", modelId: str = "GEMINI_3_FLASH")
  • edit_screens(projectId: str, selectedScreenIds: list[str], prompt: str, deviceType: str = "DEVICE_TYPE_UNSPECIFIED", modelId: str = "GEMINI_3_FLASH")
  • generate_variants(projectId: str, selectedScreenIds: list[str], prompt: str, variantCount: int = 3, creativeRange: str = "EXPLORE", aspects: Optional[list[str]] = None, deviceType: str = "DEVICE_TYPE_UNSPECIFIED", modelId: str = "GEMINI_3_FLASH")

Design systems:

  • list_design_systems(projectId: Optional[str] = None)
  • create_design_system(...)
  • update_design_system(...)
  • apply_design_system(projectId: str, assetId: str, screen_instance_ids: list[str], screen_source_names: list[str])

Notes and troubleshooting

  • If you see STITCH_API_KEY environment variable not set, verify your .env/environment and restart the MCP client process.
  • Some generation operations can take a few minutes. If a request times out, wait and call get_screen later (the server returns a timeout message in this case).

Development

agent.py is a small helper script for manually exercising the tools without an MCP client. Update the placeholder IDs and run:

python agent.py

Contribution

  • If you have any suggestions to this Project or about the Script, feel free to inform me. And if you liked, you are free to use it for yourself.(P.S. Star it too!! 😬 )

  • Your Contributions are much welcomed here!

    Fork the project

    Compile your work

    Call in for a Pull Request

Credits: Samuel Jayasingh

Last Edited on: 16/04/2026

Recommended Servers

playwright-mcp

playwright-mcp

A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.

Official
Featured
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.

Official
Featured
Local
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.

Official
Featured
Local
TypeScript
VeyraX MCP

VeyraX MCP

Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.

Official
Featured
Local
graphlit-mcp-server

graphlit-mcp-server

The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.

Official
Featured
TypeScript
Kagi MCP Server

Kagi MCP Server

An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.

Official
Featured
Python
E2B

E2B

Using MCP to run code via e2b.

Official
Featured
Neon Database

Neon Database

MCP server for interacting with Neon Management API and databases

Official
Featured
Exa Search

Exa Search

A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.

Official
Featured
Qdrant Server

Qdrant Server

This repository is an example of how to create a MCP server for Qdrant, a vector search engine.

Official
Featured