Building an AI-powered voice and text chat trained on custom data

With the Alan Platform, you can quickly build an AI-powered chat for your website, webpage or web app. The chat will employ a custom knowledge base built on top of existing textual data sources - FAQ pages, manuals, articles, guidelines, policies and so on - to automatically handle customer queries and give answers through the text and voice channels.

To create a custom knowledge base for a virtual assistant or chatbot, Alan offers its Q&A service. The Q&A service allows crawling specific web resources to retrieve content and create a text corpus that the assistant will rely on for automatic question answering.

Because the text corpus is created with your own content, domain-specific data, and information relevant to your business, enterprise and application, you have complete control over how the assistant or chatbot responds and can ensure the replies are accurate and trustworthy.

The AI-powered chat can be integrated into web pages and apps built with React, Angular, Vue, Ember, Electron and JavaScript and can be used for a variety of scenarios:

  • Customer service

  • Employee training

  • Onboarding

  • Knowledge management and so on

In this tutorial, we will create a voice and text chatbot that will provide automated customer support. The chatbot will be plugged to a web page and will use FAQs published online for question answering.

What you will learn

  • How to add a voice and text chat to a website

  • How to build an intentless dialog for a virtual assistant

  • How to build an AI-based chat like ChatGPT for your web app

  • How to create a chatbot driven by large language models (LLMs) and generative AI

  • How to add semantic search to a virtual assistant

What you will need

This is a getting started tutorial. No prior knowledge is required.

Step 1. Sign up for Alan Studio

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

  1. Go to Alan Studio.

  2. Sign up with a Google, GitHub account or with your email address.


    When you sign up to Alan Studio, Alan adds free interactions to your balance to let you get started. To get additional interactions to your balance, link your Alan account with your GitHub account and give stars to Alan repositories. For details, see Adding free interactions.

  3. In Alan Studio, click Create Voice Assistant. Choose to create an empty project and give it any name you want.

Step 2. Enable the voice and text chat for your project

Let’s enable a voice and text chat in the Alan Studio project.

  1. In Alan Studio, open your virtual assistant project.

  2. At the top of the code editor, click Integrations.

  3. In the options section, to the right of Text chat, click Change.

  4. In the Web / Text chat view, set the Enable text chat toggle to the on position.

  5. In the General section, define how your text chat should behave.

    In this tutorial, we want our chat to support two input modes: voice and text, and have it displayed when the user taps the chatbot button in the webpage. To do this, we will:

    • Leave the Open text chat by default option not enabled

    • Set the Enable voice input in text chat toggle to the on position

  6. Customize the text chat to match your preferences. You can edit the chat name in the header, change the color scheme and font size.


Step 3. Add the chat to a web page

Next, we need to add the voice and text chat to a web page. Alan supports multiple web frameworks. For simplicity’s sake, we will add the chat to a simple webpage.

  1. In Alan Studio, at the top of the code editor, click Integrations.

  2. Scroll down to the Embed code example section.

  3. On the JavaScript tab, click Copy all and save the copied code as a new HTML file.

Make sure the chat is added to the webpage: open webpage and click the virtual assistant button to bring up the chat.


Step 4. Use custom data sources to build the chat knowledge

Our support chatbot should answer common users’ questions based on the FAQ page published online. To let the chatbot use the content of the FAQ page, we will use Alan’s Q&A service.

To the dialog script, add the following code:

Dialog script
    url: "",
    depth: 2

Here, url points to a webpages to be indexed and depth defines for far down the website the crawler must go to retrieve the content. For details, see Setting the crawl depth.

Step 5. Test the voice and text chat

In the webpage, click the chatbot button and type in or ask questions covered in the indexed FAQ page. For example, we can ask the following questions:

  • How long does it take for me to get a refund?

  • Can I use PayPal?

  • Are there gift cards?