Logo
Skip to main content
The undefined page has loaded.

Use case: AI Image Generator for Page Builder

Build an AI-powered image generator that runs inside SitecoreAI Page Builder and creates images based on the page you're editing. Instead of writing the code yourself, you'll describe what you want in a short spec, review your AI coding agent's plan, and let the agent build and verify the app one milestone at a time. Images are generated with Cloudflare Workers AI, using the free daily allowance on a Cloudflare account.

AI Image Generator in Action

Extension Point: Page Context Panel

Summary

The app automatically detects the page that's open in Page Builder, suggests an image prompt based on it, and generates an image with the FLUX.1-schnell model via Cloudflare Workers AI. Authors can edit the prompt, regenerate, and download the result.

Prerequisites: Before starting this tutorial, ensure you have completed the Pre-Requisites and Setup:

  • ✅ Node.js 22 LTS or later installed
  • ✅ An AI coding agent in agent mode
  • ✅ Registered app in App Studio (choose Page Context Panel extension point, and enable the pop-up, clipboard and download file permissions)
  • ✅ App installed in your assigned environment
  • ✅ Blok and Docs MCP configured for your agent
  • ✅ AGENTS.md added to your project
  • ✅ Custom app running locally at http://localhost:3000

What you'll build:

  • Auto-detects the page displayName from Sitecore context
  • Real-time prompt updates when navigating between pages
  • AI image generation via Cloudflare Workers AI
  • One-click image download

How you'll work with your agent

Each step below gives you a prompt that describes the outcome you want and how the agent should prove it works, rather than dictating the code. The project rules in AGENTS.md (SDK usage, Blok components, keeping secrets on the server) apply to every prompt, so you don't need to repeat them.

For each step:

  1. Paste the prompt into your agent.
  2. Let the agent make the changes and run its checks.
  3. Review what it changed and test it yourself where the step says so.
  4. If something isn't right, tell the agent what you saw and let it fix it before moving on.

Before you start: Get your Cloudflare Workers AI credentials

The image generator calls the Cloudflare Workers AI REST API, which needs your Cloudflare Account ID and an API token. Every Cloudflare account includes a free daily allowance for Workers AI (10,000 Neurons per day, reset at 00:00 UTC). At the default settings each image uses around 58 Neurons, so that's enough for about 170 images a day. On the free plan you can't be charged - requests simply fail once the daily allowance is used up.

  1. Go to dash.cloudflare.com/sign-up and create a free account (or sign in if you already have one). Verify your email address.
  2. In the Cloudflare dashboard, open Workers AI (under AI in the sidebar).
  3. Select Use REST API.
  4. Under Get Account ID, copy your Account ID.
  5. Select Create a Workers AI API Token, review the prefilled template, then select Create API Token.
  6. Select Copy API Token and keep it somewhere safe.

You'll add both values to your app's .env.local file in the first step. Never commit them to source control or paste them into a prompt.

Implementation Steps

Step 1. Add Your Cloudflare Credentials

Create .env.local in your project root and paste in the Account ID and API token you copied earlier:

CLOUDFLARE_ACCOUNT_ID=your_account_id_here
CLOUDFLARE_API_TOKEN=your_api_token_here

Step 2. Write the Spec and Review the Plan

A short spec gives your agent a clear picture of the whole app before it writes any code. Create a file called SPEC.md in your project root with this content:

Prompt:

Read SPEC.md, AGENTS.md and the existing code. Use the Sitecore Docs MCP and the SDK type definitions to confirm how to read the page context, and the Blok MCP to choose components.

Then propose an implementation plan: the files you'll create or change, the components and hook you'll build, and how you'll verify each part. Split the work into these milestones: page context, image generation API route, UI and download. Don't write any code yet.

If your agent has a plan mode, you can use that instead of asking it not to write code.

Review: Read the plan before you approve it. Check that it keeps the home page thin, puts the API call on the server, and uses the SDK's pages.context query. Ask the agent to change anything you disagree with.

Step 3. Milestone 1 - Page Context

Prompt:

Implement milestone 1 from the plan: the page context hook, and a minimal version of the home page that shows the current page name.

When you're done, run the typecheck and lint and fix any errors. The page context is only available when the app runs inside SitecoreAI. On plain localhost, the scaffolded MarketplaceProvider shows a connecting message and then an error instead of the page - that's expected, so don't change the provider to work around it.

Test: Open your app in the Page Context Panel in Page Builder. Navigate between a few pages and check the page name updates each time.

Step 4. Milestone 2 - Image Generation API Route

Prompt:

Implement milestone 2 from the plan: the server-side image generation API route described in SPEC.md.

Validate the request body, and return clear error messages with sensible status codes for missing credentials, rejected credentials, and the daily free allowance being used up.

When you're done, run the typecheck and lint, then call the route with curl using a short test prompt and show me the shape of the response (don't print the full image data).

Test: Check the agent's curl output. A successful response contains an imageUrl that starts with data:image/. If it reports a credentials error, check the Account ID and API token in your .env.local.

Step 5. Milestone 3 - UI and Download

Prompt:

Implement milestone 3 from the plan: the full image generator UI described in SPEC.md, including the editable prompt, Generate button with a loading state, image preview, Download and Generate new actions, and error messages.

The downloaded file should use the correct extension for the image type returned by the API.

When you're done, run the typecheck and lint and fix any errors.

Test: In Page Builder, generate an image for the current page, then download it and check the file opens correctly.

Step 6. End-to-End Test in Sitecore

Run through the whole flow in your Sitecore environment:

  1. Open your app in the Page Context Panel in Page Builder (not localhost)
  2. Navigate to several content pages — verify the prompt updates automatically with each page name
  3. Generate an image — verify it renders in the panel
  4. Click Download — verify the file saves and opens as a valid image
  5. Disconnect from the internet and generate — verify an error message appears and the UI remains usable

If anything fails, describe what you saw to your agent and ask it to find and fix the cause.

Stretch Goals (Optional)

Finished early? Pick one or more of these and describe it to your agent as a new milestone. Ask it to plan first, then implement and verify, just as before.

  • Generation cache: reuse the last image if the prompt hasn't changed, instead of calling the API again.
  • Session history: keep the last 5 generated images (prompt and image) in localStorage and show thumbnails the author can restore.
  • Style selector: add a style dropdown (for example "photorealistic", "digital art", "watercolor painting", "concept art") that's added to the prompt before generating.
  • Richer context: include more information from pages.context, such as the site name or page path, in the suggested prompt.

Resources

Essential links for AI-powered Sitecore marketplace development: