DEV Community

Cover image for How to add a Voice Assistant to your existing Application
Alan Voice AI Platform
Alan Voice AI Platform

Posted on • Originally published at Medium

How to add a Voice Assistant to your existing Application

How exactly do you add a voice interface to your app?

If you’ve been doing software development lately, you’ve probably (definitely) heard about the hot new fields of machine learning and artificial intelligence — helping us create smarter applications that can improve themselves. You may have even heard of natural language processing, a specific type of machine learning that deals with understanding human speech: making sense of what we tell each other.

While natural language processing is still a very complex topic, we here at Alan are taking steps to solve it — and make it accessible to everyone. With Alan, anyone can integrate a complete voice interface into their applications without the complexity.

Put broadly, Alan is a complete Conversational Voice AI Platform that lets you Build, Debug, Integrate, and Iterate on a voice assistant for your application.

Previously, you would’ve had to work from the ground-up: learning Python, creating your machine learning model, hosting on the cloud, training Speech Recognition software, and tediously integrating it into your app.

Alan Platform Diagram

Alan Platform Diagram

The Alan Platform automates this with its cloud-based infrastructure — incorporating a large number of advanced voice recognition and Spoken Language Understanding technologies. This enables Alan to support complete conversational voice experiences — defined by developers using Alan Studio scripts, written in JavaScript. Alan integrates voice AI into any application with easy to use SDKs.

Voice interfaces in existing applications apply to a variety of use cases — from healthcare, to industrial maintenance, to emergency services. Alan has been used by leading industry professionals in all types of work.

Alt Text

Alan Use Cases

Unlike Google Assistant and Alexa, Alan integrates with whatever application you’re developing, meaning that you won’t need to change your existing workflows or UI.

In addition, Alan uses Javascript and simple IDEs that are accessible to any developer — foregoing current template-driven approaches in favor of powerful and robust voice dialogues with both voice and visual interactions. With all the heavy-lifting done for you, Alan enables developers to roll out conversational voice and hands-free usage in just a couple of days.

To show you the power of the Alan Platform, we’ll start by building our own simple voice script to define the experience; then, we’ll add it to a mobile application. The mobile application we’ll be using here is the SAP Deliveries app available on the Alan Github page.

To start, please download and install Git Large File Storage and make sure you have the latest version of Xcode and Swift.

We can download the Alan iOS SDK here:

git clone https://github.com/alan-ai/alan-sdk-ios.git

The application will be located in the examples/ directory and titled SAP_SampleApplication/.

Now that we have our mobile app saved on our computer, we can start with the voice script. Remember where this is saved — we’ll need to come back for it later!

Building Your Alan Application

First, sign up and create an Alan Studio account.

Alt Text

Next, log in to Alan and you’ll see the project dashboard. Here, we’ll create a sample project for the open source SAP Deliveries Application for iOS (which we downloaded before).

Alt Text

Previous models would require thousands of lines of code to host, develop, train, and deploy — Alan automates all these tasks and develops your models for you.

In the project, click the ‘Add Script’ button and select the SAP_Deliveries_Data and the SAP_Deliveries_Logic scripts.

Make sure that the SAP_Deliveries_Data script is listed first.

Alt Text

To understand the Alan voice scripts, there are two essential features we need to know — intents and entities.

  1. Intents — the phrases which we want to recognize — phrases like “what products are available” or “how much does the notebook cost?”
  2. Entities — the keywords in these intents. Product names or product suppliers, for example, would be important specific words that are relevant to the functioning of the app.

In these scripts, Alan supports advanced language definition tools that can be used to make intents and entities of any complexity. Entities like lists loaded from databases or fuzzy entities are critical in many different use cases and can be handled by Alan’s advanced dialog management system.

Alt Text

Alan also supports UI navigation with voice commands — enabling users to navigate through the different screens in an application and creating a seamless user experience.

Alt Text

Now that we understand the basic parts of our script, we can move to debugging our voice experience in the application.

Debugging

Alan provides a host of features that makes debugging easy and efficient.

First, we can test out this script in the Debug Chat by pressing the Alan button and asking “What products are available?”

Alt Text

Here, we can see that Alan replies back to the user and sends a corresponding visual update recognizing the Product intent.

Many applications have complex workflows and could have dozens or hundreds of intents. While debugging, Alan lets you see which intents are available in the current context and what has occurred in the current dialog flow — showing the intent that was used. That makes your script easy to debug even with the most complex intents and user flows.

Finally, Alan provides a dedicated platform where we can test our application — Alan Playground. Available on Web, iOS, and Android, Alan Playground is another option to test your application alongside its visual contexts.

To debug on mobile, start by clicking the QR code button in the Alan Studio Debug Chat, and use Alan Playground on mobile to scan the code. This will scan your Alan Voice Script and open it in the application, which you can then test.

Alt Text

To test on Web, click the Alan Playground icon (Play Button) in the top right corner, and you can test your script on the next screen.

Alt Text

Once we’re done testing, we can create a new version of the SAP Deliveries Script for Production!

Versioning

Alan supports versioning for development, testing, and production — helping you easily manage the process of adding the voice experience to your application. Publishing a new version is automated in Alan’s backend and will automatically link to all production devices, without requiring any manual deployment.

Our script here is saved to Development and Last (the only editable version). After debugging, we’ll save our voice script and move it to Production. Let’s name this script “V1” and select “Run on Production”.

