---
sidebar_label: 'Custom Response Renderers'
---

import {CodeEditor} from '@site/src/components/CodeEditor/CodeEditor';

import app1 from './0006-custom-response-renderers/_a-streamed-data/app';
import waves1 from './0006-custom-response-renderers/_a-streamed-data/waves';
import personas1 from './0006-custom-response-renderers/_a-streamed-data/personas';
import style1 from './0006-custom-response-renderers/_a-streamed-data/style';

import app2 from './0006-custom-response-renderers/_b-batched-data/app';
import waves2 from './0006-custom-response-renderers/_b-batched-data/waves';
import personas2 from './0006-custom-response-renderers/_b-batched-data/personas';
import style2 from './0006-custom-response-renderers/_b-batched-data/style';

# Custom Response Renderers

The examples in this page show how to create custom message renderer for streamed and batched data.

## Renderers For Streamed Data

Data is streamed to the custom component as it's being generated.

<CodeEditor
    files={{
        'App.tsx': app1,
        'waves.tsx': waves1,
        'style.css': style1,
        'personas.ts': personas1,
    }}
    editorHeight={380}
    simulatedPrompt={'Write a poem about the ocean.'}
/>

## Renderers For Batched Data

The data is batched and sent to the custom component all at once.<br />
The renderer displays the data that's present in the `content` prop.

<CodeEditor
    files={{
        'App.tsx': app2,
        'waves.tsx': waves2,
        'style.css': style2,
        'personas.ts': personas2,
    }}
    editorHeight={380}
    simulatedPrompt={'When is the next full moon?'}
/>
