IBM Developer

Tutorial

Implement voice over web chat using watsonx Assistant

Connect watsonx Assistant with Wikipedia and use your voice to communicate questions and responses

By Sahil Desai

On this page

Archived content

Archive date: 2025-02-28

This content is no longer being updated or maintained. The content is provided “as is.” Given the rapid evolution of technology, some content, steps, or illustrations may have changed.

A voice chatbot is a virtual assistant that hears, perceives, and responds to your voice input. Voice chatbots read your voice input, analyze the task at hand, and respond with relevant answers. These conversational interfaces understand natural language because they use natural language processing and natural language understanding and are trained to respond in natural language.

IBM watsonx Assistant provides a question and answer system that can answer questions that are posed in natural language. You can prepare the questions per your business requirements, using different intents. You can then configure watsonx Assistant with voice functions. For that, you use three IBM services.

  1. watsonx Assistant
  2. Watson Speech to Text
  3. Watson Text to Speech

After configuring and starting the required services, you can integrate the voice solution with watsonx Assistant.

This tutorial explains how to implement voice over web chat using watsonx Assistant, which means interacting with a chatbot with your voice instead of typing. The tutorial demonstrates how to connect watsonx Assistant with Wikipedia for question/answer responses by using voice to communicate questions and responses.

For this solution, there is a GitHub repository that contains HTML code for a voice UI microphone button along with a watsonx Assistant chatbot and JavaScript code for sending the request to the Watson Speech to Text and Watson Text to Speech Services.

Prerequisites

  • An IBM Cloud account
  • A watsonx Assistant instance
  • A Watson Speech to Text instance
  • A Watson Text to Speech instance

Estimated time

It should take you approximately 30 minutes to complete the tutorial.

Steps

Now, let's set up the voice chatbot on your local system. You first download all of the configuration files, including the HTML file for the voice bot, JavaScript files for calling the APIs, and other dependencies from the parent directory. You configure all API keys and the path as described in this tutorial. Then, you launch the HTML file in the browser.

This Voice-over-Watson configuration with Wikipedia APIs uses cloud functions that are known as webhooks. You can ask a question that uses keywords such as "tell me about" or "what is," and the chatbot tries to find a short summary from Wikipedia. The best thing about Voice-over-Watson is that you can get answers in speech.

Voice function integration with watsonx Assistant

Connect watsonx Assistant with the voice UI so that you can communicate with the chatbot by using the microphone button.

Step 1. Download files

  1. Download all of the configuration files, including the HTML file for the voice bot, the JavaScript files for calling the APIs, and other dependencies from the parent directory.

Step 2. Make configuration changes to HTML file

There are two JavaScript files in the HTML code. The first file is recoder.js, which contains functions for recording the voice. The second file is voice.js, which sends the voice file to the Watson Speech to Text Service and gets the result from the Watson Text to Speech Service. The file also contains a microphone icon with watsonx Assistant.

  1. Paste the following code into the body section of the main HTML file.

      <img class="voice" id="recordVoice" src="./img/mic.png">
  <div id="log"/>
  <script src="scripts/recorder.js"></script>
  <script src="scripts/voice.js"></script>

    Pasting code into HTML

    Note: Ensure that all required files are available under the specified path.

  2. Paste the following code into the HTML file so that you can set the design and style according to the requirements.

    <head>
      <title>Home Lending pal</title>        
      <link rel="stylesheet" href="./css/style.css">
</head>

    Including CSS file

  3. Launch the HTML file so that the microphone icon appears near watsonx Assistant. When you click the microphone button, you can use your voice to communicate with the chatbot.

Step 3. Set up all required services with the voice chatbot

To set up watsonx Assistant, you add details to the voice.js file. The following examples show the services and keys. You replace the example services and keys with your own Service URL and keys.

  1. Set the IntegrationID, Region, and ServiceInstanceID of watsonx Assistant. All of the required details are available in the embedded watsonx Assistant code.

  2. Enter your API key (base64 encoded).

    Adding details to voice.js file

  3. Set up the URL of Watson Speech to Text in the SSTInvoke function, and set up the URL of Watson Text to Speech in the PlayAudio function in the Voice.js file. You also set up the API key (base64 encoded).

    Set URL of Speech to Text

After setting up all of the required APIs and keys, all of the services are integrated into the main HTML file. No additional embedded watsonx Assistant code is required. Watsonx Assistant can be embedded directly with JavaScript and deployed by using HTML.

Watsonx Assistant voice chatbot with Wikipedia API integration

Now, let's connect the voice chatbot to Wikipedia. This way, you can ask the watsonx Assistant voice chatbot any question, and the chatbot tries to find the corresponding answer from Wikipedia using the webhook API function. You can ask anything with the tag words “What is“ or "tell me about.” After following the previous configuration steps, you should have an HTML file that you can open.

  1. Prepare the user input parameters for the watsonx Assistant dialog box so that the webhook function fetches the text that is entered by the user in the chatbot. Enter "<?input_text?>" in the user_input parameter field so that the user input is passed to the webhook function.

    Entering Key/Value parameters

  2. Prepare the webhook function that can access the watsonx Assistant user input and pass it to the Wikipedia API. The webhook function takes the user input and removes some unwanted words like "What is" and "Tell me about it," extracts important words that the user wants to know about, and passes them to the Wikipedia API.

    Preparing the webhook function

The webhook Wikipedia API helps to search for important terms on Wikipedia and gives a short summary about it. The short summary is the short description about the topic that the user is looking for. The following image shows the short summaries from Wikipedia for a couple of "what is" questions.

watsonx Assistant chatbot screen

Summary

This tutorial explained how to how implement voice over web chat by using watsonx Assistant. The tutorial demonstrated how to connect watsonx Assistant with Wikipedia for question and answer responses by using your voice to communicate questions and responses.

To see how this solution works, look at the demo.