🧑‍💻 Unlocking AI's Potential: Crafting Chatbots For Your Website Using OpenAI’s Assistant and Voiceflow

Introduction to AI Chatbot for Website

Artificial Intelligence (AI) is not just for tech experts anymore. With tools like OpenAI’s Assistant and Voiceflow, anyone can create smart chatbots for their website. These chatbots can chat with visitors, answer questions, and improve the overall experience on your site. It's an exciting way to make your website more interactive and user-friendly, opening up new possibilities for online communication and connection.

I. OpenAI’s Assistants API

1. What is OpenAI’s Assistant API?

The Assistants API allows you to build AI assistants within your own applications. An Assistant has instructions and can leverage models, tools, and knowledge to respond to user queries. The Assistants API currently supports three tools: Code Interpreter, Retrieval, and Function calling.

2. The Differences Between GPTs and OpenAI’s Assistant

The main difference between GPTs and AI Assistants is the user requirement.

1. GPTs: These are tools that anyone can use to create chatbots. They are easy to use but you can't change their appearance much.

2. AI Assistants: These are more like digital helpers who can do various tasks like coding or gathering information. They need some programming knowledge to use and let you change how they look and work more than GPTs.

In simple terms, GPTs are for everyone and easy to set up, but with limited customization. AI Assistants are more flexible but require some tech skills to use.

3. How to Craft your AI Assistant in 2 minutes

Step 1: Sign Up for OpenAI and Access Assistants Platform

• Create an OpenAI Account: Go toOpenAIand sign up.

• Access the Assistants Platform: Navigate to the Assistants section on OpenAI’s platform.

Step 2: Create an AI Assistant

In this example, we're creating an AI Fire Assistant, who will help you find the information related to your keywords, with the Code Interpreter and Retrieval tool enabled:

An Assistant is a configurable entity designed to interact with user messages. This configuration can be tailored using several parameters:

• Instructions: Guidelines defining the Assistant's behavior and response style.

• Model Selection: You can choose from various GPT-3.5 or GPT-4 models, including those that are fine-tuned. For the Retrieval tool, specifically, you must use either the gpt-3.5-turbo-1106 or gpt-4-1106-preview models.

• Tools: The API includes built-in tools like Code Interpreter and Retrieval, developed and maintained by OpenAI.

• Upload files: upload pertinent files to provide the AI Assistant with sufficient information to address your inquiries accurately.

These are some format files that can be uploaded into the platform, check the full list here.

• Custom Functions: You can create custom function signatures, which work similarly to OpenAI's function calling feature, allowing for tailored functionalities within the API.

  → Code Interpreter enables the assistant to write and run code. This tool can process files with diverse data and formatting, and generate files such as graphs.

  → Retrieval enhances the assistant with information from uploaded files, automatically responding to user requests after file upload.

When you complete it, you will have a display like the below picture.

Step 3: Create and add the Message to a Thread

To start a conversation in the app, click the Tets in the Playground button on the right sidebar. This creates a new Thread.

A Thread is like a chat. It's good to start one Thread for each user at the beginning. Use Messages within the Thread to share specific details and files for that user.

Threads can be big; you can send lots of Messages in a Thread. The system is smart enough to manage these Messages, making sure they fit within the model's limits by cutting them down if needed.

Step 4: Run the Display the Assistant's Response

Next, you can easily press the “Add and run” button and see the Assistant reply.

II. Create a Chatbot for Your Website with Assistant and Voiceflow

You already have the Assistants and there is one outstanding use of Assistant, you can create the Chatbots for Your Website with Assistant and Voiceflow. How to create that, is not as hard as you think, you don’t need to write a single code about this,

1. What is Voiceflow?

Voiceflow is a platform that assists teams in creating and launching conversational AI agents for a wide range of applications. It is designed to be user-friendly, enabling both skilled developers and those without extensive programming knowledge to build sophisticated AI agents.

Key features of Voiceflow include:

• Ease of Use: It offers a user-friendly interface for designing AI agents.

• Team Collaboration: The platform supports collaborative features for team-based development.

• Customization and Flexibility: Provides a no-code builder and APIs for customizing agents.

• Deployment Options: Agents can be deployed across various platforms, including websites.

• Analytics Tools: Voiceflow includes analytics and transcript tools for performance evaluation and improvement.

• Community and Support: The platform is backed by a strong community and provides extensive support and training.

These features make Voiceflow a versatile and accessible tool for creating conversational AI agents.

2. Start Creating with Voiceflow

If you don’t know Voiceflow, you can easily come to their interface and sign up with your Google account within 5 minutes.

Voiceflow offers you four pricing plans with different features for different purposes. You can go to their website to see more features of those plans. You can still easily create a chatbot for your website using the Sandbox plan.

3. Step-by-step Tutorial

First, you need to create one OpenAI Assistant, you can follow the guide in the section above to create an Assistant in 2 minutes, and now you can start designing your chatbot for your website.

Step 1, Start a new project.

In this tutorial, we will start from statch with a blank project. You need to choose the “New Assistant” button

Decide the name of your Assistant, choose the Modality “Chat” and the Language is English. Press Continues, add members of your team (if you have one), and then Create Assistant.

Next, you need to delete all the templates Voiceflow provided you to start with a blank project.

Step 2, Start creating your chatbots by setting Variance.

