What are Code Blocks?
In chat messages (including greetings and AI replies), code blocks are not displayed as plain code text — they render as fully interactive web pages. Buttons can be clicked, animations can play; any interface you can build with front-end technologies (HTML, CSS, JavaScript) can appear right inside a message.
Combined with Open Capabilities, code blocks can also interact with the chat page — for example, filling the input box with an option's text, or switching greeting versions. All Open Capability functions can only be called from inside a code block.
How to Write a Code Block
Wrap a complete web page in a fenced code block and it will render as an interactive page. The html language tag is the most common and recommended:
```html
<!doctype html>
<html>
<head>
<style>
button { padding: 8px 16px; }
</style>
</head>
<body>
<button onclick="this.textContent = 'Clicked'">Click</button>
</body>
</html>
```Occasionally you'll see xml, untagged, or other language tags — as long as it's a fenced code block containing a complete web page, it will be recognized too:
```xml
<!doctype html>
<html>
<body>...</body>
</html>
```Note: code blocks that only contain bare fragments like <div> or <button> without the html tag will not be recognized. Always write a complete web page.
Display
A code block always takes up the maximum width of the chat bubble, and its height grows automatically with its content.
Runtime Environment & Restrictions
Code blocks run in an isolated sandbox. Treat each one as a small standalone web page that requests chat-page operations through Open Capability functions, rather than reading or modifying the chat page itself.
Scripts
- Classic inline scripts are supported; inline event handlers like
onclickare preserved - All
<script>tags are moved to the bottom of the document before execution, so they don't keep their original position. Code that relies on "the script must run before a later DOM node is created" should run after DOM creation instead, or listen forDOMContentLoaded - External scripts (
<script src="...">) are not loaded; attributes liketype="module"are not preserved eval,Function,window.open,print, and similar capabilities are blocked
Network & Resources
- Network connections such as
fetch,XMLHttpRequest, and WebSocket are rejected - Images support
data:,blob:, HTTP, and HTTPS; audio and video support HTTP and HTTPS; fonts supportdata:, HTTP, and HTTPS - Inline styles and HTTP/HTTPS external stylesheets are available
Storage
localStorage/sessionStorageare in-memory implementations visible only to the current code block — they reset whenever the message re-renders and cannot be used for persistence- IndexedDB is not available
Page Access
- A code block cannot access the chat page's DOM or state;
parentandtopboth point back to the code block itself - Interaction with the chat page is only possible through Open Capability functions
Style Restrictions
position: fixedis converted toposition: absolutez-indexvalues greater than999are clamped to999
Tips
- Writing a complete web page with the
htmllanguage tag is the most reliable approach - Don't build a code block's core logic on network requests or persistent storage