Rich Formatted Chat Responses

• Jun 18, 2026
• 2 minutes to read

DevExpress Blazor AI Chat displays assistant responses as plain text unless you configure a different response format. If your AI service returns Markdown, set the DxAIChat.ResponseContentFormat property to ResponseContentFormat.Markdown and use a custom MessageContentTemplate to convert Markdown to HTML.

This approach allows you to display headings, lists, links, code blocks, tables, and other rich text elements in the chat UI.

Run Demo: AI Chat - Rich Formatted Response

Important

Always sanitize HTML generated from Markdown to prevent cross-site scripting (XSS). Use a trusted sanitizer (for example, the HtmlSanitizer package) to allow only safe tags and attributes before the browser renders content.

Render Markdown Responses

The following code snippet configures AI Chat to treat assistant output as Markdown and render it as HTML. The example uses the Markdig package to parse Markdown and the HtmlSanitizer package to remove unsafe HTML.

@using Markdig
@using Ganss.Xss

<DxAIChat ResponseContentFormat="ResponseContentFormat.Markdown">
    <MessageContentTemplate>
        @ToHtml(context.Content)
    </MessageContentTemplate>
</DxAIChat>

@code {
    private readonly HtmlSanitizer sanitizer = new HtmlSanitizer();

    MarkupString ToHtml(string markdown) {
        string html = Markdown.ToHtml(markdown);
        html = sanitizer.Sanitize(html);
        return new MarkupString(html);
    }
}

Render Individual Content Items

Some AI responses contain multiple content items instead of a single text block. Use the BlazorChatMessage.Contents collection in a custom template when you need to render different content types separately.

In the following example, AI Chat displays reasoning content in a collapsible area and renders the final answer as formatted Markdown:

<DxAIChat ResponseContentFormat="ResponseContentFormat.Markdown">
    <MessageContentTemplate>
        @foreach(var item in context.Contents) {
            if(item is TextReasoningContent reasoning) {
                <details>
                    <summary>Model Thoughts</summary>
                    <p>@ToHtml(reasoning.Text)</p>
                </details>
            }
            else if(item is TextContent text) {
                <p>@ToHtml(text.Text)</p>
            }
        }
    </MessageContentTemplate>
</DxAIChat>

@code {
    private readonly HtmlSanitizer sanitizer = new HtmlSanitizer();

    MarkupString ToHtml(string markdown) {
        string html = Markdown.ToHtml(markdown);
        html = sanitizer.Sanitize(html);
        return new MarkupString(html);
    }
}

Run Demo: AI Chat - Reasoning Visualization

This technique is useful when the connected model returns multiple AIContent items, such as formatted text, reasoning traces, or multimodal content.