diff --git a/packages/sdk/README.md b/packages/sdk/README.md index 06bc3b3..1cdda01 100644 --- a/packages/sdk/README.md +++ b/packages/sdk/README.md @@ -289,6 +289,10 @@ Error codes: `AUTH_FAILED`, `NOT_FOUND`, `PERMISSION_DENIED`, `RATE_LIMITED`, `N --- +## Examples + +- [HTML Email from Design](./examples/html-to-email/README.md) - Agent CLI tool to generate email-ready HTML designs. + ## Disclaimer This is not an officially supported Google product. This project is not diff --git a/packages/sdk/examples/html-to-email/README.md b/packages/sdk/examples/html-to-email/README.md new file mode 100644 index 0000000..0fe926c --- /dev/null +++ b/packages/sdk/examples/html-to-email/README.md @@ -0,0 +1,65 @@ +# HTML Email from Design + +This Agent CLI tool generates an email-ready HTML design using the Stitch SDK. It takes a prompt and generates a design, then uses `juice` to inline the CSS making it suitable for email clients. + +## Overview + +The agent is responsible for crafting an email-specific prompt (single column, simple layout). The CLI handles the deterministic aspects: generating the design, fetching the HTML, and inlining CSS using `juice`. + +## Installation + +Ensure you have the required dependencies: + +```bash +bun add @google/stitch-sdk juice +bun add -d @types/juice +``` + +## Example CLI Usage + +You can implement this CLI tool in your agent ecosystem by using the following code. Save it as `index.ts` and run it via `bun index.ts`. + +```typescript +import { stitch } from "@google/stitch-sdk"; +import juice from "juice"; + +async function main() { + const args = process.argv.slice(2); + let input; + + try { + input = JSON.parse(args[0] || '{}'); + } catch (e) { + console.error("Invalid JSON input"); + process.exit(1); + } + + const projectId = input.projectId; + const prompt = input.prompt; + + if (!projectId || !prompt) { + console.error("Usage: stitch email --json '{\"projectId\": \"...\", \"prompt\": \"...\"}'"); + process.exit(1); + } + + console.log(`Generating email design in project ${projectId}...`); + const project = stitch.project(projectId); + + // Generate the screen using the prompt + const screen = await project.generate(prompt); + const htmlUrl = await screen.getHtml(); + + console.log(`Fetching HTML...`); + const response = await fetch(htmlUrl); + const htmlContent = await response.text(); + + console.log(`Inlining CSS with juice...`); + const inlinedHtml = juice(htmlContent); + + // Output the final email-ready HTML + console.log("\nEmail-ready HTML:\n"); + console.log(inlinedHtml); +} + +main().catch(console.error); +``` diff --git a/packages/sdk/examples/html-to-email/SKILL.md b/packages/sdk/examples/html-to-email/SKILL.md new file mode 100644 index 0000000..1ffb6ad --- /dev/null +++ b/packages/sdk/examples/html-to-email/SKILL.md @@ -0,0 +1,13 @@ +# Skill: HTML Email from Design + +This skill teaches an agent how to generate UI designs specifically for email constraints. + +## Guidelines for Prompt Crafting +When crafting prompts for the Stitch SDK to generate email designs: +1. Request a single-column layout. +2. Ensure inline styles are emphasized (the CLI tool will handle `juice` inline translation, but semantic simplicity helps). +3. Avoid complex grid or flex layouts that do not render well in standard email clients. +4. Do not rely on external CDN resources besides images. + +## Using the CLI +Once you have crafted the prompt, you would typically pass the prompt and other parameters to the email CLI tool.