搭配 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() 返回一个 Record<string, Tool>,它与 AI SDK 的工具格式直接兼容。每个工具都预先接好了 execute 函数,用于调用底层的 Stitch MCP 服务器。该适配器对 ai 包没有任何运行时依赖——它只导入 Tool 类型。
想深入了解架构,请参阅架构。
原文: https://stitch.withgoogle.com/docs/sdk/ai-sdk/
本页翻译自 Google Stitch 官方文档,原文版权归 Google LLC 所有。本站为独立第三方翻译,与 Google 无关联。