Draw in the browser, send to Sume: a canvas Sketch pad in 20 lines

OpenAI's thread says Sketch opens when you type @Sketch in ChatGPT and lets you draw a visual guide (OpenAI Developer Community, read 2026-10-04). To give your own users the same move, you need a drawing surface, a place to host the PNG and one API call. Sume covers the last part: reference images go in input_references and must be public HTTPS URLs (Sume Image API).

Three pieces

Keep the Sume API key on your server, never in the browser. The browser only uploads the PNG to your storage and tells your server the URL.

Export and upload

signedPutUrl and publicUrl come from your own server, which creates a short-lived upload URL and the matching public address. Make the public URL live long enough for the job to run.

async function uploadSketch(canvas, signedPutUrl, publicUrl) {
  const blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/png"));
  const put = await fetch(signedPutUrl, {
    method: "PUT",
    headers: { "Content-Type": "image/png" },
    body: blob,
  });
  if (!put.ok) throw new Error(`upload failed: ${put.status}`);
  return publicUrl;
}

Server call and prompt

Your server sends the URL with a prompt that says what the drawing is for: "Image 1 is a rough layout sketch. Follow its composition and proportions, not its line quality. Render it as a photo of a living room." The model gets guidance from the sketch and the words, the same two inputs that Sketch combines in ChatGPT.

• Fill the canvas with a white background before export; a transparent PNG can read as an empty drawing.
• Check the URL from the outside before you send it, as in the public HTTPS checklist.
• Sume also has an assets upload flow; its docs say to prefer public HTTPS media URLs in generation requests.