feat: workflow library (#5148)

* chore: bump pydantic to 2.5.2 This release fixes pydantic/pydantic#8175 and allows us to use `JsonValue` * fix(ui): exclude public/en.json from prettier config * fix(workflow_records): fix SQLite workflow insertion to ignore duplicates * feat(backend): update workflows handling Update workflows handling for Workflow Library. **Updated Workflow Storage** "Embedded Workflows" are workflows associated with images, and are now only stored in the image files. "Library Workflows" are not associated with images, and are stored only in DB. This works out nicely. We have always saved workflows to files, but recently began saving them to the DB in addition to in image files. When that happened, we stopped reading workflows from files, so all the workflows that only existed in images were inaccessible. With this change, access to those workflows is restored, and no workflows are lost. **Updated Workflow Handling in Nodes** Prior to this change, workflows were embedded in images by passing the whole workflow JSON to a special workflow field on a node. In the node's `invoke()` function, the node was able to access this workflow and save it with the image. This (inaccurately) models workflows as a property of an image and is rather awkward technically. A workflow is now a property of a batch/session queue item. It is available in the InvocationContext and therefore available to all nodes during `invoke()`. **Database Migrations** Added a `SQLiteMigrator` class to handle database migrations. Migrations were needed to accomodate the DB-related changes in this PR. See the code for details. The `images`, `workflows` and `session_queue` tables required migrations for this PR, and are using the new migrator. Other tables/services are still creating tables themselves. A followup PR will adapt them to use the migrator. **Other/Support Changes** - Add a `has_workflow` column to `images` table to indicate that the image has an embedded workflow. - Add handling for retrieving the workflow from an image in python. The image file must be fetched, the workflow extracted, and then sent to client, avoiding needing the browser to parse the image file. With the `has_workflow` column, the UI knows if there is a workflow to be fetched, and only fetches when the user requests to load the workflow. - Add route to get the workflow from an image - Add CRUD service/routes for the library workflows - `workflow_images` table and services removed (no longer needed now that embedded workflows are not in the DB) * feat(ui): updated workflow handling (WIP) Clientside updates for the backend workflow changes. Includes roughed-out workflow library UI. * feat: revert SQLiteMigrator class Will pursue this in a separate PR. * feat(nodes): do not overwrite custom node module names Use a different, simpler method to detect if a node is custom. * feat(nodes): restore WithWorkflow as no-op class This class is deprecated and no longer needed. Set its workflow attr value to None (meaning it is now a no-op), and issue a warning when an invocation subclasses it. * fix(nodes): fix get_workflow from queue item dict func * feat(backend): add WorkflowRecordListItemDTO This is the id, name, description, created at and updated at workflow columns/attrs. Used to display lists of workflowsl * chore(ui): typegen * feat(ui): add workflow loading, deleting to workflow library UI * feat(ui): workflow library pagination button styles * wip * feat: workflow library WIP - Save to library - Duplicate - Filter/sort - UI/queries * feat: workflow library - system graphs - wip * feat(backend): sync system workflows to db * fix: merge conflicts * feat: simplify default workflows - Rename "system" -> "default" - Simplify syncing logic - Update UI to match * feat(workflows): update default workflows - Update TextToImage_SD15 - Add TextToImage_SDXL - Add README * feat(ui): refine workflow list UI * fix(workflow_records): typo * fix(tests): fix tests * feat(ui): clean up workflow library hooks * fix(db): fix mis-ordered db cleanup step It was happening before pruning queue items - should happen afterwards, else you have to restart the app again to free disk space made available by the pruning. * feat(ui): tweak reset workflow editor translations * feat(ui): split out workflow redux state The `nodes` slice is a rather complicated slice. Removing `workflow` makes it a bit more reasonable. Also helps to flatten state out a bit. * docs: update default workflows README * fix: tidy up unused files, unrelated changes * fix(backend): revert unrelated service organisational changes * feat(backend): workflow_records.get_many arg "filter_text" -> "query" * feat(ui): use custom hook in current image buttons Already in use elsewhere, forgot to use it here. * fix(ui): remove commented out property * fix(ui): fix workflow loading - Different handling for loading from library vs external - Fix bug where only nodes and edges loaded * fix(ui): fix save/save-as workflow naming * fix(ui): fix circular dependency * fix(db): fix bug with releasing without lock in db.clean() * fix(db): remove extraneous lock * chore: bump ruff * fix(workflow_records): default `category` to `WorkflowCategory.User` This allows old workflows to validate when reading them from the db or image files. * hide workflow library buttons if feature is disabled --------- Co-authored-by: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
2024-08-30 20:32:17 +00:00 · 2023-12-09 09:48:38 +11:00
parent 9ba5752770
commit c42d692ea6
118 changed files with 5319 additions and 1063 deletions
--- a/invokeai/frontend/web/.prettierignore
+++ b/invokeai/frontend/web/.prettierignore
@ -1,5 +1,6 @@
 dist/
 public/locales/*.json
+!public/locales/en.json
 .husky/
 node_modules/
 patches/
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@ -67,7 +67,9 @@
        "controlNet": "ControlNet",
        "controlAdapter": "Control Adapter",
        "data": "Data",
+        "delete": "Delete",
        "details": "Details",
+        "direction": "Direction",
        "ipAdapter": "IP Adapter",
        "t2iAdapter": "T2I Adapter",
        "darkMode": "Dark Mode",
@ -115,6 +117,7 @@
        "nodesDesc": "A node based system for the generation of images is under development currently. Stay tuned for updates about this amazing feature.",
        "notInstalled": "Not $t(common.installed)",
        "openInNewTab": "Open in New Tab",
+        "orderBy": "Order By",
        "outpaint": "outpaint",
        "outputs": "Outputs",
        "postProcessDesc1": "Invoke AI offers a wide variety of post processing features. Image Upscaling and Face Restoration are already available in the WebUI. You can access them from the Advanced Options menu of the Text To Image and Image To Image tabs. You can also process images directly, using the image action buttons above the current image display or in the viewer.",
@ -125,6 +128,8 @@
        "random": "Random",
        "reportBugLabel": "Report Bug",
        "safetensors": "Safetensors",
+        "save": "Save",
+        "saveAs": "Save As",
        "settingsLabel": "Settings",
        "simple": "Simple",
        "somethingWentWrong": "Something went wrong",
@ -161,8 +166,12 @@
        "txt2img": "Text To Image",
        "unifiedCanvas": "Unified Canvas",
        "unknown": "Unknown",
-        "unknownError": "Unknown Error",
-        "upload": "Upload"
+        "upload": "Upload",
+        "updated": "Updated",
+        "created": "Created",
+        "prevPage": "Previous Page",
+        "nextPage": "Next Page",
+        "unknownError": "Unknown Error"
    },
    "controlnet": {
        "controlAdapter_one": "Control Adapter",
@ -940,9 +949,9 @@
        "problemSettingTitle": "Problem Setting Title",
        "reloadNodeTemplates": "Reload Node Templates",
        "removeLinearView": "Remove from Linear View",
-        "resetWorkflow": "Reset Workflow",
-        "resetWorkflowDesc": "Are you sure you want to reset this workflow?",
-        "resetWorkflowDesc2": "Resetting the workflow will clear all nodes, edges and workflow details.",
+        "resetWorkflow": "Reset Workflow Editor",
+        "resetWorkflowDesc": "Are you sure you want to reset the Workflow Editor?",
+        "resetWorkflowDesc2": "Resetting the Workflow Editor will clear all nodes, edges and workflow details. Saved workflows will not be affected.",
        "scheduler": "Scheduler",
        "schedulerDescription": "TODO",
        "sDXLMainModelField": "SDXL Model",
@ -1269,7 +1278,6 @@
        "modelAddedSimple": "Model Added",
        "modelAddFailed": "Model Add Failed",
        "nodesBrokenConnections": "Cannot load. Some connections are broken.",
-        "nodesCleared": "Nodes Cleared",
        "nodesCorruptedGraph": "Cannot load. Graph seems to be corrupted.",
        "nodesLoaded": "Nodes Loaded",
        "nodesLoadedFailed": "Failed To Load Nodes",
@ -1318,7 +1326,10 @@
        "uploadFailedInvalidUploadDesc": "Must be single PNG or JPEG image",
        "uploadFailedUnableToLoadDesc": "Unable to load file",
        "upscalingFailed": "Upscaling Failed",
-        "workflowLoaded": "Workflow Loaded"
+        "workflowLoaded": "Workflow Loaded",
+        "problemRetrievingWorkflow": "Problem Retrieving Workflow",
+        "workflowDeleted": "Workflow Deleted",
+        "problemDeletingWorkflow": "Problem Deleting Workflow"
    },
    "tooltip": {
        "feature": {
@ -1613,5 +1624,33 @@
        "showIntermediates": "Show Intermediates",
        "snapToGrid": "Snap to Grid",
        "undo": "Undo"
+    },
+    "workflows": {
+        "workflows": "Workflows",
+        "workflowLibrary": "Workflow Library",
+        "userWorkflows": "My Workflows",
+        "defaultWorkflows": "Default Workflows",
+        "openWorkflow": "Open Workflow",
+        "uploadWorkflow": "Upload Workflow",
+        "deleteWorkflow": "Delete Workflow",
+        "unnamedWorkflow": "Unnamed Workflow",
+        "downloadWorkflow": "Download Workflow",
+        "saveWorkflow": "Save Workflow",
+        "saveWorkflowAs": "Save Workflow As",
+        "problemSavingWorkflow": "Problem Saving Workflow",
+        "workflowSaved": "Workflow Saved",
+        "noRecentWorkflows": "No Recent Workflows",
+        "noUserWorkflows": "No User Workflows",
+        "noSystemWorkflows": "No System Workflows",
+        "problemLoading": "Problem Loading Workflows",
+        "loading": "Loading Workflows",
+        "noDescription": "No description",
+        "searchWorkflows": "Search Workflows",
+        "clearWorkflowSearchFilter": "Clear Workflow Search Filter",
+        "workflowName": "Workflow Name",
+        "workflowEditorReset": "Workflow Editor Reset"
+    },
+    "app": {
+        "storeNotInitialized": "Store is not initialized"
    }
 }
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedNodes.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedNodes.ts
@ -3,6 +3,7 @@ import { buildNodesGraph } from 'features/nodes/util/graph/buildNodesGraph';
 import { queueApi } from 'services/api/endpoints/queue';
 import { BatchConfig } from 'services/api/types';
 import { startAppListening } from '..';
+import { buildWorkflow } from 'features/nodes/util/workflow/buildWorkflow';

 export const addEnqueueRequestedNodes = () => {
  startAppListening({
@ -10,10 +11,18 @@ export const addEnqueueRequestedNodes = () => {
      enqueueRequested.match(action) && action.payload.tabName === 'nodes',
    effect: async (action, { getState, dispatch }) => {
      const state = getState();
+      const { nodes, edges } = state.nodes;
+      const workflow = state.workflow;
      const graph = buildNodesGraph(state.nodes);
+      const builtWorkflow = buildWorkflow({
+        nodes,
+        edges,
+        workflow,
+      });
      const batchConfig: BatchConfig = {
        batch: {
          graph,
+          workflow: builtWorkflow,
          runs: state.generation.iterations,
        },
        prepend: action.payload.prepend,
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDropped.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageDropped.ts
@ -11,13 +11,11 @@ import {
  TypesafeDroppableData,
 } from 'features/dnd/types';
 import { imageSelected } from 'features/gallery/store/gallerySlice';
-import {
-  fieldImageValueChanged,
-  workflowExposedFieldAdded,
-} from 'features/nodes/store/nodesSlice';
+import { fieldImageValueChanged } from 'features/nodes/store/nodesSlice';
 import { initialImageChanged } from 'features/parameters/store/generationSlice';
 import { imagesApi } from 'services/api/endpoints/images';
 import { startAppListening } from '../';
+import { workflowExposedFieldAdded } from 'features/nodes/store/workflowSlice';

 export const dndDropped = createAction<{
  overData: TypesafeDroppableData;
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/workflowLoadRequested.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/workflowLoadRequested.ts
@ -1,7 +1,7 @@
 import { logger } from 'app/logging/logger';
 import { parseify } from 'common/util/serialize';
 import { workflowLoadRequested } from 'features/nodes/store/actions';
-import { workflowLoaded } from 'features/nodes/store/nodesSlice';
+import { workflowLoaded } from 'features/nodes/store/actions';
 import { $flow } from 'features/nodes/store/reactFlowInstance';
 import {
  WorkflowMigrationError,
@ -21,7 +21,7 @@ export const addWorkflowLoadRequestedListener = () => {
    actionCreator: workflowLoadRequested,
    effect: (action, { dispatch, getState }) => {
      const log = logger('nodes');
-      const workflow = action.payload;
+      const { workflow, asCopy } = action.payload;
      const nodeTemplates = getState().nodes.nodeTemplates;

      try {
@ -29,6 +29,12 @@ export const addWorkflowLoadRequestedListener = () => {
          workflow,
          nodeTemplates
        );
+
+        if (asCopy) {
+          // If we're loading a copy, we need to remove the ID so that the backend will create a new workflow
+          delete validatedWorkflow.id;
+        }
+
        dispatch(workflowLoaded(validatedWorkflow));
        if (!warnings.length) {
          dispatch(
@ -99,7 +105,6 @@ export const addWorkflowLoadRequestedListener = () => {
          );
        } else {
          // Some other error occurred
-          console.log(e);
          log.error(
            { error: parseify(e) },
            t('nodes.unknownErrorValidatingWorkflow')
--- a/invokeai/frontend/web/src/app/store/nanostores/store.ts
+++ b/invokeai/frontend/web/src/app/store/nanostores/store.ts
@ -1,5 +1,6 @@
-import { Store } from '@reduxjs/toolkit';
+import { createStore } from 'app/store/store';
 import { atom } from 'nanostores';

-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const $store = atom<Store<any> | undefined>();
+export const $store = atom<
+  Readonly<ReturnType<typeof createStore>> | undefined
+>();
--- a/invokeai/frontend/web/src/app/store/store.ts
+++ b/invokeai/frontend/web/src/app/store/store.ts
@ -14,6 +14,7 @@ import galleryReducer from 'features/gallery/store/gallerySlice';
 import loraReducer from 'features/lora/store/loraSlice';
 import modelmanagerReducer from 'features/modelManager/store/modelManagerSlice';
 import nodesReducer from 'features/nodes/store/nodesSlice';
+import workflowReducer from 'features/nodes/store/workflowSlice';
 import generationReducer from 'features/parameters/store/generationSlice';
 import postprocessingReducer from 'features/parameters/store/postprocessingSlice';
 import queueReducer from 'features/queue/store/queueSlice';
@ -22,9 +23,11 @@ import configReducer from 'features/system/store/configSlice';
 import systemReducer from 'features/system/store/systemSlice';
 import hotkeysReducer from 'features/ui/store/hotkeysSlice';
 import uiReducer from 'features/ui/store/uiSlice';
+import { createStore as createIDBKeyValStore, get, set } from 'idb-keyval';
 import dynamicMiddlewares from 'redux-dynamic-middlewares';
 import { Driver, rememberEnhancer, rememberReducer } from 'redux-remember';
 import { api } from 'services/api';
+import { authToastMiddleware } from 'services/api/authToastMiddleware';
 import { STORAGE_PREFIX } from './constants';
 import { serialize } from './enhancers/reduxRemember/serialize';
 import { unserialize } from './enhancers/reduxRemember/unserialize';
@ -32,8 +35,6 @@ import { actionSanitizer } from './middleware/devtools/actionSanitizer';
 import { actionsDenylist } from './middleware/devtools/actionsDenylist';
 import { stateSanitizer } from './middleware/devtools/stateSanitizer';
 import { listenerMiddleware } from './middleware/listenerMiddleware';
-import { createStore as createIDBKeyValStore, get, set } from 'idb-keyval';
-import { authToastMiddleware } from 'services/api/authToastMiddleware';

 const allReducers = {
  canvas: canvasReducer,
@ -53,6 +54,7 @@ const allReducers = {
  modelmanager: modelmanagerReducer,
  sdxl: sdxlReducer,
  queue: queueReducer,
+  workflow: workflowReducer,
  [api.reducerPath]: api.reducer,
 };

@ -66,6 +68,7 @@ const rememberedKeys: (keyof typeof allReducers)[] = [
  'generation',
  'sdxl',
  'nodes',
+  'workflow',
  'postprocessing',
  'system',
  'ui',
--- a/invokeai/frontend/web/src/app/types/invokeai.ts
+++ b/invokeai/frontend/web/src/app/types/invokeai.ts
@ -23,7 +23,8 @@ export type AppFeature =
  | 'resumeQueue'
  | 'prependQueue'
  | 'invocationCache'
-  | 'bulkDownload';
+  | 'bulkDownload'
+  | 'workflowLibrary';

 /**
 * A disable-able Stable Diffusion feature
--- a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
@ -1,4 +1,10 @@
-import { FormControl, FormLabel, Tooltip, forwardRef } from '@chakra-ui/react';
+import {
+  FormControl,
+  FormControlProps,
+  FormLabel,
+  Tooltip,
+  forwardRef,
+} from '@chakra-ui/react';
 import { Select, SelectProps } from '@mantine/core';
 import { useMantineSelectStyles } from 'mantine-theme/hooks/useMantineSelectStyles';
 import { RefObject, memo } from 'react';
@ -13,10 +19,19 @@ export type IAISelectProps = Omit<SelectProps, 'label'> & {
  tooltip?: string | null;
  inputRef?: RefObject<HTMLInputElement>;
  label?: string;
+  formControlProps?: FormControlProps;
 };

 const IAIMantineSelect = forwardRef((props: IAISelectProps, ref) => {
-  const { tooltip, inputRef, label, disabled, required, ...rest } = props;
+  const {
+    tooltip,
+    formControlProps,
+    inputRef,
+    label,
+    disabled,
+    required,
+    ...rest
+  } = props;

  const styles = useMantineSelectStyles();

@ -28,6 +43,7 @@ const IAIMantineSelect = forwardRef((props: IAISelectProps, ref) => {
        isDisabled={disabled}
        position="static"
        data-testid={`select-${label || props.placeholder}`}
+        {...formControlProps}
      >
        <FormLabel>{label}</FormLabel>
        <Select disabled={disabled} ref={inputRef} styles={styles} {...rest} />
--- a/invokeai/frontend/web/src/common/components/Nbsp.tsx
+++ b/invokeai/frontend/web/src/common/components/Nbsp.tsx
@ -0,0 +1 @@
+export const Nbsp = () => <>{'\u00A0'}</>;
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx
@ -16,7 +16,8 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { DeleteImageButton } from 'features/deleteImageModal/components/DeleteImageButton';
 import { imagesToDeleteSelected } from 'features/deleteImageModal/store/slice';
-import { workflowLoadRequested } from 'features/nodes/store/actions';
+import SingleSelectionMenuItems from 'features/gallery/components/ImageContextMenu/SingleSelectionMenuItems';
+import { sentImageToImg2Img } from 'features/gallery/store/actions';
 import ParamUpscalePopover from 'features/parameters/components/Parameters/Upscale/ParamUpscaleSettings';
 import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters';
 import { initialImageSelected } from 'features/parameters/store/actions';
@ -27,6 +28,7 @@ import {
  setShouldShowImageDetails,
  setShouldShowProgressInViewer,
 } from 'features/ui/store/uiSlice';
+import { useGetAndLoadEmbeddedWorkflow } from 'features/workflowLibrary/hooks/useGetAndLoadEmbeddedWorkflow';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
@ -41,10 +43,7 @@ import {
 import { FaCircleNodes, FaEllipsis } from 'react-icons/fa6';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
 import { useDebouncedMetadata } from 'services/api/hooks/useDebouncedMetadata';
-import { useDebouncedWorkflow } from 'services/api/hooks/useDebouncedWorkflow';
 import { menuListMotionProps } from 'theme/components/menu';
-import { sentImageToImg2Img } from 'features/gallery/store/actions';
-import SingleSelectionMenuItems from 'features/gallery/components/ImageContextMenu/SingleSelectionMenuItems';

 const currentImageButtonsSelector = createSelector(
  [stateSelector, activeTabNameSelector],
@ -111,18 +110,17 @@ const CurrentImageButtons = () => {
    lastSelectedImage?.image_name
  );

-  const { workflow, isLoading: isLoadingWorkflow } = useDebouncedWorkflow(
-    lastSelectedImage?.workflow_id
-  );
+  const { getAndLoadEmbeddedWorkflow, getAndLoadEmbeddedWorkflowResult } =
+    useGetAndLoadEmbeddedWorkflow({});

  const handleLoadWorkflow = useCallback(() => {
-    if (!workflow) {
+    if (!lastSelectedImage || !lastSelectedImage.has_workflow) {
      return;
    }
-    dispatch(workflowLoadRequested(workflow));
-  }, [dispatch, workflow]);
+    getAndLoadEmbeddedWorkflow(lastSelectedImage.image_name);
+  }, [getAndLoadEmbeddedWorkflow, lastSelectedImage]);

-  useHotkeys('w', handleLoadWorkflow, [workflow]);
+  useHotkeys('w', handleLoadWorkflow, [lastSelectedImage]);

  const handleClickUseAllParameters = useCallback(() => {
    recallAllParameters(metadata);
@ -255,12 +253,12 @@ const CurrentImageButtons = () => {

        <ButtonGroup isAttached={true} isDisabled={shouldDisableToolbarButtons}>
          <IAIIconButton
-            isLoading={isLoadingWorkflow}
            icon={<FaCircleNodes />}
            tooltip={`${t('nodes.loadWorkflow')} (W)`}
            aria-label={`${t('nodes.loadWorkflow')} (W)`}
-            isDisabled={!workflow}
+            isDisabled={!imageDTO?.has_workflow}
            onClick={handleLoadWorkflow}
+            isLoading={getAndLoadEmbeddedWorkflowResult.isLoading}
          />
          <IAIIconButton
            isLoading={isLoadingMetadata}
--- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
@ -3,18 +3,22 @@ import { useStore } from '@nanostores/react';
 import { useAppToaster } from 'app/components/Toaster';
 import { $customStarUI } from 'app/store/nanostores/customStarUI';
 import { useAppDispatch } from 'app/store/storeHooks';
+import { useCopyImageToClipboard } from 'common/hooks/useCopyImageToClipboard';
 import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice';
 import {
  imagesToChangeSelected,
  isModalOpenChanged,
 } from 'features/changeBoardModal/store/slice';
 import { imagesToDeleteSelected } from 'features/deleteImageModal/store/slice';
-import { workflowLoadRequested } from 'features/nodes/store/actions';
+import {
+  sentImageToCanvas,
+  sentImageToImg2Img,
+} from 'features/gallery/store/actions';
 import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters';
 import { initialImageSelected } from 'features/parameters/store/actions';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
-import { useCopyImageToClipboard } from 'common/hooks/useCopyImageToClipboard';
 import { setActiveTab } from 'features/ui/store/uiSlice';
+import { useGetAndLoadEmbeddedWorkflow } from 'features/workflowLibrary/hooks/useGetAndLoadEmbeddedWorkflow';
 import { memo, useCallback } from 'react';
 import { flushSync } from 'react-dom';
 import { useTranslation } from 'react-i18next';
@ -36,12 +40,7 @@ import {
  useUnstarImagesMutation,
 } from 'services/api/endpoints/images';
 import { useDebouncedMetadata } from 'services/api/hooks/useDebouncedMetadata';
-import { useDebouncedWorkflow } from 'services/api/hooks/useDebouncedWorkflow';
 import { ImageDTO } from 'services/api/types';
-import {
-  sentImageToCanvas,
-  sentImageToImg2Img,
-} from 'features/gallery/store/actions';

 type SingleSelectionMenuItemsProps = {
  imageDTO: ImageDTO;
@ -61,9 +60,13 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
  const { metadata, isLoading: isLoadingMetadata } = useDebouncedMetadata(
    imageDTO?.image_name
  );
-  const { workflow, isLoading: isLoadingWorkflow } = useDebouncedWorkflow(
-    imageDTO?.workflow_id
-  );
+
+  const { getAndLoadEmbeddedWorkflow, getAndLoadEmbeddedWorkflowResult } =
+    useGetAndLoadEmbeddedWorkflow({});
+
+  const handleLoadWorkflow = useCallback(() => {
+    getAndLoadEmbeddedWorkflow(imageDTO.image_name);
+  }, [getAndLoadEmbeddedWorkflow, imageDTO.image_name]);

  const [starImages] = useStarImagesMutation();
  const [unstarImages] = useUnstarImagesMutation();
@ -101,13 +104,6 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
    recallSeed(metadata?.seed);
  }, [metadata?.seed, recallSeed]);

-  const handleLoadWorkflow = useCallback(() => {
-    if (!workflow) {
-      return;
-    }
-    dispatch(workflowLoadRequested(workflow));
-  }, [dispatch, workflow]);
-
  const handleSendToImageToImage = useCallback(() => {
    dispatch(sentImageToImg2Img());
    dispatch(initialImageSelected(imageDTO));
@ -179,9 +175,15 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
        {t('parameters.downloadImage')}
      </MenuItem>
      <MenuItem
-        icon={isLoadingWorkflow ? <SpinnerIcon /> : <FaCircleNodes />}
+        icon={
+          getAndLoadEmbeddedWorkflowResult.isLoading ? (
+            <SpinnerIcon />
+          ) : (
+            <FaCircleNodes />
+          )
+        }
        onClickCapture={handleLoadWorkflow}
-        isDisabled={isLoadingWorkflow || !workflow}
+        isDisabled={!imageDTO.has_workflow}
      >
        {t('nodes.loadWorkflow')}
      </MenuItem>
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx
@ -14,10 +14,10 @@ import ScrollableContent from 'features/nodes/components/sidePanel/ScrollableCon
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDebouncedMetadata } from 'services/api/hooks/useDebouncedMetadata';
-import { useDebouncedWorkflow } from 'services/api/hooks/useDebouncedWorkflow';
 import { ImageDTO } from 'services/api/types';
 import DataViewer from './DataViewer';
 import ImageMetadataActions from './ImageMetadataActions';
+import ImageMetadataWorkflowTabContent from './ImageMetadataWorkflowTabContent';

 type ImageMetadataViewerProps = {
  image: ImageDTO;
@ -32,7 +32,6 @@ const ImageMetadataViewer = ({ image }: ImageMetadataViewerProps) => {
  const { t } = useTranslation();

  const { metadata } = useDebouncedMetadata(image.image_name);
-  const { workflow } = useDebouncedWorkflow(image.workflow_id);

  return (
    <Flex
@ -67,9 +66,9 @@ const ImageMetadataViewer = ({ image }: ImageMetadataViewerProps) => {
      >
        <TabList>
          <Tab>{t('metadata.recallParameters')}</Tab>
-          <Tab>{t('metadata.metadata')}</Tab>
+          <Tab isDisabled={!metadata}>{t('metadata.metadata')}</Tab>
          <Tab>{t('metadata.imageDetails')}</Tab>
-          <Tab>{t('metadata.workflow')}</Tab>
+          <Tab isDisabled={!image.has_workflow}>{t('metadata.workflow')}</Tab>
        </TabList>

        <TabPanels>
@ -97,11 +96,7 @@ const ImageMetadataViewer = ({ image }: ImageMetadataViewerProps) => {
            )}
          </TabPanel>
          <TabPanel>
-            {workflow ? (
-              <DataViewer data={workflow} label={t('metadata.workflow')} />
-            ) : (
-              <IAINoContentFallback label={t('nodes.noWorkflow')} />
-            )}
+            <ImageMetadataWorkflowTabContent image={image} />
          </TabPanel>
        </TabPanels>
      </Tabs>
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataWorkflowTabContent.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataWorkflowTabContent.tsx
@ -0,0 +1,23 @@
+import { IAINoContentFallback } from 'common/components/IAIImageFallback';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useGetImageWorkflowQuery } from 'services/api/endpoints/images';
+import { ImageDTO } from 'services/api/types';
+import DataViewer from './DataViewer';
+
+type Props = {
+  image: ImageDTO;
+};
+
+const ImageMetadataWorkflowTabContent = ({ image }: Props) => {
+  const { t } = useTranslation();
+  const { currentData: workflow } = useGetImageWorkflowQuery(image.image_name);
+
+  if (!workflow) {
+    return <IAINoContentFallback label={t('nodes.noWorkflow')} />;
+  }
+
+  return <DataViewer data={workflow} label={t('metadata.workflow')} />;
+};
+
+export default memo(ImageMetadataWorkflowTabContent);
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/EmbedWorkflowCheckbox.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/EmbedWorkflowCheckbox.tsx
@ -1,45 +0,0 @@
-import { Checkbox, Flex, FormControl, FormLabel } from '@chakra-ui/react';
-import { useAppDispatch } from 'app/store/storeHooks';
-import { useEmbedWorkflow } from 'features/nodes/hooks/useEmbedWorkflow';
-import { useWithWorkflow } from 'features/nodes/hooks/useWithWorkflow';
-import { nodeEmbedWorkflowChanged } from 'features/nodes/store/nodesSlice';
-import { ChangeEvent, memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-
-const EmbedWorkflowCheckbox = ({ nodeId }: { nodeId: string }) => {
-  const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-  const withWorkflow = useWithWorkflow(nodeId);
-  const embedWorkflow = useEmbedWorkflow(nodeId);
-  const handleChange = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => {
-      dispatch(
-        nodeEmbedWorkflowChanged({
-          nodeId,
-          embedWorkflow: e.target.checked,
-        })
-      );
-    },
-    [dispatch, nodeId]
-  );
-
-  if (!withWorkflow) {
-    return null;
-  }
-
-  return (
-    <FormControl as={Flex} sx={{ alignItems: 'center', gap: 2, w: 'auto' }}>
-      <FormLabel sx={{ fontSize: 'xs', mb: '1px' }}>
-        {t('metadata.workflow')}
-      </FormLabel>
-      <Checkbox
-        className="nopan"
-        size="sm"
-        onChange={handleChange}
-        isChecked={embedWorkflow}
-      />
-    </FormControl>
-  );
-};
-
-export default memo(EmbedWorkflowCheckbox);
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx
@ -1,9 +1,8 @@
 import { Flex } from '@chakra-ui/react';
 import { useHasImageOutput } from 'features/nodes/hooks/useHasImageOutput';
 import { DRAG_HANDLE_CLASSNAME } from 'features/nodes/types/constants';
-import { memo } from 'react';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
-import EmbedWorkflowCheckbox from './EmbedWorkflowCheckbox';
+import { memo } from 'react';
 import SaveToGalleryCheckbox from './SaveToGalleryCheckbox';
 import UseCacheCheckbox from './UseCacheCheckbox';

@ -28,7 +27,6 @@ const InvocationNodeFooter = ({ nodeId }: Props) => {
      }}
    >
      {isCacheEnabled && <UseCacheCheckbox nodeId={nodeId} />}
-      {hasImageOutput && <EmbedWorkflowCheckbox nodeId={nodeId} />}
      {hasImageOutput && <SaveToGalleryCheckbox nodeId={nodeId} />}
    </Flex>
  );
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx
@ -13,7 +13,7 @@ import { useFieldTemplateTitle } from 'features/nodes/hooks/useFieldTemplateTitl
 import {
  workflowExposedFieldAdded,
  workflowExposedFieldRemoved,
-} from 'features/nodes/store/nodesSlice';
+} from 'features/nodes/store/workflowSlice';
 import { MouseEvent, ReactNode, memo, useCallback, useMemo } from 'react';
 import { FaMinus, FaPlus } from 'react-icons/fa';
 import { menuListMotionProps } from 'theme/components/menu';
@ -41,9 +41,9 @@ const FieldContextMenu = ({ nodeId, fieldName, kind, children }: Props) => {
    () =>
      createSelector(
        stateSelector,
-        ({ nodes }) => {
+        ({ workflow }) => {
          const isExposed = Boolean(
-            nodes.workflow.exposedFields.find(
+            workflow.exposedFields.find(
              (f) => f.nodeId === nodeId && f.fieldName === fieldName
            )
          );
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx
@ -10,7 +10,7 @@ import { useAppDispatch } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import NodeSelectionOverlay from 'common/components/NodeSelectionOverlay';
 import { useMouseOverNode } from 'features/nodes/hooks/useMouseOverNode';
-import { workflowExposedFieldRemoved } from 'features/nodes/store/nodesSlice';
+import { workflowExposedFieldRemoved } from 'features/nodes/store/workflowSlice';
 import { HANDLE_TOOLTIP_OPEN_DELAY } from 'features/nodes/types/constants';
 import { memo, useCallback } from 'react';
 import { FaInfoCircle, FaTrash } from 'react-icons/fa';
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/TopCenterPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/TopCenterPanel.tsx
@ -1,10 +1,16 @@
 import { Flex } from '@chakra-ui/layout';
 import { memo } from 'react';
-import LoadWorkflowButton from './LoadWorkflowButton';
-import ResetWorkflowButton from './ResetWorkflowButton';
-import DownloadWorkflowButton from './DownloadWorkflowButton';
+import DownloadWorkflowButton from 'features/workflowLibrary/components/DownloadWorkflowButton';
+import UploadWorkflowButton from 'features/workflowLibrary/components/LoadWorkflowFromFileButton';
+import ResetWorkflowEditorButton from 'features/workflowLibrary/components/ResetWorkflowButton';
+import SaveWorkflowButton from 'features/workflowLibrary/components/SaveWorkflowButton';
+import SaveWorkflowAsButton from 'features/workflowLibrary/components/SaveWorkflowAsButton';
+import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';

 const TopCenterPanel = () => {
+  const isWorkflowLibraryEnabled =
+    useFeatureStatus('workflowLibrary').isFeatureEnabled;
+
  return (
    <Flex
      sx={{
@ -16,8 +22,14 @@ const TopCenterPanel = () => {
      }}
    >
      <DownloadWorkflowButton />
-      <LoadWorkflowButton />
-      <ResetWorkflowButton />
+      <UploadWorkflowButton />
+      {isWorkflowLibraryEnabled && (
+        <>
+          <SaveWorkflowButton />
+          <SaveWorkflowAsButton />
+        </>
+      )}
+      <ResetWorkflowEditorButton />
    </Flex>
  );
 };
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/TopRightPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/TopRightPanel.tsx
@ -1,10 +1,16 @@
-import { Flex } from '@chakra-ui/layout';
+import { Flex } from '@chakra-ui/react';
+import WorkflowLibraryButton from 'features/workflowLibrary/components/WorkflowLibraryButton';
 import { memo } from 'react';
 import WorkflowEditorSettings from './WorkflowEditorSettings';
+import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';

 const TopRightPanel = () => {
+  const isWorkflowLibraryEnabled =
+    useFeatureStatus('workflowLibrary').isFeatureEnabled;
+
  return (
    <Flex sx={{ gap: 2, position: 'absolute', top: 2, insetInlineEnd: 2 }}>
+      {isWorkflowLibraryEnabled && <WorkflowLibraryButton />}
      <WorkflowEditorSettings />
    </Flex>
  );
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx
@ -11,17 +11,16 @@ import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
-import { getNeedsUpdate } from 'features/nodes/util/node/nodeUpdate';
+import NotesTextarea from 'features/nodes/components/flow/nodes/Invocation/NotesTextarea';
+import ScrollableContent from 'features/nodes/components/sidePanel/ScrollableContent';
 import {
-  InvocationNodeData,
+  InvocationNode,
  InvocationTemplate,
  isInvocationNode,
 } from 'features/nodes/types/invocation';
+import { getNeedsUpdate } from 'features/nodes/util/node/nodeUpdate';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Node } from 'reactflow';
-import NotesTextarea from 'features/nodes/components/flow/nodes/Invocation/NotesTextarea';
-import ScrollableContent from 'features/nodes/components/sidePanel/ScrollableContent';
 import EditableNodeTitle from './details/EditableNodeTitle';

 const selector = createSelector(
@ -62,7 +61,7 @@ const InspectorDetailsTab = () => {
 export default memo(InspectorDetailsTab);

 type ContentProps = {
-  node: Node<InvocationNodeData>;
+  node: InvocationNode;
  template: InvocationTemplate;
 };

--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowGeneralTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowGeneralTab.tsx
@ -5,6 +5,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAIInput from 'common/components/IAIInput';
 import IAITextarea from 'common/components/IAITextarea';
+import ScrollableContent from 'features/nodes/components/sidePanel/ScrollableContent';
 import {
  workflowAuthorChanged,
  workflowContactChanged,
@ -13,16 +14,15 @@ import {
  workflowNotesChanged,
  workflowTagsChanged,
  workflowVersionChanged,
-} from 'features/nodes/store/nodesSlice';
+} from 'features/nodes/store/workflowSlice';
 import { ChangeEvent, memo, useCallback } from 'react';
-import ScrollableContent from 'features/nodes/components/sidePanel/ScrollableContent';
 import { useTranslation } from 'react-i18next';

 const selector = createSelector(
  stateSelector,
-  ({ nodes }) => {
+  ({ workflow }) => {
    const { author, name, description, tags, version, contact, notes } =
-      nodes.workflow;
+      workflow;

    return {
      name,
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx
@ -11,9 +11,9 @@ import { useTranslation } from 'react-i18next';

 const selector = createSelector(
  stateSelector,
-  ({ nodes }) => {
+  ({ workflow }) => {
    return {
-      fields: nodes.workflow.exposedFields,
+      fields: workflow.exposedFields,
    };
  },
  defaultSelectorOptions
--- a/invokeai/frontend/web/src/features/nodes/hooks/useDownloadWorkflow.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useDownloadWorkflow.ts
@ -0,0 +1,17 @@
+import { useWorkflow } from 'features/nodes/hooks/useWorkflow';
+import { useCallback } from 'react';
+
+export const useDownloadWorkflow = () => {
+  const workflow = useWorkflow();
+  const downloadWorkflow = useCallback(() => {
+    const blob = new Blob([JSON.stringify(workflow, null, 2)]);
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(blob);
+    a.download = `${workflow.name || 'My Workflow'}.json`;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+  }, [workflow]);
+
+  return downloadWorkflow;
+};
--- a/invokeai/frontend/web/src/features/nodes/hooks/useEmbedWorkflow.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useEmbedWorkflow.ts
@ -1,27 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-import { stateSelector } from 'app/store/store';
-import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { useMemo } from 'react';
-import { isInvocationNode } from 'features/nodes/types/invocation';
-
-export const useEmbedWorkflow = (nodeId: string) => {
-  const selector = useMemo(
-    () =>
-      createSelector(
-        stateSelector,
-        ({ nodes }) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return false;
-          }
-          return node.data.embedWorkflow;
-        },
-        defaultSelectorOptions
-      ),
-    [nodeId]
-  );
-
-  const embedWorkflow = useAppSelector(selector);
-  return embedWorkflow;
-};
--- a/invokeai/frontend/web/src/features/nodes/hooks/useWithWorkflow.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useWithWorkflow.ts
@ -1,31 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-import { stateSelector } from 'app/store/store';
-import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { useMemo } from 'react';
-import { isInvocationNode } from 'features/nodes/types/invocation';
-
-export const useWithWorkflow = (nodeId: string) => {
-  const selector = useMemo(
-    () =>
-      createSelector(
-        stateSelector,
-        ({ nodes }) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return false;
-          }
-          const nodeTemplate = nodes.nodeTemplates[node?.data.type ?? ''];
-          if (!nodeTemplate) {
-            return false;
-          }
-          return nodeTemplate.withWorkflow;
-        },
-        defaultSelectorOptions
-      ),
-    [nodeId]
-  );
-
-  const withWorkflow = useAppSelector(selector);
-  return withWorkflow;
-};
--- a/invokeai/frontend/web/src/features/nodes/hooks/useWorkflow.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useWorkflow.ts
@ -5,12 +5,16 @@ import { useMemo } from 'react';
 import { useDebounce } from 'use-debounce';

 export const useWorkflow = () => {
-  const nodes = useAppSelector((state: RootState) => state.nodes);
-  const [debouncedNodes] = useDebounce(nodes, 300);
-  const workflow = useMemo(
-    () => buildWorkflow(debouncedNodes),
-    [debouncedNodes]
+  const nodes_ = useAppSelector((state: RootState) => state.nodes.nodes);
+  const edges_ = useAppSelector((state: RootState) => state.nodes.edges);
+  const workflow_ = useAppSelector((state: RootState) => state.workflow);
+  const [nodes] = useDebounce(nodes_, 300);
+  const [edges] = useDebounce(edges_, 300);
+  const [workflow] = useDebounce(workflow_, 300);
+  const builtWorkflow = useMemo(
+    () => buildWorkflow({ nodes, edges, workflow }),
+    [nodes, edges, workflow]
  );

-  return workflow;
+  return builtWorkflow;
 };
--- a/invokeai/frontend/web/src/features/nodes/store/actions.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/actions.ts
@ -1,4 +1,5 @@
 import { createAction, isAnyOf } from '@reduxjs/toolkit';
+import { WorkflowV2 } from 'features/nodes/types/workflow';
 import { Graph } from 'services/api/types';

 export const textToImageGraphBuilt = createAction<Graph>(
@ -17,10 +18,15 @@ export const isAnyGraphBuilt = isAnyOf(
  nodesGraphBuilt
 );

-export const workflowLoadRequested = createAction<unknown>(
-  'nodes/workflowLoadRequested'
-);
+export const workflowLoadRequested = createAction<{
+  workflow: unknown;
+  asCopy: boolean;
+}>('nodes/workflowLoadRequested');

 export const updateAllNodesRequested = createAction(
  'nodes/updateAllNodesRequested'
 );
+
+export const workflowLoaded = createAction<WorkflowV2>(
+  'workflow/workflowLoaded'
+);
--- a/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
@ -1,33 +1,5 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { cloneDeep, forEach, isEqual, uniqBy } from 'lodash-es';
-import {
-  addEdge,
-  applyEdgeChanges,
-  applyNodeChanges,
-  Connection,
-  Edge,
-  EdgeChange,
-  EdgeRemoveChange,
-  getConnectedEdges,
-  getIncomers,
-  getOutgoers,
-  Node,
-  NodeChange,
-  OnConnectStartParams,
-  SelectionMode,
-  updateEdge,
-  Viewport,
-  XYPosition,
-} from 'reactflow';
-import { receivedOpenAPISchema } from 'services/api/thunks/schema';
-import {
-  appSocketGeneratorProgress,
-  appSocketInvocationComplete,
-  appSocketInvocationError,
-  appSocketInvocationStarted,
-  appSocketQueueItemStatusChanged,
-} from 'services/events/actions';
-import { v4 as uuidv4 } from 'uuid';
+import { workflowLoaded } from 'features/nodes/store/actions';
 import { SHARED_NODE_PROPERTIES } from 'features/nodes/types/constants';
 import {
  BoardFieldValue,
@ -57,7 +29,35 @@ import {
  NodeExecutionState,
  zNodeStatus,
 } from 'features/nodes/types/invocation';
-import { WorkflowV2 } from 'features/nodes/types/workflow';
+import { cloneDeep, forEach } from 'lodash-es';
+import {
+  addEdge,
+  applyEdgeChanges,
+  applyNodeChanges,
+  Connection,
+  Edge,
+  EdgeChange,
+  EdgeRemoveChange,
+  getConnectedEdges,
+  getIncomers,
+  getOutgoers,
+  Node,
+  NodeChange,
+  OnConnectStartParams,
+  SelectionMode,
+  updateEdge,
+  Viewport,
+  XYPosition,
+} from 'reactflow';
+import { receivedOpenAPISchema } from 'services/api/thunks/schema';
+import {
+  appSocketGeneratorProgress,
+  appSocketInvocationComplete,
+  appSocketInvocationError,
+  appSocketInvocationStarted,
+  appSocketQueueItemStatusChanged,
+} from 'services/events/actions';
+import { v4 as uuidv4 } from 'uuid';
 import { NodesState } from './types';
 import { findConnectionToValidHandle } from './util/findConnectionToValidHandle';
 import { findUnoccupiedPosition } from './util/findUnoccupiedPosition';
@ -70,20 +70,6 @@ const initialNodeExecutionState: Omit<NodeExecutionState, 'nodeId'> = {
  outputs: [],
 };

-const INITIAL_WORKFLOW: WorkflowV2 = {
-  name: '',
-  author: '',
-  description: '',
-  version: '',
-  contact: '',
-  tags: '',
-  notes: '',
-  nodes: [],
-  edges: [],
-  exposedFields: [],
-  meta: { version: '2.0.0' },
-};
-
 export const initialNodesState: NodesState = {
  nodes: [],
  edges: [],
@ -103,7 +89,6 @@ export const initialNodesState: NodesState = {
  nodeOpacity: 1,
  selectedNodes: [],
  selectedEdges: [],
-  workflow: INITIAL_WORKFLOW,
  nodeExecutionStates: {},
  viewport: { x: 0, y: 0, zoom: 1 },
  mouseOverField: null,
@ -308,23 +293,6 @@ const nodesSlice = createSlice({
      }
      state.modifyingEdge = false;
    },
-    workflowExposedFieldAdded: (
-      state,
-      action: PayloadAction<FieldIdentifier>
-    ) => {
-      state.workflow.exposedFields = uniqBy(
-        state.workflow.exposedFields.concat(action.payload),
-        (field) => `${field.nodeId}-${field.fieldName}`
-      );
-    },
-    workflowExposedFieldRemoved: (
-      state,
-      action: PayloadAction<FieldIdentifier>
-    ) => {
-      state.workflow.exposedFields = state.workflow.exposedFields.filter(
-        (field) => !isEqual(field, action.payload)
-      );
-    },
    fieldLabelChanged: (
      state,
      action: PayloadAction<{
@ -344,20 +312,6 @@ const nodesSlice = createSlice({
      }
      field.label = label;
    },
-    nodeEmbedWorkflowChanged: (
-      state,
-      action: PayloadAction<{ nodeId: string; embedWorkflow: boolean }>
-    ) => {
-      const { nodeId, embedWorkflow } = action.payload;
-      const nodeIndex = state.nodes.findIndex((n) => n.id === nodeId);
-
-      const node = state.nodes?.[nodeIndex];
-
-      if (!isInvocationNode(node)) {
-        return;
-      }
-      node.data.embedWorkflow = embedWorkflow;
-    },
    nodeUseCacheChanged: (
      state,
      action: PayloadAction<{ nodeId: string; useCache: boolean }>
@ -522,9 +476,6 @@ const nodesSlice = createSlice({
    },
    nodesDeleted: (state, action: PayloadAction<AnyNode[]>) => {
      action.payload.forEach((node) => {
-        state.workflow.exposedFields = state.workflow.exposedFields.filter(
-          (f) => f.nodeId !== node.id
-        );
        if (!isInvocationNode(node)) {
          return;
        }
@ -687,7 +638,6 @@ const nodesSlice = createSlice({
    nodeEditorReset: (state) => {
      state.nodes = [];
      state.edges = [];
-      state.workflow = cloneDeep(INITIAL_WORKFLOW);
    },
    shouldValidateGraphChanged: (state, action: PayloadAction<boolean>) => {
      state.shouldValidateGraph = action.payload;
@ -704,56 +654,6 @@ const nodesSlice = createSlice({
    nodeOpacityChanged: (state, action: PayloadAction<number>) => {
      state.nodeOpacity = action.payload;
    },
-    workflowNameChanged: (state, action: PayloadAction<string>) => {
-      state.workflow.name = action.payload;
-    },
-    workflowDescriptionChanged: (state, action: PayloadAction<string>) => {
-      state.workflow.description = action.payload;
-    },
-    workflowTagsChanged: (state, action: PayloadAction<string>) => {
-      state.workflow.tags = action.payload;
-    },
-    workflowAuthorChanged: (state, action: PayloadAction<string>) => {
-      state.workflow.author = action.payload;
-    },
-    workflowNotesChanged: (state, action: PayloadAction<string>) => {
-      state.workflow.notes = action.payload;
-    },
-    workflowVersionChanged: (state, action: PayloadAction<string>) => {
-      state.workflow.version = action.payload;
-    },
-    workflowContactChanged: (state, action: PayloadAction<string>) => {
-      state.workflow.contact = action.payload;
-    },
-    workflowLoaded: (state, action: PayloadAction<WorkflowV2>) => {
-      const { nodes, edges, ...workflow } = action.payload;
-      state.workflow = workflow;
-
-      state.nodes = applyNodeChanges(
-        nodes.map((node) => ({
-          item: { ...node, ...SHARED_NODE_PROPERTIES },
-          type: 'add',
-        })),
-        []
-      );
-      state.edges = applyEdgeChanges(
-        edges.map((edge) => ({ item: edge, type: 'add' })),
-        []
-      );
-
-      state.nodeExecutionStates = nodes.reduce<
-        Record<string, NodeExecutionState>
-      >((acc, node) => {
-        acc[node.id] = {
-          nodeId: node.id,
-          ...initialNodeExecutionState,
-        };
-        return acc;
-      }, {});
-    },
-    workflowReset: (state) => {
-      state.workflow = cloneDeep(INITIAL_WORKFLOW);
-    },
    viewportChanged: (state, action: PayloadAction<Viewport>) => {
      state.viewport = action.payload;
    },
@ -899,6 +799,32 @@ const nodesSlice = createSlice({
    builder.addCase(receivedOpenAPISchema.pending, (state) => {
      state.isReady = false;
    });
+
+    builder.addCase(workflowLoaded, (state, action) => {
+      const { nodes, edges } = action.payload;
+      state.nodes = applyNodeChanges(
+        nodes.map((node) => ({
+          item: { ...node, ...SHARED_NODE_PROPERTIES },
+          type: 'add',
+        })),
+        []
+      );
+      state.edges = applyEdgeChanges(
+        edges.map((edge) => ({ item: edge, type: 'add' })),
+        []
+      );
+
+      state.nodeExecutionStates = nodes.reduce<
+        Record<string, NodeExecutionState>
+      >((acc, node) => {
+        acc[node.id] = {
+          nodeId: node.id,
+          ...initialNodeExecutionState,
+        };
+        return acc;
+      }, {});
+    });
+
    builder.addCase(appSocketInvocationStarted, (state, action) => {
      const { source_node_id } = action.payload.data;
      const node = state.nodeExecutionStates[source_node_id];
@ -984,7 +910,6 @@ export const {
  nodeAdded,
  nodeReplaced,
  nodeEditorReset,
-  nodeEmbedWorkflowChanged,
  nodeExclusivelySelected,
  nodeIsIntermediateChanged,
  nodeIsOpenChanged,
@ -1008,16 +933,6 @@ export const {
  shouldSnapToGridChanged,
  shouldValidateGraphChanged,
  viewportChanged,
-  workflowAuthorChanged,
-  workflowContactChanged,
-  workflowDescriptionChanged,
-  workflowExposedFieldAdded,
-  workflowExposedFieldRemoved,
-  workflowLoaded,
-  workflowNameChanged,
-  workflowNotesChanged,
-  workflowTagsChanged,
-  workflowVersionChanged,
  edgeAdded,
 } = nodesSlice.actions;

--- a/invokeai/frontend/web/src/features/nodes/store/types.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/types.ts
@ -29,7 +29,6 @@ export type NodesState = {
  shouldColorEdges: boolean;
  selectedNodes: string[];
  selectedEdges: string[];
-  workflow: Omit<WorkflowV2, 'nodes' | 'edges'>;
  nodeExecutionStates: Record<string, NodeExecutionState>;
  viewport: Viewport;
  isReady: boolean;
@ -41,3 +40,5 @@ export type NodesState = {
  addNewNodePosition: XYPosition | null;
  selectionMode: SelectionMode;
 };
+
+export type WorkflowsState = Omit<WorkflowV2, 'nodes' | 'edges'>;
--- a/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts
@ -0,0 +1,99 @@
+import { PayloadAction, createSlice } from '@reduxjs/toolkit';
+import { workflowLoaded } from 'features/nodes/store/actions';
+import { nodeEditorReset, nodesDeleted } from 'features/nodes/store/nodesSlice';
+import { WorkflowsState as WorkflowState } from 'features/nodes/store/types';
+import { FieldIdentifier } from 'features/nodes/types/field';
+import { cloneDeep, isEqual, uniqBy } from 'lodash-es';
+
+export const initialWorkflowState: WorkflowState = {
+  name: '',
+  author: '',
+  description: '',
+  version: '',
+  contact: '',
+  tags: '',
+  notes: '',
+  exposedFields: [],
+  meta: { version: '2.0.0', category: 'user' },
+};
+
+const workflowSlice = createSlice({
+  name: 'workflow',
+  initialState: initialWorkflowState,
+  reducers: {
+    workflowExposedFieldAdded: (
+      state,
+      action: PayloadAction<FieldIdentifier>
+    ) => {
+      state.exposedFields = uniqBy(
+        state.exposedFields.concat(action.payload),
+        (field) => `${field.nodeId}-${field.fieldName}`
+      );
+    },
+    workflowExposedFieldRemoved: (
+      state,
+      action: PayloadAction<FieldIdentifier>
+    ) => {
+      state.exposedFields = state.exposedFields.filter(
+        (field) => !isEqual(field, action.payload)
+      );
+    },
+    workflowNameChanged: (state, action: PayloadAction<string>) => {
+      state.name = action.payload;
+    },
+    workflowDescriptionChanged: (state, action: PayloadAction<string>) => {
+      state.description = action.payload;
+    },
+    workflowTagsChanged: (state, action: PayloadAction<string>) => {
+      state.tags = action.payload;
+    },
+    workflowAuthorChanged: (state, action: PayloadAction<string>) => {
+      state.author = action.payload;
+    },
+    workflowNotesChanged: (state, action: PayloadAction<string>) => {
+      state.notes = action.payload;
+    },
+    workflowVersionChanged: (state, action: PayloadAction<string>) => {
+      state.version = action.payload;
+    },
+    workflowContactChanged: (state, action: PayloadAction<string>) => {
+      state.contact = action.payload;
+    },
+    workflowIDChanged: (state, action: PayloadAction<string>) => {
+      state.id = action.payload;
+    },
+    workflowReset: () => cloneDeep(initialWorkflowState),
+  },
+  extraReducers: (builder) => {
+    builder.addCase(workflowLoaded, (state, action) => {
+      const { nodes: _nodes, edges: _edges, ...workflow } = action.payload;
+      return cloneDeep(workflow);
+    });
+
+    builder.addCase(nodesDeleted, (state, action) => {
+      action.payload.forEach((node) => {
+        state.exposedFields = state.exposedFields.filter(
+          (f) => f.nodeId !== node.id
+        );
+      });
+    });
+
+    builder.addCase(nodeEditorReset, () => cloneDeep(initialWorkflowState));
+  },
+});
+
+export const {
+  workflowExposedFieldAdded,
+  workflowExposedFieldRemoved,
+  workflowNameChanged,
+  workflowDescriptionChanged,
+  workflowTagsChanged,
+  workflowAuthorChanged,
+  workflowNotesChanged,
+  workflowVersionChanged,
+  workflowContactChanged,
+  workflowIDChanged,
+  workflowReset,
+} = workflowSlice.actions;
+
+export default workflowSlice.reducer;
--- a/invokeai/frontend/web/src/features/nodes/types/invocation.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/invocation.ts
@ -18,7 +18,6 @@ export const zInvocationTemplate = z.object({
  inputs: z.record(zFieldInputTemplate),
  outputs: z.record(zFieldOutputTemplate),
  outputType: z.string().min(1),
-  withWorkflow: z.boolean(),
  version: zSemVer,
  useCache: z.boolean(),
  nodePack: z.string().min(1).nullish(),
@ -33,7 +32,6 @@ export const zInvocationNodeData = z.object({
  label: z.string(),
  isOpen: z.boolean(),
  notes: z.string(),
-  embedWorkflow: z.boolean(),
  isIntermediate: z.boolean(),
  useCache: z.boolean(),
  version: zSemVer,
--- a/invokeai/frontend/web/src/features/nodes/types/workflow.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/workflow.ts
@ -13,6 +13,9 @@ export type XYPosition = z.infer<typeof zXYPosition>;

 export const zDimension = z.number().gt(0).nullish();
 export type Dimension = z.infer<typeof zDimension>;
+
+export const zWorkflowCategory = z.enum(['user', 'default']);
+export type WorkflowCategory = z.infer<typeof zWorkflowCategory>;
 // #endregion

 // #region Workflow Nodes
@ -73,6 +76,7 @@ export type WorkflowEdge = z.infer<typeof zWorkflowEdge>;

 // #region Workflow
 export const zWorkflowV2 = z.object({
+  id: z.string().min(1).optional(),
  name: z.string(),
  author: z.string(),
  description: z.string(),
@ -84,6 +88,7 @@ export const zWorkflowV2 = z.object({
  edges: z.array(zWorkflowEdge),
  exposedFields: z.array(zFieldIdentifier),
  meta: z.object({
+    category: zWorkflowCategory.default('user'),
    version: z.literal('2.0.0'),
  }),
 });
--- a/invokeai/frontend/web/src/features/nodes/util/graph/buildNodesGraph.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/graph/buildNodesGraph.ts
@ -1,14 +1,13 @@
 import { NodesState } from 'features/nodes/store/types';
+import {
+  FieldInputInstance,
+  isColorFieldInputInstance,
+} from 'features/nodes/types/field';
 import { isInvocationNode } from 'features/nodes/types/invocation';
 import { cloneDeep, omit, reduce } from 'lodash-es';
 import { Graph } from 'services/api/types';
 import { AnyInvocation } from 'services/events/types';
 import { v4 as uuidv4 } from 'uuid';
-import { buildWorkflow } from 'features/nodes/util/workflow/buildWorkflow';
-import {
-  FieldInputInstance,
-  isColorFieldInputInstance,
-} from 'features/nodes/types/field';

 /**
 * We need to do special handling for some fields
@ -44,7 +43,7 @@ export const buildNodesGraph = (nodesState: NodesState): Graph => {
  const parsedNodes = filteredNodes.reduce<NonNullable<Graph['nodes']>>(
    (nodesAccumulator, node) => {
      const { id, data } = node;
-      const { type, inputs, isIntermediate, embedWorkflow } = data;
+      const { type, inputs, isIntermediate } = data;

      // Transform each node's inputs to simple key-value pairs
      const transformedInputs = reduce(
@ -69,11 +68,6 @@ export const buildNodesGraph = (nodesState: NodesState): Graph => {
        is_intermediate: isIntermediate,
      };

-      if (embedWorkflow) {
-        // add the workflow to the node
-        Object.assign(graphNode, { workflow: buildWorkflow(nodesState) });
-      }
-
      // Add it to the nodes object
      Object.assign(nodesAccumulator, {
        [id]: graphNode,
--- a/invokeai/frontend/web/src/features/nodes/util/node/buildInvocationNode.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/node/buildInvocationNode.ts
@ -67,7 +67,6 @@ export const buildInvocationNode = (
      label: '',
      notes: '',
      isOpen: true,
-      embedWorkflow: false,
      isIntermediate: type === 'save_image' ? false : true,
      useCache: template.useCache,
      inputs,
--- a/invokeai/frontend/web/src/features/nodes/util/node/nodeUpdate.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/node/nodeUpdate.ts
@ -1,16 +1,15 @@
 import { satisfies } from 'compare-versions';
 import { NodeUpdateError } from 'features/nodes/types/error';
 import {
-  InvocationNodeData,
+  InvocationNode,
  InvocationTemplate,
 } from 'features/nodes/types/invocation';
 import { zParsedSemver } from 'features/nodes/types/semver';
-import { cloneDeep, defaultsDeep } from 'lodash-es';
-import { Node } from 'reactflow';
+import { cloneDeep, keys, defaultsDeep, pick } from 'lodash-es';
 import { buildInvocationNode } from './buildInvocationNode';

 export const getNeedsUpdate = (
-  node: Node<InvocationNodeData>,
+  node: InvocationNode,
  template: InvocationTemplate
 ): boolean => {
  if (node.data.type !== template.type) {
@ -24,7 +23,7 @@ export const getNeedsUpdate = (
 */

 export const getMayUpdateNode = (
-  node: Node<InvocationNodeData>,
+  node: InvocationNode,
  template: InvocationTemplate
 ): boolean => {
  const needsUpdate = getNeedsUpdate(node, template);
@ -45,9 +44,9 @@ export const getMayUpdateNode = (
 */

 export const updateNode = (
-  node: Node<InvocationNodeData>,
+  node: InvocationNode,
  template: InvocationTemplate
-): Node<InvocationNodeData> => {
+): InvocationNode => {
  const mayUpdate = getMayUpdateNode(node, template);

  if (!mayUpdate || node.data.type !== template.type) {
@ -64,5 +63,8 @@ export const updateNode = (
  clone.data.version = template.version;
  defaultsDeep(clone, defaults); // mutates!

+  // Remove any fields that are not in the template
+  clone.data.inputs = pick(clone.data.inputs, keys(defaults.data.inputs));
+  clone.data.outputs = pick(clone.data.outputs, keys(defaults.data.outputs));
  return clone;
 };
--- a/invokeai/frontend/web/src/features/nodes/util/schema/parseSchema.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/schema/parseSchema.ts
@ -83,7 +83,6 @@ export const parseSchema = (
    const description = schema.description ?? '';
    const version = schema.version;
    const nodePack = schema.node_pack;
-    let withWorkflow = false;

    const inputs = reduce(
      schema.properties,
@ -111,12 +110,6 @@ export const parseSchema = (
        try {
          const fieldType = parseFieldType(property);

-          if (fieldType.name === 'WorkflowField') {
-            // This supports workflows, set the flag and skip to next field
-            withWorkflow = true;
-            return inputsAccumulator;
-          }
-
          if (isReservedFieldType(fieldType.name)) {
            // Skip processing this reserved field
            return inputsAccumulator;
@ -251,7 +244,6 @@ export const parseSchema = (
      inputs,
      outputs,
      useCache,
-      withWorkflow,
      nodePack,
    };

--- a/invokeai/frontend/web/src/features/nodes/util/workflow/buildWorkflow.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/workflow/buildWorkflow.ts
@ -1,23 +1,39 @@
 import { logger } from 'app/logging/logger';
+import { parseify } from 'common/util/serialize';
 import { NodesState } from 'features/nodes/store/types';
 import {
  WorkflowV2,
  zWorkflowEdge,
  zWorkflowNode,
 } from 'features/nodes/types/workflow';
-import { fromZodError } from 'zod-validation-error';
-import { parseify } from 'common/util/serialize';
 import i18n from 'i18next';
+import { cloneDeep } from 'lodash-es';
+import { fromZodError } from 'zod-validation-error';

-export const buildWorkflow = (nodesState: NodesState): WorkflowV2 => {
-  const { workflow: workflowMeta, nodes, edges } = nodesState;
-  const workflow: WorkflowV2 = {
-    ...workflowMeta,
+type BuildWorkflowArg = {
+  nodes: NodesState['nodes'];
+  edges: NodesState['edges'];
+  workflow: Omit<WorkflowV2, 'nodes' | 'edges'>;
+};
+
+type BuildWorkflowFunction = (arg: BuildWorkflowArg) => WorkflowV2;
+
+export const buildWorkflow: BuildWorkflowFunction = ({
+  nodes,
+  edges,
+  workflow,
+}) => {
+  const clonedWorkflow = cloneDeep(workflow);
+  const clonedNodes = cloneDeep(nodes);
+  const clonedEdges = cloneDeep(edges);
+
+  const newWorkflow: WorkflowV2 = {
+    ...clonedWorkflow,
    nodes: [],
    edges: [],
  };

-  nodes
+  clonedNodes
    .filter((n) =>
      ['invocation', 'notes'].includes(n.type ?? '__UNKNOWN_NODE_TYPE__')
    )
@ -30,10 +46,10 @@ export const buildWorkflow = (nodesState: NodesState): WorkflowV2 => {
        logger('nodes').warn({ node: parseify(node) }, message);
        return;
      }
-      workflow.nodes.push(result.data);
+      newWorkflow.nodes.push(result.data);
    });

-  edges.forEach((edge) => {
+  clonedEdges.forEach((edge) => {
    const result = zWorkflowEdge.safeParse(edge);
    if (!result.success) {
      const { message } = fromZodError(result.error, {
@ -42,8 +58,8 @@ export const buildWorkflow = (nodesState: NodesState): WorkflowV2 => {
      logger('nodes').warn({ edge: parseify(edge) }, message);
      return;
    }
-    workflow.edges.push(result.data);
+    newWorkflow.edges.push(result.data);
  });

-  return workflow;
+  return newWorkflow;
 };
--- a/invokeai/frontend/web/src/features/nodes/util/workflow/migrations.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/workflow/migrations.ts
@ -1,18 +1,17 @@
 import { $store } from 'app/store/nanostores/store';
-import { RootState } from 'app/store/store';
-import { FieldType } from 'features/nodes/types/field';
-import { InvocationNodeData } from 'features/nodes/types/invocation';
-import { t } from 'i18next';
-import { forEach } from 'lodash-es';
-import { z } from 'zod';
 import {
  WorkflowMigrationError,
  WorkflowVersionError,
 } from 'features/nodes/types/error';
+import { FieldType } from 'features/nodes/types/field';
+import { InvocationNodeData } from 'features/nodes/types/invocation';
 import { zSemVer } from 'features/nodes/types/semver';
 import { FIELD_TYPE_V1_TO_FIELD_TYPE_V2_MAPPING } from 'features/nodes/types/v1/fieldTypeMap';
 import { WorkflowV1, zWorkflowV1 } from 'features/nodes/types/v1/workflowV1';
 import { WorkflowV2, zWorkflowV2 } from 'features/nodes/types/workflow';
+import { t } from 'i18next';
+import { forEach } from 'lodash-es';
+import { z } from 'zod';

 /**
 * Helper schema to extract the version from a workflow.
@ -25,10 +24,19 @@ const zWorkflowMetaVersion = z.object({

 /**
 * Migrates a workflow from V1 to V2.
+ *
+ * Changes include:
+ * - Field types are now structured
+ * - Invocation node pack is now saved in the node data
+ * - Workflow schema version bumped to 2.0.0
 */
 const migrateV1toV2 = (workflowToMigrate: WorkflowV1): WorkflowV2 => {
-  const invocationTemplates = ($store.get()?.getState() as RootState).nodes
-    .nodeTemplates;
+  const invocationTemplates = $store.get()?.getState().nodes.nodeTemplates;
+
+  if (!invocationTemplates) {
+    throw new Error(t('app.storeNotInitialized'));
+  }
+
  workflowToMigrate.nodes.forEach((node) => {
    if (node.type === 'invocation') {
      // Migrate field types
@ -39,7 +47,6 @@ const migrateV1toV2 = (workflowToMigrate: WorkflowV1): WorkflowV2 => {
            t('nodes.unknownFieldType', { type: input.type })
          );
        }
-        // Cast as the V2 type
        (input.type as unknown as FieldType) = newFieldType;
      });
      forEach(node.data.outputs, (output) => {
@ -50,19 +57,21 @@ const migrateV1toV2 = (workflowToMigrate: WorkflowV1): WorkflowV2 => {
            t('nodes.unknownFieldType', { type: output.type })
          );
        }
-        // Cast as the V2 type
        (output.type as unknown as FieldType) = newFieldType;
      });
-      // Migrate nodePack
+      // Add node pack
      const invocationTemplate = invocationTemplates[node.data.type];
      const nodePack = invocationTemplate
        ? invocationTemplate.nodePack
        : t('common.unknown');
-      // Cast as the V2 type
      (node.data as unknown as InvocationNodeData).nodePack = nodePack;
    }
  });
-  (workflowToMigrate.meta.version as WorkflowV2['meta']['version']) = '2.0.0';
+  // Bump version
+  (workflowToMigrate as unknown as WorkflowV2).meta.version = '2.0.0';
+  // Add category - should always be 'user', 'default' workflows are only created by the backend
+  (workflowToMigrate as unknown as WorkflowV2).meta.category = 'user';
+  // Parsing strips out any extra properties not in the latest version
  return zWorkflowV2.parse(workflowToMigrate);
 };

@ -73,7 +82,6 @@ export const parseAndMigrateWorkflow = (data: unknown): WorkflowV2 => {
  const workflowVersionResult = zWorkflowMetaVersion.safeParse(data);

  if (!workflowVersionResult.success) {
-    console.log(data);
    throw new WorkflowVersionError(t('nodes.unableToGetWorkflowVersion'));
  }

--- a/invokeai/frontend/web/src/features/nodes/util/workflow/validateWorkflow.ts
+++ b/invokeai/frontend/web/src/features/nodes/util/workflow/validateWorkflow.ts
@ -39,6 +39,13 @@ export const validateWorkflow = (
  // Parse the raw workflow data & migrate it to the latest version
  const _workflow = parseAndMigrateWorkflow(workflow);

+  // System workflows are only allowed to be used as templates.
+  // If a system workflow is loaded, change its category to user and remove its ID so that we can save it as a user workflow.
+  if (_workflow.meta.category === 'default') {
+    _workflow.meta.category = 'user';
+    _workflow.id = undefined;
+  }
+
  // Now we can validate the graph
  const { nodes, edges } = _workflow;
  const warnings: WorkflowWarning[] = [];
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/DownloadWorkflowButton.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/DownloadWorkflowButton.tsx
@ -19,8 +19,8 @@ const DownloadWorkflowButton = () => {
  return (
    <IAIIconButton
      icon={<FaDownload />}
-      tooltip={t('nodes.downloadWorkflow')}
-      aria-label={t('nodes.downloadWorkflow')}
+      tooltip={t('workflows.downloadWorkflow')}
+      aria-label={t('workflows.downloadWorkflow')}
      onClick={handleDownload}
    />
  );
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/LoadWorkflowButton.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/LoadWorkflowButton.tsx
@ -1,14 +1,14 @@
 import { FileButton } from '@mantine/core';
 import IAIIconButton from 'common/components/IAIIconButton';
-import { useLoadWorkflowFromFile } from 'features/nodes/hooks/useLoadWorkflowFromFile';
+import { useLoadWorkflowFromFile } from 'features/workflowLibrary/hooks/useLoadWorkflowFromFile';
 import { memo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaUpload } from 'react-icons/fa';

-const LoadWorkflowButton = () => {
+const UploadWorkflowButton = () => {
  const { t } = useTranslation();
  const resetRef = useRef<() => void>(null);
-  const loadWorkflowFromFile = useLoadWorkflowFromFile(resetRef);
+  const loadWorkflowFromFile = useLoadWorkflowFromFile({ resetRef });
  return (
    <FileButton
      resetRef={resetRef}
@ -18,8 +18,8 @@ const LoadWorkflowButton = () => {
      {(props) => (
        <IAIIconButton
          icon={<FaUpload />}
-          tooltip={t('nodes.loadWorkflow')}
-          aria-label={t('nodes.loadWorkflow')}
+          tooltip={t('workflows.uploadWorkflow')}
+          aria-label={t('workflows.uploadWorkflow')}
          {...props}
        />
      )}
@ -27,4 +27,4 @@ const LoadWorkflowButton = () => {
  );
 };

-export default memo(LoadWorkflowButton);
+export default memo(UploadWorkflowButton);
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/ResetWorkflowButton.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/ResetWorkflowButton.tsx
@ -10,8 +10,7 @@ import {
  Text,
  useDisclosure,
 } from '@chakra-ui/react';
-import { RootState } from 'app/store/store';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useAppDispatch } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { nodeEditorReset } from 'features/nodes/store/nodesSlice';
 import { addToast } from 'features/system/store/systemSlice';
@ -20,23 +19,19 @@ import { memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaTrash } from 'react-icons/fa';

-const ResetWorkflowButton = () => {
+const ResetWorkflowEditorButton = () => {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const { isOpen, onOpen, onClose } = useDisclosure();
  const cancelRef = useRef<HTMLButtonElement | null>(null);

-  const nodesCount = useAppSelector(
-    (state: RootState) => state.nodes.nodes.length
-  );
-
  const handleConfirmClear = useCallback(() => {
    dispatch(nodeEditorReset());

    dispatch(
      addToast(
        makeToast({
-          title: t('toast.nodesCleared'),
+          title: t('workflows.workflowEditorReset'),
          status: 'success',
        })
      )
@ -52,7 +47,6 @@ const ResetWorkflowButton = () => {
        tooltip={t('nodes.resetWorkflow')}
        aria-label={t('nodes.resetWorkflow')}
        onClick={onOpen}
-        isDisabled={!nodesCount}
        colorScheme="error"
      />

@ -90,4 +84,4 @@ const ResetWorkflowButton = () => {
  );
 };

-export default memo(ResetWorkflowButton);
+export default memo(ResetWorkflowEditorButton);
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/SaveWorkflowAsButton.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/SaveWorkflowAsButton.tsx
@ -0,0 +1,89 @@
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  FormControl,
+  FormLabel,
+  Input,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { useAppSelector } from 'app/store/storeHooks';
+import IAIButton from 'common/components/IAIButton';
+import IAIIconButton from 'common/components/IAIIconButton';
+import { useSaveWorkflowAs } from 'features/workflowLibrary/hooks/useSaveWorkflowAs';
+import { getWorkflowCopyName } from 'features/workflowLibrary/util/getWorkflowCopyName';
+import { ChangeEvent, memo, useCallback, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaClone } from 'react-icons/fa';
+
+const SaveWorkflowAsButton = () => {
+  const currentName = useAppSelector((state) => state.workflow.name);
+  const { t } = useTranslation();
+  const { saveWorkflowAs, isLoading } = useSaveWorkflowAs();
+  const [name, setName] = useState(getWorkflowCopyName(currentName));
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const onOpenCallback = useCallback(() => {
+    setName(getWorkflowCopyName(currentName));
+    onOpen();
+  }, [currentName, onOpen]);
+
+  const onSave = useCallback(async () => {
+    saveWorkflowAs({ name, onSuccess: onClose, onError: onClose });
+  }, [name, onClose, saveWorkflowAs]);
+
+  const onChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    setName(e.target.value);
+  }, []);
+
+  return (
+    <>
+      <IAIIconButton
+        icon={<FaClone />}
+        onClick={onOpenCallback}
+        isLoading={isLoading}
+        tooltip={t('workflows.saveWorkflowAs')}
+        aria-label={t('workflows.saveWorkflowAs')}
+      />
+      <AlertDialog
+        isOpen={isOpen}
+        onClose={onClose}
+        leastDestructiveRef={inputRef}
+        isCentered
+      >
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <AlertDialogHeader fontSize="lg" fontWeight="bold">
+              {t('workflows.saveWorkflowAs')}
+            </AlertDialogHeader>
+
+            <AlertDialogBody>
+              <FormControl>
+                <FormLabel>{t('workflows.workflowName')}</FormLabel>
+                <Input
+                  ref={inputRef}
+                  value={name}
+                  onChange={onChange}
+                  placeholder={t('workflows.workflowName')}
+                />
+              </FormControl>
+            </AlertDialogBody>
+
+            <AlertDialogFooter>
+              <IAIButton onClick={onClose}>{t('common.cancel')}</IAIButton>
+              <IAIButton colorScheme="accent" onClick={onSave} ml={3}>
+                {t('common.saveAs')}
+              </IAIButton>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
+    </>
+  );
+};
+
+export default memo(SaveWorkflowAsButton);
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/SaveWorkflowButton.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/SaveWorkflowButton.tsx
@ -0,0 +1,21 @@
+import IAIIconButton from 'common/components/IAIIconButton';
+import { useSaveLibraryWorkflow } from 'features/workflowLibrary/hooks/useSaveWorkflow';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaSave } from 'react-icons/fa';
+
+const SaveLibraryWorkflowButton = () => {
+  const { t } = useTranslation();
+  const { saveWorkflow, isLoading } = useSaveLibraryWorkflow();
+  return (
+    <IAIIconButton
+      icon={<FaSave />}
+      onClick={saveWorkflow}
+      isLoading={isLoading}
+      tooltip={t('workflows.saveWorkflow')}
+      aria-label={t('workflows.saveWorkflow')}
+    />
+  );
+};
+
+export default memo(SaveLibraryWorkflowButton);
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx
@ -0,0 +1,26 @@
+import { useDisclosure } from '@chakra-ui/react';
+import IAIIconButton from 'common/components/IAIIconButton';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaFolderOpen } from 'react-icons/fa';
+import WorkflowLibraryModal from './WorkflowLibraryModal';
+import { WorkflowLibraryModalContext } from 'features/workflowLibrary/context/WorkflowLibraryModalContext';
+
+const WorkflowLibraryButton = () => {
+  const { t } = useTranslation();
+  const disclosure = useDisclosure();
+
+  return (
+    <WorkflowLibraryModalContext.Provider value={disclosure}>
+      <IAIIconButton
+        icon={<FaFolderOpen />}
+        onClick={disclosure.onOpen}
+        tooltip={t('workflows.workflowLibrary')}
+        aria-label={t('workflows.workflowLibrary')}
+      />
+      <WorkflowLibraryModal />
+    </WorkflowLibraryModalContext.Provider>
+  );
+};
+
+export default memo(WorkflowLibraryButton);
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryContent.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryContent.tsx
@ -0,0 +1,13 @@
+import WorkflowLibraryList from 'features/workflowLibrary/components/WorkflowLibraryList';
+import WorkflowLibraryListWrapper from 'features/workflowLibrary/components/WorkflowLibraryListWrapper';
+import { memo } from 'react';
+
+const WorkflowLibraryContent = () => {
+  return (
+    <WorkflowLibraryListWrapper>
+      <WorkflowLibraryList />
+    </WorkflowLibraryListWrapper>
+  );
+};
+
+export default memo(WorkflowLibraryContent);
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
@ -0,0 +1,242 @@
+import { CloseIcon } from '@chakra-ui/icons';
+import {
+  ButtonGroup,
+  Divider,
+  Flex,
+  IconButton,
+  Input,
+  InputGroup,
+  InputRightElement,
+  Spacer,
+} from '@chakra-ui/react';
+import { SelectItem } from '@mantine/core';
+import IAIButton from 'common/components/IAIButton';
+import {
+  IAINoContentFallback,
+  IAINoContentFallbackWithSpinner,
+} from 'common/components/IAIImageFallback';
+import IAIMantineSelect from 'common/components/IAIMantineSelect';
+import ScrollableContent from 'features/nodes/components/sidePanel/ScrollableContent';
+import { WorkflowCategory } from 'features/nodes/types/workflow';
+import WorkflowLibraryListItem from 'features/workflowLibrary/components/WorkflowLibraryListItem';
+import WorkflowLibraryPagination from 'features/workflowLibrary/components/WorkflowLibraryPagination';
+import {
+  ChangeEvent,
+  KeyboardEvent,
+  memo,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { useListWorkflowsQuery } from 'services/api/endpoints/workflows';
+import { SQLiteDirection, WorkflowRecordOrderBy } from 'services/api/types';
+import { useDebounce } from 'use-debounce';
+
+const PER_PAGE = 10;
+
+const ORDER_BY_DATA: SelectItem[] = [
+  { value: 'opened_at', label: 'Opened' },
+  { value: 'created_at', label: 'Created' },
+  { value: 'updated_at', label: 'Updated' },
+  { value: 'name', label: 'Name' },
+];
+
+const DIRECTION_DATA: SelectItem[] = [
+  { value: 'ASC', label: 'Ascending' },
+  { value: 'DESC', label: 'Descending' },
+];
+
+const WorkflowLibraryList = () => {
+  const { t } = useTranslation();
+  const [category, setCategory] = useState<WorkflowCategory>('user');
+  const [page, setPage] = useState(0);
+  const [query, setQuery] = useState('');
+  const [order_by, setOrderBy] = useState<WorkflowRecordOrderBy>('opened_at');
+  const [direction, setDirection] = useState<SQLiteDirection>('ASC');
+  const [debouncedQuery] = useDebounce(query, 500);
+
+  const queryArg = useMemo<Parameters<typeof useListWorkflowsQuery>[0]>(() => {
+    if (category === 'user') {
+      return {
+        page,
+        per_page: PER_PAGE,
+        order_by,
+        direction,
+        category,
+        query: debouncedQuery,
+      };
+    }
+    return {
+      page,
+      per_page: PER_PAGE,
+      order_by: 'name' as const,
+      direction: 'ASC' as const,
+      category,
+      query: debouncedQuery,
+    };
+  }, [category, debouncedQuery, direction, order_by, page]);
+
+  const { data, isLoading, isError, isFetching } =
+    useListWorkflowsQuery(queryArg);
+
+  const handleChangeOrderBy = useCallback(
+    (value: string | null) => {
+      if (!value || value === order_by) {
+        return;
+      }
+      setOrderBy(value as WorkflowRecordOrderBy);
+      setPage(0);
+    },
+    [order_by]
+  );
+
+  const handleChangeDirection = useCallback(
+    (value: string | null) => {
+      if (!value || value === direction) {
+        return;
+      }
+      setDirection(value as SQLiteDirection);
+      setPage(0);
+    },
+    [direction]
+  );
+
+  const resetFilterText = useCallback(() => {
+    setQuery('');
+    setPage(0);
+  }, []);
+
+  const handleKeydownFilterText = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      // exit search mode on escape
+      if (e.key === 'Escape') {
+        resetFilterText();
+        e.preventDefault();
+        setPage(0);
+      }
+    },
+    [resetFilterText]
+  );
+
+  const handleChangeFilterText = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      setQuery(e.target.value);
+      setPage(0);
+    },
+    []
+  );
+
+  const handleSetUserCategory = useCallback(() => {
+    setCategory('user');
+    setPage(0);
+  }, []);
+
+  const handleSetDefaultCategory = useCallback(() => {
+    setCategory('default');
+    setPage(0);
+  }, []);
+
+  return (
+    <>
+      <Flex gap={4} alignItems="center" h={10} flexShrink={0} flexGrow={0}>
+        <ButtonGroup>
+          <IAIButton
+            variant={category === 'user' ? undefined : 'ghost'}
+            onClick={handleSetUserCategory}
+            isChecked={category === 'user'}
+          >
+            {t('workflows.userWorkflows')}
+          </IAIButton>
+          <IAIButton
+            variant={category === 'default' ? undefined : 'ghost'}
+            onClick={handleSetDefaultCategory}
+            isChecked={category === 'default'}
+          >
+            {t('workflows.defaultWorkflows')}
+          </IAIButton>
+        </ButtonGroup>
+        <Spacer />
+        {category === 'user' && (
+          <>
+            <IAIMantineSelect
+              label={t('common.orderBy')}
+              value={order_by}
+              data={ORDER_BY_DATA}
+              onChange={handleChangeOrderBy}
+              formControlProps={{
+                w: 48,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 2,
+              }}
+              disabled={isFetching}
+            />
+            <IAIMantineSelect
+              label={t('common.direction')}
+              value={direction}
+              data={DIRECTION_DATA}
+              onChange={handleChangeDirection}
+              formControlProps={{
+                w: 48,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 2,
+              }}
+              disabled={isFetching}
+            />
+          </>
+        )}
+        <InputGroup w="20rem">
+          <Input
+            placeholder={t('workflows.searchWorkflows')}
+            value={query}
+            onKeyDown={handleKeydownFilterText}
+            onChange={handleChangeFilterText}
+            data-testid="workflow-search-input"
+          />
+          {query.trim().length && (
+            <InputRightElement>
+              <IconButton
+                onClick={resetFilterText}
+                size="xs"
+                variant="ghost"
+                aria-label={t('workflows.clearWorkflowSearchFilter')}
+                opacity={0.5}
+                icon={<CloseIcon boxSize={2} />}
+              />
+            </InputRightElement>
+          )}
+        </InputGroup>
+      </Flex>
+      <Divider />
+      {isLoading ? (
+        <IAINoContentFallbackWithSpinner label={t('workflows.loading')} />
+      ) : !data || isError ? (
+        <IAINoContentFallback label={t('workflows.problemLoading')} />
+      ) : data.items.length ? (
+        <ScrollableContent>
+          <Flex w="full" h="full" gap={2} px={1} flexDir="column">
+            {data.items.map((w) => (
+              <WorkflowLibraryListItem key={w.workflow_id} workflowDTO={w} />
+            ))}
+          </Flex>
+        </ScrollableContent>
+      ) : (
+        <IAINoContentFallback label={t('workflows.noUserWorkflows')} />
+      )}
+      <Divider />
+      {data && (
+        <Flex w="full" justifyContent="space-around">
+          <WorkflowLibraryPagination
+            data={data}
+            page={page}
+            setPage={setPage}
+          />
+        </Flex>
+      )}
+    </>
+  );
+};
+
+export default memo(WorkflowLibraryList);
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
@ -0,0 +1,94 @@
+import { Flex, Heading, Spacer, Text } from '@chakra-ui/react';
+import IAIButton from 'common/components/IAIButton';
+import dateFormat, { masks } from 'dateformat';
+import { useDeleteLibraryWorkflow } from 'features/workflowLibrary/hooks/useDeleteLibraryWorkflow';
+import { useGetAndLoadLibraryWorkflow } from 'features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow';
+import { useWorkflowLibraryModalContext } from 'features/workflowLibrary/context/useWorkflowLibraryModalContext';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { WorkflowRecordListItemDTO } from 'services/api/types';
+
+type Props = {
+  workflowDTO: WorkflowRecordListItemDTO;
+};
+
+const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
+  const { t } = useTranslation();
+  const { onClose } = useWorkflowLibraryModalContext();
+  const { deleteWorkflow, deleteWorkflowResult } = useDeleteLibraryWorkflow({});
+  const { getAndLoadWorkflow, getAndLoadWorkflowResult } =
+    useGetAndLoadLibraryWorkflow({ onSuccess: onClose });
+
+  const handleDeleteWorkflow = useCallback(() => {
+    deleteWorkflow(workflowDTO.workflow_id);
+  }, [deleteWorkflow, workflowDTO.workflow_id]);
+
+  const handleGetAndLoadWorkflow = useCallback(() => {
+    getAndLoadWorkflow(workflowDTO.workflow_id);
+  }, [getAndLoadWorkflow, workflowDTO.workflow_id]);
+
+  return (
+    <Flex key={workflowDTO.workflow_id} w="full">
+      <Flex w="full" alignItems="center" gap={2} h={12}>
+        <Flex flexDir="column" flexGrow={1} h="full">
+          <Flex alignItems="center" w="full" h="50%">
+            <Heading size="sm">
+              {workflowDTO.name || t('workflows.unnamedWorkflow')}
+            </Heading>
+            <Spacer />
+            {workflowDTO.category === 'user' && (
+              <Text fontSize="sm" variant="subtext">
+                {t('common.updated')}:{' '}
+                {dateFormat(workflowDTO.updated_at, masks.shortDate)}{' '}
+                {dateFormat(workflowDTO.updated_at, masks.shortTime)}
+              </Text>
+            )}
+          </Flex>
+          <Flex alignItems="center" w="full" h="50%">
+            {workflowDTO.description ? (
+              <Text fontSize="sm" noOfLines={1}>
+                {workflowDTO.description}
+              </Text>
+            ) : (
+              <Text
+                fontSize="sm"
+                variant="subtext"
+                fontStyle="italic"
+                noOfLines={1}
+              >
+                {t('workflows.noDescription')}
+              </Text>
+            )}
+            <Spacer />
+            {workflowDTO.category === 'user' && (
+              <Text fontSize="sm" variant="subtext">
+                {t('common.created')}:{' '}
+                {dateFormat(workflowDTO.created_at, masks.shortDate)}{' '}
+                {dateFormat(workflowDTO.created_at, masks.shortTime)}
+              </Text>
+            )}
+          </Flex>
+        </Flex>
+        <IAIButton
+          onClick={handleGetAndLoadWorkflow}
+          isLoading={getAndLoadWorkflowResult.isLoading}
+          aria-label={t('workflows.openWorkflow')}
+        >
+          {t('common.load')}
+        </IAIButton>
+        {workflowDTO.category === 'user' && (
+          <IAIButton
+            colorScheme="error"
+            onClick={handleDeleteWorkflow}
+            isLoading={deleteWorkflowResult.isLoading}
+            aria-label={t('workflows.deleteWorkflow')}
+          >
+            {t('common.delete')}
+          </IAIButton>
+        )}
+      </Flex>
+    </Flex>
+  );
+};
+
+export default memo(WorkflowLibraryListItem);
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListWrapper.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListWrapper.tsx
@ -0,0 +1,21 @@
+import { Flex } from '@chakra-ui/react';
+import { PropsWithChildren, memo } from 'react';
+
+const WorkflowLibraryListWrapper = (props: PropsWithChildren) => {
+  return (
+    <Flex
+      w="full"
+      h="full"
+      flexDir="column"
+      layerStyle="second"
+      py={2}
+      px={4}
+      gap={2}
+      borderRadius="base"
+    >
+      {props.children}
+    </Flex>
+  );
+};
+
+export default memo(WorkflowLibraryListWrapper);
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx
@ -0,0 +1,40 @@
+import {
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from '@chakra-ui/react';
+import WorkflowLibraryContent from 'features/workflowLibrary/components/WorkflowLibraryContent';
+import { useWorkflowLibraryModalContext } from 'features/workflowLibrary/context/useWorkflowLibraryModalContext';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const WorkflowLibraryModal = () => {
+  const { t } = useTranslation();
+  const { isOpen, onClose } = useWorkflowLibraryModalContext();
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent
+        w="80%"
+        h="80%"
+        minW="unset"
+        minH="unset"
+        maxW="unset"
+        maxH="unset"
+      >
+        <ModalHeader>{t('workflows.workflowLibrary')}</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <WorkflowLibraryContent />
+        </ModalBody>
+        <ModalFooter />
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default memo(WorkflowLibraryModal);
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryPagination.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryPagination.tsx
@ -0,0 +1,87 @@
+import { ButtonGroup } from '@chakra-ui/react';
+import IAIButton from 'common/components/IAIButton';
+import IAIIconButton from 'common/components/IAIIconButton';
+import { Dispatch, SetStateAction, memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
+import { paths } from 'services/api/schema';
+
+const PAGES_TO_DISPLAY = 7;
+
+type PageData = {
+  page: number;
+  onClick: () => void;
+};
+
+type Props = {
+  page: number;
+  setPage: Dispatch<SetStateAction<number>>;
+  data: paths['/api/v1/workflows/']['get']['responses']['200']['content']['application/json'];
+};
+
+const WorkflowLibraryPagination = ({ page, setPage, data }: Props) => {
+  const { t } = useTranslation();
+
+  const handlePrevPage = useCallback(() => {
+    setPage((p) => Math.max(p - 1, 0));
+  }, [setPage]);
+
+  const handleNextPage = useCallback(() => {
+    setPage((p) => Math.min(p + 1, data.pages - 1));
+  }, [data.pages, setPage]);
+
+  const pages: PageData[] = useMemo(() => {
+    const pages = [];
+    let first =
+      data.pages > PAGES_TO_DISPLAY
+        ? Math.max(0, page - Math.floor(PAGES_TO_DISPLAY / 2))
+        : 0;
+    const last =
+      data.pages > PAGES_TO_DISPLAY
+        ? Math.min(data.pages, first + PAGES_TO_DISPLAY)
+        : data.pages;
+    if (last - first < PAGES_TO_DISPLAY && data.pages > PAGES_TO_DISPLAY) {
+      first = last - PAGES_TO_DISPLAY;
+    }
+    for (let i = first; i < last; i++) {
+      pages.push({
+        page: i,
+        onClick: () => setPage(i),
+      });
+    }
+    return pages;
+  }, [data.pages, page, setPage]);
+
+  return (
+    <ButtonGroup>
+      <IAIIconButton
+        variant="ghost"
+        onClick={handlePrevPage}
+        isDisabled={page === 0}
+        aria-label={t('common.prevPage')}
+        icon={<FaChevronLeft />}
+      />
+      {pages.map((p) => (
+        <IAIButton
+          w={10}
+          isDisabled={data.pages === 1}
+          onClick={p.page === page ? undefined : p.onClick}
+          variant={p.page === page ? 'invokeAI' : 'ghost'}
+          key={p.page}
+          transitionDuration="0s" // the delay in animation looks jank
+        >
+          {p.page + 1}
+        </IAIButton>
+      ))}
+      <IAIIconButton
+        variant="ghost"
+        onClick={handleNextPage}
+        isDisabled={page === data.pages - 1}
+        aria-label={t('common.nextPage')}
+        icon={<FaChevronRight />}
+      />
+    </ButtonGroup>
+  );
+};
+
+export default memo(WorkflowLibraryPagination);
--- a/invokeai/frontend/web/src/features/workflowLibrary/context/WorkflowLibraryModalContext.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/context/WorkflowLibraryModalContext.ts
@ -0,0 +1,5 @@
+import { UseDisclosureReturn } from '@chakra-ui/react';
+import { createContext } from 'react';
+
+export const WorkflowLibraryModalContext =
+  createContext<UseDisclosureReturn | null>(null);
--- a/invokeai/frontend/web/src/features/workflowLibrary/context/useWorkflowLibraryModalContext.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/context/useWorkflowLibraryModalContext.ts
@ -0,0 +1,12 @@
+import { WorkflowLibraryModalContext } from 'features/workflowLibrary/context/WorkflowLibraryModalContext';
+import { useContext } from 'react';
+
+export const useWorkflowLibraryModalContext = () => {
+  const context = useContext(WorkflowLibraryModalContext);
+  if (!context) {
+    throw new Error(
+      'useWorkflowLibraryContext must be used within a WorkflowLibraryContext.Provider'
+    );
+  }
+  return context;
+};
--- a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useDeleteLibraryWorkflow.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useDeleteLibraryWorkflow.ts
@ -0,0 +1,48 @@
+import { useAppToaster } from 'app/components/Toaster';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDeleteWorkflowMutation } from 'services/api/endpoints/workflows';
+
+type UseDeleteLibraryWorkflowOptions = {
+  onSuccess?: () => void;
+  onError?: () => void;
+};
+
+type UseDeleteLibraryWorkflowReturn = {
+  deleteWorkflow: (workflow_id: string) => Promise<void>;
+  deleteWorkflowResult: ReturnType<typeof useDeleteWorkflowMutation>[1];
+};
+
+type UseDeleteLibraryWorkflow = (
+  arg: UseDeleteLibraryWorkflowOptions
+) => UseDeleteLibraryWorkflowReturn;
+
+export const useDeleteLibraryWorkflow: UseDeleteLibraryWorkflow = ({
+  onSuccess,
+  onError,
+}) => {
+  const toaster = useAppToaster();
+  const { t } = useTranslation();
+  const [_deleteWorkflow, deleteWorkflowResult] = useDeleteWorkflowMutation();
+
+  const deleteWorkflow = useCallback(
+    async (workflow_id: string) => {
+      try {
+        await _deleteWorkflow(workflow_id).unwrap();
+        toaster({
+          title: t('toast.workflowDeleted'),
+        });
+        onSuccess && onSuccess();
+      } catch {
+        toaster({
+          title: t('toast.problemDeletingWorkflow'),
+          status: 'error',
+        });
+        onError && onError();
+      }
+    },
+    [_deleteWorkflow, toaster, t, onSuccess, onError]
+  );
+
+  return { deleteWorkflow, deleteWorkflowResult };
+};
--- a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useGetAndLoadEmbeddedWorkflow.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useGetAndLoadEmbeddedWorkflow.ts
@ -0,0 +1,54 @@
+import { useAppToaster } from 'app/components/Toaster';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { workflowLoadRequested } from 'features/nodes/store/actions';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLazyGetImageWorkflowQuery } from 'services/api/endpoints/images';
+
+type UseGetAndLoadEmbeddedWorkflowOptions = {
+  onSuccess?: () => void;
+  onError?: () => void;
+};
+
+type UseGetAndLoadEmbeddedWorkflowReturn = {
+  getAndLoadEmbeddedWorkflow: (imageName: string) => Promise<void>;
+  getAndLoadEmbeddedWorkflowResult: ReturnType<
+    typeof useLazyGetImageWorkflowQuery
+  >[1];
+};
+
+type UseGetAndLoadEmbeddedWorkflow = (
+  options: UseGetAndLoadEmbeddedWorkflowOptions
+) => UseGetAndLoadEmbeddedWorkflowReturn;
+
+export const useGetAndLoadEmbeddedWorkflow: UseGetAndLoadEmbeddedWorkflow = ({
+  onSuccess,
+  onError,
+}) => {
+  const dispatch = useAppDispatch();
+  const toaster = useAppToaster();
+  const { t } = useTranslation();
+  const [_getAndLoadEmbeddedWorkflow, getAndLoadEmbeddedWorkflowResult] =
+    useLazyGetImageWorkflowQuery();
+  const getAndLoadEmbeddedWorkflow = useCallback(
+    async (imageName: string) => {
+      try {
+        const workflow = await _getAndLoadEmbeddedWorkflow(imageName);
+        dispatch(
+          workflowLoadRequested({ workflow: workflow.data, asCopy: true })
+        );
+        // No toast - the listener for this action does that after the workflow is loaded
+        onSuccess && onSuccess();
+      } catch {
+        toaster({
+          title: t('toast.problemRetrievingWorkflow'),
+          status: 'error',
+        });
+        onError && onError();
+      }
+    },
+    [_getAndLoadEmbeddedWorkflow, dispatch, onSuccess, toaster, t, onError]
+  );
+
+  return { getAndLoadEmbeddedWorkflow, getAndLoadEmbeddedWorkflowResult };
+};
--- a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow.ts
@ -0,0 +1,52 @@
+import { useAppToaster } from 'app/components/Toaster';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { workflowLoadRequested } from 'features/nodes/store/actions';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLazyGetWorkflowQuery } from 'services/api/endpoints/workflows';
+
+type UseGetAndLoadLibraryWorkflowOptions = {
+  onSuccess?: () => void;
+  onError?: () => void;
+};
+
+type UseGetAndLoadLibraryWorkflowReturn = {
+  getAndLoadWorkflow: (workflow_id: string) => Promise<void>;
+  getAndLoadWorkflowResult: ReturnType<typeof useLazyGetWorkflowQuery>[1];
+};
+
+type UseGetAndLoadLibraryWorkflow = (
+  arg: UseGetAndLoadLibraryWorkflowOptions
+) => UseGetAndLoadLibraryWorkflowReturn;
+
+export const useGetAndLoadLibraryWorkflow: UseGetAndLoadLibraryWorkflow = ({
+  onSuccess,
+  onError,
+}) => {
+  const dispatch = useAppDispatch();
+  const toaster = useAppToaster();
+  const { t } = useTranslation();
+  const [_getAndLoadWorkflow, getAndLoadWorkflowResult] =
+    useLazyGetWorkflowQuery();
+  const getAndLoadWorkflow = useCallback(
+    async (workflow_id: string) => {
+      try {
+        const data = await _getAndLoadWorkflow(workflow_id).unwrap();
+        dispatch(
+          workflowLoadRequested({ workflow: data.workflow, asCopy: false })
+        );
+        // No toast - the listener for this action does that after the workflow is loaded
+        onSuccess && onSuccess();
+      } catch {
+        toaster({
+          title: t('toast.problemRetrievingWorkflow'),
+          status: 'error',
+        });
+        onError && onError();
+      }
+    },
+    [_getAndLoadWorkflow, dispatch, onSuccess, toaster, t, onError]
+  );
+
+  return { getAndLoadWorkflow, getAndLoadWorkflowResult };
+};
--- a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useLoadWorkflowFromFile.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useLoadWorkflowFromFile.tsx
@ -1,15 +1,22 @@
-import { ListItem, Text, UnorderedList } from '@chakra-ui/react';
 import { useLogger } from 'app/logging/useLogger';
 import { useAppDispatch } from 'app/store/storeHooks';
+import { workflowLoadRequested } from 'features/nodes/store/actions';
 import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
-import { RefObject, memo, useCallback } from 'react';
+import { RefObject, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ZodError } from 'zod';
-import { fromZodIssue } from 'zod-validation-error';
-import { workflowLoadRequested } from 'features/nodes/store/actions';

-export const useLoadWorkflowFromFile = (resetRef: RefObject<() => void>) => {
+type useLoadWorkflowFromFileOptions = {
+  resetRef: RefObject<() => void>;
+};
+
+type UseLoadWorkflowFromFile = (
+  options: useLoadWorkflowFromFileOptions
+) => (file: File | null) => void;
+
+export const useLoadWorkflowFromFile: UseLoadWorkflowFromFile = ({
+  resetRef,
+}) => {
  const dispatch = useAppDispatch();
  const logger = useLogger('nodes');
  const { t } = useTranslation();
@ -24,7 +31,9 @@ export const useLoadWorkflowFromFile = (resetRef: RefObject<() => void>) => {

        try {
          const parsedJSON = JSON.parse(String(rawJSON));
-          dispatch(workflowLoadRequested(parsedJSON));
+          dispatch(
+            workflowLoadRequested({ workflow: parsedJSON, asCopy: true })
+          );
        } catch (e) {
          // There was a problem reading the file
          logger.error(t('nodes.unableToLoadWorkflow'));
@ -41,6 +50,7 @@ export const useLoadWorkflowFromFile = (resetRef: RefObject<() => void>) => {
      };

      reader.readAsText(file);
+
      // Reset the file picker internal state so that the same file can be loaded again
      resetRef.current?.();
    },
@ -49,24 +59,3 @@ export const useLoadWorkflowFromFile = (resetRef: RefObject<() => void>) => {

  return loadWorkflowFromFile;
 };
-
-const WorkflowValidationErrorContent = memo((props: { error: ZodError }) => {
-  if (props.error.issues[0]) {
-    return (
-      <Text>
-        {fromZodIssue(props.error.issues[0], { prefix: null }).toString()}
-      </Text>
-    );
-  }
-  return (
-    <UnorderedList>
-      {props.error.issues.map((issue, i) => (
-        <ListItem key={i}>
-          <Text>{fromZodIssue(issue, { prefix: null }).toString()}</Text>
-        </ListItem>
-      ))}
-    </UnorderedList>
-  );
-});
-
-WorkflowValidationErrorContent.displayName = 'WorkflowValidationErrorContent';
--- a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflow.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflow.ts
@ -0,0 +1,61 @@
+import { useAppToaster } from 'app/components/Toaster';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { useWorkflow } from 'features/nodes/hooks/useWorkflow';
+import { workflowLoaded } from 'features/nodes/store/actions';
+import { zWorkflowV2 } from 'features/nodes/types/workflow';
+import { getWorkflowCopyName } from 'features/workflowLibrary/util/getWorkflowCopyName';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  useCreateWorkflowMutation,
+  useUpdateWorkflowMutation,
+} from 'services/api/endpoints/workflows';
+
+type UseSaveLibraryWorkflowReturn = {
+  saveWorkflow: () => Promise<void>;
+  isLoading: boolean;
+  isError: boolean;
+};
+
+type UseSaveLibraryWorkflow = () => UseSaveLibraryWorkflowReturn;
+
+export const useSaveLibraryWorkflow: UseSaveLibraryWorkflow = () => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const workflow = useWorkflow();
+  const [updateWorkflow, updateWorkflowResult] = useUpdateWorkflowMutation();
+  const [createWorkflow, createWorkflowResult] = useCreateWorkflowMutation();
+  const toaster = useAppToaster();
+  const saveWorkflow = useCallback(async () => {
+    try {
+      if (workflow.id) {
+        const data = await updateWorkflow(workflow).unwrap();
+        const updatedWorkflow = zWorkflowV2.parse(data.workflow);
+        dispatch(workflowLoaded(updatedWorkflow));
+        toaster({
+          title: t('workflows.workflowSaved'),
+          status: 'success',
+        });
+      } else {
+        const data = await createWorkflow(workflow).unwrap();
+        const createdWorkflow = zWorkflowV2.parse(data.workflow);
+        createdWorkflow.name = getWorkflowCopyName(createdWorkflow.name);
+        dispatch(workflowLoaded(createdWorkflow));
+        toaster({
+          title: t('workflows.workflowSaved'),
+          status: 'success',
+        });
+      }
+    } catch (e) {
+      toaster({
+        title: t('workflows.problemSavingWorkflow'),
+        status: 'error',
+      });
+    }
+  }, [workflow, updateWorkflow, dispatch, toaster, t, createWorkflow]);
+  return {
+    saveWorkflow,
+    isLoading: updateWorkflowResult.isLoading || createWorkflowResult.isLoading,
+    isError: updateWorkflowResult.isError || createWorkflowResult.isError,
+  };
+};
--- a/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/hooks/useSaveWorkflowAs.ts
@ -0,0 +1,58 @@
+import { useAppToaster } from 'app/components/Toaster';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { useWorkflow } from 'features/nodes/hooks/useWorkflow';
+import { workflowLoaded } from 'features/nodes/store/actions';
+import { zWorkflowV2 } from 'features/nodes/types/workflow';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useCreateWorkflowMutation } from 'services/api/endpoints/workflows';
+
+type SaveWorkflowAsArg = {
+  name: string;
+  onSuccess?: () => void;
+  onError?: () => void;
+};
+
+type UseSaveWorkflowAsReturn = {
+  saveWorkflowAs: (arg: SaveWorkflowAsArg) => Promise<void>;
+  isLoading: boolean;
+  isError: boolean;
+};
+
+type UseSaveWorkflowAs = () => UseSaveWorkflowAsReturn;
+
+export const useSaveWorkflowAs: UseSaveWorkflowAs = () => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const workflow = useWorkflow();
+  const [createWorkflow, createWorkflowResult] = useCreateWorkflowMutation();
+  const toaster = useAppToaster();
+  const saveWorkflowAs = useCallback(
+    async ({ name: newName, onSuccess, onError }: SaveWorkflowAsArg) => {
+      try {
+        workflow.id = undefined;
+        workflow.name = newName;
+        const data = await createWorkflow(workflow).unwrap();
+        const createdWorkflow = zWorkflowV2.parse(data.workflow);
+        dispatch(workflowLoaded(createdWorkflow));
+        onSuccess && onSuccess();
+        toaster({
+          title: t('workflows.workflowSaved'),
+          status: 'success',
+        });
+      } catch (e) {
+        onError && onError();
+        toaster({
+          title: t('workflows.problemSavingWorkflow'),
+          status: 'error',
+        });
+      }
+    },
+    [workflow, dispatch, toaster, t, createWorkflow]
+  );
+  return {
+    saveWorkflowAs,
+    isLoading: createWorkflowResult.isLoading,
+    isError: createWorkflowResult.isError,
+  };
+};
--- a/invokeai/frontend/web/src/features/workflowLibrary/util/getWorkflowCopyName.ts
+++ b/invokeai/frontend/web/src/features/workflowLibrary/util/getWorkflowCopyName.ts
@ -0,0 +1,2 @@
+export const getWorkflowCopyName = (name: string): string =>
+  `${name.trim()} (copy)`;
--- a/invokeai/frontend/web/src/services/api/endpoints/images.ts
+++ b/invokeai/frontend/web/src/services/api/endpoints/images.ts
@ -9,7 +9,6 @@ import {
 } from 'features/gallery/store/types';
 import { CoreMetadata, zCoreMetadata } from 'features/nodes/types/metadata';
 import { keyBy } from 'lodash-es';
-import { ApiTagDescription, LIST_TAG, api } from '..';
 import { components, paths } from 'services/api/schema';
 import {
  DeleteBoardResult,
@ -26,6 +25,7 @@ import {
  imagesAdapter,
  imagesSelectors,
 } from 'services/api/util';
+import { ApiTagDescription, LIST_TAG, api } from '..';
 import { boardsApi } from './boards';
 import { addToast } from 'features/system/store/systemSlice';
 import { t } from 'i18next';
@ -130,6 +130,16 @@ export const imagesApi = api.injectEndpoints({
      },
      keepUnusedDataFor: 86400, // 24 hours
    }),
+    getImageWorkflow: build.query<
+      paths['/api/v1/images/i/{image_name}/workflow']['get']['responses']['200']['content']['application/json'],
+      string
+    >({
+      query: (image_name) => ({ url: `images/i/${image_name}/workflow` }),
+      providesTags: (result, error, image_name) => [
+        { type: 'ImageWorkflow', id: image_name },
+      ],
+      keepUnusedDataFor: 86400, // 24 hours
+    }),
    deleteImage: build.mutation<void, ImageDTO>({
      query: ({ image_name }) => ({
        url: `images/i/${image_name}`,
@ -1572,6 +1582,8 @@ export const {
  useLazyListImagesQuery,
  useGetImageDTOQuery,
  useGetImageMetadataQuery,
+  useGetImageWorkflowQuery,
+  useLazyGetImageWorkflowQuery,
  useDeleteImageMutation,
  useDeleteImagesMutation,
  useUploadImageMutation,
--- a/invokeai/frontend/web/src/services/api/endpoints/workflows.ts
+++ b/invokeai/frontend/web/src/services/api/endpoints/workflows.ts
@ -1,30 +1,87 @@
-import { logger } from 'app/logging/logger';
-import { WorkflowV2, zWorkflowV2 } from 'features/nodes/types/workflow';
-import { api } from '..';
 import { paths } from 'services/api/schema';
+import { LIST_TAG, api } from '..';

 export const workflowsApi = api.injectEndpoints({
  endpoints: (build) => ({
-    getWorkflow: build.query<WorkflowV2 | undefined, string>({
+    getWorkflow: build.query<
+      paths['/api/v1/workflows/i/{workflow_id}']['get']['responses']['200']['content']['application/json'],
+      string
+    >({
      query: (workflow_id) => `workflows/i/${workflow_id}`,
      providesTags: (result, error, workflow_id) => [
        { type: 'Workflow', id: workflow_id },
      ],
-      transformResponse: (
-        response: paths['/api/v1/workflows/i/{workflow_id}']['get']['responses']['200']['content']['application/json']
-      ) => {
-        if (response) {
-          const result = zWorkflowV2.safeParse(response);
-          if (result.success) {
-            return result.data;
-          } else {
-            logger('images').warn('Problem parsing workflow');
-          }
+      onQueryStarted: async (arg, api) => {
+        const { dispatch, queryFulfilled } = api;
+        try {
+          await queryFulfilled;
+          dispatch(
+            workflowsApi.util.invalidateTags([
+              { type: 'WorkflowsRecent', id: LIST_TAG },
+            ])
+          );
+        } catch {
+          // no-op
        }
-        return;
      },
    }),
+    deleteWorkflow: build.mutation<void, string>({
+      query: (workflow_id) => ({
+        url: `workflows/i/${workflow_id}`,
+        method: 'DELETE',
+      }),
+      invalidatesTags: (result, error, workflow_id) => [
+        { type: 'Workflow', id: LIST_TAG },
+        { type: 'Workflow', id: workflow_id },
+        { type: 'WorkflowsRecent', id: LIST_TAG },
+      ],
+    }),
+    createWorkflow: build.mutation<
+      paths['/api/v1/workflows/']['post']['responses']['200']['content']['application/json'],
+      paths['/api/v1/workflows/']['post']['requestBody']['content']['application/json']['workflow']
+    >({
+      query: (workflow) => ({
+        url: 'workflows/',
+        method: 'POST',
+        body: { workflow },
+      }),
+      invalidatesTags: [
+        { type: 'Workflow', id: LIST_TAG },
+        { type: 'WorkflowsRecent', id: LIST_TAG },
+      ],
+    }),
+    updateWorkflow: build.mutation<
+      paths['/api/v1/workflows/i/{workflow_id}']['patch']['responses']['200']['content']['application/json'],
+      paths['/api/v1/workflows/i/{workflow_id}']['patch']['requestBody']['content']['application/json']['workflow']
+    >({
+      query: (workflow) => ({
+        url: `workflows/i/${workflow.id}`,
+        method: 'PATCH',
+        body: { workflow },
+      }),
+      invalidatesTags: (response, error, workflow) => [
+        { type: 'WorkflowsRecent', id: LIST_TAG },
+        { type: 'Workflow', id: LIST_TAG },
+        { type: 'Workflow', id: workflow.id },
+      ],
+    }),
+    listWorkflows: build.query<
+      paths['/api/v1/workflows/']['get']['responses']['200']['content']['application/json'],
+      NonNullable<paths['/api/v1/workflows/']['get']['parameters']['query']>
+    >({
+      query: (params) => ({
+        url: 'workflows/',
+        params,
+      }),
+      providesTags: [{ type: 'Workflow', id: LIST_TAG }],
+    }),
  }),
 });

-export const { useGetWorkflowQuery } = workflowsApi;
+export const {
+  useLazyGetWorkflowQuery,
+  useCreateWorkflowMutation,
+  useDeleteWorkflowMutation,
+  useUpdateWorkflowMutation,
+  useListWorkflowsQuery,
+} = workflowsApi;
--- a/invokeai/frontend/web/src/services/api/hooks/useDebouncedWorkflow.ts
+++ b/invokeai/frontend/web/src/services/api/hooks/useDebouncedWorkflow.ts
@ -1,21 +0,0 @@
-import { skipToken } from '@reduxjs/toolkit/query';
-import { useAppSelector } from 'app/store/storeHooks';
-import { useDebounce } from 'use-debounce';
-import { useGetWorkflowQuery } from 'services/api/endpoints/workflows';
-
-export const useDebouncedWorkflow = (workflowId?: string | null) => {
-  const workflowFetchDebounce = useAppSelector(
-    (state) => state.config.workflowFetchDebounce
-  );
-
-  const [debouncedWorkflowID] = useDebounce(
-    workflowId,
-    workflowFetchDebounce ?? 0
-  );
-
-  const { data: workflow, isLoading } = useGetWorkflowQuery(
-    debouncedWorkflowID ?? skipToken
-  );
-
-  return { workflow, isLoading };
-};
--- a/invokeai/frontend/web/src/services/api/index.ts
+++ b/invokeai/frontend/web/src/services/api/index.ts
@ -20,6 +20,7 @@ export const tagTypes = [
  'ImageNameList',
  'ImageList',
  'ImageMetadata',
+  'ImageWorkflow',
  'ImageMetadataFromFile',
  'IntermediatesCount',
  'SessionQueueItem',
@ -40,6 +41,7 @@ export const tagTypes = [
  'LoRAModel',
  'SDXLRefinerModel',
  'Workflow',
+  'WorkflowsRecent',
 ] as const;
 export type ApiTagDescription = TagDescription<(typeof tagTypes)[number]>;
 export const LIST_TAG = 'LIST';
--- a/invokeai/frontend/web/src/services/api/schema.d.ts
+++ b/invokeai/frontend/web/src/services/api/schema.d.ts
--- a/invokeai/frontend/web/src/services/api/types.ts
+++ b/invokeai/frontend/web/src/services/api/types.ts
@ -114,6 +114,10 @@ export type GraphExecutionState = s['GraphExecutionState'];
 export type Batch = s['Batch'];
 export type SessionQueueItemDTO = s['SessionQueueItemDTO'];
 export type SessionQueueItem = s['SessionQueueItem'];
+export type WorkflowRecordOrderBy = s['WorkflowRecordOrderBy'];
+export type SQLiteDirection = s['SQLiteDirection'];
+export type WorkflowDTO = s['WorkflowRecordDTO'];
+export type WorkflowRecordListItemDTO = s['WorkflowRecordListItemDTO'];

 // General nodes
 export type CollectInvocation = s['CollectInvocation'];