---
title: "Rocket Chat Building Blocks"
slug: "building-blocks"
description: "Learn about building blocks in Rocket Chat Apps-Engine. Create secure UI elements and improve collaboration tools."
updated: 2026-03-26T08:25:20Z
published: 2026-03-26T08:25:20Z
canonical: "developer.rocket.chat/building-blocks"
stale: true
---

> ## Documentation Index
> Fetch the complete documentation index at: https://developer.rocket.chat/llms.txt
> Use this file to discover all available pages before exploring further.

# Building Blocks

Apps-Engine’s UIKit framework contains **blocks**, **block elements**, and **objects** that you can use to create visuals and interactions for your apps within **surfaces**. The components are built using structured JSON. These UI elements need to be triggered by an action or condition, such as sending a message, using slash commands, or using action buttons.

The building blocks are:

1. **Surfaces**
2. **Blocks**
3. **Block elements**
4. **Objects**

The following snippet shows how the UI elements are related:

```plaintext
Surface (Modal, Contextual Bar, Message)
└── Block (Section, Actions, Input, etc.)
    ├── Block Element (Button, Dropdown, Plain Text Input, etc.)
    └── Object (Text Object, Options Object)
```

Within a surface, you can have blocks that contain block elements and objects. Each component contains visual elements you can add to your app’s UI to enhance its appearance. In this section, you will learn about each component in detail.

## Interaction parameter details

When defining UI elements, you will need to add some common parameters. The parameters are as follows:

| Parameter | Description |
| --- | --- |
| `blockId` | Set a unique ID for each block and element that you define. This ID is used to determine which block interaction to handle. For example, if you have two separate interactive blocks, giving each a distinct `blockId` lets you differentiate them in the handler method (`executeBlockActionHandler`). |
| `actionId` | Set a unique ID for each interactive action block and element. This has a similar purpose to `blockId` as it is used to determine the interaction. Each block can have multiple interactive elements. While the block ID is used for the entire block, the action IDs are used for each interactive element within the block. |
| `appId` | This determines which app instance receives any potential interactions generated by the user within a block. It is defined at the app level once and applied to every block defined in the app. |
| `triggerId` | The trigger ID is used differently from the previous parameters. It is a short-lived session token, like a security measure to ensure that the user triggered the action. This is because we need user consent for the app to interact with the UI. Only then will the client show the UI components. User interactions will provide a valid trigger ID. If a valid trigger ID is not provided, the method call will fail silently, and the desired action will not take place. |

Depending on the block and element, any of these parameters may be mandatory or optional.

## How this documentation section is organized

- **References**: Here, you will find the definitions and parameters for each UI component. (The topics include [Surfaces](/v1/docs/surfaces), [Blocks](/v1/docs/blocks), [Block Elements](/v1/docs/block-elements), and [Objects](/v1/docs/objects))
- [**Examples**](/v1/docs/ui-examples): This section contains examples of how to include UI components in your app.

You can go over the references or try the examples directly.