画面の編集方法

すでに画面がある場合は、screen.edit() を使って自然言語で反復改善できます。SDK がツール呼び出しを処理し、新しい Screen オブジェクトを返します。元の画面はそのまま残ります。

編集する画面を見つける

まず、既存のプロジェクトから画面を 1 つ取得します：

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}`);

編集する

screen.edit() に自然言語の指示を渡します：

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

これは新しい Screen オブジェクトを返します。元の screen は変更されません。

生成には最大 1 分ほどかかることがあります。タイムアウトしてもリトライしないでください。サーバーはまだ処理を続けています。

結果を比較する

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

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

デバイスタイプやモデルを指定する

特定のデバイスターゲットやモデルが必要な場合は、任意パラメータとして渡します：

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

利用可能な deviceType と modelId のすべての値については、リファレンスを参照してください。