The Gen UI (Generative UI) block is one of the most powerful tools in SendBot. It allows you to render custom and interactive UI components directly in the conversation, going far beyond standard text bubbles. This block can be used in two ways: Manual (configured by you in the Studio) or Generative (dynamically generated by an AI).

​
What is Gen UI?

Unlike a text or image bubble, Gen UI is a “container” for React components. This means you can display anything from a booking calendar to a complex financial chart, as long as the component is registered in your webchat package.

​
How to Configure Manually

In the Studio, when you add a Gen UI block, you will find two main fields:
  1. Component Name: The unique identifier of the React component to be rendered (e.g., booking-calendar, sales-chart, product-card).
  2. Data (JSON): A JSON object containing the information the component needs to function. You can use SendBot variables here using the {{my_variable}} syntax.

​
Configuration Example

  • Name: product-card
  • Data:

​
Manual Usage Scenarios

Manual usage is ideal for situations where you need predictability and performance.

​
1. Booking Widgets

If you already have a calendar component, you can force it to be displayed after the user chooses a service.
  • Scenario: “Perfect, now choose the best time in the calendar below.”
  • Advantage: Deterministic and fast, without relying on the AI to decide the format.

​
2. Dashboards and Charts

If your bot queries an external API, you can pass the result to a chart component.
  • Scenario: Display the user’s loyalty points statement.
  • Advantage: Rich data visualization that would be impossible with just text.

​
3. Gamified Experiences

Display discount wheels, digital scratch cards, or avatar selectors.
  • Advantage: Increases user engagement with an interface that “lives” inside the chat.

​
Usage Scenarios with AI (Agent AI)

When used in conjunction with the Agent AI block, Gen UI becomes truly “generative.” The AI can decide, based on the conversation context, which component to show and what data to fill in it.
  • Example: The user says “I’m looking for a wooden dining table.” The AI understands the intent and, instead of just listing links, it emits a product-carousel component with the filtered furniture.

​
Best Practices

  • JSON Validation: Ensure the JSON entered is valid. The Studio editor will warn you if there are syntax errors.
  • Fallbacks: Remember that the component must be available in your Webchat package to be rendered correctly for the end user.
  • Variables: Use variables to make components dynamic based on the user’s previous answers.