Documentation

Powered by Algolia

Building a voice assistant for an Electron app

With the Alan Web SDK, you can create a voice assistant or a chatbot for your Electron app. In this tutorial, we will create a simple voice enabled Electron app. The app users will be able to click the Alan button and give voice commands, and Alan 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 Studio

First, we need to sign up for Alan Studio — the web portal where we will create a dialog scenario, or the voice script, for our voice assistant.

  1. Go to Alan Studio.
  2. Sign up with a Google, GitHub account or with your email address.

    When you sign up, Alan adds free interactions to your balance to let you get started. To get additional interactions to your balance, sign up with your GitHub account or connect your Alan account with your GitHub account and give stars to Alan repositories.

  3. In Alan Studio, click Create Voice Assistant. 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:

  1. On your machine, create a folder for the app and install Electron in it with the following commands:

    $ mkdir my-electron-app && cd my-electron-app
    $ npm init -y
    $ npm i --save-dev electron
  2. In the app folder, create the main.js file with the following content:

    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()
    	}
    })
  3. In the same folder, create the index.html file with the following content:

    <!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>
  4. Open the package.json file and update the main script name to main.js:

    {
    	"name": "my-electron-app",
    	"version": "0.1.0",
    	"main": "main.js"
    }
  5. Update "scripts" to "start": "electron ." to run the main script with Electron:

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

    $ npm start

Step 3: Install the Alan Web component

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

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

Step 4: Add the Alan button to the app

Now we will update our app to add the Alan button to it.

  1. In the app folder, open the index.html file.
  2. To the <head> block, add the following line to import the Alan Web component:

    <script src="node_modules/@alan-ai/alan-sdk-web/dist/alan_lib.min.js"></script>
  3. To the <body> block, add the code for the Alan button:

    <body style="background: white;">
    ...
    <script>
    alanBtn({ 
    key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
    	onCommand: (commandData) => {
    		if (commandData.command === 'go:back') {
    			// Call the client code that will react to the received command
    		}
    	},
    });
    </script>
    </body>
  4. In the key field above, we need to replace YOUR_KEY_FROM_ALAN_STUDIO_HERE with the Alan SDK key for our Alan Studio project. In Alan 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.

    <body style="background: white;">
    ...
    <script>
    alanBtn({ 
    key: '28b4365114e0f2f67d43485dbc3cb44a2e956eca572e1d8b807a3e2338fdd0dc/stage',
    	onCommand: (commandData) => {
    		if (commandData.command === 'go:back') {
    			// Call the client code that will react to the received command
    		}
    	},
    });
    </script>
    </body>

Step 5. Add voice commands

Let's add some voice commands so that we can interact with our Ember app through voice. In Alan Studio, open the project and in the code editor, add the following intents:

intent (`What is your name?`, p => {
    p.play(`It's Alan, and yours?`);
});

intent (`How are you doing?`, p => {
    p.play(`Good, thank you. What about you?`);
});

Now in the app click the Alan button and ask: What is your name? and How are you doing? Alan will give responses provided in the intents.