New to KendoReact? Start a free 30-day trial

DatAInsights Composer Controlled Mode
Premium

Updated on Nov 4, 2026

In controlled mode, your app owns the prompt, configurations, and History. Pass their values as props and update them through the component events.

The sections that follow also show how to connect your own AI endpoint, prompts, and request logic. Keep provider credentials on your backend and follow the security guidelines.

Controlled and Uncontrolled Properties

Each part of the state has a controlled property, an initial value for the uncontrolled mode, and the events that report the changes. When you set a controlled property, the component renders only what you pass and reports the intended changes through the events.

Controlled property	Uncontrolled initial value	Update it from
`prompt`	`defaultPrompt`	`onPromptChange`
`configs`	`defaultConfigs`	`onConfigChange`, `onConfirm`, `onDiscard`, and `onRemove`
`editing`	`defaultEditing`	`onEditingChange`
`history`	`initialHistory`	`onHistoryItemCreate`, `onHistoryItemRestore`, and `onDiscard`
`currentHistoryId`	`initialCurrentHistoryId`	`onHistoryItemCreate`, `onHistoryItemRestore`, and `onDiscard`
`message`	—	Your code, for example, from `onPromptSubmit`
`loading`	—	Your code, for example, from `onPromptSubmit`

history and currentHistoryId go together. Update both in the same handler, so the selected item always exists in the list. Discard can remove History items, so update both values in onDiscard as well.
When editing is controlled, the component reports the user's request to open or close the edit mode through onEditingChange, and your code applies it.

Controlled Prompt and Configurations

To control the prompt, set prompt and update it in onPromptChange. To control the visualizations, set configs and update it from the values of onConfigChange. Changing either value from your code updates the component.

The following snippet shows the pattern for both properties.

tsx

const [prompt, setPrompt] = React.useState('');
const [configs, setConfigs] = React.useState<DatAInsightsConfig[]>([]);

<DatAInsightsComposer
    datasets={datasets}
    aiClient={aiClient}
    prompt={prompt}
    onPromptChange={(event) => setPrompt(event.value)}
    configs={configs}
    onConfigChange={(event) => setConfigs(event.values)}
/>;

The following example controls the prompt and the configurations. Update state sets a new prompt and changes the page size of the Grid, and Reset state clears both values.

Loading ...

Controlled with a Custom AI Client

Implement DatAInsightsComposerAIClient to build your own prompts and requests. To reuse the built-in instructions, build the system prompt with buildGenerationPrompt by passing the fields of the dataset, the current configurations when the user refines, and the options that the component passes to your client method. You can append your own instructions to the result. Sanitize model replies with toDatAInsightsComposerAIResponse and forward options.signal to support cancellation.

The following example controls the prompt, configurations, and History and uses a custom client to route requests between two datasets.

Loading ...

Controlled with the Default AI Client

The createDefaultAIClient helper creates the default AI client. It builds the prompts for generating, refining, and routing between datasets, requests structured JSON output, and sanitizes the reply into configurations. It sends the requests through the DatAInsightsComposerAITransport that you provide, so you decide how to reach your AI endpoint. Create the client once, outside the component, or memoize it, so that the component does not receive a new client on every render.

The helper accepts an optional second argument with the following options:

model—The model or deployment name that the client passes to the transport in every request. The transport decides what to do with it, and uses its own default when you omit it. To change the model later, for example, from a model picker, call setModel on the client.
transformSystemPrompt—A function that receives the complete system prompt before every request, including refine and dataset selection requests, and returns the prompt to send. Use it to add rules that are specific to your domain.

tsx

const aiClient = createDefaultAIClient(transport, {
    model: 'my-deployment',
    transformSystemPrompt: (systemPrompt) =>
        `${systemPrompt}\n\nUse the fiscal year, which starts in February, for every date grouping.`
});

Append your rules to the received prompt instead of replacing it. The built-in prompt contains the instructions that make the model treat the user prompt and the dataset text as data, and the rules that keep the reply within the supported configurations. A replaced prompt does not include them.

Controlled with Axios

Use createDefaultAIClient with a DatAInsightsComposerAITransport when you only need to customize how requests are sent, for example, to send them to your own AI endpoint. The helper builds the prompts and processes the AI responses.

The following example controls the prompt, configurations, and History and sends AI requests through Axios.

Loading ...

Controlled with Your Own Request Handling

Use this approach when you do not set the aiClient property and want to send the AI request from your own code. The component only reports the submitted prompt through onPromptSubmit, and your code builds the system prompt (for example, with buildGenerationPrompt), calls the AI service, and processes the reply (for example, with toDatAInsightsComposerAIResponse). Because the component runs no request, you also control the loading indicator and the messages. Pass the result back through configs, history, loading, and message, and abort pending requests in onPromptCancel. If you only need to send the requests to your own AI endpoint, use a custom transport instead.

The following example runs the request in the app and logs each step of the flow, from the submitted prompt to the applied result.

Loading ...