Web Chat bot

n8n offers an integration for a chatbot interface via NPM: https://www.npmjs.com/package/@n8n/chat

It can be integrated in React.js, Vue and plain JS + HTML and is connected via an Webhook to the common Chat Trigger node. See: **https://docs.n8n.io/integrations/builtin/core-nodes/n8n-nodes-langchain.chattrigger/#make-chat-publicly-available **

Example workflow: https://n8n.io/workflows/2786-create-a-branded-ai-powered-website-chatbot/

Authentication

n8n offers the option to use basic username and password auth for authenticating users, trying to chat.

For more, see: https://www.scichart.com/blog/what-is-react-strict-mode-and-why-is-my-application-double-re-rendering/#:~:text=What%20Happens%20in%20Strict%20Mode,function%20is%20always%20called%20twice.

You can use a proxy URL (e. g. using Express.js) to hide the server credentials if unauthenticated:

app.post('/chat-proxy', (req, res) => {
 
  fetch('https://actual-webhook-n8n/webhook/id/chat', {
    method: 'POST',
    headers: {
      'Authorization': 'Basic ' +   Buffer.from('username:password').toString('base64'),
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(req.body)
  })
  .then(response => response.json())
  .then(data => res.json(data))
  .catch(error => res.status(500).json({ error: 'Proxy error' }));
});

2. Update your client-side code to use this proxy:

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

However, this approach does not “hide” the actual API of the. Instead of using a username + pw approach, one could also generate an Bearer token in n8n, which only the server proxy holds. Thus, without the proxy, no request can authenticate against the n8n chat trigger.

Alternatively, use the webhook trigger, which can also be authenticated using a Bearer token.