### Install Dependencies (npm)

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart.md

Installs project dependencies using npm. This command is typically run after scaffolding a new project or cloning a repository.

```sh
npm install
```

--------------------------------

### Install Dependencies

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart-angular.md

Command to install all project dependencies listed in the package.json file.

```sh
npm install
```

--------------------------------

### Complete React Chart Rendering Example

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart.md

A full React component example demonstrating how to render a line chart using the `Chart` component and `SisenseContextProvider`. It includes data set configuration, data options, and style options.

```tsx
// src/App.tsx

import { Chart, SisenseContextProvider } from '@sisense/sdk-ui';
import * as DM from './sample-ecommerce';
import { measureFactory } from '@sisense/sdk-data';

function App() {
    return (
        <>
            <SisenseContextProvider
                url="<instance url>" // replace with the URL of your Sisense instance
                token="<api token>" // replace with the API token of your user account
            >
                <Chart
                    dataSet={DM.DataSource}
                    chartType={'line'}
                    dataOptions={{
                        category: [DM.Commerce.AgeRange],
                        value: [measureFactory.sum(DM.Commerce.Revenue)],
                        breakBy: [],
                    }}
                    styleOptions={{
                        legend: {
                            enabled: true,
                            position: 'bottom',
                        },
                    }}
                    onDataPointClick={(point, nativeEvent) => {
                        console.log('clicked', point, nativeEvent);
                    }}
                />
            </SisenseContextProvider>
        </>
    );
}

export default App;
```

--------------------------------

### Install Project Dependencies (npm)

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart-vue.md

Command to install all the necessary dependencies for the Vue project using npm. This is typically run after creating a new project or cloning a repository.

```sh
npm install
```

--------------------------------

### Install Compose SDK Packages

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart-angular.md

Command to install the necessary Compose SDK packages for Angular applications from the NPM registry.

```sh
npm i @sisense/sdk-ui-angular @sisense/sdk-data
```

--------------------------------

### Displaying Query Recommendations with Widgets

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/guides/ai-features/quickstart.md

An advanced example of using useGetQueryRecommendations to display both the suggested question (nlqPrompt) and the corresponding widget for each recommendation.

```typescript
import { useGetQueryRecommendations, QueryRecommendation } from '@sisense/sdk-ui/ai';

// ...

const { data, isLoading } = useGetQueryRecommendations({
  contextTitle: DM.DataSource.title,
  count: 5
});

if (isLoading) {
  return <div>Loading recommendations..</div>;
}

return (
  <ul>
    {data.map((item: QueryRecommendation, index) => (
      item.widgetProps &&
      <li key={index}>
        <div key={'title-' + index}>{item.nlqPrompt}</div>
        <div key={'chart-' + index}>
          <Widget
            key={'widget-' + index}
            {...item.widgetProps}
          />
        </div>
      </li>
    ))}
  </ul>
);
```

--------------------------------

### Install Dependencies (Yarn)

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart.md

Installs project dependencies using Yarn. This command is equivalent to 'npm install' but uses the Yarn package manager.

```sh
yarn
```

--------------------------------

### Run Angular Application

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart-angular.md

Command to start the Angular development server and run the application.

```sh
npm start
```

--------------------------------

### Project Setup and Development

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/packages/sdk-ui/index.html

Commands for setting up the project, installing dependencies, and starting the development server using Vite.

```bash
npm install
npm run dev
```

--------------------------------

### Install Compose SDK Packages (Yarn)

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart.md

Installs the core Compose SDK UI and data packages using Yarn. This command is the Yarn equivalent of 'npm i @sisense/sdk-ui @sisense/sdk-data'.

```sh
yarn add @sisense/sdk-ui @sisense/sdk-data
```

--------------------------------

### Install Project Dependencies (Yarn)

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart-vue.md

Command to install all the necessary dependencies for the Vue project using Yarn. This is typically run after creating a new project or cloning a repository.

```sh
yarn
```

--------------------------------

### Install Compose SDK Packages (npm)

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart.md

Installs the core Compose SDK UI and data packages using npm. These packages provide React components and data modeling utilities for Sisense integration.

```sh
npm i @sisense/sdk-ui @sisense/sdk-data
```

--------------------------------

### Project Setup and Development

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/packages/sdk-pivot-client/index.html

Commands for setting up the project, installing dependencies, and starting the development server using Vite.

```bash
npm install
npm run dev
```

