# How to Set Up and Configure the Stitch MCP Server

> Easily set up and configure the Stitch MCP server. Register an endpoint, export environment variables, and verify connectivity with simple commands.

- Repository: [Google Labs Code/stitch-skills](https://github.com/google-labs-code/stitch-skills)
- Tags: how-to-guide
- Published: 2026-07-12

---

**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`](https://github.com/google-labs-code/stitch-skills/blob/main/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:

```bash
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:

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

```

Then load the file:

```bash
source .env

```

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

```bash
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:

```bash
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:

```bash
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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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.