AiResponse

• Changelog

Use the AiResponse component to animate AI-generated content.

OverviewPropertiesChangelog

Package @dynatrace/strato-components, latest version 3.15.1. Below are the changes to AiResponse. See Components changelog for all changes to the package.

3.15.0 Released Oct 1, 2026

Updates

• Markdown tables are now rendered using DataTable, with sortable, resizable, and line-wrappable columns. (APPDEV-19223)

3.14.0 Released Sep 17, 2026

Updates

• You can now render the content of a fenced code block as a component with the customCodeBlockRenderers prop. (DI-30803)

How to opt in

customCodeBlockRenderers maps a fence language to the component that renders blocks of that language, which lets a response carry a payload that is displayed as a component instead of as code. Blocks with any other language, and inline code, keep their default rendering.

The renderer receives the code of the block, its language, and isComplete. Content is revealed word by word, so a code block is rendered long before its content is complete. isComplete reports whether the closing fence of the block has arrived, which lets you show a placeholder until then.

import {
  AiResponse,
  type AiResponseCodeBlockProps,
  Skeleton,
} from '`@dynatrace/strato-components/content';`

const Visualization = ({ code, isComplete }: AiResponseCodeBlockProps) => {
  if (!isComplete) {
    return <Skeleton height={300} />;
  }
  return <DonutChart {...JSON.parse(code)} />;
};

const renderers = { 'dt-visualization': Visualization };

const Chat = ({ response }) => (
  <AiResponse customCodeBlockRenderers={renderers}>{response}</AiResponse>
);