搭配 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 無關聯。