Skip to main content

Use the AI Agent to Build a Widget

Let the AI Agent generate widget code for you based on a plain-language description.

Prerequisites: You have a widget open in the editor with at least one data connection attached.

Steps​

1. Open a widget​

Go to Widgets and either create a new widget or open an existing one.

2. Connect your data​

In the Data tab, add the data connections your widget will use. The AI Agent uses the connection schemas to generate accurate code.

3. Open the AI Agent​

Click the AI Agent icon in the left toolbar to open the chat panel.

4. Describe what you want​

Type a description of the widget you want to build. Be specific about:

  • What type of visualization (table, bar chart, line chart, status cards, etc.)
  • Which data fields to use
  • Any filtering or grouping logic
  • Visual style preferences

Example prompt:

"Create a bar chart using Chart.js that shows the total quantity per production line from the Production Orders connection. Use green bars and show the value on top of each bar."

5. Review the generated code​

The agent will generate HTML, JavaScript, Chart.js, and/or CSS code. Review it in the preview pane — the widget renders live as the code is generated.

6. Iterate​

If the result isn't quite right, ask the agent to make changes:

  • "Make the bars horizontal instead of vertical"
  • "Add a title that shows the total count"
  • "Change the color to blue for Line A and red for Line B"

The agent remembers the conversation context, so you can build incrementally.

7. Save​

Once you're happy with the result, click Save.

Tips​

  • Connect your data before using the agent. Without schema context, the agent has to guess at field names.
  • Start simple and refine. A focused first request ("show a table of all orders") produces better results than a complex one.
  • Check the Console tab if the preview shows errors. You can paste error messages into the agent chat for help debugging.
  • Set up Global AI Notes for preferences you want applied to every agent conversation.