Embed App Builder Web SDK in a React Web App
The following guide describes the process of embedding the App Builder React SDK in a React web app.
info
App Bulder React SDK only supports Reactv16 based applications.
BUILDING
STEP 1
You need to download and extract the app builder source code, you can read more here.
Run the app-builder-cli in your project folder using the following command:
npm i && npm run start
STEP 2
Navigate using the arrow keys and select the Build
option using the enter key

STEP 3
Select the React SDK
platform, after which the CLI will start the build process. This will take a few minutes.

STEP 4
Once the build is complete open a terminal window in your React project directory.

STEP 5
The app-builder-cli compiles your App Builder project into a node module .tgz file inside the <Agora App Builder>/Builds/react-sdk
folder. Simply install this module using the following command.
npm install <path-to-app-builder-project-folder>/Builds/react-sdk/appbuilder-<version>-<hash>.tgz
STEP 6
Once the App Bulder React SDK is installed we also need to install the peer dependencies.
npm install react-router-dom@5 @apollo/client@3 nanoid@4
USAGE
STEP 1
The module is installed with same name as your App Builder project. Import it just like any other node module into your desired React component.
import AgoraAppBuilder from "@appbuilder/react";
STEP 2
After importing the module your App Builder project can be rendered using the View
property on the imported AgoraAppBuilder
object.
Make sure to provide necessary styling including a width, height and display flex on the parent element of the View
component for proper scaling.
const App = () => {
return (
<div style={{ display: "flex", width: "100vw", height: "550px" }}>
<AgoraAppBuilder.View />
</div>
);
}
STEP 3
Start the development server inside your React project directory with the following command
npm run start
STEP 4
You should now see your App Builder project being displayed in your desired React component.

CUSTOMIZATION
STEP 1
You can use FPEs (First Party Extension) to customize your embedded App Builder project.
Read this guide for more information.
STEP 2
To create a Customization in a React web app you need to access the createCustomization
method on the imported AgoraAppBuilder
object, which takes the UserCustomizationConfig
as a parameter and returns a customization object.
Make sure you do this on component mount for best results.
import AgoraAppBuilder from "@appbuilder/react";
const App = () => {
useEffect(()=>{
const customization = AgoraAppBuilder.createCustomization({
/*
My Customization Config. See https://appbuilder-docs.agora.io/customization-api/quickstart to get started with customizing!
*/
});
},[])
...
STEP 3
Pass the returned customization object to the customize
method available under the same AgoraAppBuilder
object to apply the config to your embedded App Builder project.
import AgoraAppBuilder from "@appbuilder/react";
const App = () => {
useEffect(()=>{
const customization = AgoraAppBuilder.createCustomization({
/*
My Customization Config. See https://appbuilder-docs.agora.io/customization-api/quickstart to get started with customizing!
*/
});
AgoraAppBuilder.customize(customization);
},[])
...
STEP 4
You should now be able to see your customizations in action!
