How to build custom ChatHub interface on n8n
Quick Answer
Build a custom ChatHub interface on n8n by creating a webhook workflow that receives chat messages, processes them through AI nodes, and returns responses. Use HTTP Request nodes to connect multiple chat services and the HTML node to create a custom interface.
Prerequisites
- n8n workspace access
- Basic knowledge of HTTP requests and webhooks
- Understanding of chat applications
- Familiarity with n8n node types
Step-by-Step Instructions
1
Set up the Webhook Trigger
Navigate to your n8n dashboard and click New Workflow. Add a Webhook node as your trigger by searching for it in the node panel. Configure the webhook with HTTP Method set to
POST and Path as /chathub. Click Listen for Test Event to generate your webhook URL. Copy the webhook URL immediately as you'll need it for testing your ChatHub interface.
2
Create the Chat Interface HTML
Add an HTML node after your webhook. In the HTML Content field, paste a chat interface template:
Include JavaScript to handle message sending with
<div id="chatContainer"><div id="messages"></div><input id="messageInput" placeholder="Type your message..."><button onclick="sendMessage()">Send</button></div>Include JavaScript to handle message sending with
fetch() calls to your webhook URL. Use CSS Grid or Flexbox in your HTML for responsive chat layout across devices.
3
Configure Chat Message Processing
Add a Switch node to route different types of chat messages. Create conditions based on
{{$json.body.messageType}} with values like text, image, or file. For each message type, add corresponding processing branches using Set nodes to structure the data format.4
Connect AI Service Nodes
Add OpenAI or HTTP Request nodes to connect your preferred AI services. For OpenAI, set Resource to
Chat and configure the Model to gpt-3.5-turbo. Map the incoming message to {{$json.body.message}} in the Messages field. Add multiple AI service nodes to create a true ChatHub experience. Use the Code node to implement load balancing between different AI services for better reliability.
5
Implement Response Formatting
Add a Code node to format AI responses consistently. Use JavaScript to structure responses:
return [{
messageId: new Date().getTime(),
sender: 'assistant',
content: $input.first().json.choices[0].message.content,
timestamp: new Date().toISOString()
}]; Include error handling in your Code node to manage API failures gracefully.
6
Set up Message Storage
Add a Google Sheets or Airtable node to store chat conversations. Configure the Operation to
Append and map fields like {{$json.messageId}}, {{$json.sender}}, and {{$json.content}}. This enables chat history and conversation continuity. Use the Merge node to combine user messages and AI responses before storing them.
7
Configure Response Webhook
Add a Respond to Webhook node at the end of your workflow. Set Response Code to
200 and Response Body to return the formatted chat response as JSON. Include headers like Content-Type: application/json and enable CORS with Access-Control-Allow-Origin: *.8
Deploy and Test ChatHub
Click Save and then Activate your workflow. Test the ChatHub by opening your HTML interface and sending messages. Monitor the Executions tab for any errors. Use the Manual Chat node for testing different message formats and AI responses.
Set up workflow error notifications using the Email or Slack nodes for production monitoring.
Common Issues & Troubleshooting
Webhook not receiving messages from chat interface
Verify CORS settings in your Respond to Webhook node and ensure the webhook URL is correctly configured in your HTML JavaScript fetch() calls.
AI service responses taking too long
Add a Wait node with timeout settings and implement fallback responses using the Switch node to handle API delays.
Chat history not saving properly
Check your storage node credentials and field mappings. Use the Code node to validate data structure before sending to storage services.
Multiple AI services not load balancing
Implement a Code node with random selection logic or use the Switch node with conditions based on current load or response times.
Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official n8n website before purchasing.