--------------------------------

### Rendering AI-Generated Query Recommendations with Widgets

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/guides/ai-features/quickstart.md

Expands on query recommendations by demonstrating how to not only display the suggested natural language questions but also render the corresponding widgets. This example uses the widgetProps returned by the useGetQueryRecommendations hook to dynamically display charts for each recommendation.

```ts
import { useGetQueryRecommendations, QueryRecommendation } from '@sisense/sdk-ui/ai';

// ...

const { data, isLoading } = useGetQueryRecommendations({
  contextTitle: DM.DataSource.title,
  count: 5
});

if (isLoading) {
  return <div>Loading recommendations..</div>;
}

return (
  <ul>
    {data.map((item: QueryRecommendation, index) => (
      item.widgetProps &&
      <li key={index}>
        <div key={'title-' + index}>{item.nlqPrompt}</div>
        <div key={'chart-' + index}>
          <Widget
            key={'widget-' + index}
            {...item.widgetProps}
          />
        </div>
      </li>
    ))}
  </ul>
);
```

--------------------------------

### Install Sisense SDK Packages

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/tutorials/tutorial-charts/lesson1.md

Installs the necessary Sisense SDK UI and data packages for your React project.

```bash
npm i @sisense/sdk-ui @sisense/sdk-data
```

--------------------------------

### Run Vite Development Server (npm)

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart.md

Starts the Vite development server to run the React application. This command enables hot module replacement and other development features.

```sh
npm run dev
```

--------------------------------

### Displaying AI-Generated Query Recommendations List

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/guides/ai-features/quickstart.md

Shows how to use the useGetQueryRecommendations hook to fetch AI-generated query suggestions based on a data model title. The example demonstrates how to display these recommendations as a simple list of natural language prompts, handling the loading state.

```ts
import { useGetQueryRecommendations, QueryRecommendation } from '@sisense/sdk-ui/ai';

// ...

const { data, isLoading } = useGetQueryRecommendations({
  contextTitle: DM.DataSource.title,
  count: 5
});

if (isLoading) {
  return <div>Loading recommendations..</div>;
}

return (
  <ul>
    {data.map((item: QueryRecommendation, index) => (
      <li key={index}>{item.nlqPrompt}</li>
    ))}
  </ul>
);
```

--------------------------------

### Run Development Server (npm)

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart-vue.md

Command to start the development server for the Vue.js application using npm. This allows for live reloading and testing during development.

```sh
npm run dev
```

--------------------------------

### Project Setup Commands

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/tutorials/tutorial-genai/lesson1.md

Commands to create a new React project using Vite, install dependencies, and add Sisense SDK packages.

```bash
npm create vite@latest
cd compose-sdk-genai-tutorial
npm install
npm i @sisense/sdk-ui @sisense/sdk-data
```

--------------------------------

### Chart Data Options Example

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart-angular.md

Example of a dataOptions object for a Sisense chart, specifying category and value fields with a measure factory for aggregation.

```typescript
// chartType={'line'}
{
  category: [DM.Doctors.Specialty],
  value: [measureFactory.average(DM.Admissions.TimeofStay)],
  breakBy: [],
}
```

--------------------------------

### Run Vite Development Server (Yarn)

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart.md

Starts the Vite development server using Yarn. This command is the Yarn equivalent of 'npm run dev'.

```sh
yarn dev
```

--------------------------------

### Project Setup with AiContextProvider

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/guides/ai-features/quickstart.md

Wraps your application with AiContextProvider to enable AI features from Compose SDK. Requires `@sisense/sdk-ui` version 2.0.0+ and Sisense Fusion L2025.2+ with Generative AI enabled.

```typescript
import App from './App.tsx';
import { SisenseContextProvider } from '@sisense/sdk-ui';
import { AiContextProvider } from '@sisense/sdk-ui/ai';

const sisenseContextProps = { /* Sisense configuration */ };

// ...

<SisenseContextProvider {...sisenseContextProps}>
  <AiContextProvider>
    <App />
  </AiContextProvider>
</SisenseContextProvider>
```

--------------------------------

### Run Development Server (Yarn)

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart-vue.md

Command to start the development server for the Vue.js application using Yarn. This allows for live reloading and testing during development.

```sh
yarn dev
```

--------------------------------

### Create Vue App (npm)

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart-vue.md

Command to create a new Vue.js application using npm. This command initiates the Vue project setup process, allowing customization with TypeScript and other features.

