Passing Text InputField to n8n

🌵 Needle Engine
1

I’m trying to make an ai chatbot in my application using n8n as my backend ai agent. For that, I’m using webhooks. I have three UI elements for this: the text input field, a text display field and a button to trigger the webhook. However, I’m not getting the text input through the webhook, and my message variable always shows empty like so:

image
image406×161 14.9 KB

As you can see, I have successfully sent timestamps an other data, but the text I enter in the text inputfield is never sent. The code I using for this purpose is the following:

import {
Behaviour,
serializable,
Text,
InputField,
Button
} from “@needle-tools/engine”;

export class ARChatAgent extends Behaviour {
@serializable(Text)
chatOutput!: Text;

@serializable(InputField)
chatInput!: InputField;

@serializable(Button)
sendButton!: Button;

start() {
// Listen to button clicks
this.sendButton.gameObject.addEventListener(“click”, () => {
const message = this.chatInput.text;
console.log(“Sending to AI:”, message); // :white_check_mark: DEBUG STEP 1

  if (message && message.trim()) {
    this.sendToAI(message);
  } else {
    console.warn("Input message is empty or not set!");
  }
});

}

async sendToAI(userMessage: string) {
try {
const response = await fetch(“https://my-n8n-server/webhook/ar-chat”, {
method: “POST”,
headers: {
“Content-Type”: “application/json”
},
body: JSON.stringify({ message: userMessage })
});

  console.log("Response status:", response.status); // ✅ DEBUG STEP 2
  const replyText = await response.text();
  console.log("Raw reply from n8n:", replyText); // ✅ DEBUG STEP 2

  this.chatOutput.text = replyText || "No reply received";
} catch (error) {
  console.error("Error fetching AI reply:", error);
  this.chatOutput.text = "Error connecting to AI.";
}

}
}

Note that this log is never activated when starting the application:

console.log(“Sending to AI:”, message); // :white_check_mark: DEBUG STEP 1

Can anyone let me know what am i missing or point me to the docs for this.

Thanks!

2

Hello Pavel Ramirez. It looks like you’re trying to capture the text input from an InputField when a button is clicked, but the message variable remains empty. Here are a few things you can check to troubleshoot this issue:

  1. Ensure InputField is properly connected: Verify that the chatInput InputField is correctly assigned in the editor. If it’s not instantiated correctly, it might not read the value at runtime.

  2. Event Listener Attachment: Double-check if the button’s event listener is being set up correctly. Make sure the button is ready before the start() method is called.

  3. Input Field Label/Settings: Check if the InputField has the correct settings in your UI. Make sure that it is not disabled or that there aren’t any restrictions on the input.

  4. Verify Display Logic: Try adding logs inside the start() function, before the event listener, to see if the chatInput is defined and contains the expected value.

  5. Build or Deployment Issue: If none of the above works, ensure that your development environment is properly built and that the latest changes are reflected in the deployed application.

To help further, consider adding debug logs as follows:

start() {
  // Debug: Check if InputField is correctly set
  console.log("Chat Input Field:", this.chatInput); // Should not be undefined

  this.sendButton.gameObject.addEventListener("click", () => {
    const message = this.chatInput.text;
    console.log("Sending to AI:", message); // ✅ DEBUG STEP 1

    if (message && message.trim()) {
      this.sendToAI(message);
    } else {
      console.warn("Input message is empty or not set!");
    }
  });
}

This logging will help confirm whether the chatInput is valid before clicking the button. If it’s still not working, could you provide more details on how the InputField is defined in your UI or any errors found in the console?

1 replies left - Get a PRO license for more AI replies.
thread_WWnJ5WsE2U1R6T27ToaTFzlw
Reply to this message to continue the conversation

3

Hi, you need to use the button component onclick event and not add the eventlistener on the game object.

button.onClick.addEventlistener(()=>{...})
2 Likes
4

Thanks! this is correct and it worked!