Google Stitch MCP + Claude Code 연동하기 (macOS / Windows)

Google이 만든 AI UI 디자인 도구 Stitch를 Claude Code와 MCP로 연결하면, 터미널에서 자연어로 UI 화면을 생성하고 디자인 에셋을 바로 가져올 수 있어요.

이 글에서는 API Key 방식을 기준으로 macOS와 Windows 모두에서 Stitch MCP를 Claude Code에 연동하는 방법을 정리해요.

Stitch란?

Google Stitch는 텍스트 프롬프트로 UI 디자인을 생성해주는 Google Labs의 AI 도구예요. 생성된 디자인은 HTML/CSS 코드로 받을 수 있고, MCP(Model Context Protocol)를 통해 Claude Code 같은 외부 도구와 연동할 수 있어요.

주의사항: Claude.ai 내장 연동은 CLI에서 인증 오류가 났어요

Claude.ai 설정 화면에서 Stitch를 직접 연결하는 옵션이 있지만, 이 글을 쓸 때(2026년 3월) Claude Code CLI에서는 인증 오류가 났어요.

Incompatible auth server: does not support dynamic client registration

작성 당시 GitHub에 버그로 등록되어 있었고(anthropics/claude-code#36228), 해결되지 않은 상태였어요. Claude.ai 웹에서는 되지만 CLI에서는 안 돼서, 아래처럼 직접 설정했어요.

1단계 — Stitch API Key 발급

API Key는 Stitch 사이트 설정에서 발급해요. Google Cloud Console은 쓰지 않아요.

1. stitch.withgoogle.com 접속
2. 우측 상단 프로필 아이콘 클릭
3. Stitch Settings 선택
4. API key 섹션에서 Create key 클릭
5. 생성된 키를 즉시 복사해서 저장 (이후 다시 볼 수 없음)

2단계 — Claude Code에 MCP 등록

방법 A: 터미널 명령어로 등록 (간단)

macOS와 Windows 모두 같은 명령어를 써요. Windows는 PowerShell 또는 Git Bash에서 실행해요.

claude mcp add --transport http stitch https://stitch.googleapis.com/mcp \
  --header "X-Goog-Api-Key: 발급받은키" --scope user

--scope user로 등록하면 모든 프로젝트에서 쓸 수 있어요. Windows PowerShell에서는 줄 끝의 \ 대신 한 줄로 이어서 쓰면 돼요.

방법 B: ~/.claude.json 직접 수정

MCP 서버 설정은 ~/.claude/settings.json이 아니라 ~/.claude.json에 저장돼요. user 범위로 등록한 서버는 이 파일의 최상위 mcpServers에 들어가요.

• macOS: ~/.claude.json
• Windows: %USERPROFILE%\.claude.json

파일을 열고 mcpServers에 아래 내용을 추가해요. 이 파일에는 다른 설정도 들어 있으니, 방법 A나 claude mcp add-json으로 등록하는 편이 안전해요.

{
  "mcpServers": {
    "stitch": {
      "type": "http",
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "발급받은키"
      }
    }
  }
}

3단계 — 동작 확인

Claude Code를 실행하고 /mcp를 입력해요.

/mcp

stitch 서버가 목록에 나타나면 연동이 끝난 거예요. 터미널에서 claude mcp get stitch로도 연결 상태를 확인할 수 있어요. 이후 이렇게 쓸 수 있어요.

내 Stitch 프로젝트 목록 보여줘
모바일 로그인 화면 UI 생성해줘

마치며

Stitch MCP가 연결되면 Claude Code 안에서 디자인 생성과 코드 구현을 이어서 할 수 있어요. 별도의 Google Cloud 프로젝트 설정 없이 Stitch API Key 하나로 연결돼요.

공식 Stitch MCP 문서: stitch.withgoogle.com/docs/mcp/setup