Markdown Editor for rendering GenAI Connect Response on UI

[kaspk (Kajal Kaspate)]

If you have a GenAI connect rule which brings back markdown text and you would like to show in proper format, you could use below steps.

Before using markdown editor (I am using Rich text editor here):

After using markdown editor:

How to achieve these results

A. Configure GenAI connect rule

1. Make sure your GenAI connect rule returns ‘Unstructured’ data.

   

2. Make sure the property type is ‘Text (paragraph)’

B. Installing constellation component in your enviroment

1. Navigate to Releases · pegasystems/constellation-ui-gallery · GitHub and download Constellation UI Gallery Lib (components only) zip file relevant to your Pega version.

2. I downloaded below for my 26.1.1 enviroment

   

3. Import this RAP in your enviroment and add ruleset in your application stack.

   

4. Add below DSS and restart your Pega instance.

Owning Ruleset: Pega-UIEngine
Setting Purpose: prconfig/uiengine/constellation/enableCustomComponents/default
Value: true

C. Using this Constellation Component in your view

1. Open the view where you are showing the response and navigate to the settings of the property which contains the LLM response.

2. Along with ‘Rich text editor’ and ‘Text Area’, you should see ‘Markdown editor’ as an option.

   

3. Make sure the ‘Edit mode’ for this prperty is ‘Read-only’.

Note: If you are unable to see custom components, please check out if the toggle ‘EnableCustomComponentV2’ is ON

This option can be mainly used for summarisation use cases where LLM has the flexibility to bring the data in the format that’s suitable for the response it has generated.

[RameshSangili]

Thanks for sharing ..