Add styling to the agent UI
You can style an agent’s interface in two ways:
-
Using component configuration menus to adjust styling such as colors, backgrounds, shadows, and text alignment.
-
Using CSS to target specific components, apply more advanced styling not available in the configuration menu, and create reusable styles across multiple components.
The configuration menu provides a convenient interface for common styling needs, while CSS gives you complete control over the agent’s appearance.
Component configuration menu
The component’s configuration menu provides an interface for common styling needs such as colors, backgrounds, and text alignment. Each interface component has a different set of configurable attributes, which you can access via the configuration menu.
There are three styling options for each configurable attribute:
- Default: the default styling for the attribute.
- CSS: provide a CSS rule to apply to the attribute. For example, if the attribute is font color, you can set a CSS value such as
red
, a hex code, or an RGB value to apply to the attribute. - Pick: define a value from a visual picker. For example, you can select a color from a color picker or control a shadow from a set of slider controls.
Revert to the default styling for the attribute.
Revert to the default styling for the attribute.
Provide a CSS rule to apply to the attribute.
For example, if the attribute is font color, you can set a CSS value such as red
, a hex code, or an RGB value to apply to the attribute.
For shadow attributes, you can remove a component’s shadow with none
or update the shadow with box-shadow
CSS rules.
Define a value from a visual picker. For example, you can select a color from a color picker.
Add a CSS stylesheet
To add more specific and detailed styling for your agent’s UI, you can add CSS stylesheets.
To style your agent’s UI with CSS, follow these steps:
- Add a CSS file to your project via the Code tab
- Load the stylesheet into the agent’s state
- Apply CSS classes to components via the component’s configuration menu
The example below creates a bubblegum
class to make a pink, rotated component and makes the header font color for CoreSection h3
elements yellow.
Add the `.css` file to your project
Create a new .css
file in your project or upload an existing one via the Code tab.
This example creates a new file named theme.css
in the static
directory with the following content:
See Style Agent Builder components with CSS for more information about specifically styling Agent Builder components.
To move a file into a directory such as static
, prepend the directory name to the beginning of the filename. For example, static/theme.css
.
Import the CSS file in your agent's code
To load the stylesheet when the agent starts, import the CSS file using the state’s import_stylesheet
method in main.py
. The code below imports the stylesheet named theme
from the static
directory.
The first argument is the name you want to give to the stylesheet, which you can reference if there are multiple stylesheets. The second argument is the path to the CSS file.
You can also import stylesheets during runtime by calling the import_stylesheet
method from the state
object. See Switch stylesheets during runtime for more information.
Apply CSS classes to components
In the component’s configuration menu, add a CSS class to the component under Custom CSS classes. Separate multiple classes with a space.
This example adds the bubblegum
class to a Section
component so that the component’s background is pink and rotated 5 degrees. The CoreSection h3
styling applies to the header for any Section
components, making the header text yellow.
Style Agent Builder components with CSS
Agent Builder components each have a class name starting with Core
that you can use when defining CSS rules.
For example, the Text
component has the class name CoreText
. You can use this class name to style all Text
components with the following CSS rule:
The !important
flag is essential when targeting attributes that are configurable via the component’s configuration menu, such as text and background colors. Without the !important
flag, the styles you define in CSS will be overridden by the component’s configuration menu styling, because the configuration menu styling is of higher specificity.
Switch stylesheets during runtime
You can switch stylesheets during runtime by calling the import_stylesheet
method. To replace the current stylesheet with a new one, use the same stylesheet name but a different path to a new stylesheet.
The example below switches the stylesheet named theme
to a different file when the handle_cyberpunk
or handle_minimalist
functions are called.