Chatterblocks

Chatterblocks are interactive UI components the agent renders directly in a conversation: mini-apps and widgets that live inside the chat, so responses go beyond plain text.

An action owns the logic (fetching data from an API); a Chatterblock owns the presentation and interaction. A Chatterblock is the Render in an Execute + Render action.

When to use Chatterblocks

• Display data in tables, show a confirmation dialog, or build a form that captures input without leaving the chat.
• Let users complete multi-step tasks, such as editing a project or updating a profile, inside the conversation.
• Build any UI you need with standard HTML, CSS, and JavaScript, styled to match your brand.

Render a Chatterblock from an action

A Chatterblock is always triggered by an Execute + Render action. The flow has two steps:

1. The action’s execute function fetches the data.
2. The render function takes that data and builds the Chatterblock UI.

Example

Next steps

• Execute and Render actions: wire up the execute and render functions that build your first Chatterblock.