diff --git a/packages/sdk/README.md b/packages/sdk/README.md index 06bc3b3..64d7d4a 100644 --- a/packages/sdk/README.md +++ b/packages/sdk/README.md @@ -2,6 +2,10 @@ Generate UI screens from text prompts and extract their HTML and screenshots programmatically. +## Examples + +- [Browse and Export](examples/browse-and-export/README.md) - List projects and download HTML/screenshots locally. + ## Quick Start Set your API key and generate a screen: diff --git a/packages/sdk/examples/browse-and-export/README.md b/packages/sdk/examples/browse-and-export/README.md new file mode 100644 index 0000000..359c8b6 --- /dev/null +++ b/packages/sdk/examples/browse-and-export/README.md @@ -0,0 +1,26 @@ +# Browse and Export Script + +A script that lists all your Stitch projects and screens, then downloads the HTML and screenshot images for the first available screen to a local directory. + +This demonstrates how to fetch the actual content from the URLs returned by `screen.getHtml()` and `screen.getImage()`. + +## Prerequisites + +1. A valid Stitch API key (`STITCH_API_KEY`). +2. At least one existing project with a generated screen in your Stitch account. + +## Run + +```bash +STITCH_API_KEY=your_api_key_here bun index.ts +``` + +## What it does + +1. Calls `stitch.projects()` to list your projects. +2. Iterates through projects to find one that has screens (using `project.screens()`). +3. For the first screen found, gets the download URLs: + * `await screen.getHtml()` + * `await screen.getImage()` +4. Uses `fetch()` to download the actual HTML text and image buffer from those URLs. +5. Saves the downloaded artifacts to a local `out/` directory. diff --git a/packages/sdk/examples/browse-and-export/index.ts b/packages/sdk/examples/browse-and-export/index.ts new file mode 100644 index 0000000..38e2532 --- /dev/null +++ b/packages/sdk/examples/browse-and-export/index.ts @@ -0,0 +1,93 @@ +/** + * Browse and Export Script + * + * Demonstrates listing projects and screens, then downloading the HTML and + * screenshot image artifacts for a screen. + * + * Run with: STITCH_API_KEY=your-key bun index.ts + */ + +import { stitch } from "@google/stitch-sdk"; +import fs from "fs/promises"; +import path from "path"; + +// Verify API key is set +if (!process.env.STITCH_API_KEY) { + console.error("Error: STITCH_API_KEY environment variable is required."); + process.exit(1); +} + +async function main() { + console.log("šŸ” Fetching projects..."); + const projects = await stitch.projects(); + + if (projects.length === 0) { + console.log("šŸ“­ No projects found."); + return; + } + + console.log(`āœ… Found ${projects.length} project(s).\n`); + + let targetScreen = null; + + // Browse projects to find one with screens + for (const project of projects) { + console.log(`šŸ“ Project: ${project.id}`); + const screens = await project.screens(); + + if (screens.length > 0) { + console.log(` šŸ“± Found ${screens.length} screen(s).`); + if (!targetScreen) { + targetScreen = screens[0]; + } + } else { + console.log(" šŸ“­ No screens in this project."); + } + } + + if (!targetScreen) { + console.log("\nNo screens found across any projects to export."); + return; + } + + console.log(`\nšŸ“„ Exporting artifacts for screen ${targetScreen.id}...`); + + const outDir = path.join(process.cwd(), "out"); + await fs.mkdir(outDir, { recursive: true }); + + try { + // Download HTML + console.log("Fetching HTML URL..."); + const htmlUrl = await targetScreen.getHtml(); + if (htmlUrl) { + console.log(`Downloading HTML from ${htmlUrl.slice(0, 50)}...`); + const htmlResponse = await fetch(htmlUrl); + if (!htmlResponse.ok) throw new Error(`HTML fetch failed: ${htmlResponse.statusText}`); + const htmlCode = await htmlResponse.text(); + const htmlPath = path.join(outDir, `${targetScreen.id}.html`); + await fs.writeFile(htmlPath, htmlCode); + console.log(`āœ… Saved HTML to ${htmlPath}`); + } else { + console.log("āš ļø No HTML URL available for this screen."); + } + + // Download Image + console.log("Fetching Image URL..."); + const imageUrl = await targetScreen.getImage(); + if (imageUrl) { + console.log(`Downloading Image from ${imageUrl.slice(0, 50)}...`); + const imageResponse = await fetch(imageUrl); + if (!imageResponse.ok) throw new Error(`Image fetch failed: ${imageResponse.statusText}`); + const imageBuffer = await imageResponse.arrayBuffer(); + const imagePath = path.join(outDir, `${targetScreen.id}.jpeg`); + await fs.writeFile(imagePath, Buffer.from(imageBuffer)); + console.log(`āœ… Saved Image to ${imagePath}`); + } else { + console.log("āš ļø No Image URL available for this screen."); + } + } catch (error) { + console.error("Failed to download artifacts:", error); + } +} + +main().catch(console.error);