How do I connect my n8n RAG agent with my web application

[kalany]

Hi guys.

I’m fairly new to n8n but I managed to build my first RAG agent today. I’ve built a chat bot assistant interface using React but I don’t know how to integrate my n8n RAG agent to the frontend. Please help me out.

Thanks

[JohnHalex]

@kalany Integrating RAG agent with your React frontend is straightforward. Here’s how to connect them:

Step 1: Expose your RAG agent via Webhook

1. In your n8n workflow, add a Webhook node at the start (if you don’t have one already)

2. Configure the Webhook:

   • HTTP Method: POST

   • Path: Something like chat or rag-agent

   • Response Mode: “When Last Node Finishes”

3. Connect the Webhook to your RAG agent chain

4. At the end of your workflow, add a Respond to Webhook node to send the agent’s response back

Step 2: Get your Webhook URL

After saving, n8n will show you a webhook URL like:

• Production: https://your-n8n-instance.com/webhook/chat

• Test: https://your-n8n-instance.com/webhook-test/chat

Step 3: Call from React

Here’s a basic example for your React chatbot:

const sendMessage = async (userMessage) => {
  try {
    const response = await fetch('https://your-n8n-instance.com/webhook/chat', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        message: userMessage,
        // Add any other context you need (user ID, session ID, etc.)
      })
    });

    const data = await response.json();
    return data.response; // Adjust based on your workflow's output structure
  } catch (error) {
    console.error('Error calling n8n agent:', error);
  }
};

Step 4: Handle the response in your chat UI

const handleUserMessage = async (message) => {
  // Add user message to chat
  setMessages([...messages, { role: 'user', content: message }]);
  
  // Get agent response
  const agentResponse = await sendMessage(message);
  
  // Add agent response to chat
  setMessages(prev => [...prev, { role: 'assistant', content: agentResponse }]);
};

If your React app and n8n are on different domains, you may need to configure CORS in n8n.

[Spiritech.Studio]

@kalany , You should build a webhook-triggered n8n workflow that accepts a user message and returns the RAG response. then Call that webhook URL from your React chat interface.
This is the simplest and most reliable pattern according to my experience.
Thank you

Spiritec

[achamm]

The easiest way is to use n8n’s official @n8n/chat package, just npm install @n8n/chat and call createChat({ webhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL' }) inside a useEffect. But since you already built your own chat UI you can also just POST directly to the webhook URL from your React app and handle the response yourself. Make sure the workflow is active otherwise the production webhook won’t respond.

[Anshul_Namdev]

Hi @kalany
In your n8n’s chat trigger you will get an option like this:

And that option Make Chat Publicly Available just turn that on, and then the URL you will get you can embed it anywhere using an html