Create A PHP Chatbot Using The OpenAI API & ChatGPT

Learn how to use PHP to create a chatbot that uses OpenAI API and ChatGPT. The interface is designed in Bootstrap 5 and jquery to create a stylized GUI for our chatbot.

ChatGPT Chatbot Demo

Make An API Connection To OpenAI’s ChatGPT

First, we will create a PHP class called ChatGPT, which will serve as a wrapper for OpenAI’s ChatGPT API. This class will allow us to interact with the API easily and make requests to generate text and images using the power of ChatGPT.

Step 1: Getting Started

Let’s start by setting up our PHP file and defining the ChatGPT class.

<?php

class ChatGPT
{
    // API Key and API URLs
    private $API_KEY = "OPEN_AI_API_KEY";
    private $textURL = "https://api.openai.com/v1/completions";
    private $imageURL = "https://api.openai.com/v1/images/generations";

    // cURL object and data request array
    public $curl;
    public $data = [];

    // Constructor: Initialize the cURL object
    public function __construct()
    {
        $this->curl = curl_init();
    }

    // Other methods will be added here later
}

Step 2: Initializing the API Request

We’ll add a method called initialize to set up the cURL object and define the request type (text or image) based on the parameter provided.

class ChatGPT
{

    // Initialize the cURL object for the specific request type (text or image)
    public function initialize($requestType = "text" || "image")
    {
        $this->curl = curl_init();

        if ($requestType === 'image')
            curl_setopt($this->curl, CURLOPT_URL, $this->imageURL);
        if ($requestType === 'text')
            curl_setopt($this->curl, CURLOPT_URL, $this->textURL);

        curl_setopt($this->curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($this->curl, CURLOPT_POST, true);

        $headers = array(
            "Content-Type: application/json",
            "Authorization: Bearer $this->API_KEY"
        );

        curl_setopt($this->curl, CURLOPT_HTTPHEADER, $headers);
    }

}

Step 3: Generating Text

We’ll add a method called createTextRequest that will allow us to generate text based on the provided prompt.

class ChatGPT
{

    // Generate text based on the given prompt
    public function createTextRequest($prompt, $model = 'text-davinci-003', $temperature = 0.5, $maxTokens = 1000)
    {
        curl_reset($this->curl);
        $this->initialize('text');

        $this->data["model"] = $model;
        $this->data["prompt"] = $prompt;
        $this->data["temperature"] = $temperature;
        $this->data["max_tokens"] = $maxTokens;

        curl_setopt($this->curl, CURLOPT_POSTFIELDS, json_encode($this->data));

        $response = curl_exec($this->curl);
        $response = json_decode($response, true);
        return $response['choices'][0]['text'] ?? -1; // return text or -1 if error
    }

}

Step 4: Generating Images

We’ll add a method called generateImage that will allow us to generate images based on the provided prompt.

class ChatGPT
{

    // Generate images based on the given prompt
    public function generateImage($prompt, $imageSize = '512x512', $numberOfImages = 1)
    {
        curl_reset($this->curl);
        $this->initialize('image');

        $this->data["prompt"] = $prompt;
        $this->data["n"] = $numberOfImages;
        $this->data["size"] = $imageSize;

        curl_setopt($this->curl, CURLOPT_POSTFIELDS, json_encode($this->data));

        $response = curl_exec($this->curl);
        $response = json_decode($response, true);
        return $response['data'][0]['url'] ?? -1; // return the first URL or -1 if error
    }

}

Step 5: Putting It All Together

With the ChatGPT class defined, you can now use it to interact with the OpenAI ChatGPT API and generate text or images based on the provided prompts. Here’s how you can use it:

// Include the PHP file with the ChatGPT class

// Create an instance of ChatGPT
$chatGPT = new ChatGPT();

// Generate text
$textPrompt = "Once upon a time";
$textResponse = $chatGPT->createTextRequest($textPrompt);
echo "Generated Text: " . $textResponse . "\n";

// Generate an image
$imagePrompt = "A serene lake with mountains in the background";
$imageResponse = $chatGPT->generateImage($imagePrompt);
echo "Generated Image URL: " . $imageResponse . "\n";

Please note that in this tutorial, we assume you have an API key for OpenAI’s ChatGPT API, and you can replace the API_KEY variable’s value with your actual API key.

Complete Code For ChatGPT.php

<?php

class ChatGPT
{

    private $API_KEY = "OPEN_AI_API_KEY";
    private $textURL = "https://api.openai.com/v1/completions";
    private $imageURL =  "https://api.openai.com/v1/images/generations";

    public $curl;       // create cURL object
    public $data = [];  // data request array

    public function __construct()
    {
        $this->curl = curl_init();
    }

    public function initialize($requestType = "text" || "image")
    {
        $this->curl = curl_init();

        if ($requestType === 'image')
            curl_setopt($this->curl, CURLOPT_URL, $this->imageURL);
        if ($requestType === 'text')
            curl_setopt($this->curl, CURLOPT_URL, $this->textURL);

        curl_setopt($this->curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($this->curl, CURLOPT_POST, true);

        $headers = array(
            "Content-Type: application/json",
            "Authorization: Bearer $this->API_KEY"
        );

        curl_setopt($this->curl, CURLOPT_HTTPHEADER, $headers);
    }

    // returns text
    public function createTextRequest($prompt, $model = 'text-davinci-003', $temperature = 0.5, $maxTokens = 1000)
    {
        curl_reset($this->curl);
        $this->initialize('text');

        $this->data["model"] = $model;
        $this->data["prompt"] = $prompt;
        $this->data["temperature"] = $temperature;
        $this->data["max_tokens"] = $maxTokens;

        curl_setopt($this->curl, CURLOPT_POSTFIELDS, json_encode($this->data));

        $response = curl_exec($this->curl);
        $response = json_decode($response, true);
        return $response['choices'][0]['text'] ?? -1; // return text or -1 if error
    }

    // returns URL with the image
    public function generateImage($prompt, $imageSize = '512x512', $numberOfImages = 1)
    {
        curl_reset($this->curl);
        $this->initialize('image');

        $this->data["prompt"] = $prompt;
        $this->data["n"] = $numberOfImages;
        $this->data["size"] = $imageSize;

        curl_setopt($this->curl, CURLOPT_POSTFIELDS, json_encode($this->data));

        $response = curl_exec($this->curl);
        $response = json_decode($response, true);
        return $response['data'][0]['url'] ?? -1; //return the first url or -1 if error
    }
}

Create a Simple Chatbot Interface For OpenAI API

We will create a simple HTML interface to interact with the ChatGPT class we defined in the previous tutorial. The HTML file will allow users to input messages and receive responses from the ChatGPT model using AJAX calls to the PHP backend.

Step 1: Set Up the HTML File

Let’s create an HTML file named index.html and add the necessary HTML structure to create the chatbot interface.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chatbot with OpenAI</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
</head>

<body>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">Chatbot</div>
                    <div class="card-body" id="chat">
                        <div class="message">Hello! How can I assist you today?</div>
                    </div>
                    <div class="card-footer">
                        <input type="text" id="userInput" class="form-control" placeholder="Type your message...">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // Your JavaScript code will be added here
    </script>
</body>

</html>

Step 2: Implement JavaScript for the Chatbot

We’ll now add JavaScript code to the <script> section in the HTML file to handle user interactions and communicate with the ChatGPT backend using AJAX.

<script>
    $(document).ready(function() {
        // Function to add a user message to the chat
        function addUserMessage(message) {
            $("#chat").append(`<div class="message bg-light">${message}</div>`);
        }

        // Function to add a bot message to the chat
        function addBotMessage(message) {
            $("#chat").append(`<div class="message">${message}</div>`);
        }

        // Function to send user input to the chatbot and get a response
        function sendMessage() {
            const userInput = $("#userInput").val();
            if (userInput.trim() === "") return;

            addUserMessage(userInput);
            $("#userInput").val("");

            // Make an AJAX request to the PHP script to get the bot response
            $.ajax({
                type: "POST",
                url: "chatbot.php", // Replace with the actual filename that contains the PHP code
                data: {
                    message: userInput
                },
                success: function(response) {
                    addBotMessage(response);
                },
                error: function(xhr, status, error) {
                    console.log("Error status: " + status);
                    console.log("Error message: " + error);
                    addBotMessage("An error occurred while communicating with the bot.");
                }
            });
        }

        // Send user input when pressing Enter key
        $("#userInput").keypress(function(event) {
            if (event.which == 13) {
                event.preventDefault();
                sendMessage();
            }
        });

        // Send user input when clicking the Send button (optional)
        // Add the id="sendBtn" attribute to the button in the HTML to enable this functionality
        $("#sendBtn").click(function() {
            sendMessage();
        });
    });
</script>

Complete Code For Index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chatbot with OpenAI</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
</head>

<body>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">Chatbot</div>
                    <div class="card-body" id="chat">
                        <div class="message">Hello! How can I assist you today?</div>
                    </div>
                    <div class="card-footer">
                        <input type="text" id="userInput" class="form-control" placeholder="Type your message...">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // Function to add a user message to the chat
            function addUserMessage(message) {
                $("#chat").append(`<div class="message bg-light">${message}</div>`);
            }

