搭配 AI SDK 使用
將 Stitch 工具接入 Vercel AI SDK,讓 LLM 自主產生設計。
Stitch SDK 隨附專為 Vercel AI SDK 打造的轉接器。從 /ai 子路徑匯入 stitchTools(),直接放進 generateText() 或 streamText() 即可。工具協調由 LLM 負責——你只需要寫好提示詞。
安裝
你需要三個套件:
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>。每個工具都已預先接好 execute 函式,會呼叫底層的 Stitch MCP 伺服器。這個轉接器對 ai 套件沒有任何執行階段相依性——它只匯入 Tool 型別。
若想深入了解架構,請參閱架構。
原文: https://stitch.withgoogle.com/docs/sdk/ai-sdk/
本頁翻譯自 Google Stitch 官方文件,原文版權歸 Google LLC 所有。本站為獨立第三方翻譯,與 Google 無關聯。