Building an AI chat for a website

With the Alan AI Platform, you can quickly build an AI chat with a ChatGPT-like experience for your website, webpage or web app. The Alan AI Web Chat transforms the way customers interact with the apps and enhances the user experience with:

  • Real-time question answering: the Alan AI Web Chat employs existing data sources — website pages, documentation, articles, policies and so on — to automatically manage customer queries and give answers in real time.

  • Quick access to any resources: the Alan AI Web Chat helps streamline website navigation to access website sections, pages and related resources — PDFs, videos and so on — in one step.

  • Actions in the app: the Alan AI Web Chat allows completing tasks in any software with voice or text commands.

In this tutorial series, we will create an AI-powered web chat for a personal webpage showcasing a developer portfolio. The users will be able to interact with the AI assistant built into the website using text commands to get answers to their questions, navigate in the website and perform actions.

In the first tutorial of the series, we will embed a web chat to the website and allow it to answer questions using the webpage content.

Note

To view the code of the website and dialog scripts, go to the Alan AI GitHub repository.

What you will learn

  • How to add an AI chat with voice and text commands to a website

  • How to create a chat like ChatGPT with custom knowledge for a website

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

  • How to build an intentless dialog for an AI assistant

What you will need

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

Step 1. Sign up for Alan AI Studio

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

  1. Go to Alan AI Studio.

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

    Note

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

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

../../../_images/creating-project.png

Step 2. Enable the AI chat

Next, we will enable the AI chat for your Alan AI Studio project.

  1. In Alan AI Studio, open your AI 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 the AI chat to use the text input mode, and have it displayed when the user taps the AI assistant button in the webpage. To do this, we will:

    • Set the Open text chat by default toggle to the off position

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

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

../../../_images/customizing-chat.png

Step 3. Add the chat to a website

Next, we need to add the AI chat to the website. Alan AI supports multiple web frameworks. In this tutorial, we will add to a webpage created with HTML and JavaScript.

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

  2. Scroll down to the Embed code example section.

  3. On the JavaScript tab, to the right of the font block, click Copy and paste the code to the <head> section of the page.

  4. To the right of the Alan AI button container code, click Copy and paste the code to the <body> section of the page.

  5. To the right of the Alan AI button code, click Copy and paste the code closer to the end of the <body> section of the page.

../../../_images/integrating-chat.png

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

../../../_images/testing-chat.png

Step 4. Provide knowledge for the AI chat

Our AI assistant should be able to answer users’ questions about the page owner’s experience. To let the AI assistant use the content of the webpage, we will use Alan AI’s Q&A service. The Q&A service allows crawling web resources to retrieve content and create a text corpus that the assistant relies on for automatic question answering.

  1. To the dialog script, add the following code:

    Dialog script
    corpus({
    url: "https://alan-ai.github.io/website-chat-demo/",
    depth: 1,
    maxPages: 50
});

    Here, url points to a webpage 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.

  2. To provide additional data for the AI assistant, add another corpus() function with plain text strings:

    Dialog script
    corpus(`
    My name is Alan Turing Jr.
    I am a highly skilled software developer with expertise in machine learning and conversational AI.
    I have a strong mathematical background.
    I have a Master's degree in Computer Science and extensive experience in deep learning.
    I have spent the past several years specializing in the development of conversational AI systems.
    I possess strong proficiency in machine learning and mathematical modeling.
    I am also skilled in NLP techniques and tools.
    I am highly proficient in Python.
    I have worked with a reach set of libraries and tools such as TensorFlow, Keras, PyTorch, and scikit-learn.
`)

In the webpage, click the AI chat button and type questions on topics covered in the webpage and text corpus. For example, we can ask:

  • Who are you?

  • What are your strengths?

../../../_images/checking-result.png