How can I format n8n chat responses to display both a rendered image and its URL?

Below is an explanation and a suggested solution.

Why You’re Seeing JSON Output

By default, the Chat Trigger node will simply forward the output from your connected node (in this case, the OpenAI node). If the response isn’t wrapped as a string in a property named either text or output, the entire JSON object is sent back. That’s why you’re seeing a markdown-like JSON block instead of a neatly rendered image and URL.

How to Format the Response

To have the response display as both a rendered image and a clickable URL, you’ll need to add an extra step in your workflow to build the reply manually. You can do this by inserting a node (for example, a Set node or a Code node) after your OpenAI node that creates a property named either text or output with the formatted message.

For example, with a Set node you could do something like this:

JSONCopied
{
  "nodes": [
    {
      "parameters": {
        "values": {
          "string": [
            {
              "name": "text",
              "value": "![Image]({{ $json.imageUrl }})\n\nHere is your image: [view full size]({{ $json.imageUrl }})"
            }
          ]
        },
        "options": {}
      },
      "name": "Format Response",
      "type": "n8n-nodes-base.set",
      "typeVersion": 1,
      "position": [
        600,
        0
      ]
    }
  ],
  "connections": {
    "OpenAI": {
      "main": [
        [
          {
            "node": "Format Response",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "When chat message received": {
      "main": [
        [
          {
            "node": "OpenAI",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  }
}

How It Works

1. OpenAI Node
   The OpenAI node returns an object that includes a key with the image URL (for example, imageUrl).

2. Format Response Node (Set Node)
   This additional node creates a new field called text (you could also use output). In this example, it builds a markdown string that:

   • Displays the image using the standard markdown image syntax (![Image](URL)).
   • Displays the image URL as a clickable link.

3. Chat Trigger Node
   When the Chat Trigger node sends out the response, it will now use the value stored in the text property. This results in the user seeing a rendered image along with the URL underneath.

Make sure that the field name you use (text or output) matches the expected property name in the Chat Trigger documentation. This is key to ensuring the chat reply is formatted correctly.

---

By adding this extra step, your chat will respond with a nicely formatted message that shows both the rendered image and its URL.

Below is one approach to ensure that your chat reply shows both an inline image and its URL. By default, the Chat Trigger node will send as a response the value of a parameter called either text or output from the last node in your workflow. In your case, the OpenAI node returns an image URL and the Chat Trigger directly forwards that response, which GitHub-flavored markdown renders as an image preview.

To customize the reply so that it includes both a rendered image and the URL as text, you can add a function (or set) node immediately after your OpenAI node that creates a response with a custom message. For example, if your OpenAI node returns the image URL in a property (say, image or output), you could insert a Function node like this:

JAVASCRIPTCopied
// This function assembles the custom response.
// Make sure to change `$json["image"]` to the exact key from the OpenAI node output if different.
items[0].json = {
  text: `![Generated Image](${ $json["image"] })\n\nImage URL: ${ $json["image"] }`
};
return items;

In this snippet, the text property is manually set with a markdown image (the syntax ) followed by the image URL on the next line. The Chat Trigger node will then pick up this text value as the chat response.

A few points to keep in mind:

• The Chat Trigger node uses either the text or output property to determine what to send back to the user. If you use a different key, it returns the full object without formatting.
• You can adjust the markdown formatting as needed. This example uses a line break between the image display and the URL.
• Ensure that the key you reference (here, "image") matches the output from your OpenAI node. If your OpenAI node returns the URL under a different field (for example, "output"), update the function accordingly.

By adding this extra step to format the output manually, your workflow will now return a chat message that includes both the rendered image and its URL.

For further details, you can refer to the documentation on how to set the chat response manually.