Alt Text

To get our production key, navigate to the production section and select the “Embed Code” button.

Alt Text

At the top, we see our Alan SDK Key, which we will save to integrate our script into the application. Now that we have our full script setup and tested, we’ll integrate our voice script into the SAP deliveries application.

Integration

Remember the Github project we downloaded? The app is a sample application made using the SAP Developer stack.

Opening the project in Xcode, we can see that the Alan library is already integrated for us. In the Alan folder, we can open the UIWindow+Alan.swift file to see the integration completed.

We only need to change this line in func addAlan() to incorporate our Alan production key:

let config = AlanConfig(key: *“YOUR_KEY_FROM_ALAN_STUDIO_HERE"*, isButtonDraggable: false)

In other projects, integrating the Alan libraries in any Xcode project is simple. We just need to post the following code snippet into our Swift project view controller and add the next code snippet into the viewDidLoad function. Since this is already taken care of in our SAP application, we don’t need to follow these steps.

import AlanSDK

/**........**/

fileprivate var button: AlanButton!

/**.........**/

override func viewDidLoad() {
  let config = AlanConfig(key: "YOUR_KEY_FROM_ALAN_STUDIO_HERE")
  self.button = AlanButton(config: config)
  self.button.translatesAutoresizingMaskIntoConstraints = false
  self.view.addSubview(self.button)
  let b = NSLayoutConstraint(item: self.button, attribute: .bottom, relatedBy: .equal, toItem: self.view, attribute: .bottom, multiplier: 1, constant: -40)
  let r = NSLayoutConstraint(item: self.button, attribute: .right, relatedBy: .equal, toItem: self.view, attribute: .right, multiplier: 1, constant: -20)
  let w = NSLayoutConstraint(item: self.button, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 64)
  let h = NSLayoutConstraint(item: self.button, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 64)
  self.view.addConstraints([b, r, w, h])  
}

For more detailed integration or for other platforms like Android and Web, see our documentation here.

After adding this code, you can run the SAP Deliveries app in an emulator or iOS device and start using Alan!

After testing out a couple features, go to the Home screen and ask “How do I use this?” Alternatively, you can use an emulator to test the Alan button.

Alt Text

Unfortunately, in our script, this intent will be unrecognized.

To get a better understanding of fixing unrecognized intents, let’s go to Alan Analytics to see all our user interactions and how Alan has been engaged.

Iteration

Alan provides logs and analytics so you can gauge how users interact with your script and prioritize improvements.

Now that we’ve integrated and run the SAP Deliveries App, we can see some analytics data in Alan Studio. We can see the session time, amount of usage, most frequent intents, and more.

Alt Text

In the logs, we see the unrecognized intents as well — phrases that the users have asked which didn’t match any intent in Alan. By reviewing these, we can better understand what users want and update the app and make it more responsive in all use cases.

Alt Text

Here, we see that the user asked “How do I use this” in the home screen, where it was unrecognized.

Let’s update the code in Alan Studio to support this specific visual context.

intent(vProducts, "How do I use this?", p => { 
  p.play(`This is the Products screen. (Here,|) you can (use commands|ask questions) like What products are available?, ` 
         + `How much is the ${rand(project.prods.map(p => p.Name))}?, ` 
         + `and What ${rand(project.cats.map(p => p.CategoryName))} are available?`); 
});

Here, we can add this code in the SAP_Deliveries_Logic script on line 190 to help fix this unrecognized intent.

Now, let’s test this in the Alan Debug chat.

First, press “Set visual state” and replace the hint with:

{
    “screen”: “Product”
}

Then, ask “How do I use this?”

Alt Text

It works! Now, we can add a new version of the script and push it to production. This should be available to the user immediately, and reopening the SAP Deliveries app on your mobile device should yield the correct answer to your question.

Alt Text

With other voice-enabling software, this type of functionality doesn’t exist. With Alan, you can gauge user feedback and update the intents in your script to make your app more reactive and intelligent.

To take advantage of this full iteration experience, let’s finish off by building some automated test cases for our scripts in the future.

Alt Text

Let’s add some automated tests. Here, we’ve populated our test cases with multiple sample phrases:

  1. “What products do you have?”
  2. “Show me notebooks.”
  3. “What can I do here?”

Alt Text

By pressing the Play button, I can run all of these tests at once, and confirm that my script is working correctly.

Now that we’ve completely engaged with the Alan platform, let’s go over everything that we’ve learned.

Conclusion

Only the Alan Platform gives you the ability to create a voice assistant that enhances your application’s existing user experience and make continuous improvements that precisely align with what your users want.

With its simplified format, Alan is accessible to any developer, and does the heavy lifting of creating an accurate language model and managing the dialogues so that you can Build, Debug, and Integrate a voice assistant into your app in just a few days.

Building with Alan is simple — the voice scripts are intuitive, scalable, and powerful. After developing your voice script, you can debug your scripts and take full control of your development-deployment stack. Then, you can integrate Alan into your application without making any changes to your existing workflow or UI. Finally, you can develop automated testing for future scripts and efficient deployment.

With Alan, make your applications hands-free and bring your users the best conversational voice experience.

More of a visual learner? Follow along with our overview video here!

For reference, view sample Alan projects and SDKs here: https://github.com/alan-ai

Or look at the Alan Documentation for additional projects.

Top comments (0)