From 39f492a29d38b3ebe308cbdf9c9f81a80c972c2e Mon Sep 17 00:00:00 2001
From: davideast <4570265+davideast@users.noreply.github.com>
Date: Thu, 23 Apr 2026 04:20:08 +0000
Subject: [PATCH] add basic design example script

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
---
 packages/sdk/README.md                       |  4 +++
 packages/sdk/examples/basic-design/README.md | 22 ++++++++++++++
 packages/sdk/examples/basic-design/index.ts  | 32 ++++++++++++++++++++
 3 files changed, 58 insertions(+)
 create mode 100644 packages/sdk/examples/basic-design/README.md
 create mode 100644 packages/sdk/examples/basic-design/index.ts

diff --git a/packages/sdk/README.md b/packages/sdk/README.md
index 06bc3b3..89913d9 100644
--- a/packages/sdk/README.md
+++ b/packages/sdk/README.md
@@ -18,6 +18,10 @@ const imageUrl = await screen.getImage();
 
 `html` is a download URL for the screen's HTML. `imageUrl` is a download URL for the screenshot.
 
+## Examples
+
+- [Basic Design Generation](examples/basic-design) - Create a project and generate a design
+
 ## Install
 
 ```bash
diff --git a/packages/sdk/examples/basic-design/README.md b/packages/sdk/examples/basic-design/README.md
new file mode 100644
index 0000000..8759a6e
--- /dev/null
+++ b/packages/sdk/examples/basic-design/README.md
@@ -0,0 +1,22 @@
+# Basic Design Generation
+
+A simple, deterministic script demonstrating the most common workflow in the Stitch SDK: creating a project, generating a screen from a prompt, and retrieving the resulting HTML and image URLs.
+
+This is a Tier 1 (Script) example. It does not require an agent or LLM — it just makes API calls.
+
+## Prerequisites
+
+- Set your `STITCH_API_KEY` environment variable.
+
+## Run the Example
+
+```bash
+bun index.ts
+```
+
+## What it does
+
+1. Calls `create_project` to get a new project ID.
+2. Instantiates a domain class: `stitch.project(id)`.
+3. Calls `project.generate(prompt)` to create a UI.
+4. Calls `screen.getHtml()` and `screen.getImage()` to retrieve download URLs for the artifacts.
diff --git a/packages/sdk/examples/basic-design/index.ts b/packages/sdk/examples/basic-design/index.ts
new file mode 100644
index 0000000..86a4f14
--- /dev/null
+++ b/packages/sdk/examples/basic-design/index.ts
@@ -0,0 +1,32 @@
+import "../_require-key.js";
+import { stitch } from "@google/stitch-sdk";
+
+async function main() {
+  console.log("🚀 Basic Design Generation Example");
+
+  // 1. Create a project
+  console.log("📁 Creating a new project...");
+  const rawProject = await stitch.callTool<any>("create_project", { title: "Basic Design Example" });
+  const project = stitch.project(rawProject.name);
+  console.log(`✅ Project created: ${project.id}`);
+
+  // 2. Generate a screen
+  console.log("🎨 Generating a screen from a text prompt...");
+  const screen = await project.generate("A landing page for a modern coffee shop with a hero image, features section, and email signup form.");
+  console.log(`✅ Screen generated: ${screen.id}`);
+
+  // 3. Get outputs
+  const htmlUrl = await screen.getHtml();
+  const imageUrl = await screen.getImage();
+
+  console.log("\n✨ Results:");
+  console.log(`📄 HTML URL:  ${htmlUrl}`);
+  console.log(`🖼️  Image URL: ${imageUrl}`);
+
+  console.log("\nNext steps:");
+  console.log("- Download the HTML from the URL");
+  console.log("- Extract the Tailwind configuration block");
+  console.log("- Integrate the assets into your application");
+}
+
+main().catch(console.error);