Chat & AI
Working with code and web page artifacts
Ask for a web page, a small app or a component and it opens in a side panel with a live preview, versions and a Continue button if it was cut short.
Step 1
Ask for something built in code
Say "make me a landing page", "a calculator in React" or "an interactive timeline". Charts and diagrams are different and have their own article.
Press Enter to send, Shift+Enter for new line
Step 2
The artifact card
Instead of a wall of code, the reply shows a card with the title, the language and the length, and the artifact opens in a panel on the right. Press View on the card any time to open it again.
Landing page
HTML · 180 lines
Step 3
Preview and Code
The panel header has Preview and Code. Preview runs the page so you can click around in it; Code shows the source. The zoom controls under the header scale the preview, and you can drag the panel's edge to resize it. JSX and TSX code has no preview: Preview says Preview is not available for JSX. Use the Code tab. If a page hits a script error, a note above the preview says parts of it may be missing and points you to the Code tab.
Step 4
Change it by chatting
Say what to change, such as "make the header dark" or "add a contact form", and the artifact updates in place. Every change is a new version, listed in the Version menu with a short label such as v2: Edited. Choosing an older version previews it, and Restore this version brings it back. If a version cannot be loaded or restored, a message tells you to try again.
Step 5
If it was cut short
A very long artifact can hit the model's output limit. A banner under the header says so, and Continue generating picks up where it stopped.
This artifact was cut off at the model's output limit, so it may not run yet.
Continue generatingStep 6
Take it with you
The icons at the top right are Copy code, Download, Open in new tab, which is not offered for JSX, and Save to Documents, which turns green once saved and then opens the saved copy. The same Copy, Save and Download also sit under the reply in the chat. Open in new tab shows the page in a sealed frame: its scripts still run, but it cannot reach Secretary or your account.
Step 7
More than one
A chat can hold several artifacts. When it does, arrows with a count appear in the panel header to step between them, and pressing any artifact card in the chat opens that one.
Try it in Secretary, or create an account to get started.
Related guides
Starting a new chat
The start screen, starter prompts, temporary chats, and what New chat does once you are already in a conversation.
Attaching files to a chat message
Add a file from your computer so the AI can read it: press the paperclip, drag it in, or paste it.
Scoping a chat to specific documents or folders
Point the AI at exactly the files in your library it should answer from, and choose how deeply it reads them.