We need help in embedding chatbot as it returns json format instead of plain text

Questions
1

Hey, I have created a website chatbot, but when I embed the chat into my local HTML file, the response is returned in a weird JSON format. I have already added both a Set node and a Respond to Webhook node, but it’s still not working as expected. with or without Set Node and Respond node i am getting same response.

Interestingly, when I run the same execution directly in n8n, the chat works perfectly fine. The issue only occurs when I embed the chatbot into the HTML locally, where it displays the response in the following JSON format.

“{“type”:“begin”,“metadata”:{“nodeId”:“d88888-a96b-4350-bd17-6b2a97aca168”,“nodeName”:“AI Agent”,“itemIndex”:0,“runIndex”:0,“timestamp”:1767099808508}}\n{“type”:“item”,“content”:”“,“metadata”:{“nodeId”:“d88888-a96b-4350-bd17-6b2a97aca168”,“nodeName”:“AI Agent”,“itemIndex”:0,“runIndex”:0,“timestamp”:1767099809666}}\n{“type”:“item”,“content”:”“,“metadata”:{“nodeId”:“d88888-a96b-4350-bd17-6b2a97aca168”,“nodeName”:“AI Agent”,“itemIndex”:0,“runIndex”:0,“timestamp”:1767099809667}}\n{“type”:“item”,“content”:“Hello”,“metadata”:{“nodeId”:“d88888-a96b-4350-bd17-6b2a97aca168”,“nodeName”:“AI Agent”,“itemIndex”:0,“runIndex”:0,“timestamp”:1767099809668}}\n{“type”:“item”,“content”:”!“,“metadata”:{“nodeId”:“d88888-a96b-4350-bd17-6b2a97aca168”,“nodeName”:“AI Agent”,“itemIndex”:0,“runIndex”:0,“timestamp”:1767099809668}}\n{“type”:“item”,“content”:” How",“metadata”:{“nodeId”:“d88888-a96b-4350-bd17-6b2a97aca168”,“nodeName”:“AI Agent”,“itemIndex”:0,“runIndex”:0,“timestamp”:1767099809668}}\n{“type”:“item”,“content”:" can",“metadata”:{“nodeId”:“d88888-a96b-4350-bd17-6b2a97aca168”,“nodeName”:“AI Agent”,“itemIndex”:0,“runIndex”:0,“timestamp”:1767099809668}}\n{“type”:“item”,“content”:" I",“metadata”:{“nodeId”:“d88888-a96b-4350-bd17-6b2a97aca168”,“nodeName”:“AI Agent”,“itemIndex”:0,“runIndex”:0,“timestamp”:1767099809668}}\n{“type”:“item”,“content”:" help",“metadata”:{“nodeId”:“d88888-a96b-4350-bd17-6b2a97aca168”,“nodeName”:“AI Agent”,“itemIndex”:0,“runIndex”:0,“timestamp”:1767099809668}}\n{“type”:“item”,“content”:" you",“metadata”:{“nodeId”:“d88888-a96b-4350-bd17-6b2a97aca168”,“nodeName”:“AI Agent”,“itemIndex”:0,“runIndex”:0,“timestamp”:1767099809669}}\n{“type”:“item”,“content”:" today",“metadata”:{“nodeId”:“d88888-a96b-4350-bd17-6b2a97aca168”,“nodeName”:“AI Agent”,“itemIndex”:0,“runIndex”:0,“timestamp”:1767099809669}}\n{“type”:“item”,“content”:“?”,“metadata”:{“nodeId”:“d88888-a96b-4350-bd17-6b2a97aca168”,“nodeName”:“AI Agent”,“itemIndex”:0,“runIndex”:0,“timestamp”:1767099809669}}\n{“type”:“item”,“content”:“”,“metadata”:{“nodeId”:“d88888-a96b-4350-bd17-6b2a97aca168”,“nodeName”:“AI Agent”,“itemIndex”:0,“runIndex”:0,“timestamp”:1767099809670}}\n{“type”:“end”,“metadata”:{“nodeId”:“d88888-a96b-4350-bd17-6b2a97aca168”,“nodeName”:“AI Agent”,“itemIndex”:0,“runIndex”:0,“timestamp”:1767099809678}}\n"

2

image
image696×434 30.9 KB
For Reference Detached Set and Respond to Webhook Node as it gives the same response.

1 Like
3

Hi @Hetal, please can you share your workflow in a code block instead so we can have a look at your system prompt and other configs.

Did you use the chat embedding from the Chat message node or did you build your own chat ?

Im not sure what you mean with the use of the Respond to Webhook node

4

Hi @Wouter_Nigrini

I have used the embedding code from @n8n/chat in my local HTML file.
I initially configured a Respond to Webhook node, but it did not work as expected, so I removed it.
However, the chat works perfectly when executed directly inside n8n, but the embedded chat in the local HTML environment does not behave the same way.

5

Can you please share your workflow in a code block so I can test it on my side

6
1 Like
7

@Wouter_Nigrini Any issue found in the workflow?

8

What version of n8n are you using?

9

i checked your workflow, everything is fine n8n side, its not the issue of n8n but in your html how the response is being parsed. i created something similar for my own website, you can see it working on www.zeroembed.com

you are trying to create something similar for yourself right? the issue is inside ur external and not in n8n, if you need help, i am a developer, i can review your code and provide a working solution. My contact info is present on my same website.

I created some more such beautiful ai emebeded chats for my clients which you can see here

10

Hi @Hetal,

I am not sure what was wrong with your workflow, but I recreated it and now it works 100%. I think it must have been corrupt somewhere.

PS: I also cleaned up your prompt to use proper markdown for clarity and then please NOTE. The prompt should be set in the System prompt property and NOT the user prompt.

image
image1112×1534 52.7 KB

HTML Page:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>n8n Chat</title>
  <link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
</head>

<body>
  <script type="module">
    import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';

    createChat({
      webhookUrl: 'http://localhost:5678/webhook/933c393f-9691-4465-a1c6-c8c05460a776/chat'
    });
  </script>
</body>

</html>
11

One change is there I have used tavily for search and response

12

That is fine, you can connect your Tavily took again. I didnt want to go through the effort of setting up a new Tavily account for me to test with and it was irrelevant to the test. The quote you referenced was a comment that you should use the system prompt instead of the user prompt when using the AI Agent node. It’ll handle the User and System prompts in the back

13

Ok thanks I will check once again.