diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx
index 2cbe9235d71..cfa679c8050 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx
@@ -1,5 +1,8 @@
+import { MetadataControlNets } from 'features/metadata/components/MetadataControlNets';
+import { MetadataIPAdapters } from 'features/metadata/components/MetadataIPAdapters';
 import { MetadataItem } from 'features/metadata/components/MetadataItem';
 import { MetadataLoRAs } from 'features/metadata/components/MetadataLoRAs';
+import { MetadataT2IAdapters } from 'features/metadata/components/MetadataT2IAdapters';
 import { handlers } from 'features/metadata/util/handlers';
 import { memo } from 'react';
 
@@ -16,193 +19,36 @@ const ImageMetadataActions = (props: Props) => {
 
   return (
     <>
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.createdBy.getLabel}
-        parse={handlers.createdBy.parse}
-        recall={handlers.createdBy.recall}
-        renderValue={handlers.createdBy.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.generationMode.getLabel}
-        parse={handlers.generationMode.parse}
-        recall={handlers.generationMode.recall}
-        renderValue={handlers.generationMode.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.positivePrompt.getLabel}
-        parse={handlers.positivePrompt.parse}
-        recall={handlers.positivePrompt.recall}
-        renderValue={handlers.positivePrompt.renderValue}
-        direction="column"
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.negativePrompt.getLabel}
-        parse={handlers.negativePrompt.parse}
-        recall={handlers.negativePrompt.recall}
-        renderValue={handlers.negativePrompt.renderValue}
-        direction="column"
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.sdxlPositiveStylePrompt.getLabel}
-        parse={handlers.sdxlPositiveStylePrompt.parse}
-        recall={handlers.sdxlPositiveStylePrompt.recall}
-        renderValue={handlers.sdxlPositiveStylePrompt.renderValue}
-        direction="column"
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.sdxlNegativeStylePrompt.getLabel}
-        parse={handlers.sdxlNegativeStylePrompt.parse}
-        recall={handlers.sdxlNegativeStylePrompt.recall}
-        renderValue={handlers.sdxlNegativeStylePrompt.renderValue}
-        direction="column"
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.model.getLabel}
-        parse={handlers.model.parse}
-        recall={handlers.model.recall}
-        renderValue={handlers.model.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.vae.getLabel}
-        parse={handlers.vae.parse}
-        recall={handlers.vae.recall}
-        renderValue={handlers.vae.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.width.getLabel}
-        parse={handlers.width.parse}
-        recall={handlers.width.recall}
-        renderValue={handlers.width.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.height.getLabel}
-        parse={handlers.height.parse}
-        recall={handlers.height.recall}
-        renderValue={handlers.height.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.seed.getLabel}
-        parse={handlers.seed.parse}
-        recall={handlers.seed.recall}
-        renderValue={handlers.seed.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.steps.getLabel}
-        parse={handlers.steps.parse}
-        recall={handlers.steps.recall}
-        renderValue={handlers.steps.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.scheduler.getLabel}
-        parse={handlers.scheduler.parse}
-        recall={handlers.scheduler.recall}
-        renderValue={handlers.scheduler.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.cfgScale.getLabel}
-        parse={handlers.cfgScale.parse}
-        recall={handlers.cfgScale.recall}
-        renderValue={handlers.cfgScale.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.cfgRescaleMultiplier.getLabel}
-        parse={handlers.cfgRescaleMultiplier.parse}
-        recall={handlers.cfgRescaleMultiplier.recall}
-        renderValue={handlers.cfgRescaleMultiplier.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.strength.getLabel}
-        parse={handlers.strength.parse}
-        recall={handlers.strength.recall}
-        renderValue={handlers.strength.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.hrfEnabled.getLabel}
-        parse={handlers.hrfEnabled.parse}
-        recall={handlers.hrfEnabled.recall}
-        renderValue={handlers.hrfEnabled.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.hrfMethod.getLabel}
-        parse={handlers.hrfMethod.parse}
-        recall={handlers.hrfMethod.recall}
-        renderValue={handlers.hrfMethod.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.hrfStrength.getLabel}
-        parse={handlers.hrfStrength.parse}
-        recall={handlers.hrfStrength.recall}
-        renderValue={handlers.hrfStrength.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.refinerCFGScale.getLabel}
-        parse={handlers.refinerCFGScale.parse}
-        recall={handlers.refinerCFGScale.recall}
-        renderValue={handlers.refinerCFGScale.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.refinerModel.getLabel}
-        parse={handlers.refinerModel.parse}
-        recall={handlers.refinerModel.recall}
-        renderValue={handlers.refinerModel.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.refinerNegativeAestheticScore.getLabel}
-        parse={handlers.refinerNegativeAestheticScore.parse}
-        recall={handlers.refinerNegativeAestheticScore.recall}
-        renderValue={handlers.refinerNegativeAestheticScore.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.refinerPositiveAestheticScore.getLabel}
-        parse={handlers.refinerPositiveAestheticScore.parse}
-        recall={handlers.refinerPositiveAestheticScore.recall}
-        renderValue={handlers.refinerPositiveAestheticScore.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.refinerScheduler.getLabel}
-        parse={handlers.refinerScheduler.parse}
-        recall={handlers.refinerScheduler.recall}
-        renderValue={handlers.refinerScheduler.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.refinerStart.getLabel}
-        parse={handlers.refinerStart.parse}
-        recall={handlers.refinerStart.recall}
-        renderValue={handlers.refinerStart.renderValue}
-      />
-      <MetadataItem
-        metadata={metadata}
-        getLabel={handlers.refinerSteps.getLabel}
-        parse={handlers.refinerSteps.parse}
-        recall={handlers.refinerSteps.recall}
-        renderValue={handlers.refinerSteps.renderValue}
-      />
+      <MetadataItem metadata={metadata} handlers={handlers.createdBy} />
+      <MetadataItem metadata={metadata} handlers={handlers.generationMode} />
+      <MetadataItem metadata={metadata} handlers={handlers.positivePrompt} direction="column" />
+      <MetadataItem metadata={metadata} handlers={handlers.negativePrompt} direction="column" />
+      <MetadataItem metadata={metadata} handlers={handlers.sdxlPositiveStylePrompt} direction="column" />
+      <MetadataItem metadata={metadata} handlers={handlers.sdxlNegativeStylePrompt} direction="column" />
+      <MetadataItem metadata={metadata} handlers={handlers.model} />
+      <MetadataItem metadata={metadata} handlers={handlers.vae} />
+      <MetadataItem metadata={metadata} handlers={handlers.width} />
+      <MetadataItem metadata={metadata} handlers={handlers.height} />
+      <MetadataItem metadata={metadata} handlers={handlers.seed} />
+      <MetadataItem metadata={metadata} handlers={handlers.steps} />
+      <MetadataItem metadata={metadata} handlers={handlers.scheduler} />
+      <MetadataItem metadata={metadata} handlers={handlers.cfgScale} />
+      <MetadataItem metadata={metadata} handlers={handlers.cfgRescaleMultiplier} />
+      <MetadataItem metadata={metadata} handlers={handlers.strength} />
+      <MetadataItem metadata={metadata} handlers={handlers.hrfEnabled} />
+      <MetadataItem metadata={metadata} handlers={handlers.hrfMethod} />
+      <MetadataItem metadata={metadata} handlers={handlers.hrfStrength} />
+      <MetadataItem metadata={metadata} handlers={handlers.refinerCFGScale} />
+      <MetadataItem metadata={metadata} handlers={handlers.refinerModel} />
+      <MetadataItem metadata={metadata} handlers={handlers.refinerNegativeAestheticScore} />
+      <MetadataItem metadata={metadata} handlers={handlers.refinerPositiveAestheticScore} />
+      <MetadataItem metadata={metadata} handlers={handlers.refinerScheduler} />
+      <MetadataItem metadata={metadata} handlers={handlers.refinerStart} />
+      <MetadataItem metadata={metadata} handlers={handlers.refinerSteps} />
       <MetadataLoRAs metadata={metadata} />
