Codacy Badge
Build Status
Twitter Follow

Susi is an artificial intelligence combining pattern matching, internet data, data flow principles and inference engine principles. It will have some reflection abilities and it will be able to remember the users input to produce deductions and a personalized feed-back. Its purpose is to explore the abilities of an artificial companion and to answer the remaining unanswered questions. The SUSI.AI web chat is a front-end that is developed for web access of SUSI.


Please join our mailing list to discuss questions regarding the project:

Our chat channel is on gitter here:

Technology Stack


  • HTML - Structure of the web page generated.
  • CSS - Styling options and details ofthe web page.
  • Javascript(JSON) - Used to store information for deploying the application such as dependencies.
  • ReactJS - Structure for deployment of the web page.


  • node –version >= 6
  • npm –version >= 3

How to deploy?

Running on localhost:

  • Step 1: Fork repository and clone it to your desktop
  • Step 2: Then cd into that cloned folder
  • Step 3: Install all the dependencies by running :$ npm install
  • Step 4: Run on http://localhost:3000 by running :$ npm run start
  • Step 5: Build locally by running : $ npm run build
  • Step 6: To deploy at a url use : $ npm run deploy

How to connect to Susi Hardware?

  • Step 1: Configure your Susi Hardware Device using instructions on
  • Step 2: Go to settings > Connect to Susi Hardware
  • Step 3: Add the default WebSocket URL for your Susi Hardwre Device. If you are using webchat on the same device as Susi Hardware, it will be ws:// . Default port is 9001, unless configured otherwise.
  • Step 4: On successful connection, you will get a confirmation alert. After that, all your queries to your Susi Hardware Device and their results will show up on Susi Webchat.

Colours and Font Sizes

Component Colours of Light theme

  • Background Colour of the Application - #ffffff #ffffff
  • Background Colour Message History -#f5f4f6 #f5f4f6
  • Chat bubbles Colour-
    • Chat bubbles of SUSI- #fffff #ffffff
    • Chat bubbles of User- #e0e0e0 #e0e0e0
  • Top Bar Colour- #4285f4 #4285f4
  • Buttons Colour- #4285f4 #4285f4
  • Colour of search result- #ff5e00 #ff5e00
  • Toggle Colour-
    • thumbOnColor- #5ab1fc #5ab1fc
    • trackOnColor- #4285f4 #4285f4
  • User Feedback Colour-
    • Thumbs Up Colour-
      Voted- #1685e5 #1685e5 Unvoted- #90a4ae #90a4ae


  • Font Type of Chat Message- “Product Sans”, sans-serif
  • Font Type of Message Composer- “Product Sans”, sans-serif
  • Chat Message font size :14px
  • Chat Composer font size : 16px
  • Font Colour of Chat Message- #001d38 #001d38
  • Font Colour of Message Composer- #001d38 #001d38