Ionic React¶
Available on: Web platform Android iOS
To integrate an Ionic Angular app with Alan, you need to do the following:
Step 1. Create an Ionic React app¶
If you want to create a voice-enabled app from scratch, in the Terminal, run the following commands. Otherwise move on to step 2.
npm install -g ionic
cd <appFolder>
ionic start <appName> <template> [options]
For details, see Ionic documentation.
Step 2. Install Alan packages¶
You need to install the Alan SDK Cordova component and Alan Web Component package.
Navigate to the folder where your app resides:
Terminal¶cd appName
Install the Alan SDK Cordova component:
Terminal¶npm install @alan-ai/cordova-plugin-alan-voice --save
Install the Alan Web Component package:
Terminal¶npm install @alan-ai/alan-button --save
Note
To be able to run Ionic apps on mobile devices, you must install the Alan button as the Web Component using the following packages: @alan-ai/alan-button
and @alan-ai/cordova-plugin-alan-voice
. Do not use the @alan-ai/alan-sdk-web
package: it is intended for non cross-platform web apps and pages.
Step 3. Add the Alan button¶
You need to create a wrapper component for the Alan button and update your app to embed the button to it.
Create a wrapper component for the Alan button. In the
src/components
app folder, create theAlanBtn.tsx
file:AlanBtn.tsx¶import React, { useEffect, useRef, } from 'react'; import { withRouter } from 'react-router'; const AlanBtn: React.FC = (props: any) => { const alanBtnComponent = useRef<any>(null); useEffect(() => { alanBtnComponent.current.addEventListener('command', (data: CustomEvent) => { const commandData = data.detail; if (commandData.command === 'command') { /* Call client code that will react to the received command */ } }); }, []); return <alan-button ref={alanBtnComponent} alan-key="YOUR_KEY_FROM_ALAN_STUDIO_HERE" />; }; export default withRouter(AlanBtn);
The Effect Hook in the Alan button component lets you subscribe to command events from Alan. It’s a place where you can set up logic on how your app will react to commands received from the voice script.
In
alan-key
, replaceYOUR_KEY_FROM_ALAN_STUDIO_HERE
with the Alan SDK key for your Alan Studio project. To get the key, in Alan Studio, at the top of the code editor, click Integrations and copy the value from the Alan SDK Key field.AlanBtn.tsx¶const AlanBtn: React.FC = (props: any) => { return <alan-button ref={alanBtnComponent} alan-key="6f60897fd223a4367d43485dbc3cb44a2e956eca572e1d8b807a3e2338fdd0dc/stage" />; }; export default withRouter(AlanBtn);
In the
App.tsx
file, add the following import statement to import the Alan button component:App.tsx¶import AlanBtn from './components/AlanBtn';
In the
App.tsx
file, add the Alan button component:App.tsx¶const App: React.FC = () => ( <IonApp> <IonReactRouter> <AlanBtn /> </IonReactRouter> </IonApp> );
In the
src
folder, create a typescript declaration file namedalan-btn.d.ts
:alan-btn.d.ts¶declare namespace JSX { interface IntrinsicElements { [tagName:string]: any } }
In the
index.tsx
file, import the Alan button component and bind it to the window object:index.tsx¶import { applyPolyfills, defineCustomElements, } from '@alan-ai/alan-button/dist/loader'; applyPolyfills().then(_ => { defineCustomElements(); });
That’s it. You can now add voice commands to the script in Alan Studio, run the app, click the Alan button and interact with the app with voice.
Note
Regularly update the Alan AI packages your project depends on. To check if a newer version is available, run npm outdated
. To update the package, run npm update <alan-package-name>
. For more details, see npm documentation.
What’s next?¶
Upon integration, your app gets the in-app voice assistant that can be activated with the Alan button displayed on top of the app’s UI.
To build a full-fledged multimodal UX, you can use Alan’s SDK toolkit:
Client API methods
Enable communication between the client app and Alan and perform actions in the app.
Alan handlers
Handle commands, understand the button state and capture events in the client app.
Example apps
Find and explore examples of voice-enabled apps on the Alan AI GitHub repository.