This repo contains a vanilla JS app with an embedded watsonx Assistant. The assistant has a variety of actions with user-defined responses that point to JS components (ex: a Swiper carousel, a Chart.js pie chart). This repo references many examples from: Assistant Toolkit
To set up your own assistant, you'll need to perform the steps below.
- The OpenAPI specification for the National Bank of Poland can be used to set up the custom extension in your assistant. For our full docs on how to create and customize extensions, visit Building a Custom Extension.
- Import the wxa-javascript-examples-action.json file located in the repository for this example into your assistant.
- Modify the
integrationID
,region
, andserviceInstanceID
withinapp.js
with your assistant's information. This information can be found in your assistant instance under "Environments" -> "Web chat" -> "Embed".
cd client
npm install
npm run start
- Open a web browser to
localhost:3000
- Open web chat
- Click/enter any of the following inputs to test a custom response:
Show a carousel
- This input demonstrates how to use SwiperJS components in watsonx Assistant responses
Exchange for Polish złoty
- This input demonstrates how to send information to assistant via a custom response, call an extension, and output the extension information in a second custom response
Make a pie chart
- This input demonstrates how to use Chart.js components in watsonx Assistant responses. You can additionally input
Make a doughnut chart
orMake a bar chart
to view different types of components.
- This input demonstrates how to use Chart.js components in watsonx Assistant responses. You can additionally input
Modify parameters
- This input demonstrates how to update the data values of "red", "blue", and "purple" that are displayed in the above charts. You can input
Make a pie chart
to view the updates.
- This input demonstrates how to update the data values of "red", "blue", and "purple" that are displayed in the above charts. You can input
Fill phone number
- This input demonstrates how to interact with the main webpage from the assistant. The assistant will fill the "Phone number" field on the main webpage with a default phone number value.
- You can additionally enter commands in the second input field on the main webpage and press the "Send to Assistant" to demonstrate how to interact with the assistant from the main webpage.