Skip to content

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:

markdown
```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:

markdown
```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 onclick are 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 for DOMContentLoaded
  • External scripts (<script src="...">) are not loaded; attributes like type="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 support data:, HTTP, and HTTPS
  • Inline styles and HTTP/HTTPS external stylesheets are available

Storage

  • localStorage / sessionStorage are 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; parent and top both point back to the code block itself
  • Interaction with the chat page is only possible through Open Capability functions

Style Restrictions

  • position: fixed is converted to position: absolute
  • z-index values greater than 999 are clamped to 999

Tips

  • Writing a complete web page with the html language tag is the most reliable approach
  • Don't build a code block's core logic on network requests or persistent storage