diff --git a/plugins/app-visualizer/src/components/AppVisualizerPage/DetailedVisualizer.tsx b/plugins/app-visualizer/src/components/AppVisualizerPage/DetailedVisualizer.tsx
index b2c9685bab..d22c2d94db 100644
--- a/plugins/app-visualizer/src/components/AppVisualizerPage/DetailedVisualizer.tsx
+++ b/plugins/app-visualizer/src/components/AppVisualizerPage/DetailedVisualizer.tsx
@@ -20,9 +20,9 @@ import {
   ExtensionDataRef,
   RouteRef,
   coreExtensionData,
-  createApiExtension,
-  createNavItemExtension,
-  createThemeExtension,
+  ApiBlueprint,
+  NavItemBlueprint,
+  ThemeBlueprint,
   useRouteRef,
 } from '@backstage/frontend-plugin-api';
 import Box from '@material-ui/core/Box';
@@ -66,9 +66,9 @@ const getOutputColor = createOutputColorGenerator(
     [coreExtensionData.reactElement.id]: colors.green[500],
     [coreExtensionData.routePath.id]: colors.yellow[500],
     [coreExtensionData.routeRef.id]: colors.purple[500],
-    [createApiExtension.factoryDataRef.id]: colors.blue[500],
-    [createThemeExtension.themeDataRef.id]: colors.lime[500],
-    [createNavItemExtension.targetDataRef.id]: colors.orange[500],
+    [ApiBlueprint.dataRefs.factory.id]: colors.blue[500],
+    [ThemeBlueprint.dataRefs.theme.id]: colors.lime[500],
+    [NavItemBlueprint.dataRefs.target.id]: colors.orange[500],
   },
 
   [
@@ -323,11 +323,11 @@ function Extension(props: { node: AppNode; depth: number }) {
 
 const legendMap = {
   'React Element': coreExtensionData.reactElement,
-  'Utility API': createApiExtension.factoryDataRef,
+  'Utility API': ApiBlueprint.dataRefs.factory,
   'Route Path': coreExtensionData.routePath,
   'Route Ref': coreExtensionData.routeRef,
-  'Nav Target': createNavItemExtension.targetDataRef,
-  Theme: createThemeExtension.themeDataRef,
+  'Nav Target': NavItemBlueprint.dataRefs.target,
+  Theme: ThemeBlueprint.dataRefs.theme,
 };
 
 function Legend() {
diff --git a/plugins/app-visualizer/src/plugin.tsx b/plugins/app-visualizer/src/plugin.tsx
index b41f1c69e8..0e18b692e8 100644
--- a/plugins/app-visualizer/src/plugin.tsx
+++ b/plugins/app-visualizer/src/plugin.tsx
@@ -15,27 +15,33 @@
  */
 
 import {
-  createNavItemExtension,
-  createPageExtension,
   createFrontendPlugin,
   createRouteRef,
+  NavItemBlueprint,
+  PageBlueprint,
 } from '@backstage/frontend-plugin-api';
 import VisualizerIcon from '@material-ui/icons/Visibility';
 import React from 'react';
 
 const rootRouteRef = createRouteRef();
 
-const appVisualizerPage = createPageExtension({
-  defaultPath: '/visualizer',
-  routeRef: rootRouteRef,
-  loader: () =>
-    import('./components/AppVisualizerPage').then(m => <m.AppVisualizerPage />),
+const appVisualizerPage = PageBlueprint.make({
+  params: {
+    defaultPath: '/visualizer',
+    routeRef: rootRouteRef,
+    loader: () =>
+      import('./components/AppVisualizerPage').then(m => (
+        <m.AppVisualizerPage />
+      )),
+  },
 });
 
-export const appVisualizerNavItem = createNavItemExtension({
-  title: 'Visualizer',
-  icon: VisualizerIcon,
-  routeRef: rootRouteRef,
+export const appVisualizerNavItem = NavItemBlueprint.make({
+  params: {
+    title: 'Visualizer',
+    icon: VisualizerIcon,
+    routeRef: rootRouteRef,
+  },
 });
 
 /** @public */