There will be two variances, API Key and Assistant ID, you need to create new variances and give them names. The API Key here is your Open AI’s API key, you can find it in your User Settings.

The AssistantID here is your Assistant ID’s. Here is our Assistant's ID:

asst_G6ZPq7UTRYPKNZ5Et6Ho8FBW

Step 3, Make an API call.

After setting variances with API Keys and Assistant ID, you need to make an API call to get the information. First, you need to choose the API calls, drag and place them into your project.

We will have a blank block like below:

Then, you need to come to the “Create Thread” section of OpenAI here and get some information to fill blank spaces like this.

Remember to make the variances fit your settings in the beginning.

Next, click the “Send Request” to see if it can generate for you what you need here is the thread ID.

Step 4, Generate the Auto Reply and Receive the question of customers.

We will start by choosing the Capture to make the Chatbot read the customer's question.

Your customer’s reply is considered a variance, so you need to set it as a variance named “last utterance”

You also need to make the chatbot reply to customers by adding text messages in the chat using Talk block.

You can write the greeting chat by yourself or let AI help you generate.

The “Opening Chat” block would look like this.

Step 5, Continuously creating API calls.

In this step, you need to create about five API calls as in step 3, and connect them to make the project work. You need to keep this information in step 3:

  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $OPENAI_API_KEY" \
  -H "OpenAI-Beta: assistants=v1" \

In these blocks, you will get the API link in these sections: Add Message to Thread, Run Thread, and Retrieve Run.

With the Add Message to Thread block, don’t forget to add the body of code and change the “Capture Response” section. Here is your code and the interface of the blocks will look like.

{
      "role": "user",
      "content": "{last_response}"
    }

Remember to click “Send Request” to test if the block can run smoothly or not. The capture Response we should receive in this block is the Message ID, you can name the variance different name.'

What we capture here is:

msg_dNRXjlzhOEVe4TEWfoSQdErV

Similar to the next block, Run Thread. We still need the body code in this block.

{
    "assistant_id": "{assistant_ID}"
  }

And here is the Capture Response.

You should receive the Run ID in this block.

In the Retrieve Run block, you need to receive the run status to decide whether the project runs or not

You should focus on this line

"status": "completed"

Step 6, The IF Logic.

In the Retrieve Run block, the run status is not always “Completed”, it can be “In Progress”, “Queued” or “Other”. However, the run status needs to be “Completed” so we can move to the next block. So, we should create one logic block using the “IF” command.

Here is an example of how this block should be done.

Step 7, Get Message ID.

We will do this step similar to those steps to get the API calls before. In the Get Message ID block, the response we need to focus on here is line 21.

"message_id": "msg_t0TeNzOxKQpXIF5BiHag5Gj7"

To capture it in the Capture Response, we need to write some complex stuff.

response.data[0].step_details.message_creation.message_id

The capture response in the next block is not as complicated as the Get Message ID block.

You can copy from this code block.

response.content[0].text.value

Step 8, Get the answer from ChatBot to the customer.

Again, you need to use the Text block in this step and the variance here is “assistantreply”, you get from the last block.

Step 9, Check the connection of each block together.

When setting up the API call, make sure the 'Success' part is connected to the next step so it works right. And for the last block, link it to the 'Opening Chat with the last utterance' to keep the conversation going.

Step 10, Test the project before publishing.

In this step, you should choose the Run feature to test and fix the error before publishing and adding it to a website.

You can act like a customer to test the knowledge of your assistant.

Step 11, Publish your assistant.

Choosing the Publish button and name it, your assistant is now ready to be added to your website.

We already named our assistant AI Fire, so we will not change it.

You need to choose the “Embed Widget” to see what your ChatBot can look like on your website.

You can use this function below to decide your ChatBot appearance.

Step 12, Add your ChatBot to your website.

You need to get the code of the project that Voiceflow provided you and add it to your website code. As instruction by Voiceflow, you need to add the code before the end of the <body> of the whole website code.

Step 13, Test your ChatBot the final time.

You can copy your website code with your ChatBot code to this website to test whether it runs smoothly or not the final time.

Here is what our ChatBot looks like on the website.

4. ONE THING TO NOTE

This tutorial shows you how to create and put a ChatBot on your website without coding. But, this way might not be the quickest, and you could spend a lot of time fixing problems in your project.

III. Conclusion

In conclusion, using OpenAI's Assistant with Voiceflow is a new way to add chatbots to your website. It's an easy-to-use method suitable for everyone, whether you're a beginner or experienced. However, keep in mind that this approach is still new and needs a lot of improvement. It might not be the most effective way to create and add a chatbot for your website right now, but it's a promising step towards making your site more interactive and user-friendly with AI technology.

For more information and a more detailed tutorial, you can check this video from Voiceflow: here

If you are interested in other topics and how AI is transforming different aspects of our lives, or even in making money using AI with more detailed, step-by-step guidance, you can find our other articles here:

• Next-Level GPTs Mastery: Enhancing Your Custom GPTs with Zapier

• Building an Animated YouTube Channel using Free AI tools - Earn Money by Views*

• Easy Voice Cloning Guide: Create Custom Audio in Minutes!*

• ChatGPT's New Memory Feature: A Detailed Tutorial*

• Create Your Dream AI Website with 10Web: A Complete Guide

_{*indicates a premium content, if any}