Installation

This guide provides comprehensive installation instructions for integrating FlowX.AI UI Toolkits into your Angular or React application. Follow the framework-specific steps to set up the toolkit with all required dependencies and configuration.

System requirements

Before installing, verify your development environment meets these requirements:

Required software

Node.js: Version 16.x or higher (18.x recommended)
npm: Version 8.x or higher, or equivalent package manager (yarn, pnpm)
Git: For version control and package installation

Framework requirements

Angular
React

Angular CLI 14.x or higher
Angular 14.x - 17.x (depending on toolkit version)
TypeScript 4.6 or higher
RxJS 7.x

FlowX.AI platform access

Active FlowX.AI platform instance
API endpoint URL
Valid authentication credentials
Process definition access

Verify Node.js and npm

Check your installed versions:

node --version  # Should output v16.x.x or higher
npm --version   # Should output 8.x.x or higher

If you need to upgrade Node.js, download the latest LTS version from nodejs.org.

Installation steps

Angular
React

Install the Angular UI Toolkit package

Install the toolkit package matching your FlowX.AI platform version:

# Install latest version (5.5.0)
npm install @flowx/angular-ui-toolkit@latest

# Or install a specific version
npm install @flowx/[email protected]

# For LTS version (4.7.11)
npm install @flowx/[email protected]

Install peer dependencies

The toolkit requires specific peer dependencies. Install any missing packages:

npm install @angular/common @angular/core rxjs

Most Angular projects already have these dependencies. Check your package.json to verify.

Import the FlowX module

Add the FlowX module to your application module:

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { FlowxModule, FlowxConfig } from '@flowx/angular-ui-toolkit';
import { AppComponent } from './app.component';
import { environment } from '../environments/environment';

const flowxConfig: FlowxConfig = {
  apiUrl: environment.flowxApiUrl,
  processApiPath: '/process',
  authToken: environment.flowxAuthToken,
  locale: 'en-US',
  translationsPath: '/assets/i18n'
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FlowxModule.forRoot(flowxConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Configure environment variables

Store your FlowX.AI configuration in environment files:

environment.ts

export const environment = {
  production: false,
  flowxApiUrl: 'https://dev-api.flowx.example.com',
  flowxAuthToken: 'your-development-token'
};

environment.prod.ts

export const environment = {
  production: true,
  flowxApiUrl: 'https://api.flowx.example.com',
  flowxAuthToken: ''  // Set via environment variable in production
};

Never commit authentication tokens to version control. Use environment variables or secure configuration management in production.

Import stylesheets

Add the toolkit styles to your angular.json:

angular.json

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.scss",
              "node_modules/@flowx/angular-ui-toolkit/styles/main.scss"
            ],
            "scripts": []
          }
        }
      }
    }
  }
}

Alternatively, import in your global styles.scss:

styles.scss

@import '@flowx/angular-ui-toolkit/styles/main';

Set up assets (optional)

If using internationalization, configure translation files:

angular.json

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/@flowx/angular-ui-toolkit/assets/i18n",
                "output": "/assets/i18n"
              }
            ]
          }
        }
      }
    }
  }
}

Install the React UI Toolkit package

Install the toolkit package matching your FlowX.AI platform version:

# Install latest version (5.5.0)
npm install @flowx/react-ui-toolkit@latest

# Or install a specific version
npm install @flowx/[email protected]

# For LTS version (4.7.11)
npm install @flowx/[email protected]

Install peer dependencies

Ensure React and React DOM are installed:

npm install react react-dom

# If using TypeScript
npm install --save-dev @types/react @types/react-dom

Configure the FlowX provider

Wrap your application with the FlowX provider:

App.tsx

import React from 'react';
import { FlowxProvider, FlowxConfig } from '@flowx/react-ui-toolkit';
import { MainApp } from './components/MainApp';

const flowxConfig: FlowxConfig = {
  apiUrl: process.env.REACT_APP_FLOWX_API_URL || '',
  processApiPath: '/process',
  authToken: process.env.REACT_APP_FLOWX_AUTH_TOKEN || '',
  locale: 'en-US',
  translationsPath: '/locales'
};

function App() {
  return (
    <FlowxProvider config={flowxConfig}>
      <MainApp />
    </FlowxProvider>
  );
}

export default App;

Configure environment variables

Create a .env file for development:

.env

