I’m working on a FiveM script that integrates an AI-powered NPC chat system using QBCore. The goal is for players to be able to approach NPCs, press “E” to interact, and have a conversation where both the player’s messages and the NPC’s AI-generated responses appear in a UI chat window.
The issue I’m facing is that while the AI responses are correctly generated and logged in the console, they do not appear in the UI in the game. The player’s messages show up in the UI chat window, but the NPC’s responses are missing.
Here’s a brief overview of my setup:
Server Script (server.lua): Handles the AI API request and sends the response back to the client.
Client Script (client.lua): Sends the player's message to the server, receives the AI response, and sends it to the NUI.
UI Scripts (index.html, style.css**,** script.js**):** Manages the chat window and displays messages.
I tried everything but nothing worked.
If you wanna test it guys, just create an access token on huggingface and add it to the config.lua.
here is my Code:
--fxmanifest.lua
fx_version 'cerulean'
game 'gta5'
author 'Revo'
description 'Interactive NPCs with LLM'
version '1.0.0'
shared_script 'config.lua'
client_scripts {
'client/client.lua'
}
server_scripts {
'server/server.lua'
}
files {
'ui/index.html',
'ui/style.css',
'ui/script.js'
}
ui_page 'ui/index.html'
--config.lua
Config = {}
Config.HuggingFaceAPIKey = "API-Key"
Config.ModelEndpoint = "https://api-inference.huggingface.co/models/facebook/blenderbot-400M-distill"
--server.lua
local json = require('json')
RegisterNetEvent('InteractiveNPCS:RequestLLMResponse')
AddEventHandler('InteractiveNPCS:RequestLLMResponse', function(text)
print("Received text from client: " .. text)
local apiKey = Config.HuggingFaceAPIKey
local endpoint = Config.ModelEndpoint
PerformHttpRequest(endpoint, function(err, responseText, headers)
if err == 200 then
print("Received response from LLM API: " .. tostring(responseText))
local response = json.decode(responseText)
local reply = response and response[1] and response[1].generated_text or "Sorry, I don't understand."
print("Sending response to client: " .. reply)
TriggerClientEvent('InteractiveNPCS:ReceiveLLMResponse', source, reply)
else
print("Error from LLM API: " .. tostring(err))
print("Response text: " .. tostring(responseText))
TriggerClientEvent('InteractiveNPCS:ReceiveLLMResponse', source, "Sorry, something went wrong.")
end
end, 'POST', json.encode({
inputs = text
}), {
["Authorization"] = "Bearer " .. apiKey,
["Content-Type"] = "application/json"
})
end)
--client.lua
local function showChat()
SetNuiFocus(true, true)
SendNUIMessage({
type = "show"
})
end
local function closeChat()
SetNuiFocus(false, false)
SendNUIMessage({
type = "close"
})
end
local function getClosestPed(coords)
local handle, ped = FindFirstPed()
local success
local closestPed = nil
local closestDistance = -1
repeat
local pedCoords = GetEntityCoords(ped)
local distance = #(coords - pedCoords)
if closestDistance == -1 or distance < closestDistance then
closestPed = ped
closestDistance = distance
end
success, ped = FindNextPed(handle)
until not success
EndFindPed(handle)
return closestPed
end
RegisterNUICallback('closeChat', function(data, cb)
closeChat()
cb('ok')
end)
RegisterNUICallback('sendMessage', function(data, cb)
local text = data.text
print("Client: Sending message - " .. text)
local playerPed = PlayerPedId()
local coords = GetEntityCoords(playerPed)
local closestPed = getClosestPed(coords)
if closestPed then
TriggerServerEvent('InteractiveNPCS:RequestLLMResponse', text)
else
SendNUIMessage({
type = "npcReply",
text = "No one is around to talk to."
})
end
cb('ok')
end)
Citizen.CreateThread(function()
while true do
Citizen.Wait(0)
if IsControlJustReleased(0, 38) then -- E key
local playerPed = PlayerPedId()
local coords = GetEntityCoords(playerPed)
local closestPed = getClosestPed(coords)
if closestPed then
showChat()
end
end
end
end)
RegisterNetEvent('InteractiveNPCS:ReceiveLLMResponse')
AddEventHandler('InteractiveNPCS:ReceiveLLMResponse', function(response)
print("Client: Received response - " .. response)
SendNUIMessage({
type = "npcReply",
text = response
})
end)
<!-- <div> index.html </div> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive NPC Chat</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="chatContainer">
<div id="messagesContainer"></div>
<div id="inputContainer">
<input type="text" id="inputMessage" placeholder="Type a message..." />
<button id="sendButton">Send</button>
<button id="closeButton">X</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
/* style.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: flex-end;
height: 100vh;
background: transparent;
}
#chatContainer {
position: fixed;
bottom: 10px;
width: 90%;
max-width: 600px;
background: rgba(0, 0, 0, 0.8);
padding: 10px;
border-radius: 10px;
color: white;
display: none;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
#messagesContainer {
max-height: 200px;
overflow-y: auto;
margin-bottom: 10px;
padding: 5px;
border: 1px solid #444;
border-radius: 5px;
background: rgba(0, 0, 0, 0.6);
}
#inputContainer {
display: flex;
align-items: center;
}
#inputMessage {
flex: 1;
padding: 10px;
margin-right: 10px;
border-radius: 5px;
border: none;
}
button {
padding: 10px 15px;
background: #3498db;
border: none;
border-radius: 5px;
color: white;
cursor: pointer;
margin-left: 5px;
}
button:hover {
background: #2980b9;
}
.chat-message.npc {
color: #ffcc00;
}
.chat-message.user {
color: #ffffff;
}
// script.js
console.log("UI: Script loaded");
document.getElementById("sendButton").addEventListener("click", sendMessage);
document.getElementById("closeButton").addEventListener("click", closeChat);
function closeChat() {
console.log("UI: Closing chat");
fetch(`https://${GetParentResourceName()}/closeChat`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
}).then(resp => resp.json()).then(resp => {
if (resp === 'ok') {
document.getElementById('chatContainer').style.display = 'none';
}
});
}
function sendMessage() {
const text = document.getElementById('inputMessage').value;
console.log("UI: Sending message - " + text);
// Add user's message to the chat
addMessageToChat("User", text);
fetch(`https://${GetParentResourceName()}/sendMessage`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ text })
}).then(resp => resp.json()).then(resp => {
if (resp === 'ok') {
document.getElementById('inputMessage').value = '';
}
});
}
function addMessageToChat(sender, message) {
const messagesContainer = document.getElementById('messagesContainer');
const messageElement = document.createElement('div');
messageElement.className = `chat-message ${sender.toLowerCase()}`;
messageElement.innerText = `${sender}: ${message}`;
messagesContainer.appendChild(messageElement);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
window.addEventListener('message', (event) => {
console.log("UI: Received message - " + JSON.stringify(event.data));
if (event.data.type === 'show') {
console.log("UI: Showing chat");
document.getElementById('inputMessage').value = '';
document.getElementById('messagesContainer').innerHTML = ''; // Clear previous messages
document.getElementById('chatContainer').style.display = 'block';
} else if (event.data.type === 'close') {
console.log("UI: Closing chat");
document.getElementById('chatContainer').style.display = 'none';
} else if (event.data.type === 'npcReply') {
console.log("UI: NPC replied with text - " + event.data.text);
// Add NPC's message to the chat
addMessageToChat("Random NPC", event.data.text);
}
});
i tried everything and nothing worked.
New contributor
ii creeper is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.