How to set up the frontend

Atoti Intelligence Essentials

This is part of the Atoti Intelligence Essentials offer.

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:

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):

{
  "@activeviam/ai-extension": "extensions/@activeviam/ai-extension/extensionEntry.js"
}

Verify the setup

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

Build the project
Start the Atoti application
Open the Atoti UI in a browser
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:

{
  "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:

overrides:
  "antd": "5.6.4"

Install dependencies

Install the project dependencies:

npm install

Build and start

Build and start the standalone frontend:

npm run build
npm start

Verify the setup

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

Open the Atoti UI in a browser (typically at http://localhost:3000)
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

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

Use Visualize This to create visualizations
Use Auto-Explain to analyze data variations

Introduction to Atoti Intelligence

Releases and Upgrades

User Guide

Developer Guide

How to set up the frontend

Atoti Intelligence Essentials

What is frontend setup?

Why set up the frontend?

Prerequisites

Setup for integrated frontend

Add the UI dependency

Add the AI extension

Verify the setup

Setup for standalone frontend

Create package.json

Create pnpm-workspace.yaml

Install dependencies

Build and start

Verify the setup

Troubleshooting

​Atoti Intelligence Essentials

​What is frontend setup?

​Why set up the frontend?

​Prerequisites

​Setup for integrated frontend

​Add the UI dependency

​Add the AI extension

​Verify the setup

​Setup for standalone frontend

​Create package.json

​Create pnpm-workspace.yaml

​Install dependencies

​Build and start

​Verify the setup

​Troubleshooting

​Related reading

Atoti Intelligence Essentials

What is frontend setup?

Why set up the frontend?

Prerequisites

Setup for integrated frontend

Add the UI dependency

Add the AI extension

Verify the setup

Setup for standalone frontend

Create package.json

Create pnpm-workspace.yaml

Install dependencies

Build and start

Verify the setup

Troubleshooting

Related reading