Skip to main content

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.

​
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: 
<dependency>
    <groupId>com.activeviam.atoti-ui</groupId>
    <artifactId>atoti-ui</artifactId>
    <version>${atoti-ui.version}</version>
</dependency>

<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): 
{
  "@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: 
{
  "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:
  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
After setting up the frontend, proceed to use AI features: