Rasa core integration with chatwidget

Use a above repo. Make sure you have node and npm installed. and then create a new react app using the below command

npx create-react-app react-ui

Now cd into the react-ui and run

npm install

Navigate into the App.js file in src

import React from 'react';
import './App.css';
import { Widget } from 'rasa-webchat';

function App() {
  return (
    <div className="App" >
      <p>React UI</p>
      <Widget
      interval={2000}
      initPayload={"/get_started"}
      socketUrl={"http://localhost:5005"}
      socketPath={"/socket.io/"}
      customData= {{"userId": "123"}} // arbitrary custom data. Stay minimal as this will be added to the socket
      title={"Rasa UI"}
      inputTextFieldHint={"Type a message..."}
      connectingText={"Waiting for server..."}
      hideWhenNotConnected
      embedded={false}
      openLauncherImage="myCustomOpenImage.png"
      closeLauncherImage="myCustomCloseImage.png"
      params={{
        images: {
          dims: {
            width: 300,
            height: 200
          }
        },
        storage: "local"
      }}
    />
    </div>
  );
}

export default App;

Ans then add Web socket channel as mentioned here

Then run npm start in react-ui folder and rasa run in rasa folder. Optionally can run rasa run actions too.