Google Stitch MCP API 공개: AI 에이전트가 UI 디자인을 직접 조작한다

Google Labs에서 실험 중인 AI UI 디자인 도구 Stitch가 MCP(Model Context Protocol) 서버를 공식 지원합니다. 이제 Cursor, Claude Code, Gemini CLI 같은 AI 코딩 도구에서 Stitch 프로젝트를 직접 조작할 수 있습니다.

Stitch란?

Stitch는 텍스트 프롬프트를 완성된 UI 디자인과 프로덕션 코드로 변환하는 Google의 AI 디자인 도구입니다. Google I/O 2025에서 공개되었으며, Gemini 2.5 Pro/Flash를 사용해 모바일 및 웹 앱 인터페이스를 몇 초 만에 생성합니다.

주요 특징:

텍스트 프롬프트로 UI 디자인 생성
Figma로 내보내기 또는 HTML/CSS 코드 추출
무료 사용 가능 (월 350회 생성)

MCP 서버란?

MCP(Model Context Protocol)는 AI 에이전트가 외부 도구와 통신하는 표준 프로토콜입니다. Stitch MCP 서버는 Remote MCP로, 클라우드에서 실행되며 AI 에이전트가 사용자 대신 디자인을 수정할 수 있도록 보안 인증을 거칩니다.

인증 방식: API Key vs OAuth

Stitch MCP는 두 가지 인증 방식을 지원합니다:

상황	API Key	OAuth
클라이언트 지원	Cursor, Antigravity, Gemini CLI 등 설정 파일에 키 입력 가능	웹 기반 도구, "Sign In" 플로우 필요
저장 정책	로컬 머신에 .json이나 .env에 비밀키 저장 가능	Zero-Trust 환경, 디스크에 비밀키 저장 불가
세션	무기한 유지	만료 시간 설정 가능, 재인증 필요

대부분의 경우 API Key가 더 간단합니다.

API Key 설정

Stitch Settings 페이지 접속
API Keys 섹션에서 "Create API Key" 클릭
생성된 키를 안전한 곳에 저장

주의: API 키를 공개 저장소에 커밋하거나 클라이언트 코드에 포함하지 마세요.

클라이언트별 설정

Claude Code

bash

claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: YOUR-API-KEY" -s user

Cursor

.cursor/mcp.json 파일 생성:

json

{
  "mcpServers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "YOUR-API-KEY"
      }
    }
  }
}

Gemini CLI

bash

gemini extensions install https://github.com/gemini-cli-extensions/stitch

VSCode

Command Palette (Cmd+Shift+P) → "MCP: Add Server"
HTTP 선택 → URL: https://stitch.googleapis.com/mcp
이름: "stitch"
mcp.json에 API 키 헤더 추가:

json

{
  "servers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "type": "http",
      "headers": {
        "Accept": "application/json",
        "X-Goog-Api-Key": "YOUR-API-KEY"
      }
    }
  }
}

사용 가능한 도구

인증 후 AI 에이전트가 사용할 수 있는 도구들:

프로젝트 관리

create_project: 새 프로젝트 생성
list_projects: 활성 디자인 목록 조회

스크린 관리

list_screens: 프로젝트 내 모든 스크린 조회
get_project: 프로젝트 상세 정보 조회
get_screen: 스크린 상세 정보 조회

디자인 생성

generate_screen_from_text: 텍스트 프롬프트로 새 디자인 생성

- project_id: 프로젝트 ID

- prompt: 디자인 생성 프롬프트

- model_id: GEMINI_3_PRO 또는 GEMINI_3_FLASH

실제 사용 예시

Claude Code에서 Stitch MCP를 연결하면 다음과 같이 사용할 수 있습니다:

text

사용자: "내 Stitch 프로젝트에 로그인 화면 추가해줘"

Claude: Stitch MCP를 통해 프로젝트 목록을 조회하고,
        generate_screen_from_text 도구로 로그인 화면을 생성합니다.

AI 에이전트가 코드 작성뿐만 아니라 UI 디자인까지 직접 생성하고 관리할 수 있게 됩니다.

가격

Google Stitch는 현재 무료입니다:

Standard Mode (Gemini 2.5 Flash): 월 350회 생성
Experimental Mode (Gemini 2.5 Pro): 월 50회 생성
신용카드 불필요, Google 계정만 있으면 사용 가능

OAuth 설정 (고급)

Zero-Trust 환경이나 세션 기반 인증이 필요한 경우:

Google Cloud SDK 설치
이중 인증 수행:

bash

gcloud auth login
gcloud auth application-default login

프로젝트 및 권한 설정:

bash

PROJECT_ID="YOUR_PROJECT_ID"
gcloud config set project "$PROJECT_ID"
gcloud beta services mcp enable stitch.googleapis.com --project="$PROJECT_ID"

USER_EMAIL=$(gcloud config get-value account)
gcloud projects add-iam-policy-binding "$PROJECT_ID" \
    --member="user:$USER_EMAIL" \
    --role="roles/serviceusage.serviceUsageConsumer" \
    --condition=None

액세스 토큰 생성:

bash

TOKEN=$(gcloud auth application-default print-access-token)
echo "GOOGLE_CLOUD_PROJECT=$PROJECT_ID" > .env
echo "STITCH_ACCESS_TOKEN=$TOKEN" >> .env

주의: 액세스 토큰은 약 1시간 후 만료됩니다. 만료 시 토큰을 재생성해야 합니다.

마무리

Stitch MCP API는 AI 에이전트 워크플로우에 UI 디자인 기능을 통합하는 중요한 진전입니다. 코드 생성에서 UI 디자인까지, AI가 소프트웨어 개발의 더 많은 영역을 담당하게 되었습니다.

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

Google Stitch MCP API 공개: AI 에이전트가 UI 디자인을 직접 조작한다