HEX
Server: Apache/2.4.52 (Ubuntu)
System: Linux ip-172-31-4-197 6.8.0-1036-aws #38~22.04.1-Ubuntu SMP Fri Aug 22 15:44:33 UTC 2025 x86_64
User: ubuntu (1000)
PHP: 7.4.33
Disabled: pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare,
Upload Files
File: /var/www/html/wordpress/wp-content/themes/Divi/ai-app/README.md
## DIVI AI - Frontend APP
-----
-----
:smiley:

> How to trigger the AI app:

On a click event, we can hook the below statement:

```jQuery(window).trigger('et_ai_container_ready', [preferences, 'et-ai-app']);```


Param 1: Object **--->** preferences
```
const preferences = {
    context: 'section',
    date: new Date(),
};
```
 This is just an example, you can pass any configuration you need.


Param 2: String **--->** 'container ID'
_We just have to pass a string as an ID, and the AI app will automatically create the element in the DOM_

> How the AI app starts:

AI app listens for the event and runs the _<APP />_ component.
```
$(window).on('et_ai_container_ready', (event, preferences, container) => {
  ...
  ...
    <Provider store={store}>
      <App />
    </Provider>
  ...
});
```
We can pass the preferences like this, if necessary: (Index.tsx)
```
<Provider store={store}>
  <App preferences={preferences} />
</Provider>
```

> How to start the test server:

Run `yarn` in the root to install packages
Run `yarn json-server` to start the JSON server

There is a db.json file included in the root directory for data.

Enjoy!