Build a single-file HTML Chatbot + minimal Node proxy (CORS-safe) for n8n
Goal

Create a tiny web app that renders a clean chatbot UI and relays messages to this n8n webhook via a Node/Express proxy to avoid browser CORS:

<ENTER YOUR WEBHOOK URL HERE>

Deliverables

Produce these files only:

index.html — single file with HTML, CSS, and vanilla JS (no frameworks)

server.js — Express server that serves index.html and proxies /api/chat → n8n webhook

package.json — minimal deps and start script

(optional) favicon.ico

No build tools. Must run with node server.js and open on http://localhost:5000.

Frontend requirements (index.html)

UI & Layout

Header title: “n8n Chatbot”

Messages panel with chat bubbles:

user on the right (purple gradient bubble)

bot on the left (white bubble with subtle shadow)

Input row: multiline <textarea> + Send button

New Chat button in header to fully reset the thread

Behavior

Enter sends; Shift+Enter inserts newline

“Thinking…” loader (animated dots) shows while awaiting a reply

Auto-scroll to newest message after each render

Sanitize all displayed text (escape HTML) before rendering (prevent XSS)

Error toast (red, top-right) on network/server errors; keep user input intact so they can resend

State & Persistence (localStorage)

Generate a UUID v4 conversationId on first load; store in localStorage

Persist full chatHistory as array of { type: 'user'|'bot', text: '...' }

On New Chat: confirm, then clear chatHistory, generate a new UUID, and reset UI

Request payload (on send)

POST to /api/chat (the local proxy endpoint), with JSON:

{
  "conversationId": "<uuid-v4>",
  "history": [
    "User: …",
    "Bot: …"
  ],
  "question": "the user’s current message"
}


Build history from the last 10 exchanges (i.e., last 20 messages), formatted as plain strings "User: …" / "Bot: …" (do not include objects)

Response handling

Expect either of these formats and support both:

[{ "output": "assistant reply here" }]

{ "output": "assistant reply here" }

Parse the bot text and append to chat as a bot message

If the response is not in either format, show the error toast:
“Invalid response from webhook. Expected: [{ "output": "..." }] or { "output": "..." }”

Implementation notes

Put a top-comment explaining:

where to change the proxy URL (/api/chat) if needed

how conversationId and chatHistory are handled

where the response parsing lives

Keep CSS mobile-friendly and responsive

Keep code clear and commented

Reference behaviors to match: single-file UI, localStorage persistence, sanitized rendering, last-10-exchange history packaging, and dual response-format parsing.

Backend requirements (server.js)

Server

Node/Express server on port 5000

app.use(express.static('.')) to serve index.html and assets

JSON body parsing enabled

Proxy route

POST /api/chat:

Forward the request body verbatim to the n8n webhook URL shown at the top using https.request (no extra libs)

Set headers: Content-Type: application/json and correct Content-Length

Collect response data, attempt JSON.parse, and return it to the browser unchanged (res.json(jsonData))

On parse error, respond 500 with { error: "Invalid JSON from webhook", details: <raw body> }

On network error, respond 500 with { error: "Failed to communicate with n8n webhook", details: <message> }

CORS

Because the browser calls the local proxy, do not add CORS to the webhook; the server-to-server call bypasses CORS entirely

Constants

Define a constant N8N_WEBHOOK_URL set to the URL above (easy to change later)

Match this minimal Express proxy structure and error handling.

package.json

Minimal dependencies:

{
  "name": "n8n-chatsphere",
  "version": "1.0.0",
  "main": "server.js",
  "license": "MIT",
  "type": "commonjs",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^5.1.0"
  }
}


Use Express 5.x as shown; no other packages.

Acceptance criteria (checklist)

 node -v ≥ 18; npm i installs only express

 node server.js serves index.html at http://localhost:5000

 Sending a message:

 Builds payload with conversationId, last 10 exchanges as strings, and question

 Calls /api/chat, proxy relays to the target webhook

 Accepts both response shapes (array or object) and renders bot reply

 New Chat resets localStorage conversationId and clears history

 UI is responsive, auto-scrolls, and sanitizes text

 On error (network/invalid JSON), shows red toast and restores the user’s input

 Code comments document: webhook location, state handling, response parsing

Helpful UI details (feel free to reuse)

User bubble: purple gradient, rounded with a clipped corner on bottom-right

Bot bubble: white with subtle shadow, clipped corner bottom-left

Loader: inline three dots with staggered opacity animation “Thinking…”

Toast: fixed top-right, slide-in animation, auto-dismiss ~5s

These match the existing working design and interactions.

Run & test

npm install

npm start → open http://localhost:5000

Send “hi” and verify a bot reply renders

Add several turns; refresh — conversation persists

Click New Chat — state resets and a new UUID is used

Build exactly as specified and keep the code compact, readable, and well-commented.