Skip to main content
AI Builder Blocks Interface
Blocks are reusable UI components that serve as the building blocks for creating interactive interfaces in AI Builder. They encapsulate functionality, emit and listen for events, and can be assembled to create complete user experiences.

​
Block Fundamentals

Blocks are modular UI components with specific purposes:
  • Self-contained: Each block encapsulates specific functionality
  • Reusable: Can be used across multiple pages and workspaces
  • Configurable: Customizable through properties and settings
  • Interactive: Respond to user actions and system events
  • Event-driven: Communicate with other components through events
Blocks follow the BlockProtocol.org standard, ensuring consistency and interoperability.

​
Common Block Properties

All blocks share a set of common properties that can be configured in YAML:
​
slug
string
Required. Unique identifier for the block in your workspace.
# Page/Block
- slug: RichText
  content: Hello world
​
onInit
string
Event fired when the block is initialized. Example: myInitBlockEvent
# Page/Block
- slug: RichText
  onInit: init my content

# Automation
when:
  events:
    - init my content
​
updateOn
string
Event that triggers an update of the block. Example: myUpdateBlockEvent
# Page/Block
- slug: RichText
  onInit: init my content
  updateOn: update my content
  content: '{{text}}

# Automation
when:
  events:
    - init my content
do:
  - emit:
      event: update my content
      payload:
        text: Hello world
​
automation
string
Init the block with an automation as endpoint. Example: myAutomationThe difference with the event base init is that the automation will take query string in {{body}} and the output will be used to upgrade the block. No need to emit an update event and to listen to a updateOn event.
# Page/Block
- slug: RichText
  automation: init my content
  content: '{{text}}

# Automation
slug: init my content
output:
  text: Hello world
​
className
string
CSS class name to apply to the block. Example: block-classname
​
css
string
Custom CSS for styling the block.There is some private keywords to help you target your element::block is a shortcut to the unique generated class of your block. Use it to target the root of your block DOM.
Every selector you set will be automatically prexifed by :block to avoid polluting the page styles.You will need to use :block specifically if you set a dynamic stated class on your block:
- slug: RichText
  content: Hello world
  className: 'status-{{item.status}}'
  css: |-
    :block {
      background: white;
    }
    :block.status-closed {
      background: red;
    }
When you set css, it override the default styles of the block. But maybe you just want to keep the styles but add only something. You will use @import default:
- slug: TabsView
  css: |-
    @import default;
    
    .pr-block-tabs-view__tab {
      background: red;
    }
Finally, you may want to set styles on an element external to your block. You can target outside it by using :root:
- slug: RichText
  css: |-
    :root a {
      color: red; // All links in the page will be red.
    }
​
template.if
string
Conditional display expression. Block will only be shown if the expression evaluates to true.
- slug: RichText
  template.if: '{{textIsVisible}}'
​
template.repeat
string
Allows repeating the block for each item in an array.
- slug: RichText
  template.repeat:
    on: '{{items}}'
    as: item
  blocks:
    - slug: RichText
      content: '{{item.text}}'

​
Built-in Blocks Library

AI Builder includes a comprehensive library of built-in blocks. Here’s a detailed reference for each block with its specific YAML configuration.

​
Marketplace Blocks

The following blocks are available after installing specific apps from the marketplace.

​
Next Steps

Pages

Learn how to combine blocks into complete user interfaces

Automations

Explore backend logic that interacts with blocks

Framework Architecture

Understand the underlying architecture of AI Builder

Use Cases

See examples of blocks in real-world applications