stitch-sdk-usage

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("My App");

// Create a design system for a project
const ds = await project.createDesignSystem({ displayName: "My Theme" });
 
// List design systems
const systems = await project.listDesignSystems();
 
// Reference by ID (no network call)
const dsRef = project.designSystem("existing-asset-id");
 
// Update a design system
const updated = await ds.update({ displayName: "Updated Theme" });
 
// Apply to screens (requires SelectedScreenInstance objects from project.data.screenInstances)
const screens = await ds.apply([
  { id: "instance-id", sourceScreen: "projects/123/screens/456" },
]);

import { stitch } from "@google/stitch-sdk";
 
const project = stitch.project("your-project-id");
 
// Upload a local image file
const [screen] = await project.uploadImage("./mockup.png", {
  title: "Home Screen",
});
 
console.log(screen.id);
const html = await screen.getHtml();
const imageUrl = await screen.getImage();

// Generate a new screen from a prompt
const screen = await project.generate(
  "Login page with email and password fields",
);
 
// Edit an existing screen
const edited = await screen.edit("Make the background dark and add a subtitle");
 
// Generate variants of a screen
const variants = await screen.variants("Try different color schemes", {
  variantCount: 2,
  creativeRange: "EXPLORE",
  aspects: ["COLOR_SCHEME", "LAYOUT"],
});

// Get screen HTML download URL
const html = await screen.getHtml();
 
// Get screen screenshot download URL
const imageUrl = await screen.getImage();

import { stitch } from "@google/stitch-sdk";
 
// Find available tools
const { tools } = await stitch.listTools();
for (const tool of tools) {
  console.log(`${tool.name}: ${tool.description}`);
}
// Call a tool with a JSON payload
const result = await stitch.callTool("generate_screen_from_text", {
  projectId: "123",
  prompt: "A login page",
});
await stitch.close();

import { stitch, StitchError } from "@google/stitch-sdk";
 
try {
  const project = stitch.project("bad-id");
  await project.screens();
} catch (e) {
  if (e instanceof StitchError) {
    console.log(e.code); // "AUTH_FAILED", "NOT_FOUND", etc.
    console.log(e.message); // Human-readable description
    console.log(e.recoverable); // Whether retrying might succeed
  }
}

import { Stitch, StitchToolClient } from "@google/stitch-sdk";
 
const client = new StitchToolClient({
  apiKey: "your-api-key",
  baseUrl: "https://stitch.googleapis.com/mcp",
  timeout: 300_000,
});
 
const sdk = new Stitch(client);
const projects = await sdk.projects();