+      <MetadataControlNets metadata={metadata} />
+      <MetadataT2IAdapters metadata={metadata} />
+      <MetadataIPAdapters metadata={metadata} />
     </>
   );
 };
diff --git a/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx b/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx
index b508c9424d1..fd71ce3e19a 100644
--- a/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx
+++ b/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx
@@ -23,29 +23,29 @@ type LoRACardProps = {
 export const LoRACard = memo((props: LoRACardProps) => {
   const { lora } = props;
   const dispatch = useAppDispatch();
-  const { data: loraConfig } = useGetModelConfigQuery(lora.key);
+  const { data: loraConfig } = useGetModelConfigQuery(lora.model.key);
 
   const handleChange = useCallback(
     (v: number) => {
-      dispatch(loraWeightChanged({ key: lora.key, weight: v }));
+      dispatch(loraWeightChanged({ key: lora.model.key, weight: v }));
     },
-    [dispatch, lora.key]
+    [dispatch, lora.model.key]
   );
 
   const handleSetLoraToggle = useCallback(() => {
-    dispatch(loraIsEnabledChanged({ key: lora.key, isEnabled: !lora.isEnabled }));
-  }, [dispatch, lora.key, lora.isEnabled]);
+    dispatch(loraIsEnabledChanged({ key: lora.model.key, isEnabled: !lora.isEnabled }));
+  }, [dispatch, lora.model.key, lora.isEnabled]);
 
   const handleRemoveLora = useCallback(() => {
-    dispatch(loraRemoved(lora.key));
-  }, [dispatch, lora.key]);
+    dispatch(loraRemoved(lora.model.key));
+  }, [dispatch, lora.model.key]);
 
   return (
     <Card variant="lora">
       <CardHeader>
         <Flex alignItems="center" justifyContent="space-between" width="100%" gap={2}>
           <Text noOfLines={1} wordBreak="break-all" color={lora.isEnabled ? 'base.200' : 'base.500'}>
-            {loraConfig?.name ?? lora.key.substring(0, 8)}
+            {loraConfig?.name ?? lora.model.key.substring(0, 8)}
           </Text>
           <Flex alignItems="center" gap={2}>
             <Switch size="sm" onChange={handleSetLoraToggle} isChecked={lora.isEnabled} />
diff --git a/invokeai/frontend/web/src/features/metadata/components/MetadataControlNets.tsx b/invokeai/frontend/web/src/features/metadata/components/MetadataControlNets.tsx
index 2d66fce0d30..2e8e3b6f9ab 100644
--- a/invokeai/frontend/web/src/features/metadata/components/MetadataControlNets.tsx
+++ b/invokeai/frontend/web/src/features/metadata/components/MetadataControlNets.tsx
@@ -1,7 +1,8 @@
-import { Text } from '@invoke-ai/ui-library';
 import type { ControlNetConfig } from 'features/controlAdapters/store/types';
+import { MetadataItemView } from 'features/metadata/components/MetadataItemView';
+import type { MetadataHandlers } from 'features/metadata/types';
 import { handlers } from 'features/metadata/util/handlers';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 type Props = {
   metadata: unknown;
@@ -15,18 +16,51 @@ export const MetadataControlNets = ({ metadata }: Props) => {
       try {
         const parsed = await handlers.controlNets.parse(metadata);
         setControlNets(parsed);
-      } catch {
+      } catch (e) {
         setControlNets([]);
       }
     };
     parse();
   }, [metadata]);
 
