初めてのデザインを作る

Stitch SDK をインストールして、5 分以内に最初の UI 画面を生成します。

Stitch SDK（@google/stitch-sdk）を使えば、TypeScript から直接 UI デザインを生成、編集、管理できます。MCP の設定ファイルも CLI のセットアップも不要。npm install するだけで、すぐに使い始められます。

このチュートリアルを終えるころには、プロジェクトを作成し、画面を生成し、HTML と画像の URL を取得するスクリプトが動くようになっています。

google-labs-code / stitch-sdk Star Stitch デザイン生成 API のための TypeScript SDK TypeScript @google/stitch-sdk

必要なもの

SDK をインストールする

npm

npm install @google/stitch-sdk

Bun

bun add @google/stitch-sdk

API キーを設定する

キーを環境変数としてエクスポートします。SDK が自動的に読み取ります。

export STITCH_API_KEY="your-api-key"

スクリプトを書く

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

実行する

tsx

npx tsx my-first-design.ts

Bun

bun my-first-design.ts

次のような出力が表示されます：

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

HTML の URL をブラウザで開いてみてください。Tailwind CSS が組み込まれた、スタイルの整ったログインページが表示されます。

何が起きたのか

ここでは SDK の 3 つの中核コンセプトを使いました：

  1. stitch - デフォルトのシングルトンです。API キーを使って Stitch MCP サーバーに接続します。
  2. project.generate(prompt) - プロンプトを Stitch に送信し、Screen オブジェクトを返します。
  3. screen.getHtml() / screen.getImage() - 生成されたデザインのダウンロード URL を取得します。

SDK は流れるように書けるオブジェクト指向 API を提供します：stitch → Project → Screen。それぞれのオブジェクトが、次のオブジェクトへの進み方を知っています。

次のステップ

動くデザインが手に入ったところで、次はこちらも試してみてください：

原文: https://stitch.withgoogle.com/docs/sdk/tutorial/

本ページは Google Stitch 公式ドキュメントの翻訳です。原文の著作権は Google LLC に帰属します。本サイトは独立した非公式の翻訳です。

次へ →AI SDK と組み合わせる