diff --git a/tensorboard/webapp/feature_flag/BUILD b/tensorboard/webapp/feature_flag/BUILD
index 9e80f50a468..10538310937 100644
--- a/tensorboard/webapp/feature_flag/BUILD
+++ b/tensorboard/webapp/feature_flag/BUILD
@@ -52,6 +52,7 @@ tf_ts_library(
         ":force_svg_data_source",
         ":types",
         "//tensorboard/webapp/angular:expect_angular_core_testing",
+        "//tensorboard/webapp/feature_flag/store:feature_flag_metadata",
         "//tensorboard/webapp/webapp_data_source:feature_flag_types",
         "@npm//@types/jasmine",
     ],
diff --git a/tensorboard/webapp/feature_flag/store/BUILD b/tensorboard/webapp/feature_flag/store/BUILD
index 6b6392322f4..66b2b876c8f 100644
--- a/tensorboard/webapp/feature_flag/store/BUILD
+++ b/tensorboard/webapp/feature_flag/store/BUILD
@@ -39,6 +39,7 @@ tf_ng_module(
         "feature_flag_types.ts",
     ],
     deps = [
+        ":feature_flag_metadata",
         "//tensorboard/webapp/feature_flag:types",
     ],
 )
@@ -48,6 +49,7 @@ tf_ts_library(
     testonly = True,
     srcs = ["testing.ts"],
     deps = [
+        ":feature_flag_metadata",
         ":types",
         "//tensorboard/webapp/feature_flag:testing",
     ],
diff --git a/tensorboard/webapp/feature_flag/store/feature_flag_store_config_provider.ts b/tensorboard/webapp/feature_flag/store/feature_flag_store_config_provider.ts
index 4abda3e4d23..67ee3d4d1e0 100644
--- a/tensorboard/webapp/feature_flag/store/feature_flag_store_config_provider.ts
+++ b/tensorboard/webapp/feature_flag/store/feature_flag_store_config_provider.ts
@@ -23,6 +23,7 @@ import {FeatureFlagState} from './feature_flag_types';
 export const initialState: FeatureFlagState = {
   isFeatureFlagsLoaded: false,
   defaultFlags: generateFeatureFlagDefaults(FeatureFlagMetadataMap),
+  metadata: FeatureFlagMetadataMap,
   flagOverrides: {},
 };
 
diff --git a/tensorboard/webapp/feature_flag/store/feature_flag_types.ts b/tensorboard/webapp/feature_flag/store/feature_flag_types.ts
index ca133b59e3e..241fb6c4d69 100644
--- a/tensorboard/webapp/feature_flag/store/feature_flag_types.ts
+++ b/tensorboard/webapp/feature_flag/store/feature_flag_types.ts
@@ -14,12 +14,19 @@ limitations under the License.
 ==============================================================================*/
 
 import {FeatureFlags} from '../types';
+import {FeatureFlagMetadataMapType} from './feature_flag_metadata';
 
 export const FEATURE_FLAG_FEATURE_KEY = 'feature';
 
 export interface FeatureFlagState {
   isFeatureFlagsLoaded: boolean;
   defaultFlags: FeatureFlags;
+  // TODO(bmd3k@): `metadata` is temporarily an optional property of
+  //   `FeatureFlagState`.
+  //
+  //   The property will become required once all internal code is updated to
+  //   specify `metadata` as part of `FeatureFlagState`.
+  metadata?: FeatureFlagMetadataMapType<FeatureFlags>;
   flagOverrides?: Partial<FeatureFlags>;
 }
 export interface State {
diff --git a/tensorboard/webapp/feature_flag/store/testing.ts b/tensorboard/webapp/feature_flag/store/testing.ts
index a5262d8f8e0..b00d4eb027b 100644
--- a/tensorboard/webapp/feature_flag/store/testing.ts
+++ b/tensorboard/webapp/feature_flag/store/testing.ts
@@ -14,6 +14,7 @@ limitations under the License.
 ==============================================================================*/
 
 import {buildFeatureFlag} from '../testing';
+import {FeatureFlagMetadataMap} from './feature_flag_metadata';
 import {FeatureFlagState, FEATURE_FLAG_FEATURE_KEY} from './feature_flag_types';
 
 export {buildFeatureFlag} from '../testing';
@@ -24,6 +25,7 @@ export function buildFeatureFlagState(
   return {
     isFeatureFlagsLoaded: true,
     defaultFlags: buildFeatureFlag(),
+    metadata: FeatureFlagMetadataMap,
     ...override,
     flagOverrides: override.flagOverrides ?? {},
   };
diff --git a/tensorboard/webapp/feature_flag/testing.ts b/tensorboard/webapp/feature_flag/testing.ts
index a100ad21209..79eed8733ad 100644
--- a/tensorboard/webapp/feature_flag/testing.ts
+++ b/tensorboard/webapp/feature_flag/testing.ts
@@ -13,26 +13,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
+import {
+  FeatureFlagMetadataMap,
+  generateFeatureFlagDefaults,
+} from './store/feature_flag_metadata';
 import {FeatureFlags} from './types';
 
 export function buildFeatureFlag(
   override: Partial<FeatureFlags> = {}
 ): FeatureFlags {
   return {
-    isAutoDarkModeAllowed: false,
-    defaultEnableDarkMode: false,
-    enableDarkModeOverride: null,
-    enabledColorGroup: false,
-    enabledColorGroupByRegex: false,
-    enabledExperimentalPlugins: [],
-    inColab: false,
-    scalarsBatchSize: undefined,
-    metricsImageSupportEnabled: true,
-    enabledLinkedTime: false,
-    enableTimeSeriesPromotion: false,
-    enabledCardWidthSetting: false,
-    forceSvg: false,
-    enabledScalarDataTable: false,
+    ...generateFeatureFlagDefaults(FeatureFlagMetadataMap),
     ...override,
   };
 }