diff --git a/packages/sdk/README.md b/packages/sdk/README.md index 06bc3b3..85ce1ba 100644 --- a/packages/sdk/README.md +++ b/packages/sdk/README.md @@ -30,6 +30,11 @@ To use `stitchTools()` with the [Vercel AI SDK](https://sdk.vercel.ai/), install npm install @google/stitch-sdk ai ``` +## Examples + +Check out the [examples directory](./examples) for practical integrations, including: +- [Screenshot Gallery](./examples/screenshot-gallery) + ## Working with Projects and Screens ### List existing projects diff --git a/packages/sdk/examples/screenshot-gallery/README.md b/packages/sdk/examples/screenshot-gallery/README.md new file mode 100644 index 0000000..57c6901 --- /dev/null +++ b/packages/sdk/examples/screenshot-gallery/README.md @@ -0,0 +1,26 @@ +# Screenshot Gallery + +This example demonstrates how to iterate over screens in a Stitch project, retrieve their screenshot URLs, and generate a simple HTML gallery page to view them. + +This is a deterministic **Script** example (no agent needed) that shows how to batch-process screen data. + +## Features demonstrated + +* Listing projects with `stitch.projects()` +* Listing screens in a project with `project.screens()` +* Fetching screenshot CDN URLs with `screen.getImage()` +* Generating static HTML from SDK data + +## Prerequisites + +1. Set your `STITCH_API_KEY` environment variable +2. You must have at least one project with generated screens in your account + +## Run the example + +```bash +cd packages/sdk/examples/screenshot-gallery +bun index.ts +``` + +This will create a `gallery.html` file in your current directory. Open it in any web browser to see the gallery. diff --git a/packages/sdk/examples/screenshot-gallery/index.ts b/packages/sdk/examples/screenshot-gallery/index.ts new file mode 100644 index 0000000..3a51385 --- /dev/null +++ b/packages/sdk/examples/screenshot-gallery/index.ts @@ -0,0 +1,123 @@ +import { stitch } from "@google/stitch-sdk"; +import fs from "fs/promises"; +import path from "path"; +import "../_require-key.js"; + +async function run() { + const projects = await stitch.projects(); + if (projects.length === 0) { + console.log("No projects found."); + return; + } + + // Use the first project for demonstration + const project = projects[0]; + console.log(`Loading screens for project: ${project.id}...`); + + const screens = await project.screens(); + if (screens.length === 0) { + console.log("No screens found in this project."); + return; + } + + console.log(`Found ${screens.length} screens. Collecting image URLs...`); + + const galleryItems = []; + for (const screen of screens) { + try { + const imageUrl = await screen.getImage(); + if (imageUrl) { + galleryItems.push({ + id: screen.id, + imageUrl + }); + } + } catch (err) { + console.warn(`Failed to get image for screen ${screen.id}:`, err); + } + } + + if (galleryItems.length === 0) { + console.log("No image URLs could be retrieved."); + return; + } + + console.log(`Collected ${galleryItems.length} screenshots. Generating HTML...`); + + // Generate a simple HTML gallery + const html = ` + + + + + + Screenshot Gallery - ${project.id} + + + +

Project Screenshot Gallery

+
+ ${galleryItems.map(item => ` +
+ + Screenshot of screen ${item.id} + +
Screen: ${item.id}
+
+ `).join("")} +
+ + +`; + + const outputPath = path.join(process.cwd(), "gallery.html"); + await fs.writeFile(outputPath, html, "utf-8"); + + console.log(`\nSuccess! Generated gallery with ${galleryItems.length} screenshots.`); + console.log(`Open ${outputPath} in your browser to view it.`); +} + +run().catch(err => { + console.error("Error:", err); + process.exit(1); +});