Skip to main content

AiResponse

    Use the AiResponse component to animate AI-generated content.

    OverviewPropertiesChangelog

    Import​

    import { AiResponse } from '@dynatrace/strato-components/content';

    Demo​

    Response state​

    The responseState prop controls how the component renders and animates content:

    • streaming (default): Use while the AI response is actively being generated. The component animates each new word as it arrives, giving users a live typing effect.
    • complete: Set this once streaming has finished and the full response text has been passed. The component finishes animating any remaining words that have not yet been displayed.
    • static: Use when the full response is available upfront and no animation is needed. The content is rendered immediately without any animation.

    Animation state​

    The onAnimationStateChange callback lets you react to the word-by-word animation. It is called with true when the animation starts and with false once the last word of the current content has fully faded in.

    Custom code block renderers​

    Use the customCodeBlockRenderers prop to render the content of a fenced code block as a component instead of as a code snippet. It maps a fence language to the component that renders blocks of that language:

    ```dt-visualization
    { "labelAccessor": "category", "valueAccessor": "value", "data": [] }
    ```

    Blocks with any other language, and inline code, keep their default rendering. Pass a stable reference, for example by wrapping the map in useMemo.

    The renderer receives the code of the block, its language, and isComplete. A response is revealed word by word, so a code block is rendered long before its content is complete, and processing a partial content — parsing JSON, for example — fails until the closing fence arrives. Use isComplete to show a placeholder until then.

    Still have questions?
    Find answers in the Dynatrace Community