REACT_APP_FLOWX_API_URL=https://dev-api.flowx.example.com
REACT_APP_FLOWX_AUTH_TOKEN=your-development-token

Create .env.production for production builds:

.env.production

REACT_APP_FLOWX_API_URL=https://api.flowx.example.com
# Auth token should be injected at runtime

Add .env to your .gitignore to prevent committing sensitive credentials.

Import stylesheets

Import the toolkit styles in your main entry file:

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import '@flowx/react-ui-toolkit/dist/styles.css';
import './index.css';  // Your custom styles
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Configure build tool (if needed)

For Vite:No additional configuration needed. Vite handles CSS imports automatically.For webpack (Create React App):CSS imports are supported by default. No additional configuration needed.For Next.js:Import styles in _app.tsx:

pages/_app.tsx

import '@flowx/react-ui-toolkit/dist/styles.css';
import type { AppProps } from 'next/app';
import { FlowxProvider } from '@flowx/react-ui-toolkit';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <FlowxProvider config={{/* config */}}>
      <Component {...pageProps} />
    </FlowxProvider>
  );
}

Configuration options

The FlowX configuration object accepts these properties:

Property	Type	Required	Description
`apiUrl`	string	Yes	Base URL of your FlowX.AI platform API
`processApiPath`	string	Yes	Path to process API endpoints (typically `/process`)
`authToken`	string	Yes	Authentication token for API requests
`locale`	string	No	Default locale for internationalization (default: `en-US`)
`translationsPath`	string	No	Path to translation files for i18n
`timeout`	number	No	Request timeout in milliseconds (default: `30000`)
`retryAttempts`	number	No	Number of retry attempts for failed requests (default: `3`)
`enableLogging`	boolean	No	Enable debug logging (default: `false` in production)

Example advanced configuration

const flowxConfig: FlowxConfig = {
  apiUrl: 'https://api.flowx.example.com',
  processApiPath: '/process',
  authToken: getAuthToken(), // Function that retrieves token securely
  locale: 'en-US',
  translationsPath: '/assets/i18n',
  timeout: 45000,
  retryAttempts: 5,
  enableLogging: !environment.production
};

Verify installation

Confirm the toolkit is installed correctly:

# Angular
npm list @flowx/angular-ui-toolkit

# React
npm list @flowx/react-ui-toolkit

The build should complete without errors. Check for:

No dependency resolution errors
No TypeScript compilation errors
Styles properly bundled in output

Troubleshooting

Peer dependency conflicts

If you see peer dependency warnings:

npm install --legacy-peer-deps

Or update conflicting packages to compatible versions.

Module resolution errors

For TypeScript module resolution issues, update your tsconfig.json:

tsconfig.json

{
  "compilerOptions": {
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

Style import issues

If styles don’t load:

Verify the CSS/SCSS file path in your imports
Check that your build tool processes CSS files
Clear build cache and rebuild: rm -rf dist node_modules/.cache && npm run build

Authentication errors

If you get 401/403 errors:

Verify your authentication token is valid
Check token hasn’t expired
Confirm API URL is correct and accessible
Verify CORS settings on your FlowX.AI platform instance

Next steps

Usage guide

Learn how to use FlowX components in your application

Theming

Customize the look and feel to match your brand

Introduction

Guides

Installation

Installation

System requirements

Required software

Framework requirements

FlowX.AI platform access

Verify Node.js and npm

Installation steps

Configuration options

Example advanced configuration

Verify installation

Troubleshooting

Peer dependency conflicts

Module resolution errors

Style import issues

Authentication errors

Next steps

Usage guide

Theming

Build docs developers (and LLMs) love

Introduction

Guides

​Installation

​System requirements

​Required software

​Framework requirements

​FlowX.AI platform access

​Verify Node.js and npm

​Installation steps

​Configuration options

​Example advanced configuration

​Verify installation

​Troubleshooting

​Peer dependency conflicts

​Module resolution errors

​Style import issues

​Authentication errors

​Next steps

Usage guide

Theming

Build docs developers (and LLMs) love

Installation

System requirements

Required software

Framework requirements

FlowX.AI platform access

Verify Node.js and npm

Installation steps

Configuration options

Example advanced configuration

Verify installation

Troubleshooting

Peer dependency conflicts

Module resolution errors

Style import issues

Authentication errors

Next steps