개요

Google Stitch MCP 서버 (davideast 유지 관리)는 Google의 Stitch AI 디자인 플랫폼(stitch.withgoogle.com)을 위한 선도적인 오픈 소스 Model Context Protocol (MCP) 서버입니다. 이 서버는 Stitch의 AI 생성 UI 디자인과 코딩 에이전트 및 IDE를 연결합니다.

이제 AI 도구가 수동 내보내기나 복사-붙여넣기 없이도 실시간으로 Stitch 디자인을 탐색하고 사용할 수 있습니다 — 화면, 스크린샷, HTML 코드를 가져오고, 심지어 완전한 사이트를 구축할 수도 있습니다.

주요 기능

디자인-코드 변환 도구: get_screen_code, get_screen_image, build_site를 통한 즉각적인 프론트엔드 생성.
로컬 프리뷰: Vite 개발 서버에서 Stitch 화면을 제공하여 즉각적인 브라우저 미리보기.
Astro 사이트 빌더: 화면을 경로에 자동 매핑하고 배포 가능한 Astro 프로젝트 생성.
대화형 브라우저: 프로젝트, 화면, 메타데이터를 위한 터미널 기반 탐색기.
프록시 모드: 자동 토큰 갱신 및 gcloud 통합을 통해 MCP 클라이언트에 상위 수준 도구 노출.
원-명령 설정: 가이드 init 마법사가 인증과 MCP 구성을 처리합니다.

작동 방식

이 서버는 MCP 클라이언트(Claude, Cursor, VS Code 등)와 Stitch API 간의 프록시 역할을 합니다. 여러 Stitch 호출을 에이전트 친화적인 도구로 결합하고 깔끔한 디자인 컨텍스트(HTML, 이미지, 메타데이터)를 LLM 대화에 직접 주입합니다.

지원하는 전송 방식: stdio (IDE용) 및 전체 gcloud 인증 지원.

설정 및 설치

빠른 시작

npx @_davideast/stitch-mcp init

이 명령어는 gcloud 인증 설정, Stitch API 활성화, MCP 클라이언트 구성을 처리하는 가이드 마법사를 실행합니다.

MCP 클라이언트에 추가 (예: Cursor 또는 Claude)

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["@_davideast/stitch-mcp", "proxy"]
    }
  }
}

사전 요구사항

Stitch API가 활성화된 Google Cloud 프로젝트
gcloud SDK 설치
프로젝트에 청구 활성화
Node.js (npx 사용)

사용 가능한 도구

build_site: 화면을 경로에 매핑하고 다중 페이지 사이트의 전체 HTML 반환.
get_screen_code: 모든 화면에 대해 프로덕션 준비된 HTML/CSS 다운로드.
get_screen_image: 시각적 컨텍스트를 위한 base64 스크린샷 가져오기.
추가 CLI 명령어: serve, screens, site, view 등.

사용 사례

디자인-코드 워크플로우: Cursor나 Claude에게 "이 Stitch 디자인을 Next.js 페이지로 빌드해줘" 요청 — 정확한 코드 즉시 획득.
에이전트 주도 개발: 코딩 에이전트에 시각적 컨텍스트를 제공하여 UI를 망상하지 않도록 방지.
신속한 프로토타이핑: 내보내기 전에 Stitch 디자인을 로컬에서 미리 보고 반복 작업.
다중 에이전트 파이프라인: Google Antigravity, Cursor 또는 기타 MCP 서버와 결합하여 아이디어 → UI → 코드 → 배포의 종단 간 워크플로우 구성.
문서화 및 인계: AI 디자인에서 깔끔한 Astro 사이트를 생성하여 이해관계자 검토용 제공.

Google Stitch MCP를 사용하는 이유?

Stitch는 텍스트 프롬프트를 멋진 반응형 UI로 변환합니다. 이 MCP 서버는 AI 코딩 워크플로우에서 이러한 디자인을 일급 객체(first-class citizens)로 만들어 줍니다 — 에이전트에게 구현해야 할 정확한 디자인에 대한 "눈"을 제공하는 것이죠.

이 서버는 적극적으로 유지보수되고 있으며, 가볍고, 모든 주요 MCP 클라이언트와 완벽하게 호환됩니다.

시작하기

최신 버전, 완전한 문서 및 예제를 보려면 다음 저장소를 방문하세요: github.com/davideast/stitch-mcp.

npx @_davideast/stitch-mcp init 명령어로 시작하여, 선호하는 AI 코딩 에이전트 내부에서 Google Stitch의 모든 기능을 오늘 바로 활용해 보세요.

개요