> ## Documentation Index
> Fetch the complete documentation index at: https://docs.activeviam.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Activate the UI

> “How to activate and configure the Atoti Limits UI by integrating with an Atoti UI host application, setting up module settings and environment variables, and combining with other Atoti solutions or modules”

Each UI project is designed as an extension of the Atoti UI “host application”. This section explains how you can easily combine these extensions into a running Atoti Limits application.

## Activate Atoti Limits

1. Download and set up the >=5.2.6, \<5.3 version of the Atoti UI starter application.

<Info>
  See the [Atoti UI tutorial](https://docs.activeviam.com/products/atoti/ui/5.2/developer-guide/install-and-start/set-up/) on how to set up the UI.
</Info>

2. To activate Atoti Limits, make the following changes:

   In `package.json`:

```diff theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
"dependencies": {
+   "@activeviam/limits-sdk": 4.2.1,
+   "@tanstack/react-query": "5.22.2",
 ...
  }
```

In `index.tsx`, import and use the `activate` function, including the [Cube-specific and Atoti Limits module settings](./ui-settings#cube-specific-module-settings):

```diff theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
+ import { activate } from "@activeviam/limits-sdk";

const extension: ExtensionModule = {
  activate: async (configuration) => {
    ...
+   activate({
+     configuration,
+     moduleSettings: {
+      // add module settings here.
+     },
     });
  }
}
```

In `env.development.js` and `env.production.js`, ensure the following exist:

* A server used as the Content Server
* An Atoti Limits server with the key “LIMITS”
* All other application servers with their respective keys

Here is an example of the Atoti Limits module being configured with a Market Risk application server:

```ts theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
window.env = {
   contentServer: {
      url: "http://localhost:10010/mr-application",
      version: "6.1.0",
   },
   jwtServer: {
      url: "http://localhost:10010/mr-application",
      version: "6.1.0",
   },
   atotiServers: {
      MR: {
         url: "http://localhost:10010/mr-application",
         version: "6.1.0",
      },
      LIMITS: {
         url: "http://localhost:3090",
         version: "6.1.0",
      }
   }
};
```

3. Build and run the starter, now with the Atoti Limits features enabled.

## Configure Atoti Limits

The example above activates Atoti Limits with a default configuration and default settings.
Here’s how to modify them.

### Change the configuration

The [`configuration`](https://docs.activeviam.com/products/atoti/ui/5.2/docs/api/types#configuration) parameter is the entry-point to configuring the Atoti UI “host application”. It is supplied to the `activate` function that modifies it to add the Atoti Limits features. If you want to make changes like adding or removing a plugin, changing the application’s title or adding an HOC, you can modify the configuration object **after** invoking `activate`.

For example:

```ts theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
const extension: ExtensionModule = {
  activate: async (configuration) => {
    // default application name
    configuration.applicationName = "AtotiUI";
     ...
    // changes the application name to Atoti Limits
    activate({
       configuration,
       moduleSettings: {
        // module settings go here
       },
    });
    // Customized application name
    configuration.applicationName = "My Atoti Limits";
  },
};
```

### Change the settings

In addition to the required `moduleSettings`, the `activate` function accepts an optional `settings` and `basSettings` argument to let you configure the Atoti Limits features and the BAS features respectively.
You can use the default values exported from the SDK as an override basis:

```ts theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
import { activate, settings, basSettings } from "@activeviam/limits-sdk";

const extension: ExtensionModule = {
  activate: async (configuration) => {
    ...
    activate({
      configuration,
      moduleSettings: {
        // module settings go here
      },
      settings: {
        ...settings,
        ...{
          // customize here
        }
      },
      basSettings: {
        ...basSettings,
        ...{
          // customize here
        }
      }
    });
  },
};
```

For more information:

* Atoti Limits settings, see [UI settings](./ui-settings).
* BAS settings, see [UI Components](https://docs.activeviam.com/products/tools/ui-components/5.2.8/online-help/).

## Combine Atoti Limits with other solutions or modules

To combine multiple solutions and modules, simply repeat the steps in the combined SDK’s “Activating” section.

<Warning>
  You can only combine solution SDKs that have an Atoti UI peer dependency equal to >=5.2.6, \<5.3.
</Warning>

Example:

```ts theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
import { activate as limitsActivate } from "@activeviam/limits-sdk";
import { activate as frtbActivate } from "@activeviam/frtb-sdk";

const extension: ExtensionModule = {
  activate: async (configuration) => {
    ...
    limitsActivate(
      configuration,
      moduleSettings: {
        // module settings go here
      }
    );
    frtbActivate({ configuration });
  },
};
```