AI SDK と組み合わせる
Stitch ツールを Vercel AI SDK に組み込み、LLM に自律的にデザインを生成させます。
Stitch SDK には、Vercel AI SDK 専用のアダプターが同梱されています。/ai サブパスから stitchTools() をインポートし、generateText() や streamText() にそのまま渡すだけです。ツールのオーケストレーションは LLM が行うので、あなたはプロンプトを書くだけで済みます。
インストール
3 つのパッケージが必要です:
npm install @google/stitch-sdk ai @ai-sdk/google
キーを設定する
export STITCH_API_KEY="your-stitch-api-key"
export GOOGLE_GENERATIVE_AI_API_KEY="your-gemini-api-key"
基本的な使い方
import { generateText } from "ai";
import { google } from "@ai-sdk/google";
import { stitchTools } from "@google/stitch-sdk/ai";
const { text } = await generateText({
model: google("gemini-3.1-flash-lite-preview"),
tools: stitchTools(),
maxSteps: 5,
prompt: "Create a new Stitch project called 'Landing Page' and generate a hero section with a CTA button.",
});
console.log(text);
LLM はまず create_project を呼び出し、続いて generate_screen_from_text を呼び出し、最後に作成したものの自然言語による要約を返します。オーケストレーションのロジックを自分で書く必要はありません。
ツールを絞り込む
モデルがアクセスできるツールを制限したい場合は、include 配列を渡します:
const tools = stitchTools({
include: ["create_project", "generate_screen_from_text", "list_projects"],
});
これはモデルの権限範囲を狭めたいときに便利です。たとえば、プロジェクトの削除を防げます。
API キーを上書きする
STITCH_API_KEY 環境変数に頼りたくない場合は、直接渡します:
const tools = stitchTools({ apiKey: "your-key-here" });
仕組み
stitchTools() は、AI SDK のツール形式と直接互換性のある Record<string, Tool> を返します。各ツールには、背後の Stitch MCP サーバーを呼び出す execute 関数があらかじめ組み込まれています。アダプターは ai パッケージに実行時の依存関係を一切持ちません。インポートするのは Tool 型だけです。
アーキテクチャの詳細については、アーキテクチャを参照してください。
原文: https://stitch.withgoogle.com/docs/sdk/ai-sdk/
本ページは Google Stitch 公式ドキュメントの翻訳です。原文の著作権は Google LLC に帰属します。本サイトは独立した非公式の翻訳です。