My AI Plugins

Menu

Simple ChatBot with OpenAI Assistants API in PHP/jQuery

A lightweight and efficient chatbot script that integrates the OpenAI Assistants API using PHP and jQuery, designed for seamless AI interactions in web applications.

Creating a chatbot has never been easier, thanks to OpenAI’s Assistants API. In this tutorial, we’ll cover the fundamental concepts of integrating the API, along with PHP and jQuery, to build a responsive chatbot. We’ll also explain the backend logic and provide tips for customization.

How to Build a Chatbot with OpenAI Assistants API:
a Step-by-Step Tutorial

What You'll Learn

  • The basics of OpenAI’s Assistants API and how it works.

  • Building a responsive chatbot interface.

  • Managing dynamic responses with PHP and jQuery. 

File Structure

The project files are organized as follows:

openai-chatbot/
|-- index.html     # The main frontend file, responsible for user interaction.
|-- chatbot.php    # Backend script for communicating with the OpenAI API.
|-- style.css      # Stylesheet to define the chatbot's visual appearance.

This structure ensures a clean separation of frontend, backend, and styling, making the codebase easy to manage and modify.

How the OpenAI Assistants API Works

The Assistants API is designed to handle conversational interactions programmatically. Here’s a quick overview:

  1. Thread Creation: Each conversation starts by creating a thread, which acts as a container for maintaining conversation context.
  2. Message Addition: User inputs are added to the thread as messages, preserving a clear sequence of interactions.
  3. Execution: The assistant processes the messages in the thread to generate an appropriate response.
  4. Response Retrieval: Fetch the assistant’s output, process it as needed, and display it to the user.


This workflow allows for dynamic, multi-turn conversations tailored to the user’s inputs.

Development Approach

We used PHP for server-side API calls and jQuery for dynamic frontend updates. The script is lightweight, modular, and designed for ease of use.

1. Backend Communication (PHP)

The PHP script serves as the bridge between the frontend and the OpenAI API. Key tasks include:

  • Thread Management: Ensuring a unique thread ID is maintained for each session.

  • Message Handling: Sending user inputs to the API as structured messages.

  • Response Parsing: Extracting and preparing the assistant’s response for the frontend.

Example: Thread Creation in PHP
    $threadUrl = "$apiUrl/threads"; 
    $threadResponse = apiRequest('POST', $threadUrl, [], $apiKey); 
    $_SESSION['thread_id'] = $threadResponse['id'];

A successful API call in PHP showing a generated thread ID.

2. Frontend Interaction (jQuery)

jQuery enables a seamless user experience by handling interactions and updating the interface dynamically. Features include:

  • Message Rendering: Displaying user and assistant messages in real-time.

  • Error Handling: Providing user feedback when API calls fail or take too long.

Example: Sending User Input
    $('#send-btn').on('click', function () {
        const userInput = $('#user-input').val().trim();
        if (userInput) {
            appendMessage('user', userInput);
            sendMessageToServer(userInput);
        }
    });

Chat interface showing OpenAi while elaborating the answer

3. Styling and Customization

The chatbot’s visual style is defined in style.css.
You can easily adjust elements such as colors, fonts, and spacing to match your design preferences.

Example: Customizing Chat Bubble Colors
    .user-message {
        background: #0078d7;
        color: #fff;
    }
    
    .bot-message {
        background: #e5e5ea;
        color: #000;
    }

For instance, changing the background property allows you to personalize the look of user and assistant messages.

Installing the Script

Follow these simple steps to set up the chatbot:

  1. Download and Extract:

    • Download the complete ZIP package.

    • Extract the files into your web server directory.

  2. Edit Configuration: Open chatbot.php and replace the placeholders with your API credentials:

    • Replace YOUR_API_KEY with your OpenAI API key.

    • Replace YOUR_ASSISTANT_ID with your Assistant ID.

Example:
    $apiKey = 'sk-12345';
    $assistantId = 'asst-67890';

  1. Launch the Chatbot:

    • Open index.html in your browser.

    • Test the chatbot by typing a message and viewing the assistant’s response.

Personal Considerations

Experience with Development

Building this chatbot was a medium-easy task. The modularity of the script makes it accessible even to those with limited programming experience. However, familiarity with PHP and jQuery can significantly speed up the process

Cost Considerations

Building this chatbot was a medium-easy task. The modularity of the script makes it accessible even to those with limited programming experience. However, familiarity with PHP and jQuery can significantly speed up the process

Final Configuration of the OpenAI’s Assistant

The configuration that worked best for this chatbot was as follows:

  • Model: gpt-4o

  • File Search: No

  • Code Interpreter: No

  • Response Format: Text

  • Temperature: 1.0

  • Top P: 1.0

This setup provided a good balance of performance and cost-effectiveness. My recommendation is to start with simple configurations and scale up based on your project’s requirements. For small businesses or personal use, careful evaluation of usage and pricing is essential.

Conclusion

Congratulations! You’ve successfully built a functional chatbot using OpenAI Assistants API.
This flexible design allows for further customization, making it ideal for various applications.

Download

SCRIPT SUMMARY
Name: Simple ChatBot with OpenAI Assistants API in PHP/jQuery
Description: A lightweight and efficient chatbot script that integrates the OpenAI Assistants API using PHP and jQuery, designed for seamless AI interactions in web applications.
Author: Alan Curtis
Development Details: Developed with the assistance of ChatGPT-4o and Canvas.
Published: December 7, 2024
Contribution by AI: ChatGPT contributed approximately 75% to the design and development process, providing structured guidance, code optimization, and debugging assistance.
Estimated time saved: 10-12 hours compared to manual development without AI support.
License: This script is licensed under GPL-2.0-or-later, promoting open-source collaboration and redistribution.