+  const label = useMemo(() => handlers.controlNets.getLabel(), []);
+
   return (
     <>
       {controlNets.map((controlNet) => (
-        <Text key={controlNet.model?.key}>{controlNet.model?.key}</Text>
+        <MetadataViewControlNet
+          key={controlNet.model.key}
+          label={label}
+          controlNet={controlNet}
+          handlers={handlers.controlNets}
+        />
       ))}
     </>
   );
 };
+
+const MetadataViewControlNet = ({
+  label,
+  controlNet,
+  handlers,
+}: {
+  label: string;
+  controlNet: ControlNetConfig;
+  handlers: MetadataHandlers<ControlNetConfig[], ControlNetConfig>;
+}) => {
+  const onRecall = useCallback(() => {
+    if (!handlers.recallItem) {
+      return;
+    }
+    handlers.recallItem(controlNet, true);
+  }, [handlers, controlNet]);
+
+  const renderedValue = useMemo(() => {
+    if (!handlers.renderItemValue) {
+      return null;
+    }
+    return handlers.renderItemValue(controlNet);
+  }, [handlers, controlNet]);
+
+  return <MetadataItemView label={label} isDisabled={false} onRecall={onRecall} renderedValue={renderedValue} />;
+};
diff --git a/invokeai/frontend/web/src/features/metadata/components/MetadataIPAdapters.tsx b/invokeai/frontend/web/src/features/metadata/components/MetadataIPAdapters.tsx
index b003b15279a..fef281cd092 100644
--- a/invokeai/frontend/web/src/features/metadata/components/MetadataIPAdapters.tsx
+++ b/invokeai/frontend/web/src/features/metadata/components/MetadataIPAdapters.tsx
@@ -1,7 +1,8 @@
-import { Text } from '@invoke-ai/ui-library';
 import type { IPAdapterConfig } from 'features/controlAdapters/store/types';