```sh
npm create vue@latest
```

--------------------------------

### Package Installation and Versioning Example

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/license-report/license-report-generated.md

Illustrates how to install and manage package versions using a package manager like npm or yarn. This example shows the typical structure of dependency declarations in a project's configuration file.

```shell
# Example using npm
npm install lodash-es@4.17.21
npm install --save-dev @babel/preset-env@7.24.5

# Example using yarn
yarn add lodash-es@4.17.21
yarn add --dev @babel/preset-env@7.24.5
```

--------------------------------

### Create Vue App (Yarn)

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart-vue.md

Command to create a new Vue.js application using Yarn. This command initiates the Vue project setup process, allowing customization with TypeScript and other features.

```sh
yarn create vue@latest
```

--------------------------------

### Run Storybook for @sisense/sdk-ui

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/README.md

Starts the Storybook environment for the `@sisense/sdk-ui` package, showcasing chart examples.

```sh
yarn storybook
```

--------------------------------

### Troubleshooting Yarn Install Errors

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/troubleshooting/troubleshooting-setup.md

Provides solutions for common errors encountered during `yarn install`, such as certificate issues, authentication problems with GitHub Packages Registry, and conflicts with Yarn Plug'n'Play.

```bash
yarn install
```

```bash
yarn cache clean --all
```

```bash
yarn set version stable
```

```bash
yarn -v
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart-vue.md

Command to change the current directory to the newly created Vue application folder.

```sh
cd compose-sdk-app
```

--------------------------------

### Default Chatbot Component

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/guides/ai-features/quickstart.md

Displays a chatbot with default settings. No additional props are required for basic usage.

```typescript
import { Chatbot } from '@sisense/sdk-ui/ai';

// ...

<Chatbot />
```

--------------------------------

### Run Development Server

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/tutorials/tutorial-charts/lesson1.md

Starts the development server for the project, allowing you to view the chart in a browser.

```bash
npm run dev
```

--------------------------------

### Install Compose SDK Packages (Yarn)

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart-vue.md

Command to install the core Compose SDK packages for Vue.js (@sisense/sdk-ui-vue and @sisense/sdk-data) using Yarn. These packages provide UI components and data handling capabilities.

```sh
yarn add @sisense/sdk-ui-vue @sisense/sdk-data
```

--------------------------------

### Install Compose SDK Packages (npm)

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart-vue.md

Command to install the core Compose SDK packages for Vue.js (@sisense/sdk-ui-vue and @sisense/sdk-data) using npm. These packages provide UI components and data handling capabilities.

```sh
npm i @sisense/sdk-ui-vue @sisense/sdk-data
```

--------------------------------

### TypeScript Data Model Representation Example

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart.md

An example of a TypeScript representation for a Sisense data model, specifically for the 'Sample ECommerce' data source. It defines dimensions and attributes using the `@sisense/sdk-data` library, enabling structured data querying.

```ts
import type { Dimension, DateDimension, Attribute } from '@sisense/sdk-data';
import { createAttribute, createDateDimension, createDimension } from '@sisense/sdk-data';

export const DataSource = 'Sample ECommerce';

interface BrandDimension extends Dimension {
    Brand: Attribute;
    BrandID: Attribute;
}
export const Brand = createDimension({
    name: 'Brand',
    Brand: createAttribute({
        name: 'Brand',
        type: 'text-attribute',
        expression: '[Brand.Brand]',
    }),
    BrandID: createAttribute({
        name: 'BrandID',
        type: 'numeric-attribute',
        expression: '[Brand.Brand ID]',
    }),
}) as BrandDimension;
```

--------------------------------

### Chart Data Options Example

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart.md

Defines the data options for a chart, specifying categories and value aggregations. It uses the `measureFactory` for sum aggregation.

```ts
{
  category: [DM.Commerce.AgeRange],
  value: [measureFactory.sum(DM.Commerce.Revenue)],
  breakBy: [],
}
```

--------------------------------

### Get Sisense API Token

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart-vue.md

Retrieves an API token for authenticating with your Sisense instance using the Compose SDK CLI. Requires your Sisense instance URL and username.

```sh
npx @sisense/sdk-cli@latest get-api-token --url <your_instance_url> --username <username>
```

--------------------------------

### TypeScript Data Model Representation

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart-angular.md

Example of a TypeScript file generated by the Sisense CLI, representing a data model with dimensions and attributes. This structure is used by the Compose SDK for querying.

```typescript
import type { Dimension, DateDimension, Attribute } from '@sisense/sdk-data';
import { createAttribute, createDateDimension, createDimension } from '@sisense/sdk-data';

