Getting Started with the KendoReact DatAInsights Composer
Premium

Updated on Nov 4, 2026

This guide provides essential information about using the KendoReact DatAInsights Composer package—you will learn how to install the package, add a DatAInsights Composer to your project, connect it to an AI service, style the component, and activate your license.

The DatAInsights Composer is part of KendoReact premium, an enterprise-grade UI library with 120+ free and premium components for building polished, performant apps. Test-drive all features with a free 30-day trial.Start Free Trial

After completing this guide, you will be able to reproduce the following example.

Loading ...

The demo sends the prompts to a Telerik demo AI endpoint. In your application, use an endpoint of your own backend, as described in the Use the Component section.

Before You Begin

To follow the steps in this guide, you need to have a React project set up. If you don't have one, you can create a new React application using Vite by running the following command in your terminal:

npm create vite@latest my-app -- --template react-ts

This guide requires that you have basic knowledge of React and TypeScript, and that you have already created a blank React project.

The DatAInsights Composer generates the visualizations through an AI service. To complete this guide, you need an endpoint in your own backend that receives the prompts, forwards them to an AI provider, and returns the reply of the model. Never expose the credentials of the AI provider to the browser.

You can speed up the development of your KendoReact application with the Kendo UI Template Wizard for Visual Studio Code.

Install the Component

To install the DatAInsights Composer package, run the following command in the root folder of your React project:

npm i @progress/kendo-react-datainsights-composer

The DatAInsights Composer has peer dependencies that you also need to install.

Import the Component

After installing the package, import the DatAInsightsComposer component and the createDefaultAIClient helper in your App component file (for example, src/App.tsx).

tsx

import {
    DatAInsightsComposer,
    createDefaultAIClient,
    type DatAInsightsComposerAITransport,
    type DatasetDescriptor
} from '@progress/kendo-react-datainsights-composer';

Use the Component

Describe the datasets that the user can query. The AI receives dataset metadata, including the field descriptions, but not the data rows. The optional data holds the rows that are used to render the result locally.

tsx

const datasets: DatasetDescriptor[] = [
    {
        id: 'sales-orders',
        label: 'Sales orders',
        description: 'Customer orders with the region, product category, quantity, and revenue of each order.',
        fields: [
            { name: 'Region', type: 'string' },
            { name: 'Category', type: 'string' },
            { name: 'Revenue', type: 'number', description: 'Revenue in USD' }
        ],
        data: [
            { Region: 'Europe', Category: 'Beverages', Revenue: 1045 },
            { Region: 'Asia', Category: 'Seafood', Revenue: 558 }
        ]
    }
];

Implement a DatAInsightsComposerAITransport that sends the prompts to your AI endpoint. The transport receives the systemPrompt, the userPrompt, and the responseSchema that the component builds, and returns the model reply in the content property.

tsx

const transport: DatAInsightsComposerAITransport = {
    async sendPromptAsync({ systemPrompt, userPrompt, responseSchema, signal }) {
        const response = await fetch('/api/data-insights', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ systemPrompt, userPrompt, responseSchema }),
            signal
        });

        if (!response.ok) {
            throw new Error(`AI request failed with status ${response.status}`);
        }

        const { text } = await response.json();

        return { content: text };
    }
};

The /api/data-insights endpoint in this example is an endpoint of your own backend. It forwards the prompts to the AI provider, requests the JSON output that matches the responseSchema, and returns the model reply as a JSON string in the text field. Keep the credentials of the AI provider on the server.

Create an AI client. The createDefaultAIClient helper creates the default AI client, which builds the prompts, sends them through the transport, and sanitizes the response.
tsx
```
const aiClient = createDefaultAIClient(transport);
```
Add the DatAInsightsComposer to the App component file of your React project and set its datasets and aiClient properties.
tsx
```
return <DatAInsightsComposer datasets={datasets} aiClient={aiClient} />;
```
Run the application and navigate to http://localhost:5173 to see the KendoReact DatAInsights Composer component on the page. Enter a prompt, for example, Show the revenue by category as a column chart, and click Generate.
sh
```
npm run dev
```

Style the Components

To use the built-in styling of the components, install a theme:

npm i @progress/kendo-theme-meridian

Then, import the CSS file from the package in src/App.tsx. Add this import before your existing App.css import.

tsx

import '@progress/kendo-theme-meridian/dist/all.css';

With the import "@progress/kendo-theme-meridian/dist/all.css"; statement present in your code, you already have professionally designed styling applied to your app out-of-box. You can also try any of the other available Kendo UI Themes.

Activating Your License Key

Important: The KendoReact DatAInsights Composer is a premium component that requires a license key file to be installed in your project. This applies to both trial and commercial usage:

Trial usage: Start a free trial and download a trial license key file
Commercial usage: Purchase a license and download a commercial license key file

Without a valid license key file, the component will display licensing warnings and watermarks.

Follow the instructions on the KendoReact My License page to download and install your license key file. You can skip this step if your application already contains a KendoReact license file.

Dependencies

The DatAInsights Composer package requires you to install the following peer dependencies in your application:

Package Name	Description
react 18.x or 19.x	Contains the functionality necessary to define React components.
react-dom	Contains the React renderer for the web.
@progress/kendo-data-query	Contains the data query functions that the component uses to process the data.
@progress/kendo-react-buttons	Contains the KendoReact Button components.
@progress/kendo-react-charts	Contains the KendoReact Chart components.
@progress/kendo-react-common	Contains common utilities that enhance the performance and functionalities of the KendoReact UI components.
@progress/kendo-react-conversational-ui	Contains the KendoReact Conversational UI components, including the PromptBox.
@progress/kendo-react-gauges	Contains the KendoReact Gauge components.
@progress/kendo-react-grid	Contains the KendoReact Grid component.
@progress/kendo-react-indicators	Contains the KendoReact Indicators components.
@progress/kendo-react-intl	Contains the KendoReact Internationalization package for the parsing and formatting of dates and numbers.
@progress/kendo-react-popup	Contains the KendoReact Popup components.
@progress/kendo-react-treeview	Contains the KendoReact TreeView components.
@progress/kendo-licensing	Contains the internal infrastructure related to licensing.
@progress/kendo-svg-icons	Contains the KendoReact SVG icons.