How to Implement Your Own ChatGPT-Based Chatbot: A Step-by-Step Guide
12 Dec, 2024 | Tech News| Web Design
Creating a chatbot based on ChatGPT for your website can enhance user engagement, provide instant support, and even create content for your platform. Opie, our new restless assistant, and I are here to help you every step of the way. Here’s a detailed guide to help you build and implement your own chatbot.
Step 1: Choose the Right Tools and Services
You need access to tools and platforms to integrate AI capabilities into your website:
- OpenAI API: Get API access for ChatGPT from OpenAI.
- WordPress (or other CMS): If you’re using WordPress, plugins like AI Engine can simplify the integration.
- Web Hosting: Ensure your hosting platform can handle the additional load from API calls.
- Programming Knowledge: A basic understanding of Python will be helpful when creating the dataset for the fine-tuning process.
Step 2: Set Up OpenAI API Access
1. Create an Account on OpenAI: Sign up at OpenAI (https://openai.com/) and get your API key.
You can create it here: https://platform.openai.com/api-keys
2. Understand Pricing and Limits: Ensure the API costs align with your budget and scale requirements.
On this page, you can link your card: https://platform.openai.com/settings/organization/billing/overview
Don’t forget to enable a Budget Limit to avoid unexpected charges.
With the current prices for the GPT-4o we estimate:
TASK | COST |
4.500 words in questions per month | 0.0009 $ |
15.000 words in replies | 0.012 $ |
3.000 words in fine tuning | 0.015 $ |
3. Secure Your API Key: Store it safely to prevent unauthorized access.
Step 3: Plugin Install & Setup
1. AI Engine Installation:
We are going to use AI Engine on WordPress.
Find the plugin and install it. Go to settings and enable the Chatbot and the Finetunes modules.
At chatbot tab use the settings according to your needs and don’t forget to set the instructions that explain to the chatbot its general job. In our case we have used: “You are an assistant for Open Technologies (also known as Open Tech), a creative cooperative agency based in Corfu, Greece. Your role is to assist website visitors with inquiries about the agency and its services, based strictly on the data you’ve been fine-tuned with. Maintain a friendly and casual tone in all interactions. Only share specific links (URLs) that have been provided during the fine-tuning process—never generate or suggest new links. If a visitor’s question falls outside the scope of the information you’ve been trained on, politely let them know that your expertise is limited to agency-related topics based on the data that have been provided during the fine-tuning process.”
2. Fine Tuning
Now, we reach the most important task: fine-tuning the chatbot with our data. This step will train the bot to respond accurately. To begin, navigate to the ‘Finetunes’ tab in the Dataset Editor. Here, you can define the questions and corresponding answers that you want the bot to provide.
There are two options for adding this data: you can either create the questions and answers directly in the interface or prepare them in a JSON file and upload it. The first option is simple and quick, but it won’t yield the best results. Since fine-tuning is a crucial step, we strongly recommend using the second method, which we’ll explain in detail.
Why is it important to upload the data in JSON format? To effectively train the bot, you need a large dataset. OpenAI suggests starting with at least 50 well-crafted examples and evaluating the model’s improvement after fine-tuning.
3. Upload your Data in JSON Format for Better Results (skip this step if you opted for the manual upload process)
Let us guide you through the process of creating and uploading the JSON file.
The process involves crafting a question you want the bot to respond to. Then, you use ChatGPT with the following prompt:
“I am working on fine-tuning the GPT-4 model to create a chatbot for my web design agency. I’ll provide a question and its corresponding answer, and I want you to generate ten variations of both the question and the answer using diverse phrasing. Is that clear? Please confirm your understanding and explain your approach.”
Assuming you provide ChatGPT with 10 question-answer pairs, this method will result in 100 varied question-answer sets.
You take all these sets and paste them in an excel with this exact format.
In role “system” it’s a good idea to use the same instructions as before at step 3.1. In role “user” you input the question and in role “assistant” you give the reply. You continue like that until you finish with all the questions and aswers. Save the file in excel format and keep it.
Steps to Convert Excel to JSON
Now save the same file as a CSV file (e.g., data.csv).
Convert to JSON with Python: Use the following Python script to convert your structured Excel (CSV) data into the desired JSON format:
import csv
import json
# Input CSV file
csv_file = 'data.csv'
# Read the CSV and organize data
conversations = {}
with open(csv_file, mode='r', encoding='utf-8') as file:
reader = csv.DictReader(file)
for row in reader:
conv_id = row["Conversation ID"]
if conv_id not in conversations:
conversations[conv_id] = {"messages": []}
conversations[conv_id]["messages"].append({
"role": row["Role"],
"content": row["Content"]
})
# Transform to list format
output_data = [value for value in conversations.values()]
# Write JSON to file
with open('output.json', mode='w', encoding='utf-8') as json_file:
json.dump(output_data, json_file, indent=2, ensure_ascii=False)
print("JSON file generated successfully!")
Save & Run the Python Script
Open a text editor (e.g., Notepad or Visual Studio Code).
Paste the Python script into the editor.
Save the file with a .py extension (e.g., convert_csv_to_json.py).
Save the CSV file from the previous step (data.csv) in the same directory as the Python script.
Open Command Prompt.
Run the script by typing:
python convert_csv_to_json.py
The script will generate a JSON file (e.g., output.json) in the same folder.
Open the output.json file in any text editor or JSON viewer to verify the results.
Resulting JSON
The script generates the following JSON structure:
[
{
"messages": [
{
"role": "system",
"content": "You are an assistant for Open Technologies (also known as Open Tech), a creative cooperative agency based in Corfu, Greece. Your role is to assist website visitors with inquiries about the agency and its services, based strictly on the data you’ve been fine-tuned with. Maintain a friendly and casual tone in all interactions. Only share specific links (URLs) that have been provided during the fine-tuning process—never generate or suggest new links. If a visitor’s question falls outside the scope of the information you've been trained on, politely let them know that your expertise is limited to agency-related topics based on the data that have been provided during the fine-tuning process."
},
{
"role": "user",
"content": "What services does your agency offer?"
},
{
"role": "assistant",
"content": "Open Technologies focuses on web design, digital marketing, and consulting services. We take on the responsibility of creating websites, developing mobile apps, launching social media marketing campaigns, or managing your project with skilled project managers."
}
]
},
Key Tips
- Use UTF-8 encoding to handle special characters in content.
- Ask chatGPT if you need help to run the Python script on your OS or if you encounter any errors.
Once you have finished and you have the JSON file ready you can upload it to WordPress by hiting “Import” in Finetunes – Dataset Editor.
4. Start the Fine Tune Process
AGAIN! Don’t forget to enable a Budget Limit (here: https://platform.openai.com/settings/organization/billing/overview) to avoid unexpected charges.
Once your data is ready, click ‘Upload to AI’. If the API connection is working correctly, you should see the fine-tuning process progress on this page: https://platform.openai.com/finetune. Depending on the dataset size, the process will take some time, but once completed, you’ll be able to use the fine-tuned model for your chatbot.
Step 4: Test Your Chatbot
1. Run Initial Tests: Check the chatbot’s functionality in different scenarios.
On AI Engine on the tab Chatbot we have to go to AI Model and choose the Model we have just created.
Once your chatbot is ready, you can start using it. It’s essential to test its responses thoroughly. We recommend beginning with the questions you included during the fine-tuning process. Afterward, expand your testing to cover a broader range of related and unrelated questions to ensure its adaptability and accuracy. Are you satisfied with the results?
2. Fine-Tune Responses:
If you’re satisfied with the results, no further action is needed!
However, if the results aren’t meeting your expectations, you’ll need to adjust your prompts and repeat the fine-tuning process. This step is crucial and may require some trial and error to achieve the desired outcome.
Step 5: Deploy Your Chatbot
1. Launch on Your Website: Integrate the chatbot into your website’s key pages.
2. Monitor Performance:
- Track engagement metrics.
- Keep an eye on API usage and cost.
Step 6: Continuously Improve
1. User Feedback: Regularly collect user feedback to enhance the chatbot’s responses.
2. Update Content: Ensure the chatbot’s knowledge stays relevant by updating prompts or fine-tuning.
3. Optimize Costs: Monitor and adjust API usage to balance cost and performance.
Tools and Resources We Used
– Platform: WordPress with AI Engine plugin
– Hosting: DigitalOcean for scalable and reliable hosting
– Development: Python for the creation of the JSON file needed in the fine-tuning process
By following these steps, you’ll be able to implement a robust and effective ChatGPT-based chatbot that enhances your website’s functionality and user experience. If you’ve got any questions or need further assistance, feel free to reach out or leave a comment below!
Do you have any questions? Contact with us here!