Hello, ${name}!
This is an inline HTML patch.
`);
}
```
### Analyze image with AI
```js
function main() {
const image = sup.input.image;
if (!image) return "Please attach an image";
// Use sup.ai.image.interpret() for image analysis (NOT sup.ai.prompt)
return sup.ai.image.interpret(image, "Describe this image in detail");
}
```
### Interactive counter with button
```js
function main() {
const count = sup.get("count") || 0;
return [
`Count: ${count}`,
sup.button("Increment", handleClick)
];
}
// Must be top-level to be used by sup.button
function handleClick() {
sup.set("count", (sup.get("count") || 0) + 1);
}
```
### Generate AI image
```js
function main() {
const prompt = sup.input.text || "a beautiful sunset";
return sup.ai.image.create(prompt);
}
```
### Structured AI response
```js
function main() {
const result = sup.ai.prompt("Analyze this text", sup.input.text, {
schema: {
sentiment: { type: "string", enum: ["positive", "negative", "neutral"] },
keywords: { type: "array", items: { type: "string" } },
summary: { type: "string", maxLength: 100 }
}
});
return `Sentiment: ${result.sentiment}\nKeywords: ${result.keywords.join(", ")}`;
}
```
### Edit and composite images
```js
function main() {
const bg = sup.input.image;
const overlay = sup.asset("logo.png");
if (!bg) return "Attach a background image";
return bg.edit()
.resize(800, 600)
.composite(overlay)
.render();
}
```
### AI with function calling
```js
function main() {
return sup.ai.prompt("What is the weather in Tokyo?", {
tools: {
get_weather: {
description: "Get weather for a city",
parameters: {
city: { type: "string", description: "City name" }
},
callback: (args) => {
// In real usage, call a weather API here
return `Weather in ${args.city}: 22°C, sunny`;
}
}
}
});
}
```
### User-specific content
```js
function main() {
const secretUser = sup.user;
// Personalization only; not access control
return sup.segment(
secretUser,
"🎉 You can see this secret message!",
"Nothing to see here..."
);
}
```
### Lifecycle function signatures
```js
// onReact receives an event object, NOT separate parameters
function onReact(e) {
const emoji = e.reactionEmoji; // The emoji that was reacted
const user = e.user; // SupUser who reacted
sup.set("lastReaction", emoji);
}
// onThreadReply receives an event object
function onThreadReply(e) {
const input = e.input; // SupInput from the thread reply
const user = e.user; // SupUser who replied
const text = e.input.text;
}
```
### Calling other patches
```js
// Access another patch and call its public functions
const otherPatch = sup.patch("patchId");
const result = otherPatch.public.functionName(); // Must use .public accessor
// Make functions callable from other patches
function getScore() { return sup.get("score") || 0; }
sup.makePublic(getScore); // Now callable as patch.public.getScore()
// Cross-patch calls should use serializable values
const result2 = otherPatch.public.processImageUrl(sup.input.image?.url);
```
### Hidden metadata for workflows
```js
// Return visible output + hidden machine-readable state
return [
"Round complete",
sup.metadata({ round: 3, score: 120 })
];
// Later (on reply), read metadata from replied message
const state = sup.reply?.metadata?.[0];
```
### Interactive HTML app with callbacks
**Important:** When generating HTML content, developers should make it responsive and ensure it supports both web and mobile controls. Use relative units, flexible layouts, and touch-friendly interactions so patches work well on all screen sizes.
Use `callbacks` to enable two-way communication between HTML content and server-side patch code. This is essential for building interactive HTML apps that need AI or server-side processing.
**`window.sup` is automatically injected into ALL HTML content rendered by `sup.html()`** — both inline HTML strings and uploaded asset bundles. You do not need to import, initialize, or set up any bridge. The following client-side APIs are always available:
- `window.sup.exec(functionName, ...args)` - Call server-side callback functions (returns a Promise)
- `window.sup.share(content)` - Share content to chat (text, URLs, { url, type: 'image' } for data URLs)
- `window.sup.user` - Read-only user info: `{ id, username, pfp }`
- `window.sup.chat` - Read-only chat info: `{ id, title, type }`
**⚠️ CRITICAL: Functions listed in `callbacks` receive a `SupUserEvent` object, NOT the raw arguments. Access the passed value via `event.value`.**
**Callbacks work with both inline HTML and asset bundles, from both `main()` and `launch()`:**
```js
// Inline HTML with callbacks — works from main()
function handleClick(event) {
const city = event.value;
return sup.ai.prompt(`Tell me about ${city}`);
}
function main() {
return sup.html(`