Stitch Sdk Usage

This wraps the Google Stitch SDK for generating UI screens from text prompts. You can create projects, upload mockup images, generate screens, iterate with edit and variant commands, and pull down the resulting HTML or screenshots. It's a programmatic interface for teams that want to embed AI UI generation into their own tooling rather than clicking through a web UI. The design system support lets you apply consistent themes across screens. Error handling is typed with StitchError, and there's a tool client mode if you're building agents that need to dynamically discover and call SDK methods. Straightforward TypeScript API that gets out of your way.

skills.sh installs: 576
GitHub stars: 1.8K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add google-labs-code/stitch-sdk --skill stitch-sdk-usage --agent claude-code

Installs into .claude/skills of the current project.

Files

Using the Stitch SDK

The Stitch SDK provides a TypeScript interface for Google Stitch, an AI-powered UI generation service.

Installation

npm install @google/stitch-sdk

Environment Variables

export STITCH_API_KEY="your-api-key"

Quick Start

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

const project = await stitch.createProject({ title: "My App" });
const generation = await project.generate("A settings page with dark theme");
const screen = generation.first; // all screens: generation.screens
const html = await screen.getHtml(); // the HTML content
const png = await screen.getImage(); // screenshot bytes (Uint8Array)

The stitch singleton reads STITCH_API_KEY from the environment and connects on first use — no setup code required.

Working with Projects

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

// List all projects
const projects = await stitch.projects();

// Reference a project by ID (no network call)
const project = stitch.project("4044680601076201931");

// Create a new project
const newProject = await stitch.createProject({ title: "My App" });