Vibe code mini apps for Confluence

HTML Macro Pro does not include a built-in AI. Instead, the macro editor gives you a ready-made prompt to use with your favorite AI tool (ChatGPT, Claude, Gemini, Lovable, Cursor, Bolt and friends). The prompt tells the AI about the macro’s sandbox restrictions, so the code it generates works on the first try instead of failing silently inside the iframe.

Ask for a small tool (a team poll, a countdown, a kanban board, a weather widget), paste the result into the macro, and your mini app is live on the wiki page.

Why a prompt and not a built-in AI? Your code never leaves your AI tool of choice, you can use the assistant your company already approved, and the result is plain HTML, CSS and JavaScript you can read and edit before publishing.

How it works

Open the AI panel

In the macro configuration modal, choose Insert raw HTML or JavaScript code, then click the Generate with AI button under the code editor.

Copy the prompt

Click Copy prompt. The prompt teaches your AI tool about the macro’s sandbox restrictions.

Describe your mini app

Paste the prompt into ChatGPT, Claude, Gemini, Lovable or any other AI tool, and replace the <describe what you want here> placeholder at the end with your actual request. Be specific: “a kanban board with three columns that saves its state” gives a better result than “a board”.

Paste the result and save

Copy the generated HTML, CSS and JavaScript back into the code editor, click Save, then publish the page.

What the prompt teaches the AI

The macro runs your code inside a sandboxed, cross-origin iframe (see the FAQ for how the sandbox works). Code written for a normal browser tab often relies on APIs that the sandbox blocks, and those failures are silent. The prompt closes that gap:

Blocked APIs the AI must avoid: WebSockets and server-sent events, Service Workers, Web Workers, top-frame navigation, Atlassian APIs (AP, Forge bridge, AJS), clipboard access, geolocation, the Fullscreen API, camera and microphone, and browser notifications.
Working replacements: polling with fetch() on an interval, main-thread background work, plain target="_blank" links, swapping views in place, asking the user to type a location, file inputs instead of camera access, and in-page toasts instead of notifications.
Layout rules: the iframe is the scroll container and has a fixed height set in the macro config, so the prompt steers the AI away from height: 100vh, overflow on <body> and position: sticky, which all misbehave inside macro iframes.
Performance budget: animate only transform and opacity, avoid continuously animated blurs, cap polling intervals, and pause animations when the tab is hidden, so the mini app never makes the Confluence page feel slow.

The always-current version of the prompt lives inside the macro editor itself: click Generate with AI and copy it from there.

Tips for good results

Be specific in your request. Name the columns, the fields, the data source. The AI fills gaps with guesses.
Namespace stored data. localStorage works but is shared across every macro on your Confluence site, so ask for keys like myWidget_v1_state. The prompt already instructs this.
Inline everything when CSP is restricted. If your admin enabled restricted CSP mode, a single blocked external resource replaces the whole macro with an error banner. Ask the AI to inline styles, scripts and icons.
Mind the height. The macro has a fixed height set in its configuration. If the generated app is taller, the iframe scrolls; set the macro height to fit your app.
Any tool works. The prompt is plain text, so it works in chat assistants (ChatGPT, Claude, Gemini) and app builders (Lovable, Bolt, Cursor) alike, as long as the output is self-contained HTML, CSS and JavaScript.

Something not working as expected? Check the Troubleshooting page or contact support, we are happy to help.

Generate with AI