New to KendoReact? Start a free 30-day trial

DatAInsights Composer User Interface
Premium

Updated on Nov 4, 2026

The DatAInsights Composer consists of a prompt, a display of the available datasets, and the generated visualization. This article describes how to configure them.

Prompt

The DatAInsights Composer uses the KendoReact PromptBox for the initial prompt and for the prompt that refines a generated visualization. The action button turns into a Generating button with a Stop icon while a request runs; clicking it stops the request and fires onPromptCancel. The component clears the prompt after each request, and the next prompt answers a clarifying question when the AI asks one.

To get or set the text of the prompt from your code, handle onPromptChange and make the prompt controlled.

Title and Placeholders

Set title, promptPlaceholder, and refinePromptPlaceholder to change the texts around the prompt. The default title, What would you like to explore?, shows until the first visualization is generated. To translate the default texts instead, see DatAInsights Composer Globalization.

tsx

<DatAInsightsComposer
    datasets={datasets}
    aiClient={aiClient}
    title="Explore the sales orders"
    promptPlaceholder="Ask a question about the sales orders, for example: Show revenue by category"
    refinePromptPlaceholder="Refine the result, for example: Show only Europe"
/>

Set maxPromptLength to limit the text that the user can send to the AI service, for both the initial and the refine prompt. By default, the prompt length is not limited.

Initial Prompt

Set defaultPrompt to show an initial prompt text without submitting it, or initialPrompt to submit a prompt once, when the component mounts. The component ignores initialPrompt when you also set configs or defaultConfigs.

tsx

<DatAInsightsComposer
    datasets={datasets}
    aiClient={aiClient}
    initialPrompt="Show the revenue by category as a column chart"
/>

Datasets

The component lists the available datasets below the prompt as chips, and in a searchable tree behind the Data Source button. Both show the label of a dataset or field, or its id/name when there is no label; the fields are for reference only, so the user mentions them in the prompt instead of selecting them. Both elements appear only when datasets has at least one dataset. Hide them with showDatasetsList and showDatasetsPanel, both true by default.

Loading ...

Disabled State

Set disabled to true to disable the prompt, the action buttons, and the dataset chips. The component still renders the current visualizations.