Stitch SDK
The @google/stitch-sdk package lets you programmatically generate and edit UIs. Use StitchProxy for MCP, StitchToolClient for direct tool access, or the high-level API.
What is the Stitch SDK?
The @google/stitch-sdk npm package lets you programmatically generate and edit UIs using the Stitch AI engine. Instead of using the visual canvas, you can call Stitch from your code, scripts, or CI/CD pipelines. This opens up powerful automation possibilities: generate UIs from data, batch-process design variations, or integrate Stitch into your custom tools.
SDK Components
The SDK provides three main interfaces. StitchProxy is designed for MCP server integration, bridging Stitch to AI coding assistants. StitchToolClient provides direct tool-level access for fine-grained control. The high-level API offers simple generate() and edit() methods for common use cases. Choose the interface that matches your integration needs.
Getting Started with the SDK
Install the SDK with npm install @google/stitch-sdk. Import the high-level client, configure it with your Google credentials, and call the generate method with a text prompt. The SDK returns the generated design as HTML/CSS along with metadata like the design structure and component tree. You can then edit the result with follow-up calls.
Advanced Use Cases
Power users leverage the SDK for batch generation — creating dozens of design variations from a template. You can also build custom design tools on top of the SDK, integrate it into your CMS for dynamic page generation, or use it in testing pipelines to generate UI mockups for visual regression tests. The possibilities are extensive once you have programmatic access to Stitch's AI engine.
Code Example
import { StitchClient } from '@google/stitch-sdk';
const client = new StitchClient({ credentials: 'path/to/credentials.json' });
const result = await client.generate({
prompt: 'A mobile e-commerce product page with image carousel, price, and add-to-cart button',
mode: 'standard', // or 'experimental'
});
console.log(result.html);
console.log(result.css);Tips & Best Practices
- 1Start with the high-level API for simple use cases before exploring lower-level interfaces.
- 2Cache SDK responses to avoid unnecessary generation calls and save quota.
- 3Use StitchProxy if you are building an MCP integration.
- 4The SDK respects the same generation limits as the visual interface.
- 5Combine the SDK with DESIGN.md for programmatic design system enforcement.