Stitch SDK는 Google Labs의 Stitch를 코드에서 다루기 위한 TypeScript SDK다. 텍스트 프롬프트로 UI 화면을 생성하고, 생성된 화면의 HTML과 스크린샷 URL을 가져오며, 기존 화면을 편집하거나 여러 변형을 만들 수 있다.

왜 필요한가

Stitch 웹 UI는 디자이너와 PM이 빠르게 화면을 만드는 데 유용하지만, 제품 팀이 반복 실험·자동 QA·에이전트 워크플로에 붙이려면 API 수준 접근이 필요하다. Stitch SDK는 이 간극을 메운다. 화면 생성 결과를 사람이 다운로드하는 대신, 스크립트나 에이전트가 프로젝트 생성, 화면 생성, HTML·이미지 추출, 후속 편집을 한 루프로 실행할 수 있다.

핵심 기능

기본 사용

npm install @google/stitch-sdk

import { stitch } from "@google/stitch-sdk";

const project = stitch.project("your-project-id");
const screen = await project.generate(
  "A login page with email and password fields",
);

const html = await screen.getHtml();
const imageUrl = await screen.getImage();

프로젝트가 없다면 저수준 도구 클라이언트로 create_project를 호출할 수 있다.

const result = await stitch.callTool("create_project", { title: "My App" });

에이전트 통합

Stitch SDK의 중요한 지점은 단순 API 래퍼가 아니라 에이전트용 도구 인터페이스를 제공한다는 점이다. listTools()와 callTool()로 Stitch MCP 도구를 직접 호출할 수 있고, stitchTools()를 사용하면 Vercel AI SDK의 tool calling에 바로 붙일 수 있다.

import { generateText, stepCountIs } from "ai";
import { google } from "@ai-sdk/google";
import { stitchTools } from "@google/stitch-sdk/ai";

const { steps } = await generateText({
  model: google("gemini-2.5-flash"),
  tools: stitchTools({
    include: ["create_project", "generate_screen_from_text", "get_screen"],
  }),
  prompt: "Create a project and generate a modern dashboard with a stat card",
  stopWhen: stepCountIs(5),
});

Google ADK(TypeScript) 환경에서는 stitchAdkTools()로 FunctionTool 형식 도구를 만들 수 있다. 즉, Stitch를 사람이 쓰는 프로토타이핑 앱에서 에이전트가 호출하는 UI 생성 백엔드로 확장하는 구조다.

DESIGN.md와 함께 쓰기

design-md가 “AI가 따라야 할 디자인 규칙”을 문서화한다면, Stitch SDK는 그 규칙을 참고해 화면을 생성하고 산출물을 가져오는 실행 계층에 가깝다. 브랜드 UI 실험을 자동화하려면 DESIGN.md로 색상·타이포그래피·컴포넌트 제약을 고정하고, Stitch SDK로 여러 화면 변형을 생성한 뒤 스크린샷을 리뷰하는 흐름이 자연스럽다.

주의할 점

• SDK는 STITCH_API_KEY 또는 명시적 API 키 설정이 필요하다.
• HTML과 이미지 반환값은 파일 내용 자체가 아니라 다운로드 URL이다.
• 에러 코드는 AUTH_FAILED, NOT_FOUND, PERMISSION_DENIED, RATE_LIMITED, NETWORK_ERROR, VALIDATION_ERROR, UNKNOWN_ERROR로 구분된다.
• Apache-2.0 라이선스지만, Stitch 서비스 사용 조건과 API 접근 권한은 별도로 확인해야 한다.

관련 문서

• design-md — AI가 디자인 시스템 규칙을 이해하는 Google Stitch 오픈 표준
• a2ui — 에이전트가 기존 디자인 시스템으로 UI를 생성하게 만드는 프레임워크 독립 표준
• openui — 생성형 UI를 위한 스트리밍 우선 UI 언어와 런타임

참고 자료

• google-labs-code/stitch-sdk — GitHub 공식 저장소