How to Set Up and Configure the Stitch MCP Server

To set up and configure the Stitch MCP server, register a server in the Stitch console to obtain your unique endpoint URL and API key, export them as STITCH_MCP_URL and STITCH_MCP_API_KEY environment variables, and verify connectivity using the list_tools command.

The google-labs-code/stitch-skills repository provides AI-powered skills for interacting with Stitch projects, but every skill—from design-md to react-components—requires a running Stitch MCP (Model-Control-Protocol) server to function. To set up and configure the Stitch MCP server, you must register an endpoint in the Stitch console, authenticate your environment, and validate the connection before executing any project commands.

Register Your MCP Server and Obtain Credentials

Before configuring your local environment, you need active credentials from the Stitch console.

Create the Server Endpoint

Visit the official Stitch MCP setup guide at https://stitch.withgoogle.com/docs/mcp/setup/ and click "Create MCP server". This action generates a unique server URL (typically formatted as https://mcp.stitch.withgoogle.com) and a corresponding API key. These credentials authenticate all subsequent requests from the skills to your Stitch projects.

Copy Required Values

Immediately after registration, copy two critical values:

• The server URL (e.g., https://mcp.stitch.withgoogle.com)
• The API key (a private token used for authentication)

According to the repository's README.md, these values are mandatory prerequisites for all MCP-enabled skills in the google-labs-code/stitch-skills repository.

Configure Environment Variables

Every skill in the repository reads the STITCH_MCP_URL and STITCH_MCP_API_KEY environment variables to construct HTTP request headers. You can set these temporarily for your current shell or persist them in a .env file.

Temporary Shell Configuration

Export the variables directly in your terminal:

export STITCH_MCP_URL="https://mcp.stitch.withgoogle.com"
export STITCH_MCP_API_KEY="YOUR_API_KEY"

Persistent Configuration with .env

Create a .env file in your project root to automatically load these values:

cat > .env <<'EOF'
STITCH_MCP_URL="https://mcp.stitch.withgoogle.com"
STITCH_MCP_API_KEY="YOUR_API_KEY"
EOF

Then load the file:

source .env

For permanent user-level configuration, append the exports to your shell profile:

echo 'export STITCH_MCP_URL="https://mcp.stitch.withgoogle.com"' >> ~/.bashrc
echo 'export STITCH_MCP_API_KEY="YOUR_API_KEY"' >> ~/.bashrc
source ~/.bashrc

Verify Connectivity and Test Operations

Once variables are set, verify the server is reachable before running complex operations.

Test MCP Discovery

Run the generic MCP discovery command to list available tool prefixes:

npx skills run stitch-utilities/design-md list_tools

A successful response returns available MCP tool prefixes (e.g., stitch: or mcp_stitch:). If you see a list of tools, the server is authenticated and reachable.

Execute a Concrete Skill Test

Confirm data retrieval works by fetching a specific screen:

npx skills run stitch-utilities/design-md get_screen projectId=123 screenId=home

This command validates that the MCP server can retrieve HTML and design metadata for real Stitch projects.

How Skills Use the MCP Configuration

Multiple skills across the repository depend on these environment variables to communicate with the Stitch backend:

• plugins/stitch-utilities/skills/design-md/SKILL.md: Implements list_tools and get_screen calls that require the STITCH_MCP_URL and STITCH_MCP_API_KEY variables to build request headers.
• plugins/stitch-utilities/skills/stitch-loop/SKILL.md: Demonstrates multi-step workflows that discover the MCP namespace and generate pages using the configured endpoint.
• plugins/stitch-build/skills/react-components/SKILL.md: Retrieves screens via MCP before converting them into React components.
• plugins/stitch-build/skills/remotion/SKILL.md: Includes MCP discovery steps for both Stitch and Remotion servers.
• plugins/stitch-design/skills/upload-to-stitch/SKILL.md: Uses the MCP server to upload assets when direct tool calls exceed size limits.

Troubleshooting Common Setup Issues

Configuration errors typically manifest as authentication failures or timeouts. Here is how to resolve them:

• Missing API Key: If you encounter 401 Unauthorized or "No API key found" errors, verify that STITCH_MCP_API_KEY is set and contains no stray quotes or whitespace.
• Wrong URL Scheme: Connection errors like "Failed to connect to host" or "SSL handshake failure" indicate you should use the exact URL from the MCP console (https://…) without adding /api or extra path segments.
• Server Not Started: If all skill calls time out after several seconds, check the server’s status in the Stitch console and restart it if necessary.
• Environment Not Loaded: When skills run in a new terminal but cannot find variables, ensure you exported them in your shell profile (~/.bashrc or ~/.zshrc) or explicitly source your .env file (source .env).

Summary

• Register your Stitch MCP server at https://stitch.withgoogle.com/docs/mcp/setup/ to obtain a unique URL and API key.
• Export STITCH_MCP_URL and STITCH_MCP_API_KEY environment variables in your shell or .env file.
• Verify connectivity using npx skills run stitch-utilities/design-md list_tools.
• Test data retrieval with concrete skills like get_screen before running complex workflows.
• Reference the specific SKILL.md files in plugins/stitch-utilities/, plugins/stitch-build/, and plugins/stitch-design/ to understand how each skill consumes the MCP configuration.

Frequently Asked Questions

Where do I find the Stitch MCP server URL and API key?

You generate these credentials by visiting https://stitch.withgoogle.com/docs/mcp/setup/ and clicking "Create MCP server" in the Stitch console. The URL typically follows the format https://mcp.stitch.withgoogle.com, and the API key is displayed immediately after server creation.

Why do I get a 401 Unauthorized error when running skills?

A 401 Unauthorized error indicates that the STITCH_MCP_API_KEY environment variable is either unset, contains extra whitespace or quotation marks, or holds an invalid key. Verify the variable is exported correctly and matches the key shown in the Stitch console exactly.

Can I use a .env file instead of exporting variables directly?

Yes. Create a .env file in your project root containing STITCH_MCP_URL and STITCH_MCP_API_KEY, then run source .env before executing skills. Many development tools and the skills themselves automatically detect and load .env files at runtime.

Which skills in the stitch-skills repository require the MCP server?

According to the source code, skills including design-md, stitch-loop, react-components, remotion, and upload-to-stitch all require the MCP server. These skills are defined in plugins/stitch-utilities/skills/, plugins/stitch-build/skills/, and plugins/stitch-design/skills/ directories, and each reads the STITCH_MCP_URL and STITCH_MCP_API_KEY variables to authenticate requests.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}