IBM watsonx Assistant: A Developer-Friendly Guide for decorating responses

Introduction

IBM’s watsonx Assistant is a market-leading, conversational artificial intelligence platform designed to help you overcome the friction of traditional support and deliver exceptional experiences. While watsonx assistant is so powerful in integrating with other applications through OpenAPI, the blog explores some of watsonx Assistant’s impressive, yet often underutilized capabilities that can elevate user interactions improving the UX.
https://www.ibm.com/products/watsonx-assistant

JSON Editor: A Creative Touch

watsonx Assistant offers a versatile experience even without its JSON editor. You can easily include elements like videos and images in your chatbot interactions. However, the JSON editor opens up another realm of possibilities. In some situations, you might need to define responses using the JSON editor. (For more information about dialog responses, see Responses). Editing the response JSON gives you direct access to the data that will be returned to the integration or custom client.
https://cloud.ibm.com/docs/assistant?topic=assistant-dialog-responses-json

Below is what a simple json editor may look like after you have simply type “Please ask your HR Related Question” and force a user to type a message. Don’t worry it will get harder 😂.

Customizing Your Chat Interface

One of watsonx Assistant’s key features is its compatibility with custom UIs/clients, allowing you to modify how the chatbot’s responses look using HTML. For instance, the GitHub repository watson-developer-cloud/assistant-toolkit provides examples of how to add custom buttons to the chat interface. It might be a good idea to start with these simpler modifications. However, today, I’m in a mischievous mood, so let’s skip the warm-up and dive straight into the deep end of the custom UI pool! 😄 I know it’s like suggesting a marathon without a jog, but don’t worry; I promise we’ll make it through the challenge together. If you’re up for the adventure, check out this tutorial: https://cloud.ibm.com/docs/watson-assistant?topic=watson-assistant-web-chat-develop-content-carousel, and take a peek at what the JSON editor may look like for the carousel.

Below is what the json editor may look like for the carousel:

{
  "generic": [
    {
      "user_defined": {
        "carousel_data": [
          {
            "alt": "everyday card",
            "url": "lendyr-everyday-card.jpg",
            "title": "The Everyday Card",
            "description": "$300 bonus plus 5% gas station cash back offer. Earn 2% cash back on all other purchases."
          },
          {
            "alt": "preferred card",
            "url": "lendyr-preferred-card.jpg",
            "title": "The Preferred Card",
            "description": "$300 bonus plus 5% gas station cash back offer. Earn 5% cash back on all other purchases."
          },
          {
            "alt": "topaz card",
            "url": "lendyr-topaz-card.jpg",
            "title": "The Topaz Card",
            "description": "$90 Annual fee. Earn 120,000 bonus points. Earn additional points on every purchase."
          }
        ],
        "user_defined_type": "carousel"
      },
      "response_type": "user_defined"
    }
  ]
}

After you have defined the above “user_defined” type you can retrieve this from the react application: (Please see the full code here https://github.com/watson-developer-cloud/assistant-toolkit/tree/master/integrations/webchat/examples/content-carousel)

/**
 * This function is called when web chat has been loaded and is ready to be displayed.
 */
async function webChatOnLoad(instance) {
  instance.on({
    type: 'customResponse',
    handler: (event, instance) => {
      // The "user_defined_type" property is just an example; it is not required. You can use any other property or
      // condition you want here. This makes it easier to handle different response types if you have more than
      // one custom response type.
      if (event.data.message.user_defined && event.data.message.user_defined.user_defined_type === 'carousel') {
        carouselCustomResponseHandler(event, instance);
      }
    },
  });
  await instance.render();
}

For simplicity I would recommend cloning the carousel repo and Running the JavaScript Example.

1. cd client/javascript
2. npm install
3. npm run start
4. Open a web browser to localhost:3000
5. Open web chat
6. Click or send the message “Show me a carousel”

When you actually use it in your application don’t forget to change these lines of code:

You can find your integrationID, region and serviceInstanceID in environments -> webchat -> embed section of watsonx assistant.

A Learning Adventure

Remember, these features, while offering extensive customization, do require some learning and experimentation to use effectively.

Markdown: The Quick Start Solution

In addition to its various features, watsonx Assistant supports markdown language, which is incredibly useful for adding interactive elements to chats. For example, creating an expandable list of documents is straightforward with markdown:

<details> <summary><p style="color: blue;">Related Documents</p></summary> ${reference}</details>

This code creates an interactive, expandable section in the chat interface. Markdown is also handy for creating tables and other layouts. To use it simply just copy and paste this to the watsonx assistant response chat and try it out. Don’t forget to declare the variable reference first.

Essential Recommendation

If you’re pressed for time but want to enhance your chatbot’s responses, start with markdown. It’s quick, easy to learn, and can significantly improve the interactivity and appearance of your chatbot’s responses.

Leveraging Third-Party Tools

Additionally, third-party tools like Hala.ai offer more ways to enhance your chatbot’s capabilities. These external resources can be a boon in adding versatility and creativity to your chatbot designs.

Conclusion

watsonx Assistant offers a suite of features like JSON editing, multimedia integration, custom UI connectivity, and markdown support, making it a versatile tool for developers. Although mastering these features takes some time, they greatly expand what your chatbot can do. Starting with markdown is a practical and time-efficient way to begin, and exploring third-party tools like Hala.ai can further enrich your chatbot’s functionality (Even I still use markdown because it saves a lot of time 😂). watsonx Assistant isn’t just for building chatbots; it’s a platform for innovative, AI-driven communication.