Skip to main content

The AI Agent

The AI Agent is a built-in assistant in the widget editor that helps you write and refine widget code. Describe what you want in plain language, and the agent generates HTML, JavaScript, and CSS based on your widget's current state and connected data.

Opening the agent​

In the widget editor, click the AI Agent icon in the left toolbar to open the chat panel.

How it works​

The agent has context about:

  • Your widget's current code (HTML, JS, Chart.js, CSS)
  • The data connections attached to your widget, including field names and types
  • Any example widgets your admin has configured
  • Your global AI notes (if you've set any)

This means you can ask it to work with your actual data structure without manually explaining your schema.

What you can ask it to do​

  • "Create a bar chart showing production counts by line" — Generates Chart.js code using your connected data.
  • "Add a filter dropdown for status" — Creates an input-driven filter on your existing widget.
  • "Make this table sortable" — Modifies your existing code to add sort functionality.
  • "Change the color scheme to match our brand" — Updates CSS for visual changes.
  • "Fix the error in my code" — Diagnoses issues based on the current code and console output.

Tips for good results​

  • Be specific about data fields. Say "use the status column" rather than "filter by status."
  • Describe the visual outcome. "Show a green badge for 'Complete' and red for 'Failed'" gives the agent clear direction.
  • Iterate. Start with a simple request, review the result, then ask for refinements.
  • Connect your data first. Attach data connections in the Data tab before using the agent, so it knows your schema.

Global AI notes​

You can set persistent instructions for the agent in User Settings → AI Preferences. These notes are included in every agent conversation. Use them for things like:

  • Preferred chart libraries or color schemes
  • Company-specific terminology
  • Common patterns you want the agent to follow

Example prompts​

Admins can configure example prompts that appear as quick-start suggestions in the agent panel. These give the agent reference implementations to draw from.