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.