export const DataSource = 'Sample Healthcare';

interface AdmissionsDimension extends Dimension {
  Cost_of_admission: Attribute;
  Death: Attribute;
  Diagnosis_ID: Attribute;
  Doctor_ID: Attribute;
  HAI: Attribute;
  ID: Attribute;
  Patient_ID: Attribute;
  Room_ID: Attribute;
  SSI: Attribute;
  Surgical_Procedure: Attribute;
  TimeofStay: Attribute;
  Admission_Time: DateDimension;
  Discharge_Time: DateDimension;
}
export const Admissions = createDimension({
  name: 'Admissions',
  Cost_of_admission: createAttribute({
    name: 'Cost_of_admission',
    type: 'numeric-attribute',
    expression: '[Admissions.Cost_of_admission]',
  }),
...
```

--------------------------------

### Create New Angular App

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart-angular.md

Command to create a new Angular application using the Angular CLI. It prompts for routing and creates the app in a specified directory.

```sh
npm init @angular compose-sdk-app
```

--------------------------------

### Connect to Sisense Instance with SisenseContextProvider

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart.md

Demonstrates how to connect your application to a Sisense instance using the `SisenseContextProvider` component from `@sisense/sdk-ui`. This component wraps your application to provide access to Sisense data and supports various authentication methods, including API tokens.

```ts
// src/App.tsx

import { SisenseContextProvider } from '@sisense/sdk-ui';

function App() {
    return (
        <>
            <SisenseContextProvider
                url="<instance url>" // replace with the URL of your Sisense instance
                token="<api token>" // replace with the API token of your user account
            ></SisenseContextProvider>
        </>
    );
}
export default App;
```

--------------------------------

### Project Setup and Development Commands

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/typedoc-plugins/typedoc-plugin-markdown/CONTRIBUTING.md

Commands for setting up the development environment, building the project, and running tests and linters.

```shell
npm install
cd packages/typedoc-plugin-markdown
npm run docs
npm run test
npm run lint
npx changeset
```

--------------------------------

### Sisense Data Model Measure Factory

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart-vue.md

Illustrates the usage of the measureFactory utility from the '@sisense/sdk-data' library to define aggregations for chart values. The example shows how to apply an average aggregation to a specific data field.

```ts
// chartType={'column'}
{
    category: [DM.DimProducts.CategoryName],
    value: [measureFactory.average(DM.Fact_Sale_orders.UnitPriceDiscount)],
    breakBy: [],
  }
```

--------------------------------

### Sample Retail Data Model TypeScript Representation

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/getting-started/quickstart-vue.md

An example of a TypeScript data model representation generated by the Sisense Compose SDK CLI. It defines dimensions and attributes for querying data, abstracting away complex SQL operations.

```ts
import type { Dimension, DateDimension, Attribute } from '@sisense/sdk-data';
import { createAttribute, createDateDimension, createDimension } from '@sisense/sdk-data';

export const DataSource = 'Sample Retail';

interface DimCountriesDimension extends Dimension {
  CountryName: Attribute;
  Region: Attribute;
}
export const DimCountries = createDimension({
  name: 'DimCountries',
  CountryName: createAttribute({
    name: 'CountryName',
    type: 'text-attribute',
    expression: '[DimCountries.CountryName]',
  }),
  Region: createAttribute({
    name: 'Region',
    type: 'text-attribute',
    expression: '[DimCountries.Region]',
  }),
}) as DimCountriesDimension;
...
```

--------------------------------

### Import Sisense SDK Components

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/tutorials/tutorial-charts/lesson1.md

Imports necessary components and utilities from the Sisense SDK for building charts, including the Chart component, measureFactory, and data models.

```typescript
import { Chart } from '@sisense/sdk-ui';
import { measureFactory } from '@sisense/sdk-data';
import * as DM from './models/sample-retail';
```

--------------------------------

### Configure Chart Data Set

Source: https://github.com/sisense/compose-sdk-monorepo/blob/main/docs-md/sdk/tutorials/tutorial-charts/lesson1.md

Sets the data source for the Sisense Chart component, linking it to the Sample Retail data model.

```typescript
dataSet={DM.DataSource}
```