Stitch SDK

For agents or orchestration scripts requiring direct MCP tool access, use the stitch object or instantiate StitchToolClient for explicit configuration (like custom API keys or base URLs). The client auto-connects on the first tool call.

import { StitchToolClient } from "@google/stitch-sdk";

const client = new StitchToolClient({ apiKey: "your-api-key" });
const result = await client.callTool("create_project", {
  title: "Agent Project",
});
await client.close();

If you need to provide credentials manually or override default settings, you can instantiate StitchToolClient and pass it to the Stitch constructor.

Authentication requires either an apiKey or both an accessToken and projectId.

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();

To use Stitch with the Google Agent Development Kit (ADK) for TypeScript, use stitchAdkTools() to get tools formatted as FunctionTools. These can then be passed to an LlmAgent.

import { stitchAdkTools } from "@google/stitch-sdk/adk";
import { LlmAgent } from "@google/adk";

// Get all Stitch tools formatted as ADK FunctionTools
const tools = stitchAdkTools();

// Or filter specific tools:
// const tools = stitchAdkTools({
//   include: ["create_project", "generate_screen_from_text", "get_screen"],
// });

const designerAgent = new LlmAgent({
  name: "Designer",
  model: "gemini-2.5-pro",
  instruction: "You are a designer. Create a project and generate a screen.",
  tools,
});

Run the container in interactive mode (-i) and ensure it cleans up after itself using --rm. The secret stitch-api-key must be passed to the container.

# Podman
podman run --rm -i --secret stitch-api-key stitch-mcp

# Docker
docker run --rm -i --secret stitch-api-key stitch-mcp

You can build the Stitch MCP proxy image using either Podman or Docker. This allows you to run the proxy without installing Node.js or npm dependencies on your host machine.

# Podman
podman build -t stitch-mcp .

# Docker
docker build -t stitch-mcp .

To ensure security, the Stitch API key is injected via a container secret rather than environment variables or command-line arguments. Use the following commands to create the stitch-api-key secret in your container engine.

# Podman
printf '%s' "your-stitch-api-key" | podman secret create stitch-api-key -

# Docker
printf '%s' "your-stitch-api-key" | docker secret create stitch-api-key -

To generate a UI screen, reference a project by ID and use the generate method with a text prompt. Ensure STITCH_API_KEY is set in your environment. You can then retrieve the screen's HTML and image via download URLs.

import { stitch } from "@google/stitch-sdk";

// STITCH_API_KEY must be set in the environment
const project = stitch.project("your-project-id");
const screen = await project.generate(
  "A login page with email and password fields",
);
const html = await screen.getHtml();
const imageUrl = await screen.getImage();

You can pass Stitch tools directly into the Vercel AI SDK using stitchTools(). This allows LLMs to autonomously create projects, generate screens, and retrieve screen data. You can filter the available tools using the include option.

import { generateText, stepCountIs } from "ai";
import { google } from "@ai-sdk/google";
import { stitchTools } from "@google/stitch-sdk/ai";

const { text, steps } = await generateText({
  model: google("gemini-2.5-flash"),
  tools: stitchTools(),
  prompt: "Create a project and generate a modern dashboard with a stat card",
  stopWhen: stepCountIs(5),
});

// To filter tools:
// const tools = stitchTools({
//   include: ["create_project", "generate_screen_from_text", "get_screen"],
// });

The stitchTools() function returns all Stitch MCP tools as Vercel AI SDK Tool objects. You can pass these directly into generateText() or streamText() to allow a model to use Stitch tools autonomously.

Options:

• apiKey: string (Default: STITCH_API_KEY) - Override the environment variable.
• include: string[] (Default: all tools) - Only expose specific tool names.

import { generateText, stepCountIs } from "ai";
import { stitchTools } from "@google/stitch-sdk/ai";

const { text } = await generateText({
  model: yourModel,
  tools: stitchTools(),
  prompt: "Create a login page",
  stopWhen: stepCountIs(5),
});

Install the Stitch SDK using npm to programmatically generate UI screens from text prompts and extract HTML/screenshots.

npm install @google/stitch-sdk

To use the Stitch MCP proxy with Cursor or VS Code, add the following configuration to your .cursor/mcp.json or .vscode/mcp.json file. This example uses podman.

{
  "mcpServers": {
    "stitch": {
      "command": "podman",
      "args": ["run", "--rm", "-i", "--secret", "stitch-api-key", "stitch-mcp"]
    }
  }
}

The SDK can be configured using the following environment variables: