I built a fully working chatGPT integration that allows you to chat with the AI using Laravel. You can send messages and within seconds, you’ll get a response from the OpenAI servers. To get started, all you need to do is install Laravel using the following command:
composer create-project --prefer-dist laravel/laravel project-name
Once Laravel is installed, navigate to the project directory and run the following command to create the chat controller:
php artisan make:controller ChatController
Next, open the code in your editor and head over to the resources/views folder. Open the welcome.blade.php file and delete everything in there. Include some basic HTML code instead.
To include the jQuery library, add the following code inside the body tag:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
Add a div with the class chat, another div with the class top, and finally another div with a p tag inside and a small tag under your header.
Underneath the chat, add another div with the class messages, and another div inside of that with the class left and message with an image and a p tag, which will be the very first message that will show up in our chat application.
Below the chat, add another section with a div class bottom. Inside the div, create a form with an input that will send messages to the chatGPT AI. Give it a name message, a placeholder, and set the autocomplete to off. Add a submit button as well.
To style the chat application, you’ll need to add some CSS. You can find the CSS code here. Create a new file called style.css in the public folder of your Laravel project and paste in the CSS code. Then, add a reference to this CSS file in your welcome.blade.php file.
Now, when you open your Laravel application in the web browser, it will look much nicer.
To make the chat functionality work, you’ll need to include some JavaScript code. Scroll down to the bottom of your welcome.blade.php file and add the JavaScript code. This code will send a message to the chatGPT AI when the submit button is clicked.
In your ChatController, add the necessary code to handle the chat request. Make an HTTP POST request to the OpenAI URL with the required parameters, including your API key. Return the response as JSON.
In your web.php file, add a POST route for the chat controller.
To get your API key, sign up on the OpenAI website and create a new secret key. Copy the key and add it to your .env file in your Laravel project.
Once everything is set up, you can start chatting with the AI by typing your message in the input field. The chatGPT will respond with a message.
If you want to adapt this chat integration to work with humans, you can modify the code accordingly.
For more details on how to adapt this integration, watch the video tutorial.
Until next time, happy coding!
