Chat UI Renderer

Render chat conversations as HTML using official @n8n/chat components and styling

Overview

This node renders chat conversations into various HTML formats using official chat UI components and styling. It supports multiple rendering modes, allowing users to generate complete HTML outputs, individual message components, interactive previews, or standalone exportable HTML files.

Common scenarios include:

  • Visualizing chat logs from customer support or chatbot interactions.
  • Creating embeddable chat conversation snippets for websites or documentation.
  • Generating styled chat previews for review before publishing.
  • Exporting chat conversations as standalone HTML files for sharing or archiving.

Practical examples:

  • A user inputs a series of chat messages and receives a fully styled HTML snippet to embed in a webpage.
  • A chatbot developer previews the conversation flow with markdown formatting and timestamps enabled.
  • An analyst exports a chat transcript as a standalone HTML file for offline review.

Properties

Name Meaning
Render Mode How to render the chat conversation. Options: HTML Output (complete HTML), Component Parts (individual message components), Preview Mode (interactive preview with embedded styles), Export Mode (standalone HTML file).
Message Source Source of chat messages to render. Options: Input Data (messages from input data), Manual Messages (manually defined messages), Enhanced Chat Format (use enhanced chat trigger output format).
Chat Messages Manual chat messages to render (only if Message Source is "Manual Messages"). Each message includes sender (Bot or User), message text (supports Markdown), timestamp (ISO format), and optional unique message ID.
Chat Configuration Settings for chat display: title, subtitle, mode (Window Mode or Fullscreen Mode), whether to show timestamps, and whether to enable Markdown rendering in messages.
Styling Options Visual styling settings including theme (Default, Dark, Light, Custom), primary/secondary colors, background color, text color, chat container width and height.
Output Options Controls output details: include CSS styles, include JavaScript functionality, compress/minify HTML output, wrap output in a container div, and add custom CSS classes.

Output

The node outputs JSON containing the rendered chat content according to the selected render mode:

  • For HTML Output:

    • html: Complete or partial HTML string representing the chat conversation.
    • css: CSS styles used for the chat UI (included based on options).
    • messageCount: Number of messages rendered.

  • For Component Parts:

    • components: Array of individual message objects each with id, sender, html (message HTML), data (original message data), and index.
    • css: CSS styles.
    • messageCount: Number of messages.

  • For Preview Mode:

    • preview: Full HTML document string for an interactive preview with embedded styles.
    • html: Inner HTML of the chat container.
    • css: CSS styles.
    • messageCount: Number of messages.

  • For Export Mode:

    • export: Object with filename (suggested export filename), content (full standalone HTML document), and mimeType ("text/html").
    • preview: Inner HTML of the chat container.
    • html: Inner HTML of the chat container.
    • css: CSS styles.
    • messageCount: Number of messages.

The node does not output binary data.

Dependencies

  • No external API keys or services are required.
  • The node relies on internal n8n workflow utilities for error handling.
  • All rendering is done internally using predefined templates and styles.
  • No special environment variables or credentials needed.

Troubleshooting

  • No valid messages found to render:
    Occurs if the input data or manual messages do not contain any valid chat messages. Ensure that the input contains an array of messages or that manual messages are properly defined.

  • Unsupported render mode:
    If an invalid render mode is selected, the node throws an error. Verify that the render mode property is set to one of the supported options.

  • Markdown rendering issues:
    If Markdown is not rendering as expected, check the "Enable Markdown" option in Chat Configuration.

  • Timestamp display problems:
    Timestamps must be in ISO format. Invalid timestamps may not display correctly or at all.

  • Styling not applied:
    Custom colors and themes require correct hex color codes and valid theme selection.

Links and References

This summary reflects the static analysis of the node's execute method and its properties without runtime execution.

Discussion