+import { MetadataItemView } from 'features/metadata/components/MetadataItemView';
+import type { MetadataHandlers } from 'features/metadata/types';
 import { handlers } from 'features/metadata/util/handlers';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 type Props = {
   metadata: unknown;
@@ -15,18 +16,51 @@ export const MetadataIPAdapters = ({ metadata }: Props) => {
       try {
         const parsed = await handlers.ipAdapters.parse(metadata);
         setIPAdapters(parsed);
-      } catch {
-        setIPAdapters([])
+      } catch (e) {
+        setIPAdapters([]);
       }
     };
     parse();
   }, [metadata]);
 
+  const label = useMemo(() => handlers.ipAdapters.getLabel(), []);
+
   return (
     <>
       {ipAdapters.map((ipAdapter) => (
-        <Text key={ipAdapter.model?.key}>{ipAdapter.model?.key}</Text>
+        <MetadataViewIPAdapter
+          key={ipAdapter.model.key}
+          label={label}
+          ipAdapter={ipAdapter}
+          handlers={handlers.ipAdapters}
+        />
       ))}
     </>
   );
 };
+
+const MetadataViewIPAdapter = ({
+  label,
+  ipAdapter,
+  handlers,
+}: {
+  label: string;
+  ipAdapter: IPAdapterConfig;
+  handlers: MetadataHandlers<IPAdapterConfig[], IPAdapterConfig>;
+}) => {
+  const onRecall = useCallback(() => {
+    if (!handlers.recallItem) {
+      return;
+    }
+    handlers.recallItem(ipAdapter, true);
+  }, [handlers, ipAdapter]);
+
+  const renderedValue = useMemo(() => {
+    if (!handlers.renderItemValue) {
+      return null;
+    }
+    return handlers.renderItemValue(ipAdapter);
+  }, [handlers, ipAdapter]);
+
+  return <MetadataItemView label={label} isDisabled={false} onRecall={onRecall} renderedValue={renderedValue} />;
+};
diff --git a/invokeai/frontend/web/src/features/metadata/components/MetadataItem.tsx b/invokeai/frontend/web/src/features/metadata/components/MetadataItem.tsx
index bcc7415a897..66d101f458b 100644
--- a/invokeai/frontend/web/src/features/metadata/components/MetadataItem.tsx
+++ b/invokeai/frontend/web/src/features/metadata/components/MetadataItem.tsx
@@ -1,78 +1,32 @@
-import { Flex, Text, typedMemo } from '@invoke-ai/ui-library';
-import { RecallButton } from 'features/metadata/components/RecallButton';
+import { typedMemo } from '@invoke-ai/ui-library';
+import { MetadataItemView } from 'features/metadata/components/MetadataItemView';
+import { useMetadataItem } from 'features/metadata/hooks/useMetadataItem';
 import type { MetadataHandlers } from 'features/metadata/types';
-import { MetadataParseFailedToken, MetadataParsePendingToken } from 'features/metadata/util/parsers';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { MetadataParseFailedToken } from 'features/metadata/util/parsers';
 
 type MetadataItemProps<T> = {
   metadata: unknown;
-  getLabel: MetadataHandlers<T>['getLabel'];
-  parse: MetadataHandlers<T>['parse'];
-  recall: MetadataHandlers<T>['recall'];
-  renderValue: MetadataHandlers<T>['renderValue'];
+  handlers: MetadataHandlers<T>;
   direction?: 'row' | 'column';
 };
 
