Creating Widgets

Widgets can be created inside the Agent Builder in DronaHQ. These widgets allow developers to define custom UI components that render structured responses generated by AI agents.

---

Accessing the Widget Builder

To create a widget:

1. Open Agent Builder.
2. Navigate to the Widgets section from the left menu.
3. Click Widget.
4. Click Add a Widget

You will have two options:

• Use an existing template
• Create a custom widget

Templates help you quickly start with predefined structures, while custom widgets allow you to create widget from scratch.

once you have crated a widget you will see it in the list select it and click on Edit Widget on right top corner of screen.

---

Widget Structure

Each widget requires three components:

1. Default Data
2. JSON Schema
3. Code

1. Default Data

Defines the data structure that will be displayed in the UI.

Example:

{
  "title": "Product Name",
  "price": "Product Price",
  "description": "Product Description"
}

2. JSON Schema

The JSON schema describes the data format that the AI must generate.

This helps the AI understand:

• Required fields
• Data types
• Expected structure

Example:

{
  "type": "object",
  "properties": {
    "title": { "type": "string" },
    "price": { "type": "string" },
    "description": { "type": "string" }
  }
}

3. Code (React Component)

The widget UI is implemented as a React component that receives the generated data as props.

Example:

module.exports.default = function ProductWidget({ title, price, description }) {
  return (
    <div>
      <h2>{title}</h2>
      <p>{description}</p>
      <p>{price}</p>
    </div>
  );
}

---

Styling Widgets

Widget styling must be defined directly inside the component.

Developers can style widgets using:

• Custom CSS classes
• Inline style objects

module.exports.default = function ProductWidget({ title, price, description }) {
  const containerStyle = {
    border: "1px solid #ddd",
    padding: "16px",
    borderRadius: "8px"
  };

  return (
    <div style={containerStyle}>
      <h2>{title}</h2>
      <p>{description}</p>
      <p>{price}</p>
    </div>
  );
}

example using className

<div className="product-card">

You can define these classes inside your component using a style tag or a CSS object.

---

Available Plugins

When creating widgets, the component code is executed in a controlled runtime environment. This environment provides access to a set of preloaded plugins and libraries that can be used directly inside your widget component without importing them manually. These plugins are injected when the widget is compiled and rendered, allowing developers to focus on building the UI logic.

Read more about available plugins and libraries for your widgets in detail: See Available Plugins

---