How to edit a screen

Already have a screen? Use screen.edit() to iterate on it with natural language. The SDK handles the tool call, returns a new Screen object, and keeps the original untouched.

Find a screen to edit

First, grab a screen from one of your existing projects:

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

const projects = await stitch.projects();
const project = projects.at(0);
const screens = await project.screens();
const screen = screens.at(0);

console.log(`Editing screen ${screen.id} in project ${project.id}`);

Edit it

Pass a natural language instruction to screen.edit():

const edited = await screen.edit("Change the color scheme to dark mode");

This returns a new Screen object. The original screen is unchanged.

Generation can take up to a minute. Don’t retry on timeout-the server is still working.

Compare the results

const originalHtml = await screen.getHtml();
const editedHtml = await edited.getHtml();

console.log(`Original: ${originalHtml}`);
console.log(`Edited:   ${editedHtml}`);

Specify a device type or model

If you need a specific device target or model, pass them as optional parameters:

const edited = await screen.edit(
  "Add a bottom navigation bar",
  "MOBILE",          // deviceType
  "GEMINI_3_PRO"     // modelId
);

See the Reference for all available deviceType and modelId values.