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 に帰属します。本サイトは独立した非公式の翻訳です。