Pages, decks and Word documents

An .html artifact is a whole HTML document that the reader opens beside the conversation. Use it when the content only works as a page: a chart, a layout, a small tool the reader clicks around in. The same kind of artifact is how an assistant makes a PowerPoint deck or a Word document: the page builds the .pptx or .docx in the browser and offers it for download.

A document that is mostly prose belongs in a Markdown artifact, which is shorter to write and travels better.

The page runs in a locked frame

The reader's frame can reach nothing. Its content security policy is default-src 'none', with inline script and inline style allowed and images allowed only as data: URLs. The frame has scripts enabled and no same-origin access, no forms and no navigation.

A page that uses anything in the right-hand column renders blank or half drawn, with no error the reader sees. There is nowhere to navigate to: no links out, no location, no meta refresh.

A picture in the sandbox goes in by its path, for example <img src="/tmp/page.png">. publish reads the file and writes its bytes into the published document as a data: URL, and leaves the short path in the file the assistant wrote.

The libraries ship with the workspace. A page asks for one with a script tag that looks like a CDN request. When the artifact is rendered, the workspace puts its own copy where the tag was, so nothing is downloaded and the file the reader downloads is still one self-contained document. Only the exact URLs below are answered. A different URL, or a <link> in place of a <script>, gets nothing, like every other URL in the frame.

Tailwind

Every utility works, arbitrary values included, and the dark: variant follows the reader's color scheme, which is the one thing about the reader's theme the frame can see. Custom tokens go in a <style type="text/tailwindcss"> block with @theme. A tailwind.config.js, plugins, @import and @plugin do not work, and font-sans resolves to the system font stack.

Diagrams

Write each diagram as Mermaid source in a pre.mermaid element and Pele draws it when the page loads:

<pre class="mermaid">
flowchart LR
  U[Upload] --> X[Extract text] --> I[Index]
</pre>

A source that does not parse stays a <pre> with the error as its tooltip. Pele takes its colors from the custom properties --pele-bg, --pele-fg, --pele-line, --pele-surface, --pele-border and --pele-accent on :root. For a diagram the page computes, call pele.mount(element, source); the returned object has an error property that says why a source could not be drawn.

PowerPoint decks

An assistant makes a deck by writing a page that lays the slides out with PptxGenJS. The page shows the slides to the reader and offers Download .pptx and, where the workspace can convert it, a PDF. The file has native text, shapes, tables and charts that the reader can edit in PowerPoint.

The assistant builds the deck in one of the catalogue's design systems. Each design system is a built-in skill named powerpoint-design-<name>, and the make-powerpoint-artifacts skill lists them with the surface (light, dark or mixed) and what each suits. The catalogue is also shown as a page: the sandbox carries /samples/powerpoint-styles.html, which lists the design systems this workspace has switched on, and an assistant publishes it as it is when the reader asks which styles exist.

cp /samples/powerpoint-styles.html /artifacts/
publish powerpoint-styles.html

Word documents

A Word document works the same way, with docx in place of PptxGenJS. The page shows the pages and offers Download .docx and a PDF. The styles are the built-in skills named word-design-<name>, and /samples/word-styles.html is their preview page.

A .md artifact is the better choice for a report the reader only needs to read. Use a Word document when the reader wants a designed .docx or a document in a house style.

Check what the page builds

render runs the page in the workspace browser. For a deck or a Word page it draws the .pptx or .docx the page builds, so the pages are the ones the reader's download has. For any other page it draws what the page looks like, one 1200 by 900 screen per page. The page runs under the same limits as the reader's frame, so a page that reaches for a URL fails there as it does for the reader, and its status line is quoted back in the failure message.

render quarterly-deck.html --pages 1-2

The browser has to be on. An administrator switches it on under Manage → AI → Browser. The command reports when it is off.

Downloads

The download buttons belong to the page, not to the pane. A page built by PptxGenJS or docx hands over its file when the reader clicks the page's own button. The file is one the page made from what it already holds. Where DisableArtifactDownloads is on, the pane's download is hidden and a page's own download does not run in the reader's chat. The admin assistant's chat, which only an administrator opens, is exempt.

Related

• Make artifacts available for how an assistant gets /artifacts and the skills that explain these pages.
• Skills for how built-in skills reach a conversation.