Build your first design

The Stitch SDK (@google/stitch-sdk) lets you generate, edit, and manage UI designs directly from TypeScript. No MCP config files, no CLI setup-just npm install and go.

By the end of this tutorial, you’ll have a working script that creates a project, generates a screen, and retrieves the HTML and image URLs.

google-labs-code / stitch-sdk Star TypeScript SDK for the Stitch design generation API TypeScript @google/stitch-sdk

What you’ll need

Node.js 20 or later (or Bun)
A Stitch API Key from your Stitch Settings page

Install the SDK

npm

npm install @google/stitch-sdk

Bun

bun add @google/stitch-sdk

Set your API key

Export your key as an environment variable. The SDK picks it up automatically.

export STITCH_API_KEY="your-api-key"

Write the script

Create a file called my-first-design.ts:

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

// 1. Create a project
const project = await stitch.createProject("My First App");
console.log(`Project created: ${project.id}`);

// 2. Generate a screen
const screen = await project.generate("A simple login page with email and password fields");
console.log(`Screen generated: ${screen.id}`);

// 3. Get your outputs
const htmlUrl = await screen.getHtml();
const imageUrl = await screen.getImage();

console.log(`HTML:  ${htmlUrl}`);
console.log(`Image: ${imageUrl}`);

Run it

tsx

npx tsx my-first-design.ts

Bun

bun my-first-design.ts

You’ll see output that looks like this:

Project created: 4044680601076201931
Screen generated: 98b50e2ddc9943efb387052637738f61
HTML:  https://...
Image: https://...

Open the HTML URL in your browser. You’ll see a fully styled login page with Tailwind CSS baked in.

What just happened?

You used three core SDK concepts:

stitch - The default singleton. It connects to the Stitch MCP server using your API key.
project.generate(prompt) - Sends a prompt to Stitch and returns a Screen object.
screen.getHtml() / screen.getImage() - Retrieves download URLs for the generated design.

The SDK gives you a fluent, object-oriented API: stitch → Project → Screen. Each object knows how to navigate to the next.

Next steps

Now that you have a working design, try these:

Edit a screen to refine the design with a follow-up prompt
Generate variants to explore alternative layouts and color schemes
Manage design systems to create and apply visual themes across screens
Upload files to import mockups, screenshots, and HTML prototypes from disk
Use the SDK with the Vercel AI SDK to let an LLM orchestrate your design workflow
Build agent-driven workflows using callTool and listTools for full programmatic control
Check out the full SDK Reference for every method available