webMethods.io Embed ChatGPT Bot for Cisco Webex Teams


webMethods.io Embed ChatGPT® Bot for Cisco® Webex Teams

AI Driven Innovations

Are you looking for driving your innovations around Artificial Intelligence with ChatGPT by

  • Building out of the box integration capabilities with ChatGPT®
    for your own products or applications and/or any 3rd party applications

  • Ecosystem-driven innovations and solutions(integrations) developed by your partners to drive further revenue growth.

All this “WITH YOUR OWN BRAND EXPERIENCE and EMBEDDED into your own applications, dev portals and integration marketplaces

Use Case

Here is an example showcasing how you can achieve the same with our webMethods.io Embedded iPaaS capabilities.

We built a ChatGPT® Bot for Cisco® Webex Teams where in user can ask ChatGPT® to generate text content based on any input leveraging the OpenAI® Completions API along with the Davinci model under the GPT-3 AI models family.

We say “ Hi ” to ChatGPT® Bot in Cisco® Webex Teams and ChatGPT® asks How Can I help you? Ask me a Question.

Cisco Webex Teams ChatGPT Bot - 1

We asked ChatGPT® to Write an essay on Artificial Intelligence and below is the response

:slight_smile:

Cisco Webex Teams ChatGPT Bot - 2

How To?

To achieve the same, we have done the following:

Create a Bot in Cisco Webex

  • Login to https://developer.webex.com/

  • Select My Webex Apps from the menu under your avatar at the top of this page, click “Create a New App” then “Create a Bot” to start the wizard.

  • You’ll be asked to provide some basic information about the bot: bot name, bot username, and an icon. These fields
    are end-user facing, so make them as descriptive as possible.

  • Once you’ve filled out the registration form click “Add Bot”, and if everything goes smoothly you’re all set! You’ll be given an access token for the new bot. And your Bot username will be your Bot email.

ChatGPT Bot Cisco Webex Add Bot

Get Cisco Webex Bot Person ID

  • Open Browser and Go to the Webex API People - List People | Webex for Developers and in the email field enter bot email and click on Run.

  • You will get a response and inside the response copy the iteam[0].id value. This will be your bot person id. We will need this id to configure the bot in our embed portal

image

Bot Configuration on webMethods.io Embed Portal

  • Login to your webMethods.io Embed tenant.

  • Navigate to Settings > Bots.

  • Click on the Add Bot button.

image

  • The Add New Bot Dialog appears

  • Provide the Bot Details as below as well as any other relevant details

    • Bot Name: Provide a suitable name for the bot.

    • Bot Description: Provide a short description about the bot.

    • Bot Type: the type of bot you want to add. Select this field as adaptive cards bot.

  • As soon as you select a bot type, other fields related to the selected bot are rendered in the window. Enter details for the additional fields that appear.

    • Bot Token: Bot access token

    • Bot Email ID: Bot username

    • Bot Person ID: The Cisco Webex Bot Person ID we got in the Get Cisco Webex Bot Person ID step

    • Click Add to create a new bot.

image

Integrations or Workflows

We built 3 Integrations or Workflows

ChatGPT Hi Command Workflow

This workflow gets triggered when a user types in hi command in the ChatGPT bot and responds with the adaptive card for asking a question JSON by using the Cisco® Webex Teams Bot connector. The adaptive card you can design using the Microsoft® Designer | Adaptive Cards and in the submit button action you provide the name of the ChatGPT Submit Command Workflow.

  • Cisco Bot Adaptive Card

ChatGPT Bot Ask Question Adaptive Card

  • Cisco Bot Adaptive Card Code Snippet
let content= {
    "body":[ {
        "items": [
          {
              "type": "ColumnSet",
              "columns": [
                  {
                      "type": "Column",
                      "width": "stretch",
                      "items": [
                          {
                              "text": " **Hello! I am a bot powered by Chat Gpt**", 
                              "type": "TextBlock",
                              "wrap": true
                          }
                      ]
                  }
              ]
          },
          {
              "type": "ColumnSet",
              "columns": [
                  {
                      "type": "Column",
                      "width": "stretch",
                      "items": [
                          {
                              "text": "How can I help you?",
                              "type": "TextBlock",
                              "wrap": true
                          }
                      ]
                  }
              ]
          },
          {
              "type": "ColumnSet",
              "columns": [
                  {
                      "type": "Column",
                      "width": "10px"
                  },
                  {
                      "type": "Column",
                      "width": "stretch",
                      "items": [
                          {
                              "text": "Type **"+"hi"+"** For asking a question",
                              "type": "TextBlock",
                              "wrap": true
                          }
                      ]
                  }
              ]
          },
          {
              "type": "ActionSet",
              "actions": [
                {
                    "type": "Action.ShowCard",
                    "title": "Ask me a question",
                    "card": {
                        "type": "AdaptiveCard",
                        "body": [

                            {
                                "type": "Input.Text", "id": "t1",
                                "placeholder": "type your question here"
                            },


                              {
            "type": "ActionSet", "spacing": "Small", "actions": [
            {
            "type": "Action.Submit",
            "title": "Submit",
             "data": {
                            "command": "chatgptsubmitcommand"
                        }
            }
            ]
            }
                        ]
                    },

                }
            ],
          },
          {
              "type": "ColumnSet",
              "columns": [
                  {
                      "type": "Column",
                      "width": "stretch",
                      "items": [
                          {
                              "text": "Head to my listing in [App Hub](apphub.webex.com) for more info.\n Need a human? Reach out to [our support team](devsupport@webex.com).",
                              "type": "TextBlock",
                              "wrap": true,
                              "size":"Small"
                          }
                      ]
                  }
              ]
          }
        ],
        "type": "Container"
      }]

,

    "type": "AdaptiveCard",
    "version": "1.2",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
};
var card = [{
    "contentType": "application/vnd.microsoft.card.adaptive",
    "content" : content
}]





$export(null, { card });
  • ChatGPT Hi Workflow

chatgpthi workflow

ChatGPT Submit Command Workflow

This workflow takes the requests of any user asking questions and captures the user question and user room id and invokes the Cisco Webex teams ChatGPT integration Workflow.

image

image

Cisco Webex teams ChatGPT integration Workflow

This workflow is where we have passed the question asked by the user to the ChatGPT using the ChatGPT® connector and then map the response from ChatGPT as a messages to the Cisco® Webex Teams Bot connector to show in the Cisco Webex teams bot

ChatGPT Cisco Webex Teams Integration

  • We configured a Webhook trigger to get the payload from Cisco Webex Teams Bot when user asks a Question and clicks on Submit button. The payload contains “the question” and the “Person ID” details

  • We Configured the ChatGPT Connector by

    • Configuring the ChatGPT account with the API key and then

    • Selected the Completions action which invokes the OpenAI completion API and

    • Mapped & Set the following values

      • Mapped the Webhook trigger payload text value which is the question asked by the user to the prompt input field

      • model field as “text-davinci-003”

      • temperature as “0.4”

      • max_tokens as “4000”

to pass the question to ChatGPT connector

image

  • We configured Cisco® Webex Teams® Bot connector by

    • Configuring the Cisco® Webex Teams® Account using Access Token

    • Selecting the Post New Message Action

    • Mapping the response from ChatGPT Connector to the Cisco® Webex Teams® Bot
      Post Message action.

image

Want to learn more

Read full topic