Skip to main content
Version: v2.x

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.
The renderer uses <div ref={props.containerRef}/> to let NLUX know where to append the streamed data.

import {AiChat, ResponseRenderer} from '@nlux/react';
import {useChatAdapter} from '@nlux/langchain-react';
import '@nlux/themes/nova.css';
import {personaOptions} from './personas';
import {WavesBackground} from './Waves';

const ColourfulResponseRenderer: ResponseRenderer<string> = (props) => {
    console.log('Response Renderer Props:');
    console.dir(props);

    return (
        <div className="colourful-response-renderer">
            <div className="response-container" ref={props.containerRef}/>
            <div className="rating-container">
                What do you think of this response?
                &nbsp;
                <button onClick={() => console.log('I like it!')}>👍</button>
                <button onClick={() => console.log('I love it!')}>❤️</button>
                <button onClick={() => console.log('I hate it!')}>😵</button>
            </div>
            <WavesBackground/>
        </div>
    )
};

export default () => {
    // LangServe adapter that connects to a demo LangChain Runnable API
    const adapter = useChatAdapter({
        url: 'https://pynlux.api.nlkit.com/pirate-speak'
    });

  return (
    <AiChat
        messageOptions={{
            // Custom response renderer for the assistant's messages
            responseRenderer: ColourfulResponseRenderer
        }}
      adapter={adapter}
      personaOptions={personaOptions}
      displayOptions={{colorScheme: 'dark'}}
    />
  );
};


Renderers For Batched Data



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

import {AiChat, ResponseRenderer} from '@nlux/react';
import {useChatAdapter} from '@nlux/langchain-react';
import '@nlux/themes/nova.css';
import {personaOptions} from './personas';
import {WavesBackground} from './Waves';

const ColourfulResponseRenderer: ResponseRenderer<string> = (props) => {
    console.log('Response Renderer Props:');
    console.dir(props);

    return (
        <div className="colourful-response-renderer">
            <div className="response-container">{props.content}</div>
            <div className="rating-container">
                What do you think of this response?
                &nbsp;
                <button onClick={() => console.log('I like it!')}>👍</button>
                <button onClick={() => console.log('I love it!')}>❤️</button>
                <button onClick={() => console.log('I hate it!')}>😵</button>
            </div>
            <WavesBackground/>
        </div>
    );
};

export default () => {
    // LangServe adapter that connects to a demo LangChain Runnable API
    const adapter = useChatAdapter({
        url: 'https://pynlux.api.nlkit.com/pirate-speak',
        dataTransferMode: 'batch'
    });

  return (
    <AiChat
        messageOptions={{
            // Custom response renderer for the assistant's messages
            responseRenderer: ColourfulResponseRenderer
        }}
      adapter={adapter}
      personaOptions={personaOptions}
      displayOptions={{colorScheme: 'dark'}}
    />
  );
};