# Getting Started with the KendoReact DatAInsights Composer

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.

<CtaPanelOverview></CtaPanelOverview>

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

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

> 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](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/get-started#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:

```sh
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**](https://www.telerik.com/kendo-react-ui-develop/components/getting-started).

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](https://marketplace.visualstudio.com/items?itemName=KendoUI.kendotemplatewizard).

## Install the Component

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

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

The DatAInsights Composer has [peer dependencies](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/get-started#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

1. 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 }
           ]
       }
   ];
   ```

2. Implement a [`DatAInsightsComposerAITransport`](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/api/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.

3. Create an AI client. The [`createDefaultAIClient`](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/api/createdefaultaiclient) helper creates the [default AI client](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/controlled-mode#controlled-with-the-default-ai-client), which builds the prompts, sends them through the transport, and sanitizes the response.

   ```tsx
   const aiClient = createDefaultAIClient(transport);
   ```

4. Add the `DatAInsightsComposer` to the App component file of your React project and set its [`datasets`](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/api/datainsightscomposerprops#datasets) and [`aiClient`](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/api/datainsightscomposerprops#aiclient) properties.

   ```tsx
   return <DatAInsightsComposer datasets={datasets} aiClient={aiClient} />;
   ```

5. Run the application and navigate to [http://localhost:5173](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:

```sh
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](https://www.telerik.com/design-system/docs/themes/get-started/introduction/#available-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](https://www.telerik.com/try/kendo-react-ui) and download a trial license key file
* **Commercial usage**: [Purchase a license](https://www.telerik.com/kendo-react-ui/pricing) 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](https://www.telerik.com/kendo-react-ui-develop/components/my-license) 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](https://nodejs.org/en/blog/npm/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.                                                                          |

## Suggested Links

* [DatAInsights Composer Overview](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer)
* [DatAInsights Composer Data Binding](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/data-binding)
* [DatAInsights Composer Components](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/components)
* [DatAInsights Composer User Interface](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/user-interface)
* [DatAInsights Composer Editing and History](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/editing)
* [DatAInsights Composer Controlled Mode](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/controlled-mode)
* [DatAInsights Composer Events](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/events)
* [DatAInsights Composer States and Messages](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/states-and-messages)
* [DatAInsights Composer Globalization](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/globalization)
* [DatAInsights Composer Security](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/security)
* [DatAInsights Composer Accessibility](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/accessibility)
* [API Reference of the DatAInsights Composer](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/api)
* [Styling Overview](https://www.telerik.com/kendo-react-ui-develop/components/styling)
* [Theme Builder](https://www.telerik.com/kendo-react-ui-develop/components/styling/theme-builder)