Build AI Chatbot with Knowledge Base

Voiceflow AI Chatbot Returns Links from Knowledge Base

Author

Sabrina Ramonov
September 07, 2024

In this post, I’ll show you how to build an AI chatbot using Voiceflow, hooked up to a personal knowledge base of content.

As a fun feature for creators, the chatbot returns direct links to social media posts, encouraging users to explore more of your long-form content!

I’ll walk through creating the chatbot, creating the knowledge base, and building a continuous loop, so that users can ask multiple questions.

Here’s the Youtube version of this post:

Table of Contents

Enjoying My Content?

If my free AI education content has helped you or inspired you:

I would love for you to share your story and inspire others too!

👉️ Share your experience here 👈️ 

Thank you so much!!

Hearing about your success stories, no matter how small, is truly what motivates me to keep going and share awesome AI education for free! 😍 

Introduction to Voiceflow

Voiceflow allows you to design and deploy conversational AI chatbots without needing to code.

It’s one of the easiest chatbot builders to start with. The knowledge you learn building on Voiceflow is easily transferrable to other chatbot builder platforms.

I’m using the free plan which is limited to 50 knowledge base sources.

If you’re just starting out, this is plenty to build a fully functional chatbot.

Step-By-Step Tutorial

Step 1: Sign Up for Voiceflow

First, sign up for Voiceflow’s free plan.

Once you've created your account, you’ll see the dashboard where you manage your workflows.

Step 2: Create New Workflow

In the dashboard, start by creating a new workflow.

Click on the "New Workflow" button.

You'll be taken to the editor, which is a node-based interface.

You drag and drop nodes onto the editor, then connect them together in a logical flow.

The left side of the editor lists your available building blocks, including AI blocks, logic conditions, and interaction modules.

Step 3: Set Up Initial Chatbot Messages

The first step is to define how our chatbot interacts with users.

Begin by dragging a "Talk" block from the left menu into the main workspace. This block will be the first message the user sees when they interact with the chatbot.

  1. Drag a "Message" block into the editor.

  2. In the message field, type a welcome message. For example:

    • Message 1: "Hello! Welcome to Sabrina’s AI chatbot."

    • Message 2: "I am Sabrina’s AI assistant, trained on her newsletter. How can I help you today?"

  3. You can add multiple messages by dragging and dropping additional message blocks. Connect the blocks to ensure the conversation flows naturally.

Step 4: Add User Interaction with Buttons

Next, I’ll give users options for how to interact with the bot. They can either ask a question or connect with me on LinkedIn.

Here’s how to implement this:

  1. Drag a "Buttons" block from the "Listen" section into the workspace.

  2. Set up two buttons:

    • Button 1: "Ask a Question"

    • Button 2: "Connect on LinkedIn"

  3. For the LinkedIn button, set up an action by selecting "Open URL" and pasting your LinkedIn profile link. You could replace this with a link to anything, such as your YouTube, TikTok, newsletter, etc.

Step 5: Capture User Input

Now, we need to capture the user's input when they ask a question.

Sett up a "Capture" block, which will store the user’s input.

  1. Drag the "Capture" block from the "Listen" section into the workspace.

  2. Link it to the "Ask a Question" button.

  3. Set the block to capture the user's input and store it in a variable, like last_utterance. This variable will hold the user's question, which we’ll need in order to generate a helpful relevant answer.

Step 6: Setting Up API Calls to the Knowledge Base

Next, let’s connect the chatbot to our knowledge base via API call. So, our chatbot can search the knowledge base to find contextually relevant answers.

Using an API call allows a bit more flexibility, as we want to store information like the direct URLs to knowledge base articles.

  1. Drag an "API" block from the "Developer" section into the workspace.

  2. Copy these settings exactly into your API node:

For the Body field, copy and paste the codeblock below. It should include the parameter question which contains the user’s last_utterance. 

{
  "chunkLimit": 2,
  "synthesis": true,
  "settings": {
    "model": "claude-instant-v1",
    "temperature": 0.5,
    "system": "You are an AI FAQ assistant. Information will be provided to help answer the user's questions. Always summarize your response to be as brief as possible and be extremely concise. Your responses should be fewer than a couple of sentences. Do not reference the material provided in your response."
  },
  "question": "{last_utterance}"
}

Step 7: Processing the API Response

Here’s the flow:

The chatbot sends the user’s question to the knowledge base, and then it will receive a response containing relevant articles from the knowledge base.

We need to capture this response data.

Update the last section of the API node settings:

This stores the 1st answer from the knowledge base in variable answer, the 2nd answer from the knowledge base in variable answer2, and the URL of the 1st knowledge base article in url.

If you want to also save the URL of the 2nd knowledge base article, simply click the “+” button and set APPLY TO to url2.

