TechLog
블로그로 돌아가기

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

tipclaude codemcp

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를 직접 연결하는 옵션이 있지만, Claude Code CLI에서는 인증 오류가 발생한다.

TEXT
Incompatible auth server: does not support dynamic client registration

현재 GitHub에 버그로 등록된 상태(#36228)이며 아직 해결되지 않았다. Claude.ai 웹에서는 되지만 CLI에서는 안 되므로, 아래처럼 직접 설정해야 한다.

1단계 — Stitch API Key 발급

API Key는 Google Cloud Console이 아닌 Stitch 사이트 설정에서 발급한다.

  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에서 실행한다.

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

방법 B: settings.json 직접 수정

설정 파일 경로가 OS마다 다르다.

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

파일을 열고 아래 내용을 추가한다.

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

3단계 — 동작 확인

Claude Code를 실행하고 /mcp 를 입력한다.

TEXT
/mcp

stitch 서버가 목록에 나타나면 연동 완료다. 이후 이런 식으로 사용할 수 있다.

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

마치며

Stitch MCP가 연결되면 Claude Code에서 디자인 생성 → 코드 구현을 자연어 한 줄로 이어갈 수 있다. 별도의 Google Cloud 프로젝트 설정 없이 API Key 하나만 있으면 바로 쓸 수 있어서 진입 장벽이 낮다.

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

댓글