A simple Node.js/React.js chatbot UI for the IBM Watson Assistant API.
A Node.js/React.js app that provides a simple chatbot user interface for the IBM Watson Assistant API that can be integrated into an existing web app with a single script tag.
The following components are required to effectively use this repository:
Create a Node.js Cloud Foundry App
NOTE: The Node.js Cloud Foundry app must be created in the same organization and space as the Watson Assistant service in order to connect to it, otherwise it will not be possible to connect the app and the service.
Connect the Node.js Cloud Foundry App to your Watson Assistant Service
From your CLI, clone this repository onto your local machine:
git clone https://github.com/lukemccomb/watson-assistant-chatbot-ui.git
Navigate to the watson-assistant-chatbot-ui
directory in your file system
cd watson-assistant-chatbot-ui
Open the watson-assistant-chatbot-ui
repository in your IDE or open a text editor if you are not using an IDE
Create a .env
file
.env
file.env
and save it to the /watson-assistant-chatbot-ui
directory. Files prefixed with a '.'
will be hidden on most operating systems so don't be alarmed if you do not see the file you created. To toggle the visibility of hidden files on OSX, when viewing a directory in Finder, press COMMAND
+ SHIFT
+ '.'
[the period key].
Follow the directions on this page to view hidden files on Windows.
env.example
template into the new .env
fileapikey
to the ASSISTANT_API_KEY
value in the .env
fileurl
to the ASSISTANT_URL
value in the .env
file.env
file in quotes.
Assistant ID
into the ASSISTANT_ID
value in the .env
file.env
fileUpdate the manifest.yml
file using your IDE or text editor
manifest.yml
in your editor and change the name
and route
fields to match the name of your app you created in Step 1.iii. This can be found on your IBM Cloud account dashboardmanifest.yml
, update the services
list with the Watson Assistant service name which can also be found on your IBM Cloud account dashboardmanifest.yml
fileUpdate the static_store.js
file using your IDE or text editor
static_store.js
and copy the URL from the new tab that opens and paste it into the DEV_HOST_URL
variable in static_store.js
static_store.js
filePush the modified code
.env
, manifest.yml
, and static_store.js
filesibmcloud login
ibmcloud target -o {organization} -s {space}
ibmcloud app push {your-app-name}
, substituting {your-app-name}
for the name of your app
ibmcloud app push lem-assistant-chatbot
The chatbot app is now being deployed.
Once the deploy script has finished running, you can test that you have followed these instructions correctly by navigating to your app's route which you copied in Step 8.iii. You should see a blank page with a blue button in the bottom right that says 'Need Help?'. Click on this button to open the chat dialog and test out the Watson Assistant service.
Add <script>
tag into the target application within which the chatbot will exist
Open the HTML file of the page into which the script tag will be inserted. This will be the page where the blue button and dialog window will be displayed
Copy the following <script>
tag and paste it below the end-tag of the <body>
element:
<script data-main='chat_bot_app' src="{host}/chat_bot_app.js"></script>
Change {host}
in the src
attribute to match your app's route which you copied in Step 8.iii
NOTE: Make sure there is only one slash between your app's route and chat_bot_app.js
Save your changes and either run your app locally or deploy it to your cloud environment
Within your own application or website, a blue 'Need Help?' button should be visible in the bottom-right corner of the page into which the script tag was inserted. When the button is clicked, a chat window should appear and you should be able to have a conversation with your Watson Assistant service. Here is a working demo.
In order to understand the inner-workings of this application and modify any code/configurations, it is recommended that a developer have a basic understanding of the following languages/technologies/frameworks:
Non-essential:
Directories/Files:
/public/*
/src/*
The /public/
directory contains:
bundle.js
: the compiled file that Webpack produces. Do not modify this file
chat_bot_app.js
: a plain JavaScript file that contains an event listener which adds two scripts to the header of the document and a single wrapping <div>
to the page which the chatbot is then loaded into.chat_bot_styles.css
: CSS stylingfavicon.ico
: the faviconheaderIcon.png
: the chat window header iconindex.html
: a sample page to add the <script data-main="chat_bot_app" src="./chat_bot_app.js"></script>
script to. This holds the place of the actual page that the script would be added to and is only for demo purposes.The /src/
directory contains:
/components/
: all React components that make up the chat bot UIindex.js
: the entry point for the React appDirectories/Files:
/app.js
: main file that configures the Node app: defines the routes, makes any public files available, and makes some libraries/packages available to the rest of the app through module.exports
/bin/www
: builds the HTTP server, binds it t a specific port and listens for requests/routes/*
: contains an /api
directory where all of the API routes are definedDirectories/Files:
.babelrc
: Babel configuration.cfignore
: Cloud Foundry ignore file.env
: Environment variable storage.gitignore
: Contains file names that Git will ignoremanifest.yml
: Manifest file for Cloud Foundry deploymentstatic_store.js
: Static value storage filewebpack.config.js
: Webpack config fileAll libraries/packages can be found in the package.json
file. To add or remove a package to the app, use NPM and the corresponding NPM command for the specific package (e.g. npm install [package]
or npm uninstall [package]
). Do not delete or modify the package-lock.json
file. The /node_modules
directory is where all package code is stored and there's rarely a need to examine or modify /node_modules
as long as one correctly adheres to NPM protocol.
Packages:
Created by Lucas McComb - [email protected]