-const _MetadataItem = typedMemo(
-  <T,>({ metadata, getLabel, parse, recall, renderValue, direction = 'row' }: MetadataItemProps<T>) => {
-    const [value, setValue] = useState<T | typeof MetadataParsePendingToken | typeof MetadataParseFailedToken>(
-      MetadataParsePendingToken
-    );
+const _MetadataItem = typedMemo(<T,>({ metadata, handlers, direction = 'row' }: MetadataItemProps<T>) => {
+  const { label, isDisabled, value, renderedValue, onRecall } = useMetadataItem(metadata, handlers);
 
-    useEffect(() => {
-      const _parse = async () => {
-        try {
-          const parsed = await parse(metadata);
-          setValue(parsed);
-        } catch (e) {
-          setValue(MetadataParseFailedToken);
-        }
-      };
-      _parse();
-    }, [metadata, parse]);
-
-    const isReady = useMemo(() => value !== MetadataParsePendingToken && value !== MetadataParseFailedToken, [value]);
-
-    const label = useMemo(() => getLabel(), [getLabel]);
-
-    const renderedValue = useMemo(() => {
-      if (value === MetadataParsePendingToken) {
-        return <Text>Loading</Text>;
-      }
-      if (value === MetadataParseFailedToken) {
-        return <Text>Parsing Failed</Text>;
-      }
-      const rendered = renderValue(value);
-      if (typeof rendered === 'string') {
-        return <Text>{rendered}</Text>;
-      }
-      return rendered;
-    }, [renderValue, value]);
-
-    const onRecall = useCallback(() => {
-      if (!recall || value === MetadataParsePendingToken || value === MetadataParseFailedToken) {
-        return null;
-      }
-      recall(value, true);
-    }, [recall, value]);
-
-    if (value === MetadataParseFailedToken) {
-      return null;
-    }
-
-    return (
-      <Flex gap={2}>
-        {recall && <RecallButton label={label} onClick={onRecall} isDisabled={!isReady} />}
-        <Flex direction={direction}>
-          <Text fontWeight="semibold" whiteSpace="pre-wrap" pr={2}>
-            {label}:
-          </Text>
-          {renderedValue}
-        </Flex>
-      </Flex>
-    );
+  if (value === MetadataParseFailedToken) {
+    return null;
   }
-);
+
+  return (
+    <MetadataItemView
+      label={label}
+      onRecall={onRecall}
+      isDisabled={isDisabled}
+      renderedValue={renderedValue}
+      direction={direction}
+    />
+  );
+});
 
 export const MetadataItem = typedMemo(_MetadataItem);
 
diff --git a/invokeai/frontend/web/src/features/metadata/components/MetadataItemView.tsx b/invokeai/frontend/web/src/features/metadata/components/MetadataItemView.tsx
new file mode 100644
index 00000000000..14ccc4ae2b6
--- /dev/null
+++ b/invokeai/frontend/web/src/features/metadata/components/MetadataItemView.tsx
@@ -0,0 +1,29 @@
+import { Flex, Text } from '@invoke-ai/ui-library';
+import { RecallButton } from 'features/metadata/components/RecallButton';
+import { memo } from 'react';
+
+type MetadataItemViewProps = {
+  onRecall: () => void;
+  label: string;
+  renderedValue: React.ReactNode;
+  isDisabled: boolean;
+  direction?: 'row' | 'column';
+};
+
+export const MetadataItemView = memo(
+  ({ label, onRecall, isDisabled, renderedValue, direction = 'row' }: MetadataItemViewProps) => {
+    return (
+      <Flex gap={2}>
+        {onRecall && <RecallButton label={label} onClick={onRecall} isDisabled={isDisabled} />}
+        <Flex direction={direction}>
+          <Text fontWeight="semibold" whiteSpace="pre-wrap" pr={2}>
+            {label}:
+          </Text>
+          {renderedValue}
+        </Flex>
+      </Flex>
+    );
+  }
+);
+
+MetadataItemView.displayName = 'MetadataItemView';
diff --git a/invokeai/frontend/web/src/features/metadata/components/MetadataLoRAs.tsx b/invokeai/frontend/web/src/features/metadata/components/MetadataLoRAs.tsx
index 7c2d128d261..3225a048d4e 100644
--- a/invokeai/frontend/web/src/features/metadata/components/MetadataLoRAs.tsx
+++ b/invokeai/frontend/web/src/features/metadata/components/MetadataLoRAs.tsx
@@ -1,7 +1,8 @@
 import type { LoRA } from 'features/lora/store/loraSlice';
-import { MetadataItem } from 'features/metadata/components/MetadataItem';
+import { MetadataItemView } from 'features/metadata/components/MetadataItemView';
+import type { MetadataHandlers } from 'features/metadata/types';
 import { handlers } from 'features/metadata/util/handlers';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 type Props = {
   metadata: unknown;
@@ -22,18 +23,39 @@ export const MetadataLoRAs = ({ metadata }: Props) => {
     parse();
   }, [metadata]);
 
+  const label = useMemo(() => handlers.loras.getLabel(), []);
+
   return (
     <>
       {loras.map((lora) => (
-        <MetadataItem
-          key={lora.model.key}
-          metadata={lora}
-          getLabel={handlers.loras.getLabel}
-          parse={handlers.loras.parseItem}
-          recall={handlers.loras.recallItem}
-          renderValue={handlers.loras.renderItemValue}
-        />
+        <MetadataViewLoRA key={lora.model.key} label={label} lora={lora} handlers={handlers.loras} />
       ))}
     </>
   );
 };
