extract_design_contextLABSCO SUMMARY
Design generation on your own Google Cloud project, driven from the editor.
The useful move here is the pairing: read the design context off a screen you already like, then generate the next screen with that context so fonts, colors and layout carry over instead of drifting. Credentials come from gcloud Application Default Credentials, so the only thing that ends up in the client config is the project ID.
What it is
An MCP server for Google Stitch (npm stitch-mcp, 1.3.2) that talks to the Stitch API on your behalf using your gcloud Application Default Credentials. From an MCP-compatible editor you can create projects, list screens, generate a new screen from a prompt, and download a screen's frontend code or high-resolution image. It runs on Windows, macOS and Linux, with Cursor, Claude and Antigravity named as clients.
What you get
- A new screen generated from your prompt, optionally guided by context taken from an existing one —
generate_screen_from_text - "Design DNA" extracted from a screen — fonts, colors and layouts — to keep a new screen consistent with the ones you already have —
extract_design_context - The raw HTML / frontend code of a screen, downloaded into your project —
fetch_screen_code - The high-resolution screenshot of a screen —
fetch_screen_image - Project and screen management from the same session —
create_project,list_projects,get_project,list_screens,get_screen - A two-step flow the README recommends for consistency: extract context from an existing screen, then generate the next one using it
Requirements
A Google Cloud project with the Stitch API enabled, and gcloud on your machine. The setup runs gcloud auth login, gcloud config set project YOUR_PROJECT_ID, gcloud auth application-default set-quota-project YOUR_PROJECT_ID and gcloud beta services mcp enable stitch.googleapis.com, then gcloud auth application-default login to hand the server credentials. In the client config the command is npx, running the stitch-mcp package, with GOOGLE_CLOUD_PROJECT set to your project ID — no key is pasted into the file. The README states the Google Stitch API is free to use.
Setup effort
Follow the published steps — gcloud auth login
USE CASES
01
Generating a screen that matches the ones you already have
Extract the design context from an existing screen first, then generate the new one with that context attached to the prompt.
02
Getting a design into the codebase
Download the screen's raw HTML/frontend code straight into the project you are working in.
03
Putting a design into a ticket or a doc
Pull the high-resolution screenshot of the screen instead of taking one by hand.
04
Finding your way around an existing Stitch account
List the projects, then the screens inside one, and read a screen's metadata before deciding what to fetch.
05
Starting a fresh design workspace without switching apps
Create the project from the editor and generate its first screens in the same session.
9 tools
Listed in project docs. Your client may show a different list.
fetch_screen_codefetch_screen_imagegenerate_screen_from_textcreate_projectlist_projectslist_screensget_projectget_screenBEFORE YOU INSTALL
What to know first
Tools you get
9 tools named in the project's documentation.
Requires
- Node.js 18 or later
- gcloud CLI
- A Google Cloud project with the Stitch API enabled — steps under Installation
- GOOGLE_CLOUD_PROJECT in your environment
Where it runs
Both documented clients run the server on your machine.
INSTALLATION
Connect your client
Server setup
TERMINAL
# Sign in to Google Cloud
gcloud auth login
# Point gcloud at your project (replace <YOUR_GOOGLE_CLOUD_PROJECT> with your project ID)
gcloud config set project <YOUR_GOOGLE_CLOUD_PROJECT>
gcloud auth application-default set-quota-project <YOUR_GOOGLE_CLOUD_PROJECT>
# Enable the Stitch API
gcloud beta services mcp enable stitch.googleapis.com
# Give stitch-mcp your Application Default Credentials
gcloud auth application-default loginMCP Clients
Claude Desktop, Cursor
JSON
{
"mcpServers": {
"stitch": {
"command": "npx",
"args": [
"-y",
"stitch-mcp"
],
"env": {
"GOOGLE_CLOUD_PROJECT": "<YOUR_GOOGLE_CLOUD_PROJECT>"
}
}
}
}
