Loading...
Loading...
Use the Stitch SDK to generate, edit, and iterate on UI screens from text prompts, manage projects, and retrieve screen HTML/images. Use when the user wants to consume the SDK in their application.
npx skill4agent add google-labs-code/stitch-sdk stitch-sdk-usagenpm install @google/stitch-sdkexport STITCH_API_KEY="your-api-key"import { stitch } from '@google/stitch-sdk';
const project = await stitch.createProject("My App");
const screen = await project.generate("A settings page with dark theme");
const html = await screen.getHtml(); // download URL for the HTML
const imageUrl = await screen.getImage(); // download URL for the screenshotstitchSTITCH_API_KEYimport { stitch } from '@google/stitch-sdk';
// List all projects
const projects = await stitch.projects();
// Reference a project by ID (no network call)
const project = stitch.project("4044680601076201931");
// Create a new project
const newProject = await stitch.createProject("My App");// Generate a new screen from a prompt
const screen = await project.generate("Login page with email and password fields");
// Edit an existing screen
const edited = await screen.edit("Make the background dark and add a subtitle");
// Generate variants of a screen
const variants = await screen.variants("Try different color schemes", {
variantCount: 2,
creativeRange: "EXPLORE",
aspects: ["COLOR_SCHEME", "LAYOUT"],
});// Get screen HTML download URL
const html = await screen.getHtml();
// Get screen screenshot download URL
const imageUrl = await screen.getImage();import { StitchToolClient } from '@google/stitch-sdk';
const client = new StitchToolClient(); // reads STITCH_API_KEY from env
const tools = await client.listTools();
const result = await client.callTool("generate_screen_from_text", {
projectId: "123", prompt: "A login page"
});
await client.close();StitchErrorimport { stitch, StitchError } from '@google/stitch-sdk';
try {
const project = stitch.project("bad-id");
await project.screens();
} catch (e) {
if (e instanceof StitchError) {
console.log(e.code); // "AUTH_FAILED", "NOT_FOUND", etc.
console.log(e.message); // Human-readable description
console.log(e.recoverable); // Whether retrying might succeed
}
}AUTH_FAILEDNOT_FOUNDPERMISSION_DENIEDRATE_LIMITEDNETWORK_ERRORVALIDATION_ERRORUNKNOWN_ERROR| Method | Returns | Description |
|---|---|---|
| | Create a new project |
| | List all projects |
| | Reference a project by ID (no network call) |
| Method | Returns | Description |
|---|---|---|
| | Generate a screen from a text prompt |
| | List all screens in the project |
| | Retrieve a specific screen by ID |
deviceType"MOBILE""DESKTOP""TABLET""AGNOSTIC"| Method | Returns | Description |
|---|---|---|
| | Get the screen's HTML download URL |
| | Get the screen's screenshot download URL |
| | Edit the screen using a text prompt |
| | Generate variants of the screen |
modelId"GEMINI_3_PRO""GEMINI_3_FLASH"| Method | Returns | Description |
|---|---|---|
| | Call any MCP tool by name |
| | Discover available tools |
| | Establish MCP connection (auto-called by callTool) |
| | Close the connection |
import { Stitch, StitchToolClient } from '@google/stitch-sdk';
const client = new StitchToolClient({
apiKey: "your-api-key",
baseUrl: "https://stitch.googleapis.com/mcp",
timeout: 300_000,
});
const sdk = new Stitch(client);
const projects = await sdk.projects();| Option | Env Variable | Description |
|---|---|---|
| | API key for authentication |
| | OAuth access token |
| | GCP project ID (required with OAuth) |
| — | MCP server URL (default: |
| — | Request timeout in ms (default: 300000) |