+
+const MetadataViewLoRA = ({
+  label,
+  lora,
+  handlers,
+}: {
+  label: string;
+  lora: LoRA;
+  handlers: MetadataHandlers<LoRA[], LoRA>;
+}) => {
+  const onRecall = useCallback(() => {
+    if (!handlers.recallItem) {
+      return;
+    }
+    handlers.recallItem(lora, true);
+  }, [handlers, lora]);
+
+  const renderedValue = useMemo(() => {
+    if (!handlers.renderItemValue) {
+      return null;
+    }
+    return handlers.renderItemValue(lora);
+  }, [handlers, lora]);
+
+  return <MetadataItemView label={label} isDisabled={false} onRecall={onRecall} renderedValue={renderedValue} />;
+};
diff --git a/invokeai/frontend/web/src/features/metadata/components/MetadataT2IAdapters.tsx b/invokeai/frontend/web/src/features/metadata/components/MetadataT2IAdapters.tsx
index 79cb4864d89..4a73fb3ccbd 100644
--- a/invokeai/frontend/web/src/features/metadata/components/MetadataT2IAdapters.tsx
+++ b/invokeai/frontend/web/src/features/metadata/components/MetadataT2IAdapters.tsx
@@ -1,7 +1,8 @@
-import { Text } from '@invoke-ai/ui-library';
 import type { T2IAdapterConfig } from 'features/controlAdapters/store/types';
+import { MetadataItemView } from 'features/metadata/components/MetadataItemView';
+import type { MetadataHandlers } from 'features/metadata/types';
 import { handlers } from 'features/metadata/util/handlers';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 type Props = {
   metadata: unknown;
@@ -15,18 +16,51 @@ export const MetadataT2IAdapters = ({ metadata }: Props) => {
       try {
         const parsed = await handlers.t2iAdapters.parse(metadata);
         setT2IAdapters(parsed);
-      } catch {
-        // no-op
+      } catch (e) {
+        setT2IAdapters([]);
       }
     };
     parse();
   }, [metadata]);
 
+  const label = useMemo(() => handlers.t2iAdapters.getLabel(), []);
+
   return (
     <>
       {t2iAdapters.map((t2iAdapter) => (
-        <Text key={t2iAdapter.model?.key}>{t2iAdapter.model?.key}</Text>
+        <MetadataViewT2IAdapter
+          key={t2iAdapter.model.key}
+          label={label}
+          t2iAdapter={t2iAdapter}
+          handlers={handlers.t2iAdapters}
+        />
       ))}
     </>
   );
 };
