Building Bots

🎞️ The Darkroom

Images for your bot. Grab avatars and pictures from any message, design rank cards and welcome bannersin the Studio, touch them up, and send them back — animated GIFs included. Unboxing it also unlocks your bot's Gallery.

🎁 Free to unbox · works on Interaction Only bots

🧰What's in the box

👤Grab AvatarGet someone's profile picture 🏰Grab Server ArtGet the server's icon, banner or invite splash 📎Grab Images from a MessagePull the pictures out of any message 🔗Load Image from a LinkDownload a picture from the internet 🖼️Pull from GalleryUse an image you uploaded to the Gallery 🔍Read an ImageSize, colours, brightness — in sparks 🎨Develop in StudioDesign an image — rank cards, welcome banners…✂️Touch UpCrop, resize, filter, caption, deep-fry 🎞️FlipbookTurn a list of images into a GIF 📤Attach ImagePut an image on the next message

📥Getting pictures in

Image fields take any of these — no download piece needed:

Write	Gets you	Where
{{user.avatar}}	Whoever triggered the flow	Every flow
{{member.avatar}}	The member who joined / left (server avatar first)	Member triggers
{{target.user.avatar}}	Whoever was right-clicked	Right-click spells
{{target.message.image}}	First picture on the right-clicked message	Right-click a message
{{message.image}} · {{message.images}}	Pictures on the message that fired the trigger	New / edited message (Full Bot)
{{options.picture}}	A file someone uploaded with your spell (File / image input)	Slash spells
{{guild.icon}}	The server's icon	Every flow
gallery:welcome-banner	An image from your Gallery, by label	Every flow

✨Right-click spells

Make a spell of kind Right-click a messageand it shows up in Discord's Apps menu on every message — the perfect way to read a picture out of any conversation. See Spells.

🎨The Studio

Design an image once; the bot develops a personalised copy every run.

Drop a Develop in Studio piece and hit Open the Studio. Lay out avatars, text, shapes and progress bars on a canvas, then put sparks wherever things should change — {{user.displayName}} in a text layer, {{vars.xp}} in a progress bar, {{avatar}} as a picture. Preview as… lets you try any name, number or picture before you go live.

🏅 Rank card👋 Welcome banner🪪 Profile card💬 Quote card🤣 Meme🏆 Achievement🤠 Wanted poster⬜ Blank canvas

Drag, resize (Shift keeps proportions), rotate, and snap to edges and centres.
Layers: pictures (circle / rounded / hexagon masks, rings, filters), text (12 fonts, auto-shrink, outlines, gradients), shapes, progress bars and rings.
Show only when… hides a layer unless a spark is truthy — a crown for rank #1, a badge for boosters.
If a picture in the design is an animated GIF (like an animated avatar), the result is an animated GIF too.
⌘Z / ⇧⌘Z undo and redo · ⌘D duplicate · arrows nudge · space-drag to pan · ⌘-scroll to zoom.

a /rankcard flowJSON

{
  "nodes": [
    { "id": "read",   "piece": "base.db.read", "config": { "table": "xp", "filterColumn": "user_id", "filterValue": "{{input.user.id}}", "as": "result" } },
    { "id": "studio", "piece": "img.studio",   "config": { "as": "card", "scene": { "width": 934, "height": 282, "layers": ["…"] } } },
    { "id": "send",   "piece": "base.embed",   "config": { "title": "{{user.displayName}}'s rank", "image": "{{card}}" } }
  ]
}

📐Under the hood — how the bot develops it

TypeScript

// What the bot does for a Studio design, every run:
const canvas = createCanvas(934, 282);              // @napi-rs/canvas (Skia)
drawLayers(canvas, scene, { avatar, xp, level });   // same renderer as the Studio preview
const card = animatedAvatar
  ? encodeGif(frames)                               // GIF when a picture moves
  : await canvas.encode("png");
await interaction.editReply({ embeds: [embed], files: [{ attachment: card, name: "card.png" }] });

✂️Touch Up

Quick edits, applied top to bottom. GIFs stay animated.

✂️ Crop to a shape — Square, circle (great for avatars), widescreen or tall

📐 Resize — Make it bigger or smaller — leave one side blank to keep the shape

⬜ Round the corners — Soft corners, like an app icon

🔄 Rotate — Turn it by any angle

🪞 Flip — Mirror it left-to-right or upside down

🎚️ Adjust colours — Brightness, contrast, saturation, black & white, sepia, blur, pixelate…

🖼️ Add a border — A solid frame around the edge

💬 Meme captions — Big white Impact-style text, top and bottom

🍳 Deep-fry — Crank everything to eleven

⏩ Change speed — Play a GIF faster or slower

⏪ Play backwards — Reverse a GIF

🪃 Boomerang — Forwards then backwards, forever

❄️ Freeze frame — Keep only the first frame of a GIF

📤Sending pictures

Two ways, and both work everywhere a message goes out:

Embed — put an image spark in Big image, Thumbnail, or the author/footer icons. Pictures that already live online (avatars, the Gallery, links) are shown by URL; ones your flow made are uploaded with the message.
Attach Image — stages a file onto the next Reply, Follow-up, Send, DM, or Update the Message (where it replaces the old picture — great for "next" buttons). Alt text and spoilers included.

🖼️The Gallery

Your bot's own image library — unlocked by The Darkroom.

Drag, paste or pick PNG, JPEG, GIF and WebP files — up to 10 MB each.
Every image gets a label (unique, like welcome-banner) and any number of tags.
Use one anywhere as gallery:welcome-banner, or Pull from Gallery by tag — random, newest, oldest or all.
New uploads work in live flows immediately — no republish. Renaming a label offers to update every flow that uses it.

First 10 MB per bot	Free
Above that	1 ⚡ per MB per day, billed by the hour (up to 250 MB)

📌Out of energy?

Uploads pause until your ⚡ refills — images already in the Gallery are never deleted for it.

📏Limits

Pictures the bot downloads: up to 10 MB, PNG / JPEG / GIF / WebP. Links to private networks are blocked.
Studio canvases: 16–2048 px a side, 40 layers.
Animated results: up to 60 frames / 8 s. Too big for Discord? Frames get dropped first, then it sends a still.
10 pictures per message. Image pieces can't run in a flow that opens a pop-up form — do the image work in the Form Submitted trigger.