> ## 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.

# How to set up the frontend

> How to add the `@activeviam/ai-extension` to the Atoti UI for Visualize This and Auto-Explain, covering the integrated `extensions.json` approach for Java projects and the standalone `package.json` and `pnpm` build approach.

<Info>
  ### Atoti Intelligence Essentials

  This is part of the Atoti Intelligence Essentials offer.
</Info>

This guide explains how to add the AI extension to the Atoti UI to enable AI-powered features.

## What is frontend setup?

Frontend setup involves adding the AI extension to the Atoti UI. This extension provides the user interface components for AI features like Visualize This and Auto-Explain.

## Why set up the frontend?

Setting up the frontend enables the following capabilities:

* Display the AI assistant interface in the Atoti UI
* Enable natural language interaction with data
* Provide UI components for AI-powered features
* Create a seamless user experience for AI features

## Prerequisites

Before setting up the frontend, ensure the following requirements are met:

* Backend AI features are configured (Visualize This and/or Auto-Explain)

## Setup for integrated frontend

Use this approach when the Atoti UI is integrated with the Java application.

### Add the UI dependency

Add the Atoti UI dependency to the project.

Add the following to `pom.xml`:

```xml theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
<dependency>
    <groupId>com.activeviam.atoti-ui</groupId>
    <artifactId>atoti-ui</artifactId>
    <version>${atoti-ui.version}</version>
</dependency>
```

```xml theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
<dependency>
  <groupId>com.activeviam.springboot</groupId>
  <artifactId>atoti-ui-starter</artifactId>
  <version>${atoti-server.version}</version>
</dependency>
```

### Add the AI extension

Create an extensions configuration file to enable the AI extension.

Create a file at the following location:

```
src/main/resources/static/atoti-ui/extensions.json
```

Add the following content (or add this entry if the file already exists):

```json theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
{
  "@activeviam/ai-extension": "extensions/@activeviam/ai-extension/extensionEntry.js"
}
```

### Verify the setup

After completing the setup, verify that the AI extension is available:

1. Build the project
2. Start the Atoti application
3. Open the Atoti UI in a browser
4. Check that the AI assistant appears in the interface

## Setup for standalone frontend

Use this approach when the Atoti UI runs as a separate application without a build zip.

### Create package.json

Create a `package.json` file with the following content:

```json theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
{
  "name": "your-application-name-goes-here",
  "version": "1.0.0",
  "private": true,
  "description": "Your application's description goes here",
  "author": "Your name",
  "type": "module",
  "exports": "./dist/manifest.json",
  "files": [
    "dist"
  ],
  "scripts": {
    "build:extension": "atoti-ui-cli build-extension",
    "build:application": "atoti-ui-cli build-application --extensions . ./node_modules/@activeviam/ai-extension --env-file env.production.js",
    "start:extension": "atoti-ui-cli start-extension --port 3001",
    "start:application": "atoti-ui-cli start-application --port 3000 --extensions http://localhost:3001 --env-file env.development.js",
    "build": "npm-run-all -s build:extension build:application",
    "start": "npm-run-all -p start:*"
  },
  "dependencies": {
    "@activeviam/ai-extension": "^{atoti-ui.version}",
    "lodash-es": "^4.17.21"
  },
  "devDependencies": {
    "@activeviam/atoti-ui-cli": "{atoti-ui.version}",
    "@types/lodash-es": "^4.17.6",
    "@types/react": "18.3.3",
    "npm-run-all": "^4.1.5",
    "typescript": "^5.4.2"
  },
  "peerDependencies": {
    "@activeviam/atoti-ui-sdk": "{atoti-ui.version}",
    "antd": "5.6.4",
    "react": "18.3.1",
    "react-dom": "18.3.1"
  },
  "engines": {
    "node": ">=18.12.1"
  }
}
```

Replace `{atoti-ui.version}` with the version of Atoti UI being used.

### Create pnpm-workspace.yaml

Create a `pnpm-workspace.yaml` file with the following content:

```yaml theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
overrides:
  "antd": "5.6.4"
```

### Install dependencies

Install the project dependencies:

```bash theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
npm install
```

### Build and start

Build and start the standalone frontend:

```bash theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
npm run build
npm start
```

### Verify the setup

After starting the frontend, verify that the AI extension is available:

1. Open the Atoti UI in a browser (typically at `http://localhost:3000`)
2. Check that the AI assistant appears in the interface

## Troubleshooting

If the AI extension does not appear, check the following:

* The backend AI features are properly configured
* The extensions.json file is in the correct location
* The file contains valid JSON
* The Atoti UI version is compatible with the AI extension
* The browser cache is cleared

## Related reading

After setting up the frontend, proceed to use AI features:

* [Use Visualize This](../../user-guide/chat) to create visualizations
* [Use Auto-Explain](../../user-guide/auto-explain) to analyze data variations