The SDXL Image Studio uses Stable Diffusion XL to generate images based on user prompts. Input details are defined in the toolConfig.ts file, and the image is automatically stored on Cloudflare R2 and displayed after generation.
SDXL Image Studio

SDXL Image Studio

​
Pre-requisites

To run the app, you must have Supabase, Replicate and Cloudflare R2 set up. If you haven’t done this yet, please start there.

Supabase

Set up user authentication & PostgreSQL database using Supabase

Replicate

Set up Replicate & understand how it’s used throughout the app

Storage

Set up audio, pdf and image storage using Cloudflare R2
If you don’t want to store images on Cloudflare R2, you can simply delete the upload section under app/api/(apps)/sdxl/route.ts.
// Get the image URL from the Replicate response
const imageUrl = responseData;

// // Prepare the data for upload
// const uploadData = {
//   imageUrl,
//   uploadPath: toolConfig.upload.path,
// };

// // Get the base upload API URL
// const apiUrl = `${defaultUrl}/api/upload/image`;

// // Upload the image to Cloudflare
// const uploadResponse = await fetch(apiUrl, {
//   method: "POST",
//   headers: {
//     "Content-Type": "application/json",
//   },
//   body: JSON.stringify(uploadData),
// });

// const uploadResult = await uploadResponse.json();

// // Extract the URL from the upload result
// const uploadedImageUrl = uploadResult.url;

// Alternatively, if you dont want to upload image to Cloudflare, you can directly use the image URL from Replicate response and delete the above code

// Store the response in Supabase
const supabaseResponse = await uploadToSupabase(
  requestBody,
  imageUrl, // use imageUrl from Replicate directly instead of uploadedImageUrl
  toolConfig.toolPath,
  toolConfig.aiModel
);
That’s all you need to get the app running.
Review lib/types/toolconfig.ts to understand the various configuration fields in the demo app.

​
Building variations

For this app, we are not modifying the prompt and are directly passing it to SDXL. If you want to see an example where we modify the user input before sending it to the AI model, check out the DALL·E demo application:

DALL-E

Generate logos using DALL-E

​
Automatic input capturing

Update toolConfig.ts to include:
  1. The input variables to pass to Replicate
  2. The button text for the form
  3. The type of model used
Ensure the type field in toolConfig.ts is specified correctly. InputCapture.tsx uses this to determine what to include (fields, file uploads) and which API endpoint to call.
The page.tsx page in /app folder of our demo app will get the data from toolConfig.ts and pass it to the InputCapture component to automatically build a form based on this. 
  type: "sdxl", // options: 'vision' for GPT-4o, 'dalle', 'sdxl', 'groq' & 'gpt'.
  fields: [
    {
      label: "✅ What image would you like to generate?",
      name: "prompt",
      type: "textarea",
      placeholder:
        "Describe the image you would like to generate. What should it look like? What should it contain? What should be the main focus of the image",
      required: true,
    },
    {
      label: "❌ What would you not like to see?",
      name: "negativePrompt",
      type: "textarea",
      placeholder:
        "Describe what you would not like to see in the image. Optional.",
      required: false,
    },
  ],
  submitText: "Generate AI image 🎨",
  submitTextGenerating: "Generating AI image...",

​
Displaying output

After the image has been generated, the image will be automatically displayed on screen instead of the initial InfoCard component.