Getting started Get up and running with FlowX.AI UI Toolkit in your Angular or React application. This guide walks you through installation, basic configuration, and rendering your first component.
Prerequisites Before you begin, ensure your development environment meets these requirements:
Node.js 16.x or higher
Angular 14.x or higher
npm 8.x or higher (or yarn/pnpm equivalent)
FlowX.AI platform access and credentials
Node.js 16.x or higher
React 18.x or higher
npm 8.x or higher (or yarn/pnpm equivalent)
FlowX.AI platform access and credentials
Choose your version Select the toolkit version that matches your FlowX.AI platform version:
FlowX.AI Platform Toolkit Version Status 5.5.x v10.91.0 Latest 5.4.x v10.59.1 Stable 5.3.x v10.32.4 Stable 5.0.x - 5.2.x v9.153.6 - v10.12.1 Stable 4.7.11 v5.103.6 LTS 4.7.0 - 4.7.10 v5.80.6 - v5.103.5 Maintenance
For production applications, use the toolkit version that corresponds to your FlowX.AI platform deployment. Version compatibility ensures all features work correctly.
Installation
Install the package
Install the UI Toolkit package for your framework: npm install @flowx/angular-ui-toolkit@latest
To install a specific version, replace @latest with the version number: @flowx/angular-ui-toolkit@5.103.6
Configure the toolkit
Set up the toolkit configuration with your FlowX.AI platform connection details: Add the FlowX module to your app.module.ts: import { NgModule } from '@angular/core' ; import { BrowserModule } from '@angular/platform-browser' ; import { FlowxModule } from '@flowx/angular-ui-toolkit' ; import { AppComponent } from './app.component' ; @ NgModule ({ declarations: [ AppComponent ], imports: [ BrowserModule , FlowxModule . forRoot ({ apiUrl: 'https://your-flowx-api.example.com' , processApiPath: '/process' , authToken: 'your-auth-token' , locale: 'en-US' }) ], bootstrap: [ AppComponent ] }) export class AppModule { }
Wrap your application with the FlowX provider in your root component: import React from 'react' ; import { FlowxProvider } from '@flowx/react-ui-toolkit' ; import { YourMainComponent } from './components/YourMainComponent' ; function App () { return ( < FlowxProvider config = { { apiUrl: 'https://your-flowx-api.example.com' , processApiPath: '/process' , authToken: 'your-auth-token' , locale: 'en-US' } } > < YourMainComponent /> </ FlowxProvider > ); } export default App ;
Never hardcode authentication tokens in production code. Use environment variables or a secure configuration management system.
Import styles
Import the base styles to ensure components render correctly: Add the stylesheet import to your angular.json: { "projects" : { "your-app" : { "architect" : { "build" : { "options" : { "styles" : [ "src/styles.scss" , "node_modules/@flowx/angular-ui-toolkit/styles/main.scss" ] } } } } } }
Import styles in your main entry file: import React from 'react' ; import ReactDOM from 'react-dom/client' ; import '@flowx/react-ui-toolkit/dist/styles.css' ; import App from './App' ; const root = ReactDOM . createRoot ( document . getElementById ( 'root' ) as HTMLElement ); root . render ( < React.StrictMode > < App /> </ React.StrictMode > );
Use your first component
Start using FlowX components in your application: my-component.component.ts
import { Component } from '@angular/core' ; @ Component ({ selector: 'app-my-component' , template: ` <flx-process-container [processName]="'customer-onboarding'" [processStartData]="{ customerId: '12345' }" > </flx-process-container> ` }) export class MyComponent { }
import React from 'react' ; import { ProcessContainer } from '@flowx/react-ui-toolkit' ; export function MyComponent () { return ( < ProcessContainer processName = "customer-onboarding" processStartData = { { customerId: '12345' } } /> ); }
Verify installation Confirm that the toolkit is properly installed:
npm list @flowx/angular-ui-toolkit
You should see the installed version number in the output.
Next steps
Installation guide Detailed installation instructions including advanced configuration options
Usage guide Learn how to use components effectively in your application
Theming Customize the look and feel to match your brand
Best practices Production-ready patterns and recommendations
Troubleshooting Module not found error If you encounter a “module not found” error:
Verify the package is installed: npm list @flowx/[framework]-ui-toolkit
Clear node_modules and reinstall: rm -rf node_modules package-lock.json && npm install
Ensure your package.json lists the correct version
Styles not loading If components appear unstyled:
Verify the stylesheet import in your configuration
Check browser console for CSS loading errors
Ensure your build tool processes SCSS/CSS files correctly
API connection issues If components cannot connect to FlowX.AI:
Verify the apiUrl in your configuration
Check network tab for failed API requests
Ensure authentication tokens are valid and not expired
Verify CORS settings on your FlowX.AI platform instance