Skip to main content

Integrating a Buddy in UI-Kit

This topic covers the necessary tasks to add a Pega GenAI Knowledge Buddy™ to a UI-KIT application. Before you perform these steps, ensure that the Buddy component is in your application, and then verify that the authentication profile and Knowledge Buddy service URL have the correct configurations. For more information, see the Implementation Guide at Knowledge Buddy integration and the topic Integrating a Buddy into a Pega application.

After you meet the prerequisites, perform the steps described in the following sections in order.

Setting up the configuration

The Knowledge Buddy - Widget Configuration Set enables you to customize the parameters of a Buddy's behavior. Confirm that the setup of the Configuration Set is correct.

  1. In the navigation pane of App Studio, click Settings > Configurations.
  2. Locate the configuration set named Knowledge Buddy – Widget.
  3. Optional: If you want to change any configurations, click Edit this setting, apply a change, and then click Submit.

The following are some of the configurations that are included with the standalone Buddy for both UI KIT and Constellation:

  • Default Knowledge Buddy for queries: Enter the Buddy name as the default for the Buddy widget to refer to and generate a response. If you leave this blank, the Knowledge Buddy will not produce any response.
  • Display References: When enabled, displays the references taken by Knowledge Buddy to generate the response for the query asked.
  • Enable Copy: Enables the copy response option for responses generated by Knowledge Buddy. Once enabled, a copy option will appear next to each Buddy response, which users can click to copy the response.
  • Enable Share: Enables the share response option for responses generated by Knowledge Buddy. Once enabled, a Share option will appear next to each Buddy response, allowing users to share the response in email/chat.
Note: You need to enable the Email or Messaging channel enabled on the application and integrate the Share response event by the Buddy. Without this, users will not be able to share a response.
  • Enable Share Reference: If enabled, the reference in Buddy response will be shared in email/chat when configured, along with the Buddy response.
the configuration set knowledge buddy widget

Setting up the UI

To set up the UI correctly, add the KMBuddyStyleHelper CSS file to the application skin.

  1. In the header of Dev Studio, click the Application > Skin.
  2. Click the Included Styles tab.
  3. Expand the Additional Style sheets section, and then click Add style sheet.
  4. In the field, enter or select KMBuddyStyleHelper.
    the additional style sheets section with kmbuddystylehelper style sheet added

The KMBuddyContainer Section belongs to the @baseclass class and the PegaKnowledgeBuddy-Component Ruleset. It includes the Knowledge Buddy UI out of the box. Add this Section to a wrapper section in the respective implementation layer to embed Buddy.

The Section accepts the InvokedFrom parameter, which differentiates whether you added the Buddy as part of the Knowledge Management widget. Configure the parameter with the value KMWidget if you added it along with the KM Widget.

This Section includes the following features:

  1. Search area: Takes the search text and the Buddy configurations selected in App Studio as parameters and invokes the Buddy Data Page.
  2. Response: Displays the content and references of a Buddy's response. The Section references KMBuddyReferences, which you can override in the respective implementation layer to customize the onClick behavior of references (the included onClick references open the content in a new tab).
  3. Default disclaimer: Displays the default disclaimer when the Buddy answers a question. You can override the default value of the disclaimer by using the Knowledge Buddy Disclaimer field value.
    a ui kit application where a knowledge buddy was added to the dashboard

This Topic is available in the following Module:

If you are having problems with your training, please review the Pega Academy Support FAQs.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice