ファイルのアップロード方法

ディスク上にモックアップ、スクリーンショット、または HTML プロトタイプがありますか？Stitch に直接アップロードして画面に変換できます — 手動インポートも、ブラウザも、base64 エンコードの面倒もありません。

ファイルをアップロードする

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

const project = stitch.project("your-project-id");

const result = await project.upload("./mockup.png", {
  title: "Home Screen",
});

if (result.success) {
  const [screen] = result.screens;
  console.log(`Screen created: ${screen.id}`);
  const html = await screen.getHtml();
  const imageUrl = await screen.getImage();
}

SDK はディスクからファイルを読み取り、Stitch REST API に直接送信します。base64 エンコードされたペイロードでつまずいてしまうエージェント駆動の MCP 呼び出しとは違い、出力トークンの制限は一切ありません。

対応フォーマット

拡張子	種類	画面タイプ
.png	画像	IMAGE
.jpg / .jpeg	画像	IMAGE
.webp	画像	IMAGE
.html / .htm	ドキュメント	DOCUMENT

HTML ファイルはドキュメント画面としてアップロードされます — 既存の Web ページやプロトタイプの静的なスナップショットをインポートするのに便利です。

オプション

オプション	型	デフォルト	説明
title	string	—	Stitch 上で表示される画面のタイトル
createScreenInstances	boolean	true	画面をキャンバスに追加するかどうか

HTML プロトタイプをアップロードする

既存のデザインをインポートするには、自己完結型の HTML ファイルをアップロードします：

const result = await project.upload("./prototype.html", {
  title: "Landing Page Prototype",
});

SDK は .html と .htm 拡張子を自動的に検出し、画面タイプを DOCUMENT に設定します。

結果を処理する

upload() は決して例外をスローしません。判別可能な結果オブジェクトを返します：

const result = await project.upload("./mockup.png");

if (result.success) {
  console.log(`Created ${result.screens.length} screens`);
} else {
  console.error(`${result.error.code}: ${result.error.message}`);
}

エラーコード

コード	意味
FILE_NOT_FOUND	指定されたパスにファイルが存在しない
UNSUPPORTED_FORMAT	拡張子が .png、.jpg、.jpeg、.webp、.html、.htm のいずれでもない
AUTH_FAILED	API キーが無効または未設定
UPLOAD_FAILED	サーバーがアップロードを拒否した
UNKNOWN_ERROR	予期しない失敗

一括アップロード

複数のファイルをループでアップロードします：

import fs from "fs/promises";
import path from "path";

const project = stitch.project("your-project-id");
const files = await fs.readdir("./designs");

for (const file of files) {
  if (/\.(png|jpe?g|webp|html?)$/i.test(file)) {
    const result = await project.upload(
      path.join("./designs", file),
      { title: path.parse(file).name },
    );
    if (result.success) {
      console.log(`Uploaded ${file} → ${result.screens[0].id}`);
    }
  }
}