diff --git a/packages/cli/templates/default-app/packages/app/src/App.tsx b/packages/cli/templates/default-app/packages/app/src/App.tsx
index 5fa952239a..e8b82ceecd 100644
--- a/packages/cli/templates/default-app/packages/app/src/App.tsx
+++ b/packages/cli/templates/default-app/packages/app/src/App.tsx
@@ -5,7 +5,7 @@ import React, { FC } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import * as plugins from './plugins';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   '@global': {
     html: {
       height: '100%',
@@ -23,20 +23,25 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const app = createApp();
-app.registerPlugin(...Object.values(plugins));
-const AppComponent = app.build();
+const app = createApp({
+  plugins: Object.values(plugins),
+});
+
+const AppProvider = app.getProvider();
+const AppComponent = app.getRootComponent();
 
 const App: FC<{}> = () => {
   useStyles();
   return (
-    <CssBaseline>
+    <AppProvider>
       <ThemeProvider theme={lightTheme}>
-        <Router>
-          <AppComponent />
-        </Router>
+        <CssBaseline>
+          <Router>
+            <AppComponent />
+          </Router>
+        </CssBaseline>
       </ThemeProvider>
-    </CssBaseline>
+    </AppProvider>
   );
 };