OpenAI API in a Laravel project (backend implementation doesn't work)

I am currently trying to use this API : https://github.com/openai-php/laravel in a personal Laravel project.

I don’t really know what is currently wrong in my code, all I can say is that the code detailed below gets my message displayed in the chatbox but returns an error 419 on my POST request : XHR POST http://127.0.0.1:8000/send as well as a Fetch error: Server error.

When NOT using the route and controller but giving the direct API endpoint to the JavaScript, I manage to get a JSON response to my message...

Please note that I would really like to make the backend part to work, and not just doing it in JS. Also, I didn't want to use jQuery but I would if it might help.

The JavaScript :

//CSRF TOKEN
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://api.openai.com/v1/chat/completions', true);
    xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);

    const button = document.getElementById('button-submit');
    const chatWindow = document.getElementById('chat-window');
    const url = '{{ url('send') }}';

//API FETCH ON BUTTON CLICK
    button.addEventListener('click', function (){
        const input = document.getElementById('input').value;

        chatWindow.innerHTML += `<div class="messages-user">
        <div class="__user">
            <p>${input}</p>
        </div>
        <img src="{{ asset('/images/avatar.png') }}" alt="Avatar">
        <div style="clear: both"></div>
        </div>`;

        fetch(url, {
            method: 'POST',
            body: JSON.stringify(input),
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer "MY_OPENAI_KEY"'
            }
        }).then(function(response) {
            if (response.ok) {
                return response.text();
            } else {
                throw new Error('Server error.');
            }
        }).then(function(data) {
            chatWindow.innerHTML += `<div class="messages-bot">
                            <div class="__bot">
                                <p>${data}</p>
                            </div>
                            <img src="{{ asset('/images/chatbot.png') }}" alt="Avatar">
                            </div>
                            `;
        }).catch(function(error) {
            console.log('Fetch error:', error.message);
        });
    });

The web.php :

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ChatBotController;

Route::get(‘/’, function () {
    return view(‘welcome’);
});

Route::post(‘send’, [ChatBotController::class, ‘sendChat’]);

The Controller :

public function sendChat(Request $request){
    $result = OpenAI::completions()->create([
        ‘max-token’ => 100,
        ‘model’ => ‘text-davinci-003’,
        ‘prompt’ => $request->input
    ]);

    $response = array_reduce(
        $result->toArray()['choices'],
        fn(string $result, array $choice) => $result . $choice['text'], ""
    );
    
    return $response;
}

Thanks for your time !

In laravel th 419 error, means thet the csrf token field is not resent or it is incorrect. In this case you probably dosen't need to use the crsf token for a API call. so you need to move this line of code:

Route::post('send', [ChatBotController::class, ‘sendChat’]);

from web.php (which uses the csrf protection) to the api.php file under the routes folder in your laravel project.

At this point you need to call the /api/send endpoint instead of the /send endpoint