# DatAInsights Composer User Interface

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](https://www.telerik.com/kendo-react-ui-develop/components/conversationalui/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`](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/api/datainsightscomposerprops#onpromptcancel). The component clears the prompt after each request, and the next prompt answers a [clarifying question](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/states-and-messages#clarifications) when the AI asks one.

To get or set the text of the prompt from your code, handle [`onPromptChange`](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/api/datainsightscomposerprops#onpromptchange) and make the prompt [controlled](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/controlled-mode).

### Title and Placeholders

Set [`title`](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/api/datainsightscomposerprops#title), [`promptPlaceholder`](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/api/datainsightscomposerprops#promptplaceholder), and [`refinePromptPlaceholder`](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/api/datainsightscomposerprops#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](https://www.telerik.com/kendo-react-ui-develop/components/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`](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/api/datainsightscomposerprops#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`](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/api/datainsightscomposerprops#defaultprompt) to show an initial prompt text without submitting it, or [`initialPrompt`](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/api/datainsightscomposerprops#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`](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/api/datainsightscomposerprops#datasets) has at least one dataset. Hide them with [`showDatasetsList`](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/api/datainsightscomposerprops#showdatasetslist) and [`showDatasetsPanel`](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/api/datainsightscomposerprops#showdatasetspanel), both `true` by default.

[Demo Source](https://demos.telerik.com/kendo-react-ui/datainsights-composer/datasets-visibility/source.txt)

## Disabled State

Set [`disabled`](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/api/datainsightscomposerprops#disabled) to `true` to disable the prompt, the action buttons, the **Data Source** button, and the dataset chips. The component still renders the current visualizations, and without a report it shows the empty prompt in the same disabled state.

[Demo Source](https://demos.telerik.com/kendo-react-ui/datainsights-composer/disabled/source.txt)

## Suggested Links

* [DatAInsights Composer Data Binding](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/data-binding)
* [DatAInsights Composer Events](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/events)
* [DatAInsights Composer Globalization](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/globalization)
* [API Reference of the DatAInsights Composer](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/api)