Building a voice Agentic Interface for an Electron app¶

With Alan AI SDK for Web, you can create a voice Agentic Interface and embed it to your Electron app. The Alan AI Platform provides you with all the tools and leverages the industry’s best Automatic Speech Recognition (ASR), Spoken Language Understanding (SLU) and Speech Synthesis technologies to quickly build an Agentic Interface from scratch.

In this tutorial, we will create a simple voice enabled Electron app. The app users will be able to click the voice Agentic Interface button and give custom voice commands, and the Agentic Interface will reply to them.

What you will learn¶

How to add a voice interface to an Electron app
How to write simple voice commands for an Electron app

What you will need¶

To go through this tutorial, make sure Node.js is installed on your machine.

Step 1. Sign up for Alan AI Studio¶

First, we need to sign up for Alan AI Studio — the web IDE where we will create the dialog script for our voice agent.

Go to Alan AI Studio.
Sign up with a Google or GitHub account or with your email address.
In Alan AI Studio, click Create Project. Select to create an empty project and give it any name you want.

Step 2: Create an Electron app¶

Now let’s create a simple Electron app:

On your machine, create a folder for the app and install Electron in it with the following commands:
Terminal¶
```
mkdir my-electron-app && cd my-electron-app
npm init -y
npm i --save-dev electron
```

In the app folder, create the main.js file with the following content:

main.js¶

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
  win.webContents.openDevTools()
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

In the same folder, create the index.html file with the following content:

index.html¶

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
</head>
<body style="background: white;">
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>

Open the package.json file and update the main script name to main.js:

package.json¶

{
    "name": "my-electron-app",
    "version": "0.1.0",
    "main": "main.js"
}

Update "scripts" to "start": "electron ." to run the main script with Electron:

package.json¶

{
    "name": "my-electron-app",
    "version": "0.1.0",
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    }
}

Run the app:
Terminal¶
```
npm start
```

Step 3: Install the Alan AI Web component¶

We need to add the Alan AI Web component to the app. In the app folder, install the Alan AI Web component with the following command:

Terminal¶

npm i @alan-ai/alan-sdk-web

Step 4: Add the Alan AI agentic interface to the app¶

Now we will update our app to add the Alan AI agentic interface to it.

In the app folder, open the index.html file.
To the <head> block, add the following line to import the Alan AI Web component:
index.html¶
```
<script src="node_modules/@alan-ai/alan-sdk-web/dist/alan_lib.min.js"></script>
```

To the <body> block, add the code for the Alan AI agentic interface:

index.html¶

<body style="background: white;">
<script>
    alanBtn({
        key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
        host: 'v1.alan.app',
    });
</script>
</body>

In the key field above, we need to replace YOUR_KEY_FROM_ALAN_STUDIO_HERE with the Alan AI SDK key for our Alan AI Studio project. In Alan AI Studio, at the top of the code editor, click Integrations, copy the value provided in the Alan SDK Key field and paste this value to key.
index.html¶
```
<body style="background: white;>

<script>
    alanBtn({
        key: '28b4365114e0f2f67d43485dbc3cb44a2e956eca572e1d8b807a3e2338fdd0dc/stage',
        host: 'v1.alan.app',
    });
</script>
 </body>
```