+
+const MetadataViewT2IAdapter = ({
+  label,
+  t2iAdapter,
+  handlers,
+}: {
+  label: string;
+  t2iAdapter: T2IAdapterConfig;
+  handlers: MetadataHandlers<T2IAdapterConfig[], T2IAdapterConfig>;
+}) => {
+  const onRecall = useCallback(() => {
+    if (!handlers.recallItem) {
+      return;
+    }
+    handlers.recallItem(t2iAdapter, true);
+  }, [handlers, t2iAdapter]);
+
+  const renderedValue = useMemo(() => {
+    if (!handlers.renderItemValue) {
+      return null;
+    }
+    return handlers.renderItemValue(t2iAdapter);
+  }, [handlers, t2iAdapter]);
+
+  return <MetadataItemView label={label} isDisabled={false} onRecall={onRecall} renderedValue={renderedValue} />;
+};
diff --git a/invokeai/frontend/web/src/features/metadata/hooks/useMetadataItem.tsx b/invokeai/frontend/web/src/features/metadata/hooks/useMetadataItem.tsx
new file mode 100644
index 00000000000..178ac5155a7
--- /dev/null
+++ b/invokeai/frontend/web/src/features/metadata/hooks/useMetadataItem.tsx
@@ -0,0 +1,51 @@
+import { Text } from '@invoke-ai/ui-library';
+import type { MetadataHandlers } from 'features/metadata/types';
+import { MetadataParseFailedToken, MetadataParsePendingToken } from 'features/metadata/util/parsers';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+export const useMetadataItem = <T,>(metadata: unknown, handlers: MetadataHandlers<T>) => {
+  const [value, setValue] = useState<T | typeof MetadataParsePendingToken | typeof MetadataParseFailedToken>(
+    MetadataParsePendingToken
+  );
+
+  useEffect(() => {
+    const _parse = async () => {
+      try {
+        const parsed = await handlers.parse(metadata);
+        setValue(parsed);
+      } catch (e) {
+        setValue(MetadataParseFailedToken);
+      }
+    };
+    _parse();
+  }, [handlers, metadata]);
+
+  const isDisabled = useMemo(() => value === MetadataParsePendingToken || value === MetadataParseFailedToken, [value]);
+
+  const label = useMemo(() => handlers.getLabel(), [handlers]);
+
+  const renderedValue = useMemo(() => {
+    if (value === MetadataParsePendingToken) {
+      return <Text>Loading</Text>;
+    }
+    if (value === MetadataParseFailedToken) {
+      return <Text>Parsing Failed</Text>;
+    }
+
+    const rendered = handlers.renderValue(value);
+
+    if (typeof rendered === 'string') {
+      return <Text>{rendered}</Text>;
+    }
+    return rendered;
+  }, [handlers, value]);
+
+  const onRecall = useCallback(() => {
+    if (!handlers.recall || value === MetadataParsePendingToken || value === MetadataParseFailedToken) {
+      return null;
+    }
+    handlers.recall(value, true);
+  }, [handlers, value]);
+
+  return { label, isDisabled, value, renderedValue, onRecall };
+};
diff --git a/invokeai/frontend/web/src/features/metadata/util/handlers.ts b/invokeai/frontend/web/src/features/metadata/util/handlers.tsx
similarity index 98%
rename from invokeai/frontend/web/src/features/metadata/util/handlers.ts
rename to invokeai/frontend/web/src/features/metadata/util/handlers.tsx
index 9b2699bf079..1f86257d422 100644
--- a/invokeai/frontend/web/src/features/metadata/util/handlers.ts
+++ b/invokeai/frontend/web/src/features/metadata/util/handlers.tsx
@@ -1,3 +1,4 @@
+import { Text } from '@invoke-ai/ui-library';
 import { toast } from 'common/util/toast';
 import type { ControlNetConfig, IPAdapterConfig, T2IAdapterConfig } from 'features/controlAdapters/store/types';
 import type { LoRA } from 'features/lora/store/loraSlice';
@@ -19,10 +20,10 @@ import { recallers } from './recallers';
 
 const renderModelConfigValue: MetadataRenderValueFunc<AnyModelConfig> = (value) =>
   `${value.name} (${value.base.toUpperCase()}, ${value.key})`;
-const renderLoRAValue: MetadataRenderValueFunc<LoRA> = (value) => `${value.model.key} (${value.weight})`;
+const renderLoRAValue: MetadataRenderValueFunc<LoRA> = (value) => <Text>{`${value.model.key} (${value.weight})`}</Text>;
 const renderControlAdapterValue: MetadataRenderValueFunc<ControlNetConfig | T2IAdapterConfig | IPAdapterConfig> = (
   value
-) => `${value.model?.key} (${value.weight})`;
+) => <Text>{`${value.model?.key} (${value.weight})`}</Text>;
 
 const parameterSetToast = (parameter: string, description?: string) => {
   toast({