Image Renderer

[oblique bramble]

Are there any docs or examples of using the image renderer for images generated by a langgraph agent?

Currently when my agent generates an image, I update a state property that holds the ids of the images generated for that thread, so that I can get the image from blob store.

I don't understand how to use the image renderer to render this image within the chat.

1. How do I use the default Image Renderer?
2. What is the best practice way to return the image from the Langgraph agent? Is it via a state property, or is there a message type or message property that I should set?

[urban chasm]

This solution has been AI generated

You can render images from a LangGraph agent by returning an ImageMessage containing base64 image data and format. The default Image Renderer in CopilotChat will render these automatically—no need to manage blob IDs in state.

Using the default Image Renderer

• The default renderer is enabled out of the box in CopilotChat, CopilotPopup, and CopilotSidebar.
• To customize, pass an ImageRenderer prop. If you omit it, the built-in renderer is used.

import { CopilotChat } from '@copilotkit/react-ui';

// Default (built-in Image Renderer)
<CopilotChat />

// Custom Image Renderer (optional)
const CustomImageRenderer = ({ image, content, className }) => (
  <div className={className}>
    <img src={`data:image/${image.format};base64,${image.bytes}`} alt={content || 'Generated image'} />
  </div>
);

<CopilotChat ImageRenderer={CustomImageRenderer} />

Docs: https://docs.copilotkit.ai/reference/components/chat/CopilotChat#props

Best practice: returning images from a LangGraph agent

• Return an ImageMessage from the agent with base64 bytes and format. Avoid storing image IDs in state or using attachments/content arrays.
• The chat UI reads image: { format, bytes } and renders it via the Image Renderer.

{
  "type": "ImageMessage",
  "image": {
    "format": "png",
    "bytes": "<BASE64_IMAGE_DATA>"
  },
  "content": "Optional caption or description"
}

Notes:

• Supported formats include png, jpeg, webp, gif.
• Convert your LangGraph-generated image to base64 and populate the ImageMessage before sending to the frontend.

Source references:

• ImageRenderer implementation and props
• Message types and ImageData shape
• Service adapter examples for converting LLM outputs to ImageMessage

Was this helpful?

If this solution worked for you, please click on the appropriate option below to help us improve:

[urban chasm]

Thank you for your feedback! Our team will provide additional assistance. 🔄

[oblique bramble]

I don't think ImageMessage is a langGraph message type. Could you point me to an end to end working example?