            // Function to add a bot message to the chat
            function addBotMessage(message) {
                $("#chat").append(`<div class="message">${message}</div>`);
            }

            // Function to send user input to the chatbot and get a response
            function sendMessage() {
                const userInput = $("#userInput").val();
                if (userInput.trim() === "") return;

                addUserMessage(userInput);
                $("#userInput").val("");

                // Make an AJAX request to the PHP script to get the bot response
                $.ajax({
                    type: "POST",
                    url: "chatbot.php", // Replace with the actual filename that contains the PHP code
                    data: {
                        message: userInput
                    },
                    success: function(response) {
                        addBotMessage(response);
                    },
error: function(xhr, status, error) {
    console.log("Error status: " + status);
    console.log("Error message: " + error);
    addBotMessage("An error occurred while communicating with the bot.");
}
                });
            }

            // Send user input when pressing Enter key
            $("#userInput").keypress(function(event) {
                if (event.which == 13) {
                    event.preventDefault();
                    sendMessage();
                }
            });

            // Send user input when clicking the Send button
            $("#sendBtn").click(function() {
                sendMessage();
            });
        });
    </script>
</body>

</html>

Creating a PHP Backend for the Chatbot Interface

In this tutorial, we will create a PHP backend script that communicates with the OpenAI ChatGPT API using the ChatGPT class we defined in the previous tutorials. The PHP script will handle AJAX requests from the chatbot interface and return the bot’s response to the user’s input.

Step 1: Set Up the PHP File

Create a new PHP file named chatbot.php and add the following code to it:

<?php
// Step 1: Include the ChatGPT class
include_once('ChatGPT.php');

// Step 2: Create a new instance of the ChatGPT class
$chatbot = new ChatGPT();

// Step 3: Get the user input from the AJAX request
if (isset($_POST['message'])) {
    $userInput = $_POST['message'];

    // Step 4: Call the createTextRequest function to get the bot response
    $botResponse = $chatbot->createTextRequest($userInput);

    // Step 5: Return the bot response
    echo $botResponse;
}
?>

Step 2: Run the Application

With everything set up, access the index.html file through a web browser. When you type a message and press Enter or click the Send button, the JavaScript code in the HTML file will make an AJAX request to the chatbot.php backend. The backend will then communicate with the ChatGPT API, and the bot’s response will be displayed in the chat window.

And there you have it! You’ve successfully created a simple chatbot interface that interacts with the OpenAI ChatGPT API through a PHP backend. Users can now communicate with the chatbot and receive generated responses based on their inputs.

Related Articles

News

Company:

Join our community of SUBSCRIBERS and be part of the conversation.

Create A PHP Chatbot Using The OpenAI API & ChatGPT

Make An API Connection To OpenAI’s ChatGPT

Step 1: Getting Started

Step 2: Initializing the API Request

Step 3: Generating Text

Step 4: Generating Images

Step 5: Putting It All Together

Complete Code For ChatGPT.php

Create a Simple Chatbot Interface For OpenAI API

Step 1: Set Up the HTML File

Step 2: Implement JavaScript for the Chatbot

Complete Code For Index.html

Creating a PHP Backend for the Chatbot Interface

Step 1: Set Up the PHP File

Step 2: Run the Application

Table of contents

How to Fix a Hacked WordPress Website That Redirects

OpenAI Expands ChatGPT Capabilities with Integrated Search Functionality

Essential Tips for Structuring the Beginning, Middle, and End of a Novel

How to Write Engaging Blogs People Want to Read

Why Social Media Habits Can Be Harmful

Local News

How to Fix a Hacked WordPress Website That Redirects

OpenAI Expands ChatGPT Capabilities with Integrated Search Functionality

Essential Tips for Structuring the Beginning, Middle, and End of a Novel

How to Write Engaging Blogs People Want to Read

How to Fix a Hacked WordPress Website That Redirects

OpenAI Expands ChatGPT Capabilities with Integrated Search Functionality

Essential Tips for Structuring the Beginning, Middle, and End of a Novel