Step 8: Generating a Coherent Answer with ChatGPT

Yay! Now our chatbot’s equipped with context from the knowledge base.

Next, I’ll send this context to ChatGPT to use in a coherent answer.

  1. Drag "Set AI" block into the workspace.

  2. Set the data source to "AI Model”.

  3. Feed in the user’s question (last_utterance) and the response variables (answer1, answer2).

  4. In the prompt, instruct ChatGPT to use the knowledge base information to answer the question if relevant, or to ignore it if not.

Here’s the prompt for you to copy and paste: 

Your task is to answer the user's QUESTION clearly.

First, review ANSWER1 and ANSWER2 from the knowledge base. If they are relevant to the QUESTION, use them in your answer. If they are NOT relevant to the QUESTION, do not use them in your answer.

<question>
{last_utterance}
</question>

<answer1>
{answer}
</answer1>

<answer2>
{answer2}
</answer2>

This is a fairly basic prompt. The key idea is to ensure ChatGPT uses the knowledge base information only if it’s relevant. To improve this prompt, check out my prompt library for inspiration.

Step 9: Return Answer and Relevant Link

The final step in the conversation is to return the chatbot's answer to the user, along with the most relevant link from your content.

  1. Drag another "Message" block into the workspace.

  2. In the message field, include the output from ChatGPT (stored in the output variable).

  3. Add another message that displays the URL of the relevant content. For example: "This content might help you: {url}"

Here’s how it looks:

Step 10: Creating the Interaction Loop

One of the key features of a chatbot is the ability to handle multiple questions in a single conversation. To achieve this, we need to set up a loop:

  1. After the bot provides an answer, drag an arrow back to the "Capture" block. This allows the chatbot to listen for the user’s next question.

  2. Test the loop by asking multiple questions during a conversation and ensure that the bot continues to respond appropriately.

Notice the arrow in blue, which connects the chatbot’s last message to Capture User Reply node:

Step 11: Populate the Knowledge Base

To populate the knowledge base, you can manually add content or import files. You can also import your blog’s sitemap, which is what I did.

Here’s how:

  1. Go to the "Knowledge" section in Voiceflow.

  2. If your blog platform supports it, enter your site's sitemap URL (e.g., yoursite.com/sitemap.xml). This will import your blog posts automatically.

  3. You can also upload files (PDFs, text documents) or add URLs manually.

Testing and Deployment

Awesome, we’ve built our chatbot and populated our knowledge base!

Time to test everything 🤘 

  1. Click "Run Test" to interact with your chatbot. You’ll see the workflow nodes highlight as it progresses.

  2. Ask different questions to see how the bot performs, and ensure that it returns accurate answers from the knowledge base.

  3. Finally, to deploy your chatbot, click "Publish" and follow the instructions to embed it on your website or share the prototype link.

Wrap Up

And, that’s a wrap!

Fully functional chatbot, powered by a knowledge base, in minutes 😋 

Our chatbot not only responds to user questions but also encourages them to explore more of your content by providing relevant links. 

You can deploy this on your website and iterate as your knowledge base grows.

Overall, I think Voiceflow offers an easy entry point if you’re new to chatbots.

Other platforms worth exploring:

  • Agentive

  • Flowise

  • RelevanceAI

One downside of Voiceflow is weak integration with Whatsapp. As of September 2024, you have to fork a codebase and deploy it yourself, which is far from ideal.

BONUS: App I Wish Existed 🙏 

As a content creator, the most painful part of chatbot development, and the reason WHY I haven’t deployed this in production yet:

Syncing ALL my content, videos, and newsletters to a knowledge base!

Here’s an idea for those of you entrepreneurial minded:

Chatbot specifically designed for content creators!

Voiceflow’s knowledge base is simply not designed for content creators.

I need a knowledge base auto-synced with all my social media content, videos, and newsletters. I should NOT need to build separate workflow automations to pull my social content, transcribe videos, and upload this data to the knowledge base on a daily basis. I don’t want to code anything or configure data pipelines. I want a knowledge base designed for creators, automatically capturing the “knowledge” (i.e. social media content) we produce daily.

The goal of chatbot sessions is to guide my followers to explore MORE of my content, rather than ending the chat (like in customer support use cases). When my chatbot answers questions, its answer should always include the top 3 relevant links to my other content.

And for deployment, I want a simple SMS or Whatsapp number people can text.

Is that too much to ask for?! 🤣 

How would you rate this newsletter?

Login or Subscribe to participate in polls.

Did I miss anything?

Have ideas or suggestions?

Message me on LinkedIn 👋

Sabrina Ramonov

P.S. If you’re enjoying my free newsletter, it’d mean the world to me if you share it with others. My newsletter just launched, every single referral helps. Thank you!