diff --git a/package.json b/package.json
index 8b79335de4..6e57d78d50 100644
--- a/package.json
+++ b/package.json
@@ -167,7 +167,7 @@
     {
       "path": "lib/components/internal/widget-exports.js",
       "brotli": false,
-      "limit": "840 kB",
+      "limit": "868 kB",
       "ignore": "react-dom"
     }
   ],
diff --git a/pages/app-layout/multi-layout-with-hidden-instances-iframe.page.tsx b/pages/app-layout/multi-layout-with-hidden-instances-iframe.page.tsx
index 3eed10f528..26c772450b 100644
--- a/pages/app-layout/multi-layout-with-hidden-instances-iframe.page.tsx
+++ b/pages/app-layout/multi-layout-with-hidden-instances-iframe.page.tsx
@@ -11,17 +11,19 @@ import SideNavigation, { SideNavigationProps } from '~components/side-navigation
 import SpaceBetween from '~components/space-between';
 
 import './utils/external-widget';
+import './utils/external-global-left-panel-widget';
 import { IframeWrapper } from '../utils/iframe-wrapper';
 import ScreenshotArea from '../utils/screenshot-area';
 import { Tools } from './utils/content-blocks';
-import labels from './utils/labels';
+import { drawerLabels } from './utils/drawers';
+import appLayoutLabels from './utils/labels';
 
 function createView(name: string) {
   return function View() {
     return (
       <AppLayout
         data-testid="secondary-layout"
-        ariaLabels={labels}
+        ariaLabels={{ ...appLayoutLabels, ...drawerLabels }}
         breadcrumbs={
           name !== 'page2' && (
             <BreadcrumbGroup
@@ -68,7 +70,7 @@ export default function () {
       <AppLayout
         {...{ __disableRuntimeDrawers: true }}
         data-testid="main-layout"
-        ariaLabels={labels}
+        ariaLabels={{ ...appLayoutLabels, ...drawerLabels }}
         navigation={
           <SideNavigation
             activeHref={activeHref}
diff --git a/pages/app-layout/runtime-drawers-imperative.page.tsx b/pages/app-layout/runtime-drawers-imperative.page.tsx
index 525c45bca7..91dd4093db 100644
--- a/pages/app-layout/runtime-drawers-imperative.page.tsx
+++ b/pages/app-layout/runtime-drawers-imperative.page.tsx
@@ -7,6 +7,7 @@ import { AppLayoutProps } from '~components/app-layout';
 
 import './utils/external-widget';
 import { Breadcrumbs, Containers } from './utils/content-blocks';
+import { drawerLabels } from './utils/drawers';
 import appLayoutLabels from './utils/labels';
 
 export default function WithDrawers() {
@@ -15,7 +16,7 @@ export default function WithDrawers() {
   return (
     <AppLayout
       ref={appLayoutRef}
-      ariaLabels={appLayoutLabels}
+      ariaLabels={{ ...appLayoutLabels, ...drawerLabels }}
       breadcrumbs={<Breadcrumbs />}
       content={
         <ContentLayout
diff --git a/pages/app-layout/sidecar-demo.page.tsx b/pages/app-layout/sidecar-demo.page.tsx
index 39fbac18e5..fdc500bd7c 100644
--- a/pages/app-layout/sidecar-demo.page.tsx
+++ b/pages/app-layout/sidecar-demo.page.tsx
@@ -21,6 +21,7 @@ import {
 import { AppLayoutProps } from '~components/app-layout';
 
 import './utils/external-sidecar-widget-demo';
+import './utils/external-global-left-panel-widget';
 import AppContext, { AppContextType } from '../app/app-context';
 import { generateItems, Instance } from '../table/generate-data';
 import { columnsConfig } from '../table/shared-configs';
diff --git a/pages/app-layout/utils/external-global-left-panel-widget.tsx b/pages/app-layout/utils/external-global-left-panel-widget.tsx
new file mode 100644
index 0000000000..8e63d7da0c
--- /dev/null
+++ b/pages/app-layout/utils/external-global-left-panel-widget.tsx
@@ -0,0 +1,86 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import ReactDOM, { unmountComponentAtNode } from 'react-dom';
+
+import { Box } from '~components';
+import Button from '~components/button';
+import ButtonDropdown from '~components/button-dropdown';
+import { registerLeftDrawer } from '~components/internal/plugins/widget';
+
+const AIDrawer = () => {
+  return (
+    <Box padding="m">
+      <Box variant="h2" padding={{ bottom: 'm' }}>
+        Chat demo
+      </Box>
+      {new Array(100).fill(null).map((_, index) => (
+        <div key={index}>Tela content</div>
+      ))}
+    </Box>
+  );
+};
+
+registerLeftDrawer({
+  id: 'amazon-q',
+  resizable: true,
+  isExpandable: true,
+  defaultSize: 420,
+  preserveInactiveContent: true,
+
+  ariaLabels: {
+    closeButton: 'Close AI Panel drawer',
+    content: 'AI Panel',
+    triggerButton: 'AI Panel',
+    resizeHandle: 'Resize handle',
+    expandedModeButton: 'Expanded mode button',
+    exitExpandedModeButton: 'Console',
+  },
+
+  trigger: {
+    customIcon: `
+      <svg width="94" height="24" viewBox="0 0 94 24" fill="none" focusable="false" aria-hidden="true">
+        <rect width="94" height="24" rx="4" fill="url(#paint0_linear_145_32649)"/>
+        <defs>
+          <linearGradient id="paint0_linear_145_32649" x1="135.919" y1="21" x2="108.351" y2="74.1863" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#B8E7FF"/>
+            <stop offset="0.255" stop-color="#0099FF"/>
+            <stop offset="0.514134" stop-color="#5C7FFF"/>
+            <stop offset="0.732534" stop-color="#8575FF"/>
+            <stop offset="1" stop-color="#962EFF"/>
+          </linearGradient>
+        </defs>
+      </svg>
+    `,
+  },
+
+  onResize: event => {
+    console.log('resize', event.detail);
+  },
+  onToggle: event => {
+    console.log('toggle', event.detail);
+  },
+
+  mountContent: container => {
+    ReactDOM.render(<AIDrawer />, container);
+  },
+  unmountContent: container => unmountComponentAtNode(container),
+
+  mountHeader: container => {
+    ReactDOM.render(
+      <div style={{ inlineSize: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <div>AI Panel</div>
+        <div>
+          <ButtonDropdown
+            items={[{ id: 'settings', text: 'Settings' }]}
+            ariaLabel="AI Panel additional options"
+            variant="icon"
+          />
+          <Button iconName="add-plus" variant="icon" ariaLabel="Add a new chat" />
+        </div>
+      </div>,
+      container
+    );
+  },
+  unmountHeader: container => unmountComponentAtNode(container),
+});
diff --git a/pages/app-layout/with-drawers-scrollable.page.tsx b/pages/app-layout/with-drawers-scrollable.page.tsx
index e323599a35..6f4c05d8c0 100644
--- a/pages/app-layout/with-drawers-scrollable.page.tsx
+++ b/pages/app-layout/with-drawers-scrollable.page.tsx
@@ -27,6 +27,7 @@ import {
   CustomDrawerContent,
   ScrollableDrawerContent,
 } from './utils/content-blocks';
+import { drawerLabels } from './utils/drawers';
 import appLayoutLabels from './utils/labels';
 import { splitPaneli18nStrings } from './utils/strings';
 
@@ -185,7 +186,7 @@ export default function WithDrawersScrollable() {
   return (
     <ScreenshotArea gutters={false}>
       <AppLayout
-        ariaLabels={appLayoutLabels}
+        ariaLabels={{ ...appLayoutLabels, ...drawerLabels }}
         breadcrumbs={<Breadcrumbs />}
         navigation={sideNavContents}
         ref={appLayoutRef}
diff --git a/src/app-layout/__integ__/runtime-drawers.test.ts b/src/app-layout/__integ__/runtime-drawers.test.ts
index a3f6ec05f4..e8becfdabc 100644
--- a/src/app-layout/__integ__/runtime-drawers.test.ts
+++ b/src/app-layout/__integ__/runtime-drawers.test.ts
@@ -237,26 +237,10 @@ describe('Visual refresh toolbar only', () => {
     );
 
     test(
-      'first opened drawer should be closed when active drawers can not be shrunk to accommodate it (1400px)',
-      setupTest(async page => {
-        await page.setWindowSize({ ...viewports.desktop, width: 1400 });
-        await page.click(wrapper.findDrawerTriggerById('circle-global').toSelector());
-        await page.click(wrapper.findDrawerTriggerById('global-with-stored-state').toSelector());
-        await page.click(wrapper.findDrawerTriggerById('security').toSelector());
-
-        await expect(page.isClickable(findDrawerById(wrapper, 'circle-global')!.toSelector())).resolves.toBe(false);
-        await expect(page.isClickable(findDrawerById(wrapper, 'security')!.toSelector())).resolves.toBe(true);
-        await expect(page.isClickable(findDrawerById(wrapper, 'global-with-stored-state')!.toSelector())).resolves.toBe(
-          true
-        );
-      })
-    );
-
-    test(
-      'first opened drawer should be closed when active drawers can not be shrunk to accommodate it (1345px)',
+      'first opened drawer should be closed when active drawers can not be shrunk to accommodate it',
       setupTest(async page => {
         // Give the toolbar enough horizontal space to make sure the triggers are not collapsed into a dropdown
-        await page.setWindowSize({ ...viewports.desktop, width: 1345 });
+        await page.setWindowSize({ ...viewports.desktop, width: 1400 });
         await page.click(wrapper.findDrawerTriggerById('circle').toSelector());
         await page.click(wrapper.findDrawerTriggerById('security').toSelector());
         await page.click(wrapper.findDrawerTriggerById('circle-global').toSelector());
diff --git a/src/app-layout/__integ__/toolbar-tooltips/app-layout-toolbar-split-panel-trigger-tooltip.test.ts b/src/app-layout/__integ__/toolbar-tooltips/app-layout-toolbar-split-panel-trigger-tooltip.test.ts
index 064c66e206..99eccc6218 100644
--- a/src/app-layout/__integ__/toolbar-tooltips/app-layout-toolbar-split-panel-trigger-tooltip.test.ts
+++ b/src/app-layout/__integ__/toolbar-tooltips/app-layout-toolbar-split-panel-trigger-tooltip.test.ts
@@ -17,7 +17,9 @@ describe('refresh-toolbar', () => {
     const expectedTooltipText = 'Open panel';
 
     const assertSplitPanelTriggerFocusedWithTooltip = async (page: AppLayoutDrawersPage) => {
-      await expect(page.isFocused(splitPanelTriggerSelector)).resolves.toBe(true);
+      await page.waitForAssertion(async () => {
+        await expect(page.isFocused(splitPanelTriggerSelector)).resolves.toBe(true);
+      });
       await expect(page.getText(tooltipSelector)).resolves.toBe(expectedTooltipText);
       await expect(page.getElementsCount(tooltipSelector)).resolves.toBe(1);
     };
@@ -62,7 +64,8 @@ describe('refresh-toolbar', () => {
         })
       );
 
-      test(
+      // flakiness on github runner side
+      test.skip(
         'Shows and hides tooltip correctly for split panel trigger for keyboard (tab) interactions',
         setupTest({ theme, size, splitPanelPosition }, async (page: AppLayoutDrawersPage) => {
           await expect(page.isExisting(tooltipSelector)).resolves.toBe(false);
@@ -84,7 +87,8 @@ describe('refresh-toolbar', () => {
         })
       );
 
-      test(
+      // flakiness on github runner side
+      test.skip(
         'Removes tooltip from split panel trigger on escape key press after showing from keyboard event',
         setupTest({ theme, size, splitPanelPosition }, async (page: AppLayoutDrawersPage) => {
           await expect(page.isExisting(tooltipSelector)).resolves.toBe(false);
diff --git a/src/app-layout/__tests__/__snapshots__/widget-contract-old.test.tsx.snap b/src/app-layout/__tests__/__snapshots__/widget-contract-old.test.tsx.snap
index 5a2450cfe8..dfe8fdb578 100644
--- a/src/app-layout/__tests__/__snapshots__/widget-contract-old.test.tsx.snap
+++ b/src/app-layout/__tests__/__snapshots__/widget-contract-old.test.tsx.snap
@@ -4,11 +4,30 @@ exports[`Theme=refresh-toolbar, Size=desktop contract for default use-case 1`] =
 Map {
   "AppLayoutToolbarImplementation" => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerId": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": null,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -63,8 +82,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 290,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -84,6 +105,8 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
+      "onActiveAiDrawerResize": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -174,11 +197,30 @@ Map {
   },
   "AppLayoutNavigationImplementation" => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerId": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": null,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -233,8 +275,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 290,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -254,6 +298,8 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
+      "onActiveAiDrawerResize": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -304,11 +350,30 @@ Map {
   },
   "AppLayoutSplitPanelDrawerBottomImplementation" => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerId": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": null,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -363,8 +428,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 290,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -384,6 +451,8 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
+      "onActiveAiDrawerResize": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -465,11 +534,30 @@ Map {
   },
   "AppLayoutDrawerImplementation" => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerId": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": null,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -524,8 +612,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 290,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -545,6 +635,8 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
+      "onActiveAiDrawerResize": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -595,11 +687,30 @@ Map {
   },
   "AppLayoutGlobalDrawersImplementation" => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerId": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": null,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -654,8 +765,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 290,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -675,6 +788,8 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
+      "onActiveAiDrawerResize": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -730,11 +845,30 @@ exports[`Theme=refresh-toolbar, Size=desktop contract with all slots provided 1`
 Map {
   "AppLayoutToolbarImplementation" => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerId": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": null,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -793,8 +927,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 290,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <div>
@@ -816,6 +952,8 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
+      "onActiveAiDrawerResize": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -909,11 +1047,30 @@ Map {
   },
   "AppLayoutNavigationImplementation" => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerId": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": null,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -972,8 +1129,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 290,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <div>
@@ -995,6 +1154,8 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
+      "onActiveAiDrawerResize": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1045,11 +1206,30 @@ Map {
   },
   "AppLayoutNotificationsImplementation" => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerId": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": null,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -1108,8 +1288,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 290,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <div>
@@ -1131,6 +1313,8 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
+      "onActiveAiDrawerResize": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1184,11 +1368,30 @@ Map {
   },
   "AppLayoutSplitPanelDrawerBottomImplementation" => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerId": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": null,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -1247,8 +1450,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 290,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <div>
@@ -1270,6 +1475,8 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
+      "onActiveAiDrawerResize": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1353,11 +1560,30 @@ Map {
   },
   "AppLayoutDrawerImplementation" => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerId": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": null,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -1416,8 +1642,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 290,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <div>
@@ -1439,6 +1667,8 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
+      "onActiveAiDrawerResize": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1489,11 +1719,30 @@ Map {
   },
   "AppLayoutGlobalDrawersImplementation" => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerId": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": null,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -1552,8 +1801,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 290,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <div>
@@ -1575,6 +1826,8 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
+      "onActiveAiDrawerResize": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1630,6 +1883,9 @@ exports[`Theme=refresh-toolbar, Size=desktop contract with drawers 1`] = `
 Map {
   "AppLayoutToolbarImplementation" => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerId": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": {
         "ariaLabels": {
           "closeButton": "Security close button",
@@ -1649,6 +1905,22 @@ Map {
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": null,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -1705,8 +1977,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 290,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -1726,6 +2000,8 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
+      "onActiveAiDrawerResize": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1818,6 +2094,9 @@ Map {
   },
   "AppLayoutNavigationImplementation" => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerId": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": {
         "ariaLabels": {
           "closeButton": "Security close button",
@@ -1837,6 +2116,22 @@ Map {
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": null,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -1893,8 +2188,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 290,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -1914,6 +2211,8 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
+      "onActiveAiDrawerResize": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1964,6 +2263,9 @@ Map {
   },
   "AppLayoutSplitPanelDrawerBottomImplementation" => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerId": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": {
         "ariaLabels": {
           "closeButton": "Security close button",
@@ -1983,6 +2285,22 @@ Map {
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": null,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -2039,8 +2357,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 290,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -2060,6 +2380,8 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
+      "onActiveAiDrawerResize": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -2141,6 +2463,9 @@ Map {
   },
   "AppLayoutDrawerImplementation" => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerId": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": {
         "ariaLabels": {
           "closeButton": "Security close button",
@@ -2160,6 +2485,22 @@ Map {
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": null,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -2216,8 +2557,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 290,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -2237,6 +2580,8 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
+      "onActiveAiDrawerResize": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -2287,6 +2632,9 @@ Map {
   },
   "AppLayoutGlobalDrawersImplementation" => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerId": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": {
         "ariaLabels": {
           "closeButton": "Security close button",
@@ -2306,6 +2654,22 @@ Map {
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": null,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -2362,8 +2726,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 290,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -2383,6 +2749,8 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
+      "onActiveAiDrawerResize": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
diff --git a/src/app-layout/__tests__/__snapshots__/widget-contract-split-panel-old.test.tsx.snap b/src/app-layout/__tests__/__snapshots__/widget-contract-split-panel-old.test.tsx.snap
index 159bfc2954..5d86e0a1db 100644
--- a/src/app-layout/__tests__/__snapshots__/widget-contract-split-panel-old.test.tsx.snap
+++ b/src/app-layout/__tests__/__snapshots__/widget-contract-split-panel-old.test.tsx.snap
@@ -4,11 +4,30 @@ exports[`Theme=refresh-toolbar, Size=desktop contract with split panel (trigger
 Map {
   "AppLayoutToolbarImplementation" => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerId": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": null,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -63,8 +82,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 290,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -84,6 +105,8 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
+      "onActiveAiDrawerResize": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -174,11 +197,30 @@ Map {
   },
   "AppLayoutNavigationImplementation" => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerId": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": null,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -233,8 +275,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 290,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -254,6 +298,8 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
+      "onActiveAiDrawerResize": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -304,11 +350,30 @@ Map {
   },
   "AppLayoutSplitPanelDrawerBottomImplementation" => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerId": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": null,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -363,8 +428,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 290,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -384,6 +451,8 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
+      "onActiveAiDrawerResize": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -472,11 +541,30 @@ Map {
   },
   "AppLayoutDrawerImplementation" => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerId": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": null,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -531,8 +619,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 290,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -552,6 +642,8 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
+      "onActiveAiDrawerResize": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -602,11 +694,30 @@ Map {
   },
   "AppLayoutGlobalDrawersImplementation" => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerId": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": null,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -661,8 +772,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 290,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -682,6 +795,8 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
+      "onActiveAiDrawerResize": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -737,11 +852,30 @@ exports[`Theme=refresh-toolbar, Size=desktop contract with split panel 1`] = `
 Map {
   "AppLayoutToolbarImplementation" => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerId": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": null,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -796,8 +930,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 290,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -817,6 +953,8 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
+      "onActiveAiDrawerResize": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -907,11 +1045,30 @@ Map {
   },
   "AppLayoutNavigationImplementation" => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerId": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": null,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -966,8 +1123,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 290,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -987,6 +1146,8 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
+      "onActiveAiDrawerResize": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1037,11 +1198,30 @@ Map {
   },
   "AppLayoutSplitPanelDrawerBottomImplementation" => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerId": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": null,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -1096,8 +1276,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 290,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -1117,6 +1299,8 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
+      "onActiveAiDrawerResize": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1204,11 +1388,30 @@ Map {
   },
   "AppLayoutDrawerImplementation" => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerId": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": null,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -1263,8 +1466,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 290,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -1284,6 +1489,8 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
+      "onActiveAiDrawerResize": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1334,11 +1541,30 @@ Map {
   },
   "AppLayoutGlobalDrawersImplementation" => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerId": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": null,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -1393,8 +1619,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 290,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -1414,6 +1642,8 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
+      "onActiveAiDrawerResize": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
diff --git a/src/app-layout/__tests__/multi-layout-props.test.tsx b/src/app-layout/__tests__/multi-layout-props.test.tsx
index 7a47bd71d9..74b3fc1ba5 100644
--- a/src/app-layout/__tests__/multi-layout-props.test.tsx
+++ b/src/app-layout/__tests__/multi-layout-props.test.tsx
@@ -45,6 +45,7 @@ describe('mergeMultiAppLayoutProps', () => {
     splitPanelFocusRef: React.createRef(),
     onSplitPanelToggle: mockParentSplitPanelToggle,
     setExpandedDrawerId: mockSetExpandedDrawerId,
+    aiDrawerFocusRef: React.createRef(),
   };
 
   const additionalPropsBase: Partial<SharedProps>[] = [
diff --git a/src/app-layout/__tests__/runtime-drawers-layout.test.tsx b/src/app-layout/__tests__/runtime-drawers-layout.test.tsx
index 5e4a3a82b8..34ea2b4523 100644
--- a/src/app-layout/__tests__/runtime-drawers-layout.test.tsx
+++ b/src/app-layout/__tests__/runtime-drawers-layout.test.tsx
@@ -48,6 +48,7 @@ jest.mock('../../../lib/components/app-layout/utils/use-app-layout-placement', (
         inlineSize: Infinity,
         insetBlockStart: 0,
         insetBlockEnd: 0,
+        maxAiDrawerSize: 0,
       },
     ]),
   };
@@ -89,6 +90,7 @@ describe('toolbar mode only features', () => {
         maxGlobalDrawersSizes: {},
         totalActiveGlobalDrawersSize: 0,
         resizableSpaceAvailable: 792,
+        maxAiDrawerSize: 0,
       });
       awsuiPlugins.appLayout.registerDrawer({
         ...drawerDefaults,
@@ -141,6 +143,7 @@ describe('toolbar mode only features', () => {
         maxGlobalDrawersSizes: {},
         totalActiveGlobalDrawersSize: 0,
         resizableSpaceAvailable: 792,
+        maxAiDrawerSize: 0,
       });
       const onToggle = jest.fn();
       awsuiPlugins.appLayout.registerDrawer({
@@ -198,6 +201,7 @@ describe('toolbar mode only features', () => {
         },
         totalActiveGlobalDrawersSize: 0,
         resizableSpaceAvailable: 792,
+        maxAiDrawerSize: 0,
       });
       const onDrawerItemResize = jest.fn();
       awsuiPlugins.appLayout.registerDrawer({
diff --git a/src/app-layout/__tests__/runtime-drawers-widgetized.test.tsx b/src/app-layout/__tests__/runtime-drawers-widgetized.test.tsx
new file mode 100644
index 0000000000..1bcd908e42
--- /dev/null
+++ b/src/app-layout/__tests__/runtime-drawers-widgetized.test.tsx
@@ -0,0 +1,197 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { act, render } from '@testing-library/react';
+
+import AppLayout from '../../../lib/components/app-layout';
+import { metrics } from '../../../lib/components/internal/metrics';
+import { DrawerPayload } from '../../../lib/components/internal/plugins/widget/interfaces';
+import * as awsuiWidgetPlugins from '../../../lib/components/internal/plugins/widget/internal';
+import createWrapper from '../../../lib/components/test-utils/dom';
+import { describeEachAppLayout, getGlobalDrawersTestUtils } from './utils';
+
+const drawerDefaults: DrawerPayload = {
+  id: 'test',
+  ariaLabels: {},
+  trigger: { customIcon: 'custom icon' },
+  mountContent: container => (container.textContent = 'widgetized drawer content'),
+  unmountContent: () => {},
+};
+
+beforeEach(() => {
+  awsuiWidgetPlugins.clearInitialMessages();
+  jest.resetAllMocks();
+});
+
+function renderComponent(jsx: React.ReactElement) {
+  const { container, rerender, ...rest } = render(jsx);
+  const wrapper = createWrapper(container).findAppLayout()!;
+  const globalDrawersWrapper = getGlobalDrawersTestUtils(wrapper);
+  return {
+    wrapper,
+    globalDrawersWrapper,
+    rerender,
+    ...rest,
+  };
+}
+
+describeEachAppLayout({ themes: ['refresh-toolbar'] }, ({ size }) => {
+  test('renders ai drawer when registered', () => {
+    awsuiWidgetPlugins.registerLeftDrawer(drawerDefaults);
+    const { globalDrawersWrapper } = renderComponent(<AppLayout />);
+
+    expect(globalDrawersWrapper.findDrawerById(drawerDefaults.id)).toBeFalsy();
+    expect(globalDrawersWrapper.findAiDrawerTrigger()).toBeTruthy();
+
+    globalDrawersWrapper.findAiDrawerTrigger()!.click();
+
+    expect(globalDrawersWrapper.findDrawerById(drawerDefaults.id)!.isActive()).toBe(true);
+  });
+
+  test('isAppLayoutReady returns true when app layout is ready', () => {
+    expect(awsuiWidgetPlugins.isAppLayoutReady()).toBe(false);
+    const { rerender } = renderComponent(<AppLayout />);
+
+    expect(awsuiWidgetPlugins.isAppLayoutReady()).toBe(true);
+
+    rerender(<></>);
+
+    expect(awsuiWidgetPlugins.isAppLayoutReady()).toBe(false);
+  });
+
+  test('adds ai drawer to an already rendered component', () => {
+    const { globalDrawersWrapper } = renderComponent(<AppLayout />);
+    expect(globalDrawersWrapper.findAiDrawerTrigger()).toBeFalsy();
+
+    act(() => awsuiWidgetPlugins.registerLeftDrawer(drawerDefaults));
+    expect(globalDrawersWrapper.findAiDrawerTrigger()).toBeTruthy();
+  });
+
+  test('should render custom header in global-ai drawer', () => {
+    awsuiWidgetPlugins.registerLeftDrawer({
+      ...drawerDefaults,
+      mountHeader: container => {
+        container.innerHTML = 'custom header';
+      },
+      unmountHeader: () => {},
+    });
+    const { globalDrawersWrapper } = renderComponent(<AppLayout />);
+
+    globalDrawersWrapper.findAiDrawerTrigger()!.click();
+    expect(globalDrawersWrapper.findDrawerById(drawerDefaults.id)!.getElement()).toHaveTextContent('custom header');
+  });
+
+  test('can update drawer config dynamically', () => {
+    awsuiWidgetPlugins.registerLeftDrawer(drawerDefaults);
+    const { globalDrawersWrapper } = renderComponent(<AppLayout />);
+
+    expect(globalDrawersWrapper.findAiDrawerTrigger()!.getElement()).not.toHaveAttribute('aria-label');
+    act(() =>
+      awsuiWidgetPlugins.updateDrawer({
+        type: 'updateDrawerConfig',
+        payload: { id: drawerDefaults.id, ariaLabels: { triggerButton: 'trigger button label' } },
+      })
+    );
+
+    expect(globalDrawersWrapper.findAiDrawerTrigger()!.getElement()).toHaveAttribute(
+      'aria-label',
+      'trigger button label'
+    );
+  });
+
+  test('should open global ai drawer by default when defaultActive is set', () => {
+    awsuiWidgetPlugins.registerLeftDrawer({
+      ...drawerDefaults,
+      defaultActive: true,
+    });
+
+    const { globalDrawersWrapper } = renderComponent(<AppLayout />);
+
+    expect(globalDrawersWrapper.findDrawerById(drawerDefaults.id)!.isActive()).toBe(true);
+  });
+
+  test('should open global ai drawer by default if it is dynamically registered', () => {
+    const { globalDrawersWrapper } = renderComponent(<AppLayout />);
+
+    awsuiWidgetPlugins.registerLeftDrawer({
+      ...drawerDefaults,
+      defaultActive: true,
+    });
+
+    expect(globalDrawersWrapper.findDrawerById(drawerDefaults.id)!.isActive()).toBe(true);
+  });
+
+  test('should open global ai drawer via API', () => {
+    awsuiWidgetPlugins.registerLeftDrawer(drawerDefaults);
+
+    const { globalDrawersWrapper } = renderComponent(<AppLayout />);
+    expect(globalDrawersWrapper.findDrawerById(drawerDefaults.id)).toBeFalsy();
+
+    act(() => awsuiWidgetPlugins.updateDrawer({ type: 'openDrawer', payload: { id: drawerDefaults.id } }));
+
+    expect(globalDrawersWrapper.findDrawerById(drawerDefaults.id)!.isActive()).toBe(true);
+  });
+
+  test('onResize functionality', () => {
+    const onResize = jest.fn();
+    awsuiWidgetPlugins.registerLeftDrawer({
+      ...drawerDefaults,
+      resizable: true,
+      onResize: event => onResize(event.detail),
+    });
+    const { wrapper, globalDrawersWrapper } = renderComponent(<AppLayout />);
+    globalDrawersWrapper.findAiDrawerTrigger()!.click();
+
+    if (size === 'mobile') {
+      expect(wrapper.findActiveDrawerResizeHandle()).toBeFalsy();
+    } else {
+      const handle = wrapper.findActiveDrawerResizeHandle()!;
+      handle.fireEvent(new MouseEvent('pointerdown', { bubbles: true }));
+      handle.fireEvent(new MouseEvent('pointermove', { bubbles: true }));
+      handle.fireEvent(new MouseEvent('pointerup', { bubbles: true }));
+
+      expect(onResize).toHaveBeenCalledWith({ size: expect.any(Number), id: drawerDefaults.id });
+    }
+  });
+
+  test('should exit focus mode by clicking on a custom exit button in the AI global drawer', () => {
+    awsuiWidgetPlugins.registerLeftDrawer({
+      ...drawerDefaults,
+      ariaLabels: {
+        exitExpandedModeButton: 'exitExpandedModeButton',
+      },
+      isExpandable: true,
+    });
+    const { globalDrawersWrapper } = renderComponent(<AppLayout />);
+
+    globalDrawersWrapper.findAiDrawerTrigger()!.click();
+    if (size === 'mobile') {
+      expect(globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerDefaults.id)).toBeFalsy();
+    } else {
+      globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerDefaults.id)!.click();
+      expect(globalDrawersWrapper.findDrawerById(drawerDefaults.id)!.isDrawerInExpandedMode()).toBe(true);
+      expect(globalDrawersWrapper.isLayoutInDrawerExpandedMode()).toBe(true);
+      globalDrawersWrapper.findLeaveExpandedModeButtonInAIDrawer()!.click();
+      expect(globalDrawersWrapper.isLayoutInDrawerExpandedMode()).toBe(false);
+    }
+  });
+
+  describe('metrics', () => {
+    let sendPanoramaMetricSpy: jest.SpyInstance;
+    beforeEach(() => {
+      sendPanoramaMetricSpy = jest.spyOn(metrics, 'sendOpsMetricObject').mockImplementation(() => {});
+    });
+
+    test('should report ops metric when unknown id is provided', () => {
+      awsuiWidgetPlugins.registerLeftDrawer(drawerDefaults);
+      renderComponent(<AppLayout />);
+
+      act(() => awsuiWidgetPlugins.updateDrawer({ type: 'openDrawer', payload: { id: 'unknown' } }));
+
+      expect(sendPanoramaMetricSpy).toHaveBeenCalledWith('awsui-widget-drawer-incorrect-id', {
+        oldId: 'test',
+        newId: 'unknown',
+      });
+    });
+  });
+});
diff --git a/src/app-layout/__tests__/runtime-drawers.test.tsx b/src/app-layout/__tests__/runtime-drawers.test.tsx
index f3cd4cbbce..55112c3250 100644
--- a/src/app-layout/__tests__/runtime-drawers.test.tsx
+++ b/src/app-layout/__tests__/runtime-drawers.test.tsx
@@ -11,6 +11,8 @@ import AppLayout, { AppLayoutProps } from '../../../lib/components/app-layout';
 import { TOOLS_DRAWER_ID } from '../../../lib/components/app-layout/utils/use-drawers';
 import { awsuiPlugins, awsuiPluginsInternal } from '../../../lib/components/internal/plugins/api';
 import { DrawerConfig } from '../../../lib/components/internal/plugins/controllers/drawers';
+import { DrawerPayload as WidgetDrawerPayload } from '../../../lib/components/internal/plugins/widget/interfaces';
+import * as awsuiWidgetPlugins from '../../../lib/components/internal/plugins/widget/internal';
 import SplitPanel from '../../../lib/components/split-panel';
 import createWrapper from '../../../lib/components/test-utils/dom';
 import {
@@ -29,6 +31,7 @@ import toolbarTriggerStyles from '../../../lib/components/app-layout/visual-refr
 
 beforeEach(() => {
   awsuiPluginsInternal.appLayout.clearRegisteredDrawers();
+  awsuiWidgetPlugins.clearInitialMessages();
   activateAnalyticsMetadata(true);
 });
 
@@ -58,7 +61,7 @@ function delay() {
 const drawerDefaults: DrawerConfig = {
   id: 'test',
   ariaLabels: {},
-  trigger: { iconSvg: '' },
+  trigger: { iconSvg: 'icon placeholder' },
   mountContent: container => (container.textContent = 'runtime drawer content'),
   unmountContent: () => {},
 };
@@ -928,222 +931,303 @@ describe('toolbar mode only features', () => {
       expect(globalDrawersWrapper.findActiveDrawers()[1].getElement()).toHaveTextContent('global drawer content 3');
     });
 
-    test('renders resize handle for a global drawer when config is enabled', async () => {
-      awsuiPlugins.appLayout.registerDrawer({
-        ...drawerDefaults,
-        id: 'test-resizable',
-        resizable: true,
-        type: 'global',
-        ariaLabels: {
-          triggerButton: 'drawer trigger',
-          content: 'drawer content',
-          resizeHandle: 'drawer resize',
-          closeButton: 'drawer close',
-        },
-      });
-      const { globalDrawersWrapper, wrapper } = await renderComponent(<AppLayout />);
+    describe.each(['global', 'global-ai'] as const)('drawer type = %s', type => {
+      const findDrawerTriggerById = (id: string, renderProps: Awaited<ReturnType<typeof renderComponent>>) => {
+        if (type === 'global') {
+          return renderProps.wrapper.findDrawerTriggerById(id);
+        } else {
+          return renderProps.globalDrawersWrapper.findAiDrawerTrigger();
+        }
+      };
+      const registerDrawer = (payload: DrawerConfig | WidgetDrawerPayload) => {
+        if (type === 'global') {
+          awsuiPlugins.appLayout.registerDrawer({ ...payload, type } as DrawerConfig);
+        } else {
+          awsuiWidgetPlugins.registerLeftDrawer(payload as WidgetDrawerPayload);
+        }
+      };
 
-      wrapper.findDrawerTriggerById('test-resizable')!.click();
+      test('renders resize handle for a global drawer when config is enabled', async () => {
+        registerDrawer({
+          ...drawerDefaults,
+          id: 'test-resizable',
+          resizable: true,
+          ariaLabels: {
+            triggerButton: 'drawer trigger',
+            content: 'drawer content',
+            resizeHandle: 'drawer resize',
+            closeButton: 'drawer close',
+          },
+        });
+        const renderProps = await renderComponent(<AppLayout />);
+        const { globalDrawersWrapper } = renderProps;
 
-      await waitFor(() => {
-        expect(globalDrawersWrapper.findResizeHandleByActiveDrawerId('test-resizable')!.getElement()).toHaveFocus();
-        expect(globalDrawersWrapper.findResizeHandleByActiveDrawerId('test-resizable')!.getElement()).toHaveAttribute(
-          'aria-label',
-          'drawer resize'
-        );
-      });
-    });
+        findDrawerTriggerById('test-resizable', renderProps)!.click();
 
-    test('close active global drawer by clicking on close button', async () => {
-      awsuiPlugins.appLayout.registerDrawer({
-        ...drawerDefaults,
-        id: 'global-drawer',
-        type: 'global',
-        ariaLabels: {
-          triggerButton: 'drawer trigger',
-          content: 'drawer content',
-          resizeHandle: 'drawer resize',
-          closeButton: 'drawer close',
-        },
+        await waitFor(() => {
+          expect(globalDrawersWrapper.findResizeHandleByActiveDrawerId('test-resizable')!.getElement()).toHaveFocus();
+          expect(globalDrawersWrapper.findResizeHandleByActiveDrawerId('test-resizable')!.getElement()).toHaveAttribute(
+            'aria-label',
+            'drawer resize'
+          );
+        });
       });
-      const { wrapper, globalDrawersWrapper } = await renderComponent(<AppLayout />);
 
-      wrapper.findDrawerTriggerById('global-drawer')!.click();
-      expect(globalDrawersWrapper.findDrawerById('global-drawer')!.getElement()).toBeInTheDocument();
-      globalDrawersWrapper.findCloseButtonByActiveDrawerId('global-drawer')!.click();
-      expect(globalDrawersWrapper.findDrawerById('global-drawer')).toBeNull();
-    });
+      test('close active global drawer by clicking on close button', async () => {
+        registerDrawer({
+          ...drawerDefaults,
+          id: 'global-drawer',
+          ariaLabels: {
+            triggerButton: 'drawer trigger',
+            content: 'drawer content',
+            resizeHandle: 'drawer resize',
+            closeButton: 'drawer close',
+          },
+        });
 
-    test('the order of the opened global drawers should match the positions of their corresponding toggle buttons on the toolbar', async () => {
-      awsuiPlugins.appLayout.registerDrawer({
-        ...drawerDefaults,
-        id: 'global-drawer-1',
-        type: 'global',
-        mountContent: container => (container.textContent = 'global drawer content 1'),
-      });
-      awsuiPlugins.appLayout.registerDrawer({
-        ...drawerDefaults,
-        id: 'global-drawer-2',
-        type: 'global',
-        mountContent: container => (container.textContent = 'global drawer content 2'),
+        const renderProps = await renderComponent(<AppLayout />);
+        const { globalDrawersWrapper } = renderProps;
+
+        findDrawerTriggerById('global-drawer', renderProps)!.click();
+        expect(globalDrawersWrapper.findDrawerById('global-drawer')!.getElement()).toBeInTheDocument();
+        globalDrawersWrapper.findCloseButtonByActiveDrawerId('global-drawer')!.click();
+        expect(globalDrawersWrapper.findDrawerById('global-drawer')).toBeNull();
       });
 
-      const { wrapper, globalDrawersWrapper } = await renderComponent(<AppLayout drawers={[testDrawer]} />);
+      test('opens a drawer when openDrawer is called', async () => {
+        awsuiPlugins.appLayout.registerDrawer({
+          ...drawerDefaults,
+          id: 'local-drawer',
+          mountContent: container => (container.textContent = 'local-drawer content'),
+        });
+        awsuiPlugins.appLayout.registerDrawer({
+          ...drawerDefaults,
+          id: 'global-drawer-1',
+          type: 'global',
+          mountContent: container => (container.textContent = 'global drawer content 1'),
+        });
+        registerDrawer({
+          ...drawerDefaults,
+          id: 'global-drawer-2',
+          mountContent: container => (container.textContent = 'global drawer content 2'),
+        });
 
-      wrapper.findDrawerTriggerById('global-drawer-2')!.click();
-      wrapper.findDrawerTriggerById('global-drawer-1')!.click();
+        const { globalDrawersWrapper } = await renderComponent(<AppLayout drawers={[testDrawer]} />);
 
-      expect(globalDrawersWrapper.findActiveDrawers()[0].getElement()).toHaveTextContent('global drawer content 1');
-      expect(globalDrawersWrapper.findActiveDrawers()[1].getElement()).toHaveTextContent('global drawer content 2');
-    });
+        expect(globalDrawersWrapper.findActiveDrawers()).toHaveLength(0);
 
-    test('should close opened global drawer by clicking on its trigger button', async () => {
-      awsuiPlugins.appLayout.registerDrawer({
-        ...drawerDefaults,
-        id: 'global-drawer-1',
-        type: 'global',
-        mountContent: container => (container.textContent = 'global drawer content 1'),
+        awsuiPlugins.appLayout.openDrawer('local-drawer');
+
+        await delay();
+
+        expect(globalDrawersWrapper.findActiveDrawers()).toHaveLength(1);
+
+        awsuiPlugins.appLayout.openDrawer('global-drawer-1');
+
+        await delay();
+
+        expect(globalDrawersWrapper.findActiveDrawers()).toHaveLength(2);
       });
 
-      const { wrapper, globalDrawersWrapper } = await renderComponent(<AppLayout drawers={[testDrawer]} />);
+      test('does not do anything when openDrawer is called with active drawer id', async () => {
+        registerDrawer({
+          ...drawerDefaults,
+          id: 'local-drawer',
+          mountContent: container => (container.textContent = 'local-drawer content'),
+        });
 
-      wrapper.findDrawerTriggerById('global-drawer-1')!.click();
+        const { globalDrawersWrapper } = await renderComponent(<AppLayout drawers={[testDrawer]} />);
 
-      expect(globalDrawersWrapper.findDrawerById('global-drawer-1')!.getElement()).toBeInTheDocument();
+        expect(globalDrawersWrapper.findActiveDrawers()).toHaveLength(0);
 
-      wrapper.findDrawerTriggerById('global-drawer-1')!.click();
+        if (type === 'global') {
+          awsuiPlugins.appLayout.openDrawer('local-drawer');
+        } else {
+          awsuiWidgetPlugins.updateDrawer({ type: 'openDrawer', payload: { id: 'local-drawer' } });
+        }
 
-      expect(globalDrawersWrapper.findDrawerById('global-drawer-1')).toBeNull();
-    });
+        await delay();
 
-    test('opens a drawer when openDrawer is called', async () => {
-      awsuiPlugins.appLayout.registerDrawer({
-        ...drawerDefaults,
-        id: 'local-drawer',
-        mountContent: container => (container.textContent = 'local-drawer content'),
-      });
-      awsuiPlugins.appLayout.registerDrawer({
-        ...drawerDefaults,
-        id: 'global-drawer-1',
-        type: 'global',
-        mountContent: container => (container.textContent = 'global drawer content 1'),
+        expect(globalDrawersWrapper.findActiveDrawers()).toHaveLength(1);
+
+        if (type === 'global') {
+          awsuiPlugins.appLayout.openDrawer('local-drawer');
+        } else {
+          awsuiWidgetPlugins.updateDrawer({ type: 'openDrawer', payload: { id: 'local-drawer' } });
+        }
+
+        await delay();
+
+        expect(globalDrawersWrapper.findActiveDrawers()).toHaveLength(1);
       });
-      awsuiPlugins.appLayout.registerDrawer({
-        ...drawerDefaults,
-        id: 'global-drawer-2',
-        type: 'global',
-        mountContent: container => (container.textContent = 'global drawer content 2'),
+
+      test('should restore focus when a global drawer is closed', async () => {
+        registerDrawer({
+          ...drawerDefaults,
+          id: 'global-drawer-1',
+          mountContent: container => (container.textContent = 'global drawer content 1'),
+        });
+
+        const renderProps = await renderComponent(<AppLayout drawers={[testDrawer]} />);
+        const { globalDrawersWrapper } = renderProps;
+
+        findDrawerTriggerById('global-drawer-1', renderProps)!.focus();
+        findDrawerTriggerById('global-drawer-1', renderProps)!.click();
+        expect(globalDrawersWrapper.findDrawerById('global-drawer-1')!.getElement()).toBeInTheDocument();
+        globalDrawersWrapper.findCloseButtonByActiveDrawerId('global-drawer-1')!.click();
+        expect(globalDrawersWrapper.findDrawerById('global-drawer-1')).toBeNull();
+        await waitFor(() => {
+          expect(findDrawerTriggerById('global-drawer-1', renderProps)!.getElement()).toHaveFocus();
+        });
       });
 
-      const { globalDrawersWrapper } = await renderComponent(<AppLayout drawers={[testDrawer]} />);
+      test('when preserveInactiveContent is set to true, initially closed drawer does not exist in dom (but mounted and persists when opened and closed)', async () => {
+        registerDrawer({
+          ...drawerDefaults,
+          id: 'global-drawer-1',
+          mountContent: container => (container.textContent = 'global drawer content 1'),
+          preserveInactiveContent: true,
+        });
 
-      expect(globalDrawersWrapper.findActiveDrawers()).toHaveLength(0);
+        const renderProps = await renderComponent(<AppLayout drawers={[testDrawer]} />);
+        const { globalDrawersWrapper } = renderProps;
 
-      awsuiPlugins.appLayout.openDrawer('local-drawer');
+        expect(globalDrawersWrapper.findDrawerById('global-drawer-1')).toBeNull();
 
-      await delay();
+        findDrawerTriggerById('global-drawer-1', renderProps)!.click();
 
-      expect(globalDrawersWrapper.findActiveDrawers()).toHaveLength(1);
+        await delay();
 
-      awsuiPlugins.appLayout.openDrawer('global-drawer-1');
+        expect(globalDrawersWrapper.findDrawerById('global-drawer-1')!.isActive()).toBe(true);
+        globalDrawersWrapper.findCloseButtonByActiveDrawerId('global-drawer-1')!.click();
 
-      await delay();
+        expect(globalDrawersWrapper.findDrawerById('global-drawer-1')!.getElement()).toBeInTheDocument();
+        expect(globalDrawersWrapper.findDrawerById('global-drawer-1')!.isActive()).toBe(false);
+      });
 
-      expect(globalDrawersWrapper.findActiveDrawers()).toHaveLength(2);
-    });
+      test('should call visibilityChange callback when global drawer with preserveInactiveContent is opened and closed', async () => {
+        const onVisibilityChangeMock = jest.fn();
+        registerDrawer({
+          ...drawerDefaults,
+          id: 'global-drawer-1',
+          mountContent: (container, mountContext) => {
+            if (mountContext?.onVisibilityChange) {
+              mountContext.onVisibilityChange(onVisibilityChangeMock);
+            }
+            container.textContent = 'global drawer content 1';
+          },
+          preserveInactiveContent: true,
+        });
 
-    test('does not do anything when openDrawer is called with active drawer id', async () => {
-      awsuiPlugins.appLayout.registerDrawer({
-        ...drawerDefaults,
-        id: 'local-drawer',
-        mountContent: container => (container.textContent = 'local-drawer content'),
+        const renderProps = await renderComponent(<AppLayout drawers={[testDrawer]} />);
+        const { globalDrawersWrapper } = renderProps;
+
+        findDrawerTriggerById('global-drawer-1', renderProps)!.click();
+
+        await delay();
+
+        expect(globalDrawersWrapper.findDrawerById('global-drawer-1')!.isActive()).toBe(true);
+        expect(onVisibilityChangeMock).toHaveBeenCalledWith(true);
+
+        globalDrawersWrapper.findCloseButtonByActiveDrawerId('global-drawer-1')!.click();
+        expect(onVisibilityChangeMock).toHaveBeenCalledWith(false);
       });
 
-      const { globalDrawersWrapper } = await renderComponent(<AppLayout drawers={[testDrawer]} />);
+      test(`closes a drawer when closeDrawer is called (${type} drawer)`, async () => {
+        registerDrawer({ ...drawerDefaults, resizable: true });
 
-      expect(globalDrawersWrapper.findActiveDrawers()).toHaveLength(0);
+        const { wrapper } = await renderComponent(<AppLayout drawers={[testDrawer]} />);
 
-      awsuiPlugins.appLayout.openDrawer('local-drawer');
+        if (type === 'global') {
+          awsuiPlugins.appLayout.openDrawer('test');
+        } else {
+          awsuiWidgetPlugins.updateDrawer({ type: 'openDrawer', payload: { id: 'test' } });
+        }
 
-      await delay();
+        await delay();
 
-      expect(globalDrawersWrapper.findActiveDrawers()).toHaveLength(1);
+        expect(wrapper.findActiveDrawer()!.getElement()).toHaveTextContent('runtime drawer content');
 
-      awsuiPlugins.appLayout.openDrawer('local-drawer');
+        if (type === 'global') {
+          awsuiPlugins.appLayout.closeDrawer('test');
+        } else {
+          awsuiWidgetPlugins.updateDrawer({ type: 'closeDrawer', payload: { id: 'test' } });
+        }
 
-      await delay();
+        await delay();
 
-      expect(globalDrawersWrapper.findActiveDrawers()).toHaveLength(1);
-    });
+        expect(wrapper.findActiveDrawer()).toBeFalsy();
+      });
 
-    test('should restore focus when a global drawer is closed', async () => {
-      awsuiPlugins.appLayout.registerDrawer({
-        ...drawerDefaults,
-        id: 'global-drawer-1',
-        type: 'global',
-        mountContent: container => (container.textContent = 'global drawer content 1'),
+      test('should render trigger buttons for global drawers even if local drawers are not present', async () => {
+        const renderProps = await renderComponent(<AppLayout toolsHide={true} />);
+
+        registerDrawer({
+          ...drawerDefaults,
+          id: 'global1',
+        });
+
+        await delay();
+
+        expect(findDrawerTriggerById('global1', renderProps)!.getElement()).toBeInTheDocument();
       });
 
-      const { wrapper, globalDrawersWrapper } = await renderComponent(<AppLayout drawers={[testDrawer]} />);
+      test(`calls onToggle handler by clicking on drawers trigger button (${type} runtime drawers)`, async () => {
+        const onToggle = jest.fn();
+        registerDrawer({
+          ...drawerDefaults,
+          id: 'global-drawer',
+          onToggle: event => onToggle(event.detail),
+        });
+        const renderProps = await renderComponent(<AppLayout />);
 
-      wrapper.findDrawerTriggerById('global-drawer-1')!.focus();
-      wrapper.findDrawerTriggerById('global-drawer-1')!.click();
-      expect(globalDrawersWrapper.findDrawerById('global-drawer-1')!.getElement()).toBeInTheDocument();
-      globalDrawersWrapper.findCloseButtonByActiveDrawerId('global-drawer-1')!.click();
-      expect(globalDrawersWrapper.findDrawerById('global-drawer-1')).toBeNull();
-      expect(wrapper.findDrawerTriggerById('global-drawer-1')!.getElement()).toHaveFocus();
+        findDrawerTriggerById('global-drawer', renderProps)!.click();
+        expect(onToggle).toHaveBeenCalledWith({ isOpen: true, initiatedByUserAction: true });
+        renderProps.globalDrawersWrapper.findCloseButtonByActiveDrawerId('global-drawer')!.click();
+        expect(onToggle).toHaveBeenCalledWith({ isOpen: false, initiatedByUserAction: true });
+      });
     });
 
-    test('when keepContentMounted is set to true, initially closed drawer does not exist in dom (but mounted and persists when opened and closed)', async () => {
+    test('the order of the opened global drawers should match the positions of their corresponding toggle buttons on the toolbar', async () => {
       awsuiPlugins.appLayout.registerDrawer({
         ...drawerDefaults,
         id: 'global-drawer-1',
         type: 'global',
         mountContent: container => (container.textContent = 'global drawer content 1'),
-        preserveInactiveContent: true,
+      });
+      awsuiPlugins.appLayout.registerDrawer({
+        ...drawerDefaults,
+        id: 'global-drawer-2',
+        type: 'global',
+        mountContent: container => (container.textContent = 'global drawer content 2'),
       });
 
       const { wrapper, globalDrawersWrapper } = await renderComponent(<AppLayout drawers={[testDrawer]} />);
 
-      expect(globalDrawersWrapper.findDrawerById('global-drawer-1')).toBeNull();
-
-      wrapper.findDrawerTriggerById('global-drawer-1')!.click();
-
-      await delay();
-
-      expect(globalDrawersWrapper.findDrawerById('global-drawer-1')!.isActive()).toBe(true);
+      wrapper.findDrawerTriggerById('global-drawer-2')!.click();
       wrapper.findDrawerTriggerById('global-drawer-1')!.click();
 
-      expect(globalDrawersWrapper.findDrawerById('global-drawer-1')!.getElement()).toBeInTheDocument();
-      expect(globalDrawersWrapper.findDrawerById('global-drawer-1')!.isActive()).toBe(false);
+      expect(globalDrawersWrapper.findActiveDrawers()[0].getElement()).toHaveTextContent('global drawer content 1');
+      expect(globalDrawersWrapper.findActiveDrawers()[1].getElement()).toHaveTextContent('global drawer content 2');
     });
 
-    test('should call visibilityChange callback when global drawer with preserveInactiveContent is opened and closed', async () => {
-      const onVisibilityChangeMock = jest.fn();
+    test('should close opened global drawer by clicking on its trigger button', async () => {
       awsuiPlugins.appLayout.registerDrawer({
         ...drawerDefaults,
         id: 'global-drawer-1',
         type: 'global',
-        mountContent: (container, mountContext) => {
-          if (mountContext?.onVisibilityChange) {
-            mountContext.onVisibilityChange(onVisibilityChangeMock);
-          }
-          container.textContent = 'global drawer content 1';
-        },
-        preserveInactiveContent: true,
+        mountContent: container => (container.textContent = 'global drawer content 1'),
       });
 
       const { wrapper, globalDrawersWrapper } = await renderComponent(<AppLayout drawers={[testDrawer]} />);
 
       wrapper.findDrawerTriggerById('global-drawer-1')!.click();
 
-      await delay();
+      expect(globalDrawersWrapper.findDrawerById('global-drawer-1')!.getElement()).toBeInTheDocument();
 
-      expect(globalDrawersWrapper.findDrawerById('global-drawer-1')!.isActive()).toBe(true);
-      expect(onVisibilityChangeMock).toHaveBeenCalledWith(true);
+      wrapper.findDrawerTriggerById('global-drawer-1')!.click();
 
-      globalDrawersWrapper.findCloseButtonByActiveDrawerId('global-drawer-1')!.click();
-      expect(onVisibilityChangeMock).toHaveBeenCalledWith(false);
+      expect(globalDrawersWrapper.findDrawerById('global-drawer-1')).toBeNull();
     });
 
     test('should restore focus to a custom trigger when a global drawer does not have trigger button', async () => {
@@ -1187,24 +1271,6 @@ describe('toolbar mode only features', () => {
       });
     });
 
-    test('closes a drawer when closeDrawer is called (global drawer)', async () => {
-      awsuiPlugins.appLayout.registerDrawer({ ...drawerDefaults, resizable: true, type: 'global' });
-
-      const { wrapper } = await renderComponent(<AppLayout drawers={[testDrawer]} />);
-
-      awsuiPlugins.appLayout.openDrawer('test');
-
-      await delay();
-
-      expect(wrapper.findActiveDrawer()!.getElement()).toHaveTextContent('runtime drawer content');
-
-      awsuiPlugins.appLayout.closeDrawer('test');
-
-      await delay();
-
-      expect(wrapper.findActiveDrawer()).toBeFalsy();
-    });
-
     test('should not render a trigger button if registered drawer does not have a trigger prop', async () => {
       awsuiPlugins.appLayout.registerDrawer({ ...drawerDefaults, trigger: undefined });
 
@@ -1219,36 +1285,6 @@ describe('toolbar mode only features', () => {
       expect(wrapper.findActiveDrawer()!.getElement()).toHaveTextContent('runtime drawer content');
     });
 
-    test('should render trigger buttons for global drawers even if local drawers are not present', async () => {
-      const { wrapper } = await renderComponent(<AppLayout toolsHide={true} />);
-
-      awsuiPlugins.appLayout.registerDrawer({
-        ...drawerDefaults,
-        id: 'global1',
-        type: 'global',
-      });
-
-      await delay();
-
-      expect(wrapper.findDrawerTriggerById('global1')!.getElement()).toBeInTheDocument();
-    });
-
-    test('calls onToggle handler by clicking on drawers trigger button (global runtime drawers)', async () => {
-      const onToggle = jest.fn();
-      awsuiPlugins.appLayout.registerDrawer({
-        ...drawerDefaults,
-        id: 'global-drawer',
-        type: 'global',
-        onToggle: event => onToggle(event.detail),
-      });
-      const { wrapper } = await renderComponent(<AppLayout />);
-
-      wrapper.findDrawerTriggerById('global-drawer')!.click();
-      expect(onToggle).toHaveBeenCalledWith({ isOpen: true, initiatedByUserAction: true });
-      wrapper.findDrawerTriggerById('global-drawer')!.click();
-      expect(onToggle).toHaveBeenCalledWith({ isOpen: false, initiatedByUserAction: true });
-    });
-
     test.each([true, false] as const)(
       'calls onToggle handler by calling openDrawer and closeDrawer plugin api (global runtime drawers) initiatedByUserAction = %s',
       async initiatedByUserAction => {
@@ -1375,106 +1411,154 @@ describe('toolbar mode only features', () => {
     });
 
     describe('expanded mode for global drawers', () => {
-      test('should set a drawer to expanded mode by clicking on "expanded mode" button', async () => {
-        const drawerId = 'global-drawer';
-        awsuiPlugins.appLayout.registerDrawer({
-          ...drawerDefaults,
-          ariaLabels: {
-            expandedModeButton: 'Expanded mode button',
-          },
-          id: drawerId,
-          type: 'global',
-          isExpandable: true,
-        });
-        const { wrapper, globalDrawersWrapper } = await renderComponent(<AppLayout />);
-
-        wrapper.findDrawerTriggerById(drawerId)!.click();
-        expect(globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.getElement()).toBeInTheDocument();
-        expect(globalDrawersWrapper.findDrawerById(drawerId)!.isDrawerInExpandedMode()).toBe(false);
-        globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.click();
-        expect(globalDrawersWrapper.findDrawerById(drawerId)!.isDrawerInExpandedMode()).toBe(true);
-        expect(
-          getGeneratedAnalyticsMetadata(
-            globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.getElement()
-          )
-        ).toEqual(
-          expect.objectContaining({
-            action: 'expand',
-            detail: {
-              label: 'Expanded mode button',
+      describe.each(['global', 'global-ai'] as const)('drawer type = %s', type => {
+        const findDrawerTriggerById = (id: string, renderProps: Awaited<ReturnType<typeof renderComponent>>) => {
+          if (type === 'global') {
+            return renderProps.wrapper.findDrawerTriggerById(id);
+          } else {
+            return renderProps.globalDrawersWrapper.findAiDrawerTrigger();
+          }
+        };
+        const registerDrawer = (payload: DrawerConfig | WidgetDrawerPayload) => {
+          if (type === 'global') {
+            awsuiPlugins.appLayout.registerDrawer({ ...payload, type } as DrawerConfig);
+          } else {
+            awsuiWidgetPlugins.registerLeftDrawer(payload as WidgetDrawerPayload);
+          }
+        };
+
+        test('should set a drawer to expanded mode by clicking on "expanded mode" button', async () => {
+          const drawerId = 'global-drawer';
+          registerDrawer({
+            ...drawerDefaults,
+            ariaLabels: {
+              expandedModeButton: 'Expanded mode button',
             },
-          })
-        );
+            id: drawerId,
+            isExpandable: true,
+          });
+          const renderProps = await renderComponent(<AppLayout />);
+          const { globalDrawersWrapper } = renderProps;
 
-        globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.click();
-        expect(globalDrawersWrapper.findDrawerById(drawerId)!.isDrawerInExpandedMode()).toBe(false);
-        expect(
-          getGeneratedAnalyticsMetadata(
+          findDrawerTriggerById(drawerId, renderProps)!.click();
+          expect(
             globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.getElement()
-          )
-        ).toEqual(
-          expect.objectContaining({
-            action: 'collapse',
-            detail: {
-              label: 'Expanded mode button',
-            },
-          })
-        );
-      });
+          ).toBeInTheDocument();
+          expect(globalDrawersWrapper.findDrawerById(drawerId)!.isDrawerInExpandedMode()).toBe(false);
+          globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.click();
+          expect(globalDrawersWrapper.findDrawerById(drawerId)!.isDrawerInExpandedMode()).toBe(true);
+          expect(
+            getGeneratedAnalyticsMetadata(
+              globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.getElement()
+            )
+          ).toEqual(
+            expect.objectContaining({
+              action: 'expand',
+              detail: {
+                label: 'Expanded mode button',
+              },
+            })
+          );
 
-      test('only one drawer could be in expanded mode. all other panels should be closed', async () => {
-        const drawerId1 = 'global-drawer1';
-        const drawerId2 = 'global-drawer2';
-        const drawerId3Local = 'local-drawer';
-        awsuiPlugins.appLayout.registerDrawer({
-          ...drawerDefaults,
-          id: drawerId1,
-          type: 'global',
-          isExpandable: true,
-        });
-        awsuiPlugins.appLayout.registerDrawer({
-          ...drawerDefaults,
-          id: drawerId2,
-          type: 'global',
-          isExpandable: true,
-        });
-        awsuiPlugins.appLayout.registerDrawer({
-          ...drawerDefaults,
-          id: drawerId3Local,
+          globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.click();
+          expect(globalDrawersWrapper.findDrawerById(drawerId)!.isDrawerInExpandedMode()).toBe(false);
+          expect(
+            getGeneratedAnalyticsMetadata(
+              globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.getElement()
+            )
+          ).toEqual(
+            expect.objectContaining({
+              action: 'collapse',
+              detail: {
+                label: 'Expanded mode button',
+              },
+            })
+          );
         });
-        const { wrapper, globalDrawersWrapper } = await renderComponent(
-          <AppLayout navigationOpen={true} navigation={<div>nav</div>} />
-        );
 
-        await delay();
+        test('only one drawer could be in expanded mode. all other panels should be closed', async () => {
+          const drawerId1 = 'global-drawer1';
+          const drawerId2 = 'global-drawer2';
+          const drawerId3Local = 'local-drawer';
+          awsuiPlugins.appLayout.registerDrawer({
+            ...drawerDefaults,
+            id: drawerId1,
+            type: 'global',
+            isExpandable: true,
+          });
+          registerDrawer({
+            ...drawerDefaults,
+            id: drawerId2,
+            isExpandable: true,
+          });
+          awsuiPlugins.appLayout.registerDrawer({
+            ...drawerDefaults,
+            id: drawerId3Local,
+          });
+          const renderProps = await renderComponent(<AppLayout navigationOpen={true} navigation={<div>nav</div>} />);
+          const { wrapper, globalDrawersWrapper } = renderProps;
 
-        wrapper.findDrawerTriggerById(drawerId1)!.click();
-        wrapper.findDrawerTriggerById(drawerId2)!.click();
-        wrapper.findDrawerTriggerById(drawerId3Local)!.click();
+          await delay();
 
-        expect(wrapper.findDrawerTriggerById(drawerId1)!.getElement()).toHaveClass(toolbarTriggerStyles.selected);
-        expect(wrapper.findDrawerTriggerById(drawerId2)!.getElement()).toHaveClass(toolbarTriggerStyles.selected);
-        expect(wrapper.findDrawerTriggerById(drawerId3Local)!.getElement()).toHaveClass(toolbarTriggerStyles.selected);
-        expect(wrapper.findNavigationToggle()!.getElement()).toHaveClass(toolbarTriggerStyles.selected);
-        expect(globalDrawersWrapper.isLayoutInDrawerExpandedMode()).toBe(false);
-        expect(globalDrawersWrapper.findDrawerById(drawerId1)!.isDrawerInExpandedMode()).toBe(false);
+          wrapper.findDrawerTriggerById(drawerId1)!.click();
+          findDrawerTriggerById(drawerId2, renderProps)!.click();
+          wrapper.findDrawerTriggerById(drawerId3Local)!.click();
 
-        globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId1)!.click();
+          expect(wrapper.findDrawerTriggerById(drawerId1)!.getElement()).toHaveClass(toolbarTriggerStyles.selected);
+          // because the trigger button for the AI drawer gets hidden when it's expanded
+          if (type === 'global') {
+            expect(wrapper.findDrawerTriggerById(drawerId2)!.getElement()).toHaveClass(toolbarTriggerStyles.selected);
+          }
+          expect(wrapper.findDrawerTriggerById(drawerId3Local)!.getElement()).toHaveClass(
+            toolbarTriggerStyles.selected
+          );
+          expect(wrapper.findNavigationToggle()!.getElement()).toHaveClass(toolbarTriggerStyles.selected);
+          expect(globalDrawersWrapper.isLayoutInDrawerExpandedMode()).toBe(false);
+          expect(globalDrawersWrapper.findDrawerById(drawerId1)!.isDrawerInExpandedMode()).toBe(false);
 
-        expect(globalDrawersWrapper.findDrawerById(drawerId1)!.isDrawerInExpandedMode()).toBe(true);
-        expect(wrapper.findDrawerTriggerById(drawerId1)!.getElement()).toHaveClass(toolbarTriggerStyles.selected);
-        expect(wrapper.findDrawerTriggerById(drawerId2)!.getElement()).not.toHaveClass(toolbarTriggerStyles.selected);
-        expect(wrapper.findDrawerTriggerById(drawerId3Local)!.getElement()).not.toHaveClass(
-          toolbarTriggerStyles.selected
-        );
-        expect(wrapper.findNavigationToggle()!.getElement()).not.toHaveClass(toolbarTriggerStyles.selected);
+          globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId1)!.click();
+
+          expect(globalDrawersWrapper.findDrawerById(drawerId1)!.isDrawerInExpandedMode()).toBe(true);
+          expect(wrapper.findDrawerTriggerById(drawerId1)!.getElement()).toHaveClass(toolbarTriggerStyles.selected);
+          // because the trigger button for the AI drawer gets hidden when it's expanded
+          if (type === 'global') {
+            expect(wrapper.findDrawerTriggerById(drawerId2)!.getElement()).not.toHaveClass(
+              toolbarTriggerStyles.selected
+            );
+          }
+          expect(wrapper.findDrawerTriggerById(drawerId3Local)!.getElement()).not.toHaveClass(
+            toolbarTriggerStyles.selected
+          );
+          expect(wrapper.findNavigationToggle()!.getElement()).not.toHaveClass(toolbarTriggerStyles.selected);
+        });
+
+        test('should quit expanded mode when a drawer in expanded mode is closed', async () => {
+          const drawerId = 'global-drawer';
+          registerDrawer({
+            ...drawerDefaults,
+            id: drawerId,
+            isExpandable: true,
+          });
+          const renderProps = await renderComponent(<AppLayout />);
+          const { globalDrawersWrapper } = renderProps;
+
+          await delay();
+
+          findDrawerTriggerById(drawerId, renderProps)!.click();
+          globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.click();
+          expect(globalDrawersWrapper.findDrawerById(drawerId)!.isDrawerInExpandedMode()).toBe(true);
+          expect(globalDrawersWrapper.isLayoutInDrawerExpandedMode()).toBe(true);
+          globalDrawersWrapper.findCloseButtonByActiveDrawerId(drawerId)!.click();
+          expect(globalDrawersWrapper.isLayoutInDrawerExpandedMode()).toBe(false);
+        });
       });
 
-      test.each(['expanded', 'split-panel', 'global-drawer', 'local-drawer', 'nav'] as const)(
+      test.each(['expanded', 'split-panel', 'global-drawer', 'local-drawer', 'nav', 'global-ai-drawer'] as const)(
         'should return panels to their initial state after leaving expanded mode by clicking on %s button',
         async triggerName => {
           const drawerId1 = 'global-drawer1';
           const drawerId2 = 'global-drawer2';
+          const drawerId3 = 'global-ai-drawer';
           const drawerId3Local = 'local-drawer';
           awsuiPlugins.appLayout.registerDrawer({
             ...drawerDefaults,
@@ -1488,6 +1572,11 @@ describe('toolbar mode only features', () => {
             type: 'global',
             isExpandable: true,
           });
+          awsuiWidgetPlugins.registerLeftDrawer({
+            ...drawerDefaults,
+            id: drawerId3,
+            isExpandable: true,
+          });
           awsuiPlugins.appLayout.registerDrawer({
             ...drawerDefaults,
             id: drawerId3Local,
@@ -1538,6 +1627,8 @@ describe('toolbar mode only features', () => {
             wrapper.findNavigationToggle()!.click();
           } else if (triggerName === 'split-panel') {
             wrapper.findSplitPanelOpenButton()!.click();
+          } else if (triggerName === 'global-ai-drawer') {
+            globalDrawersWrapper.findAiDrawerTrigger()!.click();
           }
 
           expect(wrapper.findDrawerTriggerById(drawerId1)!.getElement()).toHaveClass(toolbarTriggerStyles.selected);
@@ -1614,26 +1705,6 @@ describe('toolbar mode only features', () => {
         expect(globalDrawersWrapper.findDrawerById(drawerId1)!.isDrawerInExpandedMode()).toBe(false);
       });
 
-      test('should quit expanded mode when a drawer in expanded mode is closed', async () => {
-        const drawerId = 'global-drawer';
-        awsuiPlugins.appLayout.registerDrawer({
-          ...drawerDefaults,
-          id: drawerId,
-          type: 'global',
-          isExpandable: true,
-        });
-        const { wrapper, globalDrawersWrapper } = await renderComponent(<AppLayout />);
-
-        await delay();
-
-        wrapper.findDrawerTriggerById(drawerId)!.click();
-        globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.click();
-        expect(globalDrawersWrapper.findDrawerById(drawerId)!.isDrawerInExpandedMode()).toBe(true);
-        expect(globalDrawersWrapper.isLayoutInDrawerExpandedMode()).toBe(true);
-        wrapper.findDrawerTriggerById(drawerId)!.click();
-        expect(globalDrawersWrapper.isLayoutInDrawerExpandedMode()).toBe(false);
-      });
-
       describe('nested app layouts', () => {
         test('should apply expanded drawer mode only for inner AppLayout and hide nav for the outer AppLayout', async () => {
           const drawerId = 'global-drawer';
@@ -1682,28 +1753,42 @@ describe('toolbar mode only features', () => {
     test('resizes multiple global drawers when resizeDrawer is called', async () => {
       awsuiPlugins.appLayout.registerDrawer({ ...drawerDefaults, type: 'global' });
       awsuiPlugins.appLayout.registerDrawer({ ...drawerDefaults, type: 'global', id: 'test1' });
+      awsuiWidgetPlugins.registerLeftDrawer({ ...drawerDefaults, id: 'test2' });
 
       const { globalDrawersWrapper } = await renderComponent(<AppLayout />);
 
       awsuiPlugins.appLayout.openDrawer('test');
       awsuiPlugins.appLayout.openDrawer('test1');
+      awsuiWidgetPlugins.updateDrawer({ type: 'openDrawer', payload: { id: 'test2' } });
 
       await delay();
 
       expect(globalDrawersWrapper.findDrawerById('test')!.getElement()).toHaveTextContent('runtime drawer content');
       expect(globalDrawersWrapper.findDrawerById('test1')!.getElement()).toHaveTextContent('runtime drawer content');
-      expect(getGlobalDrawerWidth(globalDrawersWrapper, 'test')).toEqual('290px');
-      expect(getGlobalDrawerWidth(globalDrawersWrapper, 'test1')).toEqual('290px');
+      expect(globalDrawersWrapper.findDrawerById('test2')!.getElement()).toHaveTextContent('runtime drawer content');
+      await waitFor(() => {
+        expect(getGlobalDrawerWidth(globalDrawersWrapper, 'test')).toEqual('290px');
+        expect(getGlobalDrawerWidth(globalDrawersWrapper, 'test1')).toEqual('290px');
+        expect(getGlobalDrawerWidth(globalDrawersWrapper, 'test2')).toEqual('290px');
+      });
 
       awsuiPlugins.appLayout.resizeDrawer('test', 800);
 
       expect(getGlobalDrawerWidth(globalDrawersWrapper, 'test')).toEqual('800px');
       expect(getGlobalDrawerWidth(globalDrawersWrapper, 'test1')).toEqual('290px');
+      expect(getGlobalDrawerWidth(globalDrawersWrapper, 'test2')).toEqual('290px');
 
       awsuiPlugins.appLayout.resizeDrawer('test1', 801);
 
       expect(getGlobalDrawerWidth(globalDrawersWrapper, 'test')).toEqual('800px');
       expect(getGlobalDrawerWidth(globalDrawersWrapper, 'test1')).toEqual('801px');
+      expect(getGlobalDrawerWidth(globalDrawersWrapper, 'test2')).toEqual('290px');
+
+      awsuiWidgetPlugins.updateDrawer({ type: 'resizeDrawer', payload: { id: 'test2', size: 600 } });
+
+      expect(getGlobalDrawerWidth(globalDrawersWrapper, 'test')).toEqual('800px');
+      expect(getGlobalDrawerWidth(globalDrawersWrapper, 'test1')).toEqual('801px');
+      expect(getGlobalDrawerWidth(globalDrawersWrapper, 'test2')).toEqual('600px');
     });
   });
 
diff --git a/src/app-layout/__tests__/utils.tsx b/src/app-layout/__tests__/utils.tsx
index 26cd5d1b71..a52b6a6da7 100644
--- a/src/app-layout/__tests__/utils.tsx
+++ b/src/app-layout/__tests__/utils.tsx
@@ -218,8 +218,18 @@ export const getGlobalDrawersTestUtils = (wrapper: AppLayoutWrapper) => {
       );
     },
 
+    findLeaveExpandedModeButtonInAIDrawer(): ElementWrapper | null {
+      return wrapper.find(
+        `.${testutilStyles['active-drawer']} .${testutilStyles['active-ai-drawer-leave-expanded-mode-custom-button']}`
+      );
+    },
+
     isLayoutInDrawerExpandedMode(): boolean {
       return !!wrapper.matches(`.${visualRefreshToolbarStyles['drawer-expanded-mode']}`);
     },
+
+    findAiDrawerTrigger(): ElementWrapper | null {
+      return wrapper.find(`.${testutilStyles['ai-drawer-toggle']}`);
+    },
   };
 };
diff --git a/src/app-layout/constants.scss b/src/app-layout/constants.scss
index 6bbd33e8c6..51ed2a67f2 100644
--- a/src/app-layout/constants.scss
+++ b/src/app-layout/constants.scss
@@ -34,3 +34,5 @@ $toolbar-z-index: 1000;
 
 // Shared toolbar drawer component values
 $toolbar-vertical-panel-icon-offset: 14px;
+
+$ai-drawer-background: #161d26;
diff --git a/src/app-layout/interfaces.ts b/src/app-layout/interfaces.ts
index 754b38a52a..e066ba425a 100644
--- a/src/app-layout/interfaces.ts
+++ b/src/app-layout/interfaces.ts
@@ -303,6 +303,7 @@ export namespace AppLayoutProps {
     trigger?: {
       iconName?: IconProps.Name;
       iconSvg?: React.ReactNode;
+      customIcon?: React.ReactNode;
     };
     ariaLabels: DrawerAriaLabels;
     badge?: boolean;
diff --git a/src/app-layout/runtime-drawer/index.tsx b/src/app-layout/runtime-drawer/index.tsx
index 14004148a6..2a40354c1c 100644
--- a/src/app-layout/runtime-drawer/index.tsx
+++ b/src/app-layout/runtime-drawer/index.tsx
@@ -8,6 +8,7 @@ import {
   DrawerStateChangeParams,
 } from '../../internal/plugins/controllers/drawers';
 import { sortByPriority } from '../../internal/plugins/helpers/utils';
+import { DrawerPayload as RuntimeAiDrawerConfig } from '../../internal/plugins/widget/interfaces';
 import { AppLayoutProps } from '../interfaces';
 import { ActiveDrawersContext } from '../utils/visibility-context';
 
@@ -58,7 +59,27 @@ function RuntimeDrawerWrapper({ mountContent, unmountContent, id }: RuntimeConte
   return <div ref={ref} className={styles['runtime-content-wrapper']} data-awsui-runtime-drawer-root-id={id}></div>;
 }
 
-const mapRuntimeConfigToDrawer = (
+interface RuntimeContentHeaderProps {
+  mountHeader: (container: HTMLElement) => void;
+  unmountHeader?: (container: HTMLElement) => void;
+}
+
+function RuntimeDrawerHeader({ mountHeader, unmountHeader }: RuntimeContentHeaderProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = ref.current!;
+    mountHeader?.(container);
+    return () => {
+      unmountHeader?.(container);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return <div className={styles['runtime-header-wrapper']} ref={ref} />;
+}
+
+export const mapRuntimeConfigToDrawer = (
   runtimeConfig: RuntimeDrawerConfig
 ): AppLayoutProps.Drawer & {
   orderPriority?: number;
@@ -71,10 +92,49 @@ const mapRuntimeConfigToDrawer = (
     ariaLabels: { drawerName: runtimeDrawer.ariaLabels.content ?? '', ...runtimeDrawer.ariaLabels },
     trigger: trigger
       ? {
-          iconSvg: (
+          ...(trigger.iconSvg && {
+            iconSvg: (
+              // eslint-disable-next-line react/no-danger
+              <span dangerouslySetInnerHTML={{ __html: trigger.iconSvg }} />
+            ),
+          }),
+        }
+      : undefined,
+    content: (
+      <RuntimeDrawerWrapper
+        key={runtimeDrawer.id}
+        mountContent={mountContent}
+        unmountContent={unmountContent}
+        id={runtimeDrawer.id}
+      />
+    ),
+    onResize: event => {
+      fireNonCancelableEvent(runtimeDrawer.onResize, { size: event.detail.size, id: runtimeDrawer.id });
+    },
+  };
+};
+
+export const mapRuntimeConfigToAiDrawer = (
+  runtimeConfig: RuntimeAiDrawerConfig
+): AppLayoutProps.Drawer & {
+  orderPriority?: number;
+  onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;
+} => {
+  const { mountContent, unmountContent, trigger, ...runtimeDrawer } = runtimeConfig;
+
+  return {
+    ...runtimeDrawer,
+    ariaLabels: { drawerName: runtimeDrawer.ariaLabels.content ?? '', ...runtimeDrawer.ariaLabels },
+    trigger: trigger
+      ? {
+          customIcon: trigger?.customIcon ? (
+            // eslint-disable-next-line react/no-danger
+            <span style={{ lineHeight: 0 }} dangerouslySetInnerHTML={{ __html: trigger.customIcon }} />
+          ) : undefined,
+          iconSvg: trigger.iconSvg ? (
             // eslint-disable-next-line react/no-danger
             <span dangerouslySetInnerHTML={{ __html: trigger.iconSvg }} />
-          ),
+          ) : undefined,
         }
       : undefined,
     content: (
@@ -85,6 +145,11 @@ const mapRuntimeConfigToDrawer = (
         id={runtimeDrawer.id}
       />
     ),
+    ...(runtimeDrawer.mountHeader && {
+      header: (
+        <RuntimeDrawerHeader mountHeader={runtimeDrawer.mountHeader} unmountHeader={runtimeDrawer.unmountHeader} />
+      ),
+    }),
     onResize: event => {
       fireNonCancelableEvent(runtimeDrawer.onResize, { size: event.detail.size, id: runtimeDrawer.id });
     },
diff --git a/src/app-layout/runtime-drawer/styles.scss b/src/app-layout/runtime-drawer/styles.scss
index 5003a47206..9a61b297eb 100644
--- a/src/app-layout/runtime-drawer/styles.scss
+++ b/src/app-layout/runtime-drawer/styles.scss
@@ -6,3 +6,7 @@
 .runtime-content-wrapper {
   display: contents;
 }
+
+.runtime-header-wrapper {
+  display: contents;
+}
diff --git a/src/app-layout/test-classes/styles.scss b/src/app-layout/test-classes/styles.scss
index 00733f4d57..477a1b2dc1 100644
--- a/src/app-layout/test-classes/styles.scss
+++ b/src/app-layout/test-classes/styles.scss
@@ -26,6 +26,8 @@
 .toolbar,
 .trigger-wrapper-tooltip-visible,
 .trigger-tooltip,
-.active-drawer-expanded-mode-button {
+.active-drawer-expanded-mode-button,
+.ai-drawer-toggle,
+.active-ai-drawer-leave-expanded-mode-custom-button {
   /* used in test-utils */
 }
diff --git a/src/app-layout/utils/interfaces.ts b/src/app-layout/utils/interfaces.ts
index eda4455828..3614773b44 100644
--- a/src/app-layout/utils/interfaces.ts
+++ b/src/app-layout/utils/interfaces.ts
@@ -3,7 +3,7 @@
 import React from 'react';
 
 export interface SizeControlProps {
-  position: 'side' | 'bottom';
+  position: 'side-start' | 'side' | 'bottom';
   panelRef?: React.RefObject<HTMLDivElement>;
   handleRef?: React.RefObject<HTMLDivElement>;
   onResize: (newSize: number) => void;
diff --git a/src/app-layout/utils/use-ai-drawer.ts b/src/app-layout/utils/use-ai-drawer.ts
new file mode 100644
index 0000000000..0dae462536
--- /dev/null
+++ b/src/app-layout/utils/use-ai-drawer.ts
@@ -0,0 +1,139 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect, useRef, useState } from 'react';
+
+import { useStableCallback } from '@cloudscape-design/component-toolkit/internal';
+
+import { fireNonCancelableEvent } from '../../internal/events';
+import { metrics } from '../../internal/metrics';
+import { AppLayoutMessage, DrawerPayload as RuntimeAiDrawerConfig } from '../../internal/plugins/widget/interfaces';
+import { getAppLayoutInitialState, registerAppLayoutHandler } from '../../internal/plugins/widget/internal';
+import { assertNever } from '../../internal/types';
+import { mapRuntimeConfigToAiDrawer } from '../runtime-drawer';
+
+export interface OnChangeParams {
+  initiatedByUserAction: boolean;
+}
+
+const DEFAULT_ON_CHANGE_PARAMS = { initiatedByUserAction: true };
+
+function useRuntimeAiDrawer(
+  isEnabled: boolean,
+  activeAiDrawerId: string | null,
+  onActiveAiDrawerChange: (newDrawerId: string | null, { initiatedByUserAction }: OnChangeParams) => void,
+  onActiveAiDrawerResize: (size: number) => void
+) {
+  const [aiDrawer, setAiDrawer] = useState<RuntimeAiDrawerConfig | null>(null);
+  const appLayoutMessageHandler = useStableCallback((event: AppLayoutMessage) => {
+    if (event.type === 'registerLeftDrawer') {
+      setAiDrawer(event.payload);
+      if (!aiDrawerWasOpenRef.current && event.payload.defaultActive) {
+        onAiDrawersChangeStable(event.payload.id, { initiatedByUserAction: false });
+      }
+      return;
+    }
+    if (aiDrawer && aiDrawer.id !== event.payload.id) {
+      metrics.sendOpsMetricObject('awsui-widget-drawer-incorrect-id', { oldId: aiDrawer?.id, newId: event.payload.id });
+      return;
+    }
+    switch (event.type) {
+      case 'updateDrawerConfig':
+        setAiDrawer(current => (current ? { ...current, ...event.payload } : current));
+        break;
+      case 'openDrawer':
+        onActiveAiDrawerChangeStable(event.payload.id, { initiatedByUserAction: false });
+        break;
+      case 'closeDrawer':
+        onActiveAiDrawerChangeStable(null, { initiatedByUserAction: false });
+        break;
+      case 'resizeDrawer':
+        onActiveAiDrawerResizeStable(event.payload.size);
+        break;
+      /* istanbul ignore next: this code is not intended to be visited */
+      default:
+        assertNever(event);
+    }
+  });
+  const onAiDrawersChangeStable = useStableCallback(onActiveAiDrawerChange);
+  const onActiveAiDrawerResizeStable = useStableCallback(onActiveAiDrawerResize);
+  const onActiveAiDrawerChangeStable = useStableCallback(onActiveAiDrawerChange);
+  const aiDrawerWasOpenRef = useRef(false);
+  aiDrawerWasOpenRef.current = aiDrawerWasOpenRef.current || !!activeAiDrawerId;
+
+  useEffect(() => {
+    if (!isEnabled) {
+      return;
+    }
+
+    const initialDrawerMessage = getAppLayoutInitialState()?.find(message => message.type === 'registerLeftDrawer');
+    if (initialDrawerMessage && initialDrawerMessage.type === 'registerLeftDrawer') {
+      setAiDrawer(initialDrawerMessage.payload);
+      if (!aiDrawerWasOpenRef.current && initialDrawerMessage.payload.defaultActive) {
+        onAiDrawersChangeStable(initialDrawerMessage.payload.id, { initiatedByUserAction: false });
+      }
+    }
+
+    const unsubscribe = registerAppLayoutHandler(appLayoutMessageHandler);
+    return () => {
+      unsubscribe();
+      setAiDrawer(null);
+    };
+  }, [isEnabled, appLayoutMessageHandler, onAiDrawersChangeStable, onActiveAiDrawerResizeStable]);
+
+  return aiDrawer && mapRuntimeConfigToAiDrawer(aiDrawer);
+}
+
+export const MIN_DRAWER_SIZE = 290;
+
+interface UseDrawersProps {
+  isEnabled: boolean;
+  onAiDrawerFocus: () => void;
+  expandedDrawerId: string | null;
+  setExpandedDrawerId: (value: string | null) => void;
+}
+
+export function useAiDrawer({ isEnabled, onAiDrawerFocus, expandedDrawerId, setExpandedDrawerId }: UseDrawersProps) {
+  const [activeAiDrawerId, setActiveAiDrawerId] = useState<string | null>(null);
+  const [size, setSize] = useState<number | null>(null);
+
+  function onActiveAiDrawerResize(size: number) {
+    setSize(size);
+    fireNonCancelableEvent(activeAiDrawer?.onResize, { id: activeAiDrawerId, size });
+  }
+
+  function onActiveAiDrawerChange(
+    newDrawerId: string | null,
+    { initiatedByUserAction }: OnChangeParams = DEFAULT_ON_CHANGE_PARAMS
+  ) {
+    setActiveAiDrawerId(newDrawerId);
+
+    if (newDrawerId) {
+      fireNonCancelableEvent(aiDrawer?.onToggle, { isOpen: true, initiatedByUserAction });
+    }
+
+    if (activeAiDrawerId) {
+      fireNonCancelableEvent(aiDrawer?.onToggle, { isOpen: false, initiatedByUserAction });
+
+      if (activeAiDrawerId === expandedDrawerId) {
+        setExpandedDrawerId?.(null);
+      }
+    }
+
+    onAiDrawerFocus?.();
+  }
+
+  const aiDrawer = useRuntimeAiDrawer(isEnabled, activeAiDrawerId, onActiveAiDrawerChange, onActiveAiDrawerResize);
+  const activeAiDrawer = activeAiDrawerId && activeAiDrawerId === aiDrawer?.id ? aiDrawer : null;
+  const activeAiDrawerSize = activeAiDrawerId ? (size ?? activeAiDrawer?.defaultSize ?? MIN_DRAWER_SIZE) : 0;
+  const minAiDrawerSize = Math.min(activeAiDrawer?.defaultSize ?? MIN_DRAWER_SIZE, MIN_DRAWER_SIZE);
+
+  return {
+    aiDrawer,
+    onActiveAiDrawerChange,
+    activeAiDrawer,
+    activeAiDrawerId,
+    activeAiDrawerSize,
+    minAiDrawerSize,
+    onActiveAiDrawerResize,
+  };
+}
diff --git a/src/app-layout/utils/use-keyboard-events.ts b/src/app-layout/utils/use-keyboard-events.ts
index cc69da42b5..53faef55a4 100644
--- a/src/app-layout/utils/use-keyboard-events.ts
+++ b/src/app-layout/utils/use-keyboard-events.ts
@@ -30,7 +30,7 @@ export const useKeyboardEvents = ({ position, onResize, panelRef }: SizeControlP
 
       const { panelHeight, panelWidth } = getCurrentSize(panelRef);
 
-      if (position === 'side') {
+      if (['side', 'side-start'].includes(position)) {
         currentSize = panelWidth;
       } else {
         currentSize = panelHeight;
@@ -42,11 +42,11 @@ export const useKeyboardEvents = ({ position, onResize, panelRef }: SizeControlP
       switch (direction) {
         case 'block-start':
         case 'inline-start':
-          singleStepUp();
+          position === 'side-start' ? singleStepDown() : singleStepUp();
           break;
         case 'block-end':
         case 'inline-end':
-          singleStepDown();
+          position === 'side-start' ? singleStepUp() : singleStepDown();
           break;
       }
     },
@@ -57,7 +57,7 @@ export const useKeyboardEvents = ({ position, onResize, panelRef }: SizeControlP
 
       const { panelHeight, panelWidth } = getCurrentSize(panelRef);
 
-      if (position === 'side') {
+      if (['side', 'side-start'].includes(position)) {
         currentSize = panelWidth;
         // don't need the exact max size as it's constrained in the set size function
         maxSize = window.innerWidth;
@@ -76,16 +76,16 @@ export const useKeyboardEvents = ({ position, onResize, panelRef }: SizeControlP
 
       handleKey(event, {
         onBlockStart: () => {
-          position === 'bottom' ? singleStepUp() : singleStepDown();
+          ['bottom', 'side-start'].includes(position) ? singleStepUp() : singleStepDown();
         },
         onBlockEnd: () => {
-          position === 'bottom' ? singleStepDown() : singleStepUp();
+          ['bottom', 'side-start'].includes(position) ? singleStepDown() : singleStepUp();
         },
         onInlineEnd: () => {
-          position === 'bottom' ? singleStepUp() : singleStepDown();
+          ['bottom', 'side-start'].includes(position) ? singleStepUp() : singleStepDown();
         },
         onInlineStart: () => {
-          position === 'bottom' ? singleStepDown() : singleStepUp();
+          ['bottom', 'side-start'].includes(position) ? singleStepDown() : singleStepUp();
         },
         onPageDown: () => multipleStepDown(),
         onPageUp: () => multipleStepUp(),
diff --git a/src/app-layout/utils/use-pointer-events.ts b/src/app-layout/utils/use-pointer-events.ts
index f526125cb0..a7b134cbd8 100644
--- a/src/app-layout/utils/use-pointer-events.ts
+++ b/src/app-layout/utils/use-pointer-events.ts
@@ -26,6 +26,16 @@ export const usePointerEvents = ({ position, panelRef, handleRef, onResize }: Si
         const handleOffset = getLogicalBoundingClientRect(handleRef.current).inlineSize / 2;
         const width = getLogicalBoundingClientRect(panelRef.current).insetInlineEnd - mouseClientX + handleOffset;
 
+        onResize(width);
+      } else if (position === 'side-start') {
+        const mouseClientX = getLogicalClientX(event, getIsRtl(panelRef.current)) || 0;
+
+        // The handle offset aligns the cursor with the middle of the resize handle.
+        const handleOffset = getLogicalBoundingClientRect(handleRef.current).inlineSize / 2;
+        const panelBoundingClientRect = getLogicalBoundingClientRect(panelRef.current);
+        const width =
+          panelBoundingClientRect.insetInlineEnd + mouseClientX + handleOffset - panelBoundingClientRect.inlineSize;
+
         onResize(width);
       } else {
         const mouseClientY = event.clientY || 0;
diff --git a/src/app-layout/visual-refresh-toolbar/compute-layout.ts b/src/app-layout/visual-refresh-toolbar/compute-layout.ts
index 387bcf3f6e..700197a512 100644
--- a/src/app-layout/visual-refresh-toolbar/compute-layout.ts
+++ b/src/app-layout/visual-refresh-toolbar/compute-layout.ts
@@ -15,9 +15,11 @@ interface HorizontalLayoutInput {
   splitPanelSize: number;
   isMobile: boolean;
   activeGlobalDrawersSizes: Record<string, number>;
+  activeAiDrawerSize: number;
 }
 
 export const CONTENT_PADDING = 2 * 24; // space-xl
+const MOBILE_BREAKPOINT = 688;
 
 export function computeHorizontalLayout({
   navigationOpen,
@@ -30,12 +32,13 @@ export function computeHorizontalLayout({
   splitPanelSize,
   isMobile,
   activeGlobalDrawersSizes,
+  activeAiDrawerSize,
 }: HorizontalLayoutInput) {
   const activeNavigationWidth = navigationOpen ? navigationWidth : 0;
 
   let resizableSpaceAvailable = Math.max(
     0,
-    placement.inlineSize - minContentWidth - CONTENT_PADDING - activeNavigationWidth
+    placement.inlineSize - minContentWidth - CONTENT_PADDING - activeNavigationWidth - activeAiDrawerSize
   );
   const totalActiveGlobalDrawersSize = Object.values(activeGlobalDrawersSizes).reduce((acc, size) => acc + size, 0);
 
@@ -49,6 +52,8 @@ export function computeHorizontalLayout({
   const maxSplitPanelSize = Math.max(resizableSpaceAvailable - totalActiveGlobalDrawersSize - activeDrawerSize, 0);
   resizableSpaceAvailable -= sideSplitPanelSize;
   const maxDrawerSize = resizableSpaceAvailable - totalActiveGlobalDrawersSize;
+  // let the ai drawer be resized until the "main screen" hits the mobile breakpoint to have consistent UX
+  const maxAiDrawerSize = placement.inlineSize - MOBILE_BREAKPOINT;
   const maxGlobalDrawersSizes: Record<string, number> = Object.keys(activeGlobalDrawersSizes).reduce(
     (acc, drawerId) => {
       return {
@@ -72,6 +77,7 @@ export function computeHorizontalLayout({
     maxGlobalDrawersSizes,
     totalActiveGlobalDrawersSize,
     resizableSpaceAvailable,
+    maxAiDrawerSize,
   };
 }
 
diff --git a/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx b/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
new file mode 100644
index 0000000000..ebee6d4635
--- /dev/null
+++ b/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
@@ -0,0 +1,212 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useRef } from 'react';
+import { Transition } from 'react-transition-group';
+import clsx from 'clsx';
+
+import { InternalButton } from '../../../button/internal';
+import PanelResizeHandle from '../../../internal/components/panel-resize-handle';
+import customCssProps from '../../../internal/generated/custom-css-properties';
+import { usePrevious } from '../../../internal/hooks/use-previous';
+import { getLimitedValue } from '../../../split-panel/utils/size-utils';
+import { AppLayoutProps } from '../../interfaces';
+import { OnChangeParams } from '../../utils/use-ai-drawer';
+import { FocusControlState } from '../../utils/use-focus-control';
+import { AppLayoutInternals, InternalDrawer } from '../interfaces';
+import { useResize } from './use-resize';
+
+import sharedStyles from '../../resize/styles.css.js';
+import testutilStyles from '../../test-classes/styles.css.js';
+import styles from './styles.css.js';
+
+interface AIDrawerProps {
+  activeAiDrawerSize: number;
+  minAiDrawerSize: number;
+  aiDrawer: AppLayoutProps.Drawer | undefined;
+  maxAiDrawerSize: number;
+  ariaLabels: any;
+  aiDrawerFocusControl: FocusControlState | undefined;
+  isMobile: boolean;
+  drawersOpenQueue: ReadonlyArray<string> | undefined;
+  onActiveAiDrawerChange: undefined | ((newDrawerId: string | null, params?: OnChangeParams) => void);
+  onActiveDrawerResize: (detail: { id: string; size: number }) => void;
+  expandedDrawerId?: string | null;
+  setExpandedDrawerId: (value: string | null) => void;
+}
+
+interface AppLayoutGlobalAiDrawerImplementationProps {
+  appLayoutInternals: AppLayoutInternals;
+  show: boolean;
+  activeAiDrawer: InternalDrawer | null;
+  aiDrawerProps: AIDrawerProps;
+}
+
+export function AppLayoutGlobalAiDrawerImplementation({
+  appLayoutInternals,
+  show,
+  activeAiDrawer,
+  aiDrawerProps,
+}: AppLayoutGlobalAiDrawerImplementationProps) {
+  const {
+    activeAiDrawerSize,
+    minAiDrawerSize,
+    maxAiDrawerSize,
+    ariaLabels,
+    aiDrawerFocusControl,
+    isMobile,
+    drawersOpenQueue,
+    onActiveAiDrawerChange,
+    onActiveDrawerResize,
+    expandedDrawerId,
+    setExpandedDrawerId,
+  } = aiDrawerProps;
+  const { verticalOffsets, placement } = appLayoutInternals;
+  const drawerRef = useRef<HTMLDivElement>(null);
+  const activeDrawerId = activeAiDrawer?.id;
+
+  const computedAriaLabels = {
+    closeButton: activeAiDrawer ? activeAiDrawer.ariaLabels?.closeButton : ariaLabels?.toolsClose,
+    content: activeAiDrawer ? activeAiDrawer.ariaLabels?.drawerName : ariaLabels?.tools,
+  };
+
+  const resizeProps = useResize({
+    currentWidth: activeAiDrawerSize,
+    minWidth: minAiDrawerSize,
+    maxWidth: maxAiDrawerSize,
+    panelRef: drawerRef,
+    handleRef: aiDrawerFocusControl!.refs.slider,
+    onResize: size => {
+      onActiveDrawerResize({ id: activeDrawerId!, size });
+    },
+    position: 'side-start',
+  });
+  const size = getLimitedValue(minAiDrawerSize, activeAiDrawerSize, maxAiDrawerSize);
+  const isExpanded = activeAiDrawer?.isExpandable && expandedDrawerId === activeDrawerId;
+  const wasExpanded = usePrevious(isExpanded);
+  const animationDisabled =
+    (activeAiDrawer?.defaultActive && !drawersOpenQueue?.includes(activeAiDrawer.id)) || (wasExpanded && !isExpanded);
+  const drawerHeight = `calc(100vh - ${verticalOffsets.toolbar + placement.insetBlockEnd}px)`;
+  // disable resizing when the drawer is at its minimum width in a "squeezed" state
+  // (window is between mobile and desktop sizes). At this point, the drawer can't be
+  // resized in either direction, so we disable the resize handler
+  const isResizingDisabled = maxAiDrawerSize < activeAiDrawerSize;
+
+  return (
+    <Transition nodeRef={drawerRef} in={show} appear={show} mountOnEnter={true} timeout={250}>
+      {drawerTransitionState => {
+        return (
+          <Transition nodeRef={drawerRef} in={isExpanded} timeout={250}>
+            {expandedTransitionState => {
+              return (
+                <aside
+                  id={activeAiDrawer?.id}
+                  aria-hidden={!activeAiDrawer}
+                  aria-label={computedAriaLabels.content}
+                  className={clsx(
+                    styles.drawer,
+                    styles['ai-drawer'],
+                    !animationDisabled && isExpanded && styles['with-expanded-motion'],
+                    {
+                      [sharedStyles['with-motion-horizontal']]: !animationDisabled,
+                      [testutilStyles['active-drawer']]: show,
+                      [styles['drawer-hidden']]: !show && drawerTransitionState === 'exited',
+                      [testutilStyles['drawer-closed']]: !activeAiDrawer,
+                      [styles['drawer-expanded']]: isExpanded,
+                    }
+                  )}
+                  ref={drawerRef}
+                  onBlur={e => {
+                    if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {
+                      aiDrawerFocusControl?.loseFocus();
+                    }
+                  }}
+                  style={{
+                    blockSize: drawerHeight,
+                    insetBlockStart: `${placement.insetBlockStart}px`,
+                    ...(!isMobile && {
+                      [customCssProps.drawerSize]: `${['entering', 'entered'].includes(drawerTransitionState) ? size : 0}px`,
+                    }),
+                  }}
+                  data-testid={activeDrawerId && `awsui-app-layout-drawer-${activeDrawerId}`}
+                >
+                  {!isMobile && activeAiDrawer?.resizable && (!isExpanded || expandedTransitionState !== 'entered') && (
+                    <div className={styles['drawer-slider']}>
+                      <PanelResizeHandle
+                        ref={aiDrawerFocusControl?.refs.slider}
+                        position="side-start"
+                        className={clsx(testutilStyles['drawers-slider'], styles['ai-drawer-slider-handle'])}
+                        ariaLabel={activeAiDrawer?.ariaLabels?.resizeHandle}
+                        tooltipText={activeAiDrawer?.ariaLabels?.resizeHandleTooltipText}
+                        ariaValuenow={resizeProps.relativeSize}
+                        onKeyDown={resizeProps.onKeyDown}
+                        onPointerDown={resizeProps.onPointerDown}
+                        onDirectionClick={resizeProps.onDirectionClick}
+                        disabled={isResizingDisabled}
+                      />
+                    </div>
+                  )}
+                  <div className={clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal'])}>
+                    <div className={styles['drawer-content']}>
+                      <header className={styles['drawer-content-header']}>
+                        <div className={styles['drawer-content-header-content']}>
+                          {activeAiDrawer?.header ?? <div />}
+                          <div className={styles['drawer-actions']}>
+                            {!isMobile && activeAiDrawer?.isExpandable && (
+                              <div className={styles['drawer-expanded-mode-button']}>
+                                <InternalButton
+                                  ariaLabel={activeAiDrawer?.ariaLabels?.expandedModeButton}
+                                  className={testutilStyles['active-drawer-expanded-mode-button']}
+                                  formAction="none"
+                                  ariaExpanded={isExpanded}
+                                  iconName={isExpanded ? 'shrink' : 'expand'}
+                                  onClick={() => setExpandedDrawerId(isExpanded ? null : activeDrawerId!)}
+                                  variant="icon"
+                                  analyticsAction={isExpanded ? 'expand' : 'collapse'}
+                                />
+                              </div>
+                            )}
+                            <div className={clsx(styles['drawer-close-button'])}>
+                              <InternalButton
+                                ariaLabel={computedAriaLabels.closeButton}
+                                className={clsx({
+                                  [testutilStyles['active-drawer-close-button']]: activeDrawerId,
+                                })}
+                                formAction="none"
+                                iconName={isMobile ? 'close' : 'angle-left'}
+                                onClick={() => onActiveAiDrawerChange?.(null, { initiatedByUserAction: true })}
+                                ref={aiDrawerFocusControl?.refs.close}
+                                variant="icon"
+                                analyticsAction="close"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                        {!isMobile && isExpanded && activeAiDrawer?.ariaLabels?.exitExpandedModeButton && (
+                          <div className={styles['drawer-back-to-console-slot']}>
+                            <div className={styles['drawer-back-to-console-button-wrapper']}>
+                              <button
+                                className={clsx(
+                                  testutilStyles['active-ai-drawer-leave-expanded-mode-custom-button'],
+                                  styles['drawer-back-to-console-button']
+                                )}
+                                formAction="none"
+                                onClick={() => setExpandedDrawerId(null)}
+                              >
+                                {activeAiDrawer?.ariaLabels?.exitExpandedModeButton}
+                              </button>
+                            </div>
+                          </div>
+                        )}
+                      </header>
+                      {activeAiDrawer?.content}
+                    </div>
+                  </div>
+                </aside>
+              );
+            }}
+          </Transition>
+        );
+      }}
+    </Transition>
+  );
+}
diff --git a/src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx b/src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx
index 10c29fc66d..3acfa57ae4 100644
--- a/src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx
+++ b/src/app-layout/visual-refresh-toolbar/drawer/global-drawer.tsx
@@ -43,6 +43,7 @@ function AppLayoutGlobalDrawerImplementation({
     drawersOpenQueue,
     expandedDrawerId,
     setExpandedDrawerId,
+    activeAiDrawer,
   } = appLayoutInternals;
   const drawerRef = useRef<HTMLDivElement>(null);
   const activeDrawerId = activeGlobalDrawer?.id ?? '';
@@ -90,7 +91,7 @@ function AppLayoutGlobalDrawerImplementation({
               !animationDisabled && isExpanded && styles['with-expanded-motion'],
               {
                 [styles['drawer-hidden']]: !show,
-                [styles['last-opened']]: lastOpenedDrawerId === activeDrawerId || isExpanded,
+                [styles['last-opened']]: (!activeAiDrawer && lastOpenedDrawerId === activeDrawerId) || isExpanded,
                 [testutilStyles['active-drawer']]: show,
                 [styles['drawer-expanded']]: isExpanded,
                 [styles['has-next-siblings']]:
diff --git a/src/app-layout/visual-refresh-toolbar/drawer/styles.scss b/src/app-layout/visual-refresh-toolbar/drawer/styles.scss
index 7b6e89d191..3f7eddc4a6 100644
--- a/src/app-layout/visual-refresh-toolbar/drawer/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/drawer/styles.scss
@@ -4,6 +4,7 @@
 */
 @use '../../../internal/styles/tokens' as awsui;
 @use '../../../internal/styles' as styles;
+@use '../../../internal/styles/utils/theming' as theming;
 @use '../../constants.scss' as constants;
 @use '../../../internal/generated/custom-css-properties/index.scss' as custom-props;
 
@@ -47,7 +48,7 @@ $drawer-resize-handle-size: awsui.$space-m;
   }
 
   @include desktop-only {
-    &:not(.legacy) {
+    &:not(.legacy):not(.ai-drawer) {
       border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-layout;
     }
   }
@@ -237,4 +238,157 @@ $drawer-resize-handle-size: awsui.$space-m;
       }
     }
   }
+
+  &.ai-drawer {
+    grid-template-columns: 1fr awsui.$space-xs;
+    background: constants.$ai-drawer-background;
+
+    @include mobile-only {
+      grid-template-columns: 1fr;
+      z-index: constants.$drawer-z-index-mobile;
+    }
+
+    > .drawer-slider {
+      inline-size: awsui.$space-xs;
+      overflow: hidden;
+      grid-column: 2;
+    }
+
+    // to override styles in PanelResizeHandle component
+    // maybe we need to introduce an additional prop in the component to make it more flexible?
+    // stylelint-disable-next-line @cloudscape-design/no-implicit-descendant
+    .ai-drawer-slider-handle {
+      transform: translate(-4px);
+      color: awsui.$color-text-interactive-inverted-default;
+
+      &:hover {
+        stroke: awsui.$color-text-interactive-inverted-hover;
+      }
+    }
+
+    > .drawer-content-container {
+      min-inline-size: calc(var(#{custom-props.$drawerSize}) - #{awsui.$space-xs});
+      grid-column: 1 / span 1;
+      background-color: awsui.$color-background-layout-panel-content;
+
+      @include desktop-only {
+        border-start-end-radius: awsui.$space-xxs;
+      }
+
+      > .drawer-content {
+        > .drawer-content-header {
+          block-size: 41px;
+          position: sticky;
+          z-index: 1000;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          inset-block-start: 0;
+          background-color: awsui.$color-background-layout-panel-content;
+          border-block-end: awsui.$border-divider-section-width solid;
+          border-image: linear-gradient(90deg, #962eff 0%, #5c7fff 30%, #09f 50%, #b8e7ff 70%, #8575ff 100%) 1;
+
+          > .drawer-content-header-content {
+            display: flex;
+            flex: 1;
+            align-items: center;
+            justify-content: space-between;
+            block-size: 100%;
+            padding-inline-start: awsui.$space-l;
+            padding-inline-end: awsui.$space-m;
+
+            @include desktop-only {
+              @include theming.dark-mode-only {
+                &:has(+ .drawer-back-to-console-slot) {
+                  border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-layout;
+                  border-start-end-radius: awsui.$space-xxs;
+                }
+              }
+            }
+
+            > .drawer-actions {
+              display: flex;
+            }
+          }
+
+          > .drawer-back-to-console-slot {
+            position: relative;
+            display: flex;
+            align-items: center;
+            box-sizing: border-box;
+            block-size: 100%;
+            padding-inline: awsui.$space-static-m;
+            background-color: constants.$ai-drawer-background;
+
+            &:before,
+            &:after {
+              content: '';
+              position: absolute;
+              inset-block-start: 0;
+              inset-inline-start: -5px;
+              inline-size: 5px;
+              block-size: 5px;
+              background: constants.$ai-drawer-background;
+
+              @include theming.dark-mode-only {
+                display: none;
+              }
+            }
+
+            &:after {
+              background-color: awsui.$color-background-layout-panel-content;
+              border-start-end-radius: awsui.$space-xxs;
+            }
+
+            > .drawer-back-to-console-button-wrapper {
+              position: relative;
+              &:has(:focus-visible) {
+                @include styles.focus-highlight(3px);
+              }
+
+              > .drawer-back-to-console-button {
+                @include styles.styles-reset;
+                @include styles.text-wrapping;
+                @include styles.font-body-s;
+                border-start-start-radius: awsui.$space-static-xxs;
+                border-start-end-radius: awsui.$space-static-xxs;
+                border-end-start-radius: awsui.$space-static-xxs;
+                border-end-end-radius: awsui.$space-static-xxs;
+                border-width: 0;
+                padding-inline: awsui.$space-static-xs;
+                padding-block: awsui.$space-static-xxs;
+                background: radial-gradient(203.69% 159.19% at 95% -11.67%, #ffbb45 0%, #f90 30%, #fa6f00 60%);
+                color: #ffffff;
+                cursor: pointer;
+
+                &:focus {
+                  // custom outline attached on the wrapping element
+                  outline: none;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &:not(.drawer-expanded) {
+      > .drawer-content-container {
+        @include desktop-only {
+          clip-path: inset(0 0 0 -9999px round awsui.$space-xxs);
+          @include theming.dark-mode-only {
+            border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-layout;
+          }
+        }
+      }
+    }
+
+    &.drawer-expanded {
+      grid-template-columns: 1fr;
+
+      > .drawer-content-container {
+        border-start-end-radius: 0;
+      }
+    }
+  }
 }
diff --git a/src/app-layout/visual-refresh-toolbar/drawer/use-resize.ts b/src/app-layout/visual-refresh-toolbar/drawer/use-resize.ts
index 04fa41012b..ce1dac7ea4 100644
--- a/src/app-layout/visual-refresh-toolbar/drawer/use-resize.ts
+++ b/src/app-layout/visual-refresh-toolbar/drawer/use-resize.ts
@@ -14,9 +14,10 @@ interface ResizeProps {
   panelRef: React.RefObject<HTMLDivElement>;
   handleRef: React.RefObject<HTMLDivElement>;
   onResize: (newWidth: number) => void;
+  position?: 'side-start' | 'side';
 }
 
-export function useResize({ currentWidth, minWidth, maxWidth, panelRef, handleRef, onResize }: ResizeProps) {
+export function useResize({ currentWidth, minWidth, maxWidth, panelRef, handleRef, onResize, position }: ResizeProps) {
   const onResizeHandler = (newWidth: number) => {
     const size = getLimitedValue(minWidth, newWidth, maxWidth);
 
@@ -26,7 +27,7 @@ export function useResize({ currentWidth, minWidth, maxWidth, panelRef, handleRe
   };
 
   const sizeControlProps: SizeControlProps = {
-    position: 'side',
+    position: position ?? 'side',
     panelRef,
     handleRef,
     onResize: onResizeHandler,
diff --git a/src/app-layout/visual-refresh-toolbar/interfaces.ts b/src/app-layout/visual-refresh-toolbar/interfaces.ts
index 287f9f3437..509ba31cfa 100644
--- a/src/app-layout/visual-refresh-toolbar/interfaces.ts
+++ b/src/app-layout/visual-refresh-toolbar/interfaces.ts
@@ -20,7 +20,8 @@ export interface AppLayoutInternalProps extends AppLayoutPropsWithDefaults {
 export type InternalDrawer = AppLayoutProps.Drawer & {
   defaultActive?: boolean;
   isExpandable?: boolean;
-  ariaLabels: AppLayoutProps.Drawer['ariaLabels'] & { expandedModeButton?: string };
+  ariaLabels: AppLayoutProps.Drawer['ariaLabels'] & { expandedModeButton?: string; exitExpandedModeButton?: string };
+  header?: React.ReactNode;
 };
 
 // Widgetization notice: structures in this file are shared multiple app layout instances, possibly different minor versions.
@@ -69,12 +70,22 @@ export interface AppLayoutInternals {
   splitPanelAnimationDisabled?: boolean;
   expandedDrawerId: string | null;
   setExpandedDrawerId: (value: string | null) => void;
+  aiDrawer?: InternalDrawer | null;
+  onActiveAiDrawerChange?: (newDrawerId: string | null, params?: OnChangeParams) => void;
+  activeAiDrawer?: InternalDrawer | null;
+  activeAiDrawerId: string | null;
+  activeAiDrawerSize?: number;
+  minAiDrawerSize?: number;
+  maxAiDrawerSize?: number;
+  aiDrawerFocusControl?: FocusControlState;
+  onActiveAiDrawerResize: (size: number) => void;
 }
 
 interface AppLayoutWidgetizedState extends AppLayoutInternals {
   isNested: boolean;
   verticalOffsets: VerticalLayoutOutput;
   navigationAnimationDisabled: boolean;
+  aiDrawerExpandedMode: boolean;
   splitPanelOffsets: {
     stickyVerticalBottomOffset: number;
     mainContentPaddingBlockEnd: number | undefined;
diff --git a/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss b/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
index 7f8b0f34c9..768d115d49 100644
--- a/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
@@ -5,6 +5,7 @@
 @use 'sass:map' as map;
 @use '../../../internal/styles' as styles;
 @use '../../../internal/styles/tokens' as awsui;
+@use '../../../internal/styles/utils/theming' as theming;
 @use '../../../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use '../../constants' as constants;
 
@@ -24,7 +25,7 @@
   grid-column: 1 / -1;
 
   @include desktop-only {
-    grid-column: 2 / 5;
+    grid-column: 3 / 6;
   }
 }
 
@@ -50,10 +51,11 @@
   // desktop grid
   @include desktop-only {
     grid-template-areas:
-      'toolbar    toolbar      toolbar       toolbar   toolbar         toolbar  toolbar'
-      'navigation .         notifications    .         sideSplitPanel  tools    global-tools'
-      'navigation .             main         .         sideSplitPanel  tools    global-tools';
+      'ai-drawer toolbar    toolbar      toolbar       toolbar   toolbar         toolbar  toolbar'
+      'ai-drawer navigation .         notifications    .         sideSplitPanel  tools    global-tools'
+      'ai-drawer navigation .             main         .         sideSplitPanel  tools    global-tools';
     grid-template-columns:
+      min-content
       min-content
       minmax(#{awsui.$space-layout-content-horizontal}, 1fr)
       minmax(0, var(#{custom-props.$maxContentWidth}))
@@ -82,11 +84,25 @@
         0
         0
         0
+        0
         auto;
+
+      &.ai-drawer-expanded-mode {
+        grid-template-columns:
+          auto
+          0
+          0
+          0
+          0
+          0
+          0
+          0;
+      }
     }
   }
 }
 
+.ai-drawer,
 .navigation,
 .tools,
 .global-tools {
@@ -100,6 +116,13 @@
   }
 }
 
+.ai-drawer {
+  @include desktop-only {
+    grid-area: ai-drawer;
+    position: sticky;
+  }
+}
+
 .navigation {
   z-index: constants.$drawer-z-index;
 
diff --git a/src/app-layout/visual-refresh-toolbar/state/interfaces.ts b/src/app-layout/visual-refresh-toolbar/state/interfaces.ts
index d5f7e51e66..f391d1a6ac 100644
--- a/src/app-layout/visual-refresh-toolbar/state/interfaces.ts
+++ b/src/app-layout/visual-refresh-toolbar/state/interfaces.ts
@@ -28,6 +28,8 @@ export interface SharedProps {
   onSplitPanelToggle?: () => void;
   expandedDrawerId?: string | null;
   setExpandedDrawerId?: (value: string | null) => void;
+  aiDrawer?: AppLayoutProps.Drawer | undefined;
+  aiDrawerFocusRef: React.Ref<Focusable> | undefined;
 }
 
 export type MergeProps = (
diff --git a/src/app-layout/visual-refresh-toolbar/state/props-merger.ts b/src/app-layout/visual-refresh-toolbar/state/props-merger.ts
index 46aca061db..e610066e54 100644
--- a/src/app-layout/visual-refresh-toolbar/state/props-merger.ts
+++ b/src/app-layout/visual-refresh-toolbar/state/props-merger.ts
@@ -37,6 +37,13 @@ export const mergeProps: MergeProps = (ownProps, additionalProps) => {
       toolbar.activeGlobalDrawersIds = props.activeGlobalDrawersIds;
       toolbar.onActiveGlobalDrawersChange = props.onActiveGlobalDrawersChange;
     }
+    if (
+      props.aiDrawer &&
+      props.aiDrawerFocusRef &&
+      !checkAlreadyExists(!!toolbar.aiDrawerFocusRef, 'aiDrawerFocusRef')
+    ) {
+      toolbar.aiDrawerFocusRef = props.aiDrawerFocusRef;
+    }
     if (props.navigation && !checkAlreadyExists(!!toolbar.hasNavigation, 'navigation')) {
       toolbar.hasNavigation = true;
       toolbar.navigationOpen = props.navigationOpen;
@@ -94,5 +101,7 @@ export const getPropsToMerge = (props: AppLayoutInternalProps, appLayoutState: A
     onSplitPanelToggle: state?.onSplitPanelToggle,
     expandedDrawerId: state?.expandedDrawerId,
     setExpandedDrawerId: state?.setExpandedDrawerId,
+    aiDrawer: state?.aiDrawer ?? undefined,
+    aiDrawerFocusRef: state?.aiDrawerFocusControl?.refs?.toggle,
   };
 };
diff --git a/src/app-layout/visual-refresh-toolbar/state/use-app-layout.tsx b/src/app-layout/visual-refresh-toolbar/state/use-app-layout.tsx
index 6db89b9d81..0c636833ee 100644
--- a/src/app-layout/visual-refresh-toolbar/state/use-app-layout.tsx
+++ b/src/app-layout/visual-refresh-toolbar/state/use-app-layout.tsx
@@ -14,6 +14,7 @@ import globalVars from '../../../internal/styles/global-vars';
 import { getSplitPanelDefaultSize } from '../../../split-panel/utils/size-utils';
 import { AppLayoutProps } from '../../interfaces';
 import { SplitPanelProviderProps } from '../../split-panel';
+import { useAiDrawer } from '../../utils/use-ai-drawer';
 import { MIN_DRAWER_SIZE, OnChangeParams, useDrawers } from '../../utils/use-drawers';
 import { useAsyncFocusControl, useMultipleFocusControl } from '../../utils/use-focus-control';
 import { useGlobalScrollPadding } from '../../utils/use-global-scroll-padding';
@@ -142,6 +143,21 @@ export const useAppLayout = (
     toolsWidth,
     onToolsToggle,
   });
+  const {
+    aiDrawer,
+    onActiveAiDrawerChange,
+    activeAiDrawer,
+    activeAiDrawerId,
+    activeAiDrawerSize,
+    minAiDrawerSize,
+    onActiveAiDrawerResize,
+  } = useAiDrawer({
+    isEnabled: hasToolbar,
+    onAiDrawerFocus: () => aiDrawerFocusControl.setFocus(),
+    expandedDrawerId,
+    setExpandedDrawerId,
+  });
+  const aiDrawerFocusControl = useAsyncFocusControl(!!activeAiDrawer?.id, true, activeAiDrawer?.id);
 
   const onActiveDrawerChangeHandler = (
     drawerId: string | null,
@@ -238,6 +254,7 @@ export const useAppLayout = (
     splitPanelPosition,
     maxGlobalDrawersSizes,
     resizableSpaceAvailable,
+    maxAiDrawerSize,
   } = computeHorizontalLayout({
     activeDrawerSize: activeDrawer ? activeDrawerSize : 0,
     splitPanelSize,
@@ -249,6 +266,7 @@ export const useAppLayout = (
     splitPanelPosition: splitPanelPreferences?.position,
     isMobile,
     activeGlobalDrawersSizes,
+    activeAiDrawerSize,
   });
 
   const verticalOffsets = computeVerticalLayout({
@@ -310,6 +328,15 @@ export const useAppLayout = (
     splitPanelAnimationDisabled,
     expandedDrawerId,
     setExpandedDrawerId,
+    aiDrawer,
+    onActiveAiDrawerChange,
+    activeAiDrawer,
+    activeAiDrawerId,
+    activeAiDrawerSize,
+    minAiDrawerSize,
+    maxAiDrawerSize,
+    aiDrawerFocusControl,
+    onActiveAiDrawerResize,
   };
 
   const splitPanelInternals: SplitPanelProviderProps = {
@@ -368,6 +395,9 @@ export const useAppLayout = (
     if (activeDrawer) {
       result += Math.min(activeDrawer?.defaultSize ?? MIN_DRAWER_SIZE, MIN_DRAWER_SIZE);
     }
+    if (activeAiDrawer) {
+      result += Math.min(activeAiDrawer?.defaultSize ?? MIN_DRAWER_SIZE, MIN_DRAWER_SIZE);
+    }
 
     return result;
   };
@@ -436,6 +466,7 @@ export const useAppLayout = (
     splitPanelInternals,
     widgetizedState: {
       ...appLayoutInternals,
+      aiDrawerExpandedMode: expandedDrawerId === activeAiDrawer?.id,
       isNested,
       navigationAnimationDisabled,
       verticalOffsets,
diff --git a/src/app-layout/visual-refresh-toolbar/state/use-skeleton-slots-attributes.ts b/src/app-layout/visual-refresh-toolbar/state/use-skeleton-slots-attributes.ts
index f6797f4d64..4268a9ffab 100644
--- a/src/app-layout/visual-refresh-toolbar/state/use-skeleton-slots-attributes.ts
+++ b/src/app-layout/visual-refresh-toolbar/state/use-skeleton-slots-attributes.ts
@@ -26,12 +26,14 @@ export const useSkeletonSlotsAttributes = (
     splitPanelOffsets,
     activeDrawer,
     expandedDrawerId,
+    activeAiDrawer,
   } = appLayoutState.widgetizedState ?? {};
   const { contentType, placement, maxContentWidth, navigationWidth, minContentWidth, disableContentPaddings } =
     appLayoutProps;
   const isMobile = useMobile();
   const toolsOpen = !!activeDrawer;
   const drawerExpandedMode = !!expandedDrawerId;
+  const aiDrawerExpandedMode = expandedDrawerId === activeAiDrawer?.id;
   const anyPanelOpen = navigationOpen || toolsOpen;
   const isMaxWidth = maxContentWidth === Number.MAX_VALUE || maxContentWidth === Number.MAX_SAFE_INTEGER;
 
@@ -40,6 +42,7 @@ export const useSkeletonSlotsAttributes = (
       [styles['has-adaptive-widths-default']]: !contentTypeCustomWidths.includes(contentType),
       [styles['has-adaptive-widths-dashboard']]: contentType === 'dashboard',
       [styles['drawer-expanded-mode']]: drawerExpandedMode,
+      [styles['ai-drawer-expanded-mode']]: aiDrawerExpandedMode,
     }),
     style: {
       minBlockSize: isNested ? '100%' : `calc(100vh - ${placement.insetBlockStart + placement.insetBlockEnd}px)`,
diff --git a/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx
index 968a74be0f..9250b1ec68 100644
--- a/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx
@@ -1,6 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useRef } from 'react';
+import { Transition } from 'react-transition-group';
 import clsx from 'clsx';
 
 import { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';
@@ -15,6 +16,7 @@ import { BreadcrumbsSlot, ToolbarSlot } from '../skeleton/slots';
 import { DrawerTriggers, SplitPanelToggleProps } from './drawer-triggers';
 import TriggerButton from './trigger-button';
 
+import sharedStyles from '../../resize/styles.css.js';
 import testutilStyles from '../../test-classes/styles.css.js';
 import styles from './styles.css.js';
 
@@ -49,6 +51,11 @@ export interface ToolbarProps {
 
   expandedDrawerId?: string | null;
   setExpandedDrawerId?: (value: string | null) => void;
+
+  aiDrawer?: AppLayoutProps.Drawer;
+  onActiveAiDrawerChange?: (value: string | null) => void;
+  activeAiDrawerId?: string | null;
+  aiDrawerFocusRef?: React.Ref<Focusable>;
 }
 
 export interface AppLayoutToolbarImplementationProps {
@@ -62,7 +69,16 @@ export function AppLayoutToolbarImplementation({
   // not testable in a single-version setup
   toolbarProps = {},
 }: AppLayoutToolbarImplementationProps) {
-  const { breadcrumbs, discoveredBreadcrumbs, verticalOffsets, isMobile, setToolbarHeight } = appLayoutInternals;
+  const {
+    breadcrumbs,
+    discoveredBreadcrumbs,
+    verticalOffsets,
+    isMobile,
+    setToolbarHeight,
+    aiDrawer,
+    activeAiDrawer,
+    onActiveAiDrawerChange,
+  } = appLayoutInternals;
   const {
     ariaLabels,
     activeDrawerId,
@@ -83,9 +99,12 @@ export function AppLayoutToolbarImplementation({
     onSplitPanelToggle,
     expandedDrawerId,
     setExpandedDrawerId,
+    aiDrawerFocusRef,
   } = toolbarProps;
   const drawerExpandedMode = !!expandedDrawerId;
   const ref = useRef<HTMLElement>(null);
+  const aiDrawerTransitionRef = useRef<HTMLDivElement>(null);
+  const activeAiDrawerId = activeAiDrawer?.id;
   useResizeObserver(ref, entry => setToolbarHeight(entry.borderBoxHeight));
   useEffect(() => {
     return () => {
@@ -95,7 +114,12 @@ export function AppLayoutToolbarImplementation({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const anyPanelOpenInMobile = !!isMobile && (!!activeDrawerId || (!!navigationOpen && !!hasNavigation));
+  const anyPanelOpenInMobile =
+    !!isMobile &&
+    (!!activeDrawerId ||
+      !!activeGlobalDrawersIds?.length ||
+      !!activeAiDrawerId ||
+      (!!navigationOpen && !!hasNavigation));
   useEffect(() => {
     if (anyPanelOpenInMobile) {
       document.body.classList.add(styles['block-body-scroll']);
@@ -116,12 +140,53 @@ export function AppLayoutToolbarImplementation({
       ref={ref}
       className={clsx(styles['universal-toolbar'], testutilStyles.toolbar, {
         [testutilStyles['mobile-bar']]: isMobile,
+        [styles['with-open-ai-drawer']]: !!activeAiDrawerId,
       })}
       style={{
         insetBlockStart: verticalOffsets.toolbar,
       }}
     >
-      <div className={styles['toolbar-container']}>
+      <Transition
+        in={!!(aiDrawer?.trigger && !activeAiDrawerId)}
+        timeout={{ enter: 0, exit: 165 }}
+        mountOnEnter={true}
+        unmountOnExit={true}
+        nodeRef={aiDrawerTransitionRef}
+      >
+        {state => (
+          <div
+            className={clsx(!!aiDrawer?.trigger?.customIcon && styles['universal-toolbar-ai-custom'], [
+              sharedStyles['with-motion-horizontal'],
+            ])}
+            style={{
+              opacity: ['entering', 'exiting'].includes(state) ? 0 : 1,
+            }}
+          >
+            <TriggerButton
+              ariaLabel={aiDrawer?.ariaLabels?.triggerButton}
+              ariaExpanded={!!activeAiDrawerId}
+              iconName={aiDrawer?.trigger!.iconName}
+              iconSvg={aiDrawer?.trigger!.iconSvg}
+              customSvg={aiDrawer?.trigger!.customIcon}
+              className={testutilStyles['ai-drawer-toggle']}
+              onClick={() => {
+                if (setExpandedDrawerId) {
+                  setExpandedDrawerId(null);
+                }
+                onActiveAiDrawerChange?.(aiDrawer?.id ?? null, { initiatedByUserAction: true });
+              }}
+              ref={aiDrawerFocusRef}
+              selected={!drawerExpandedMode && !!activeAiDrawerId}
+              disabled={anyPanelOpenInMobile}
+              variant={aiDrawer?.trigger?.customIcon ? 'custom' : 'circle'}
+              hasTooltip={true}
+              testId={`awsui-app-layout-trigger-${aiDrawer?.id}`}
+              isForPreviousActiveDrawer={true}
+            />
+          </div>
+        )}
+      </Transition>
+      <div className={clsx(styles['toolbar-container'], !!aiDrawer?.trigger && styles['with-ai-drawer'])}>
         {hasNavigation && (
           <nav {...navLandmarkAttributes} className={clsx(styles['universal-toolbar-nav'])}>
             <TriggerButton
diff --git a/src/app-layout/visual-refresh-toolbar/toolbar/styles.scss b/src/app-layout/visual-refresh-toolbar/toolbar/styles.scss
index b38c922786..99040234f2 100644
--- a/src/app-layout/visual-refresh-toolbar/toolbar/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/toolbar/styles.scss
@@ -5,49 +5,146 @@
 
 @use '../../../internal/styles' as styles;
 @use '../../../internal/styles/tokens' as awsui;
+@use '../../../internal/styles/utils/theming' as theming;
 @use '../../../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use '../../constants.scss' as constants;
 
+$toolbar-height: 42px;
+
 .universal-toolbar {
   background-color: awsui.$color-background-layout-panel-content;
   box-sizing: border-box;
-  padding-block: 0;
-  padding-inline: awsui.$space-m;
-  //right padding set in child trigger-container below for focus indicator to show correctly
-  padding-inline-end: 0;
   position: sticky;
   z-index: constants.$toolbar-z-index;
+  display: flex;
   @include styles.with-motion {
     transition: ease awsui.$motion-duration-refresh-only-slow;
     transition-property: inset-block-start, opacity;
   }
 
+  &.with-open-ai-drawer {
+    &:before,
+    &:after {
+      content: '';
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      inline-size: 5px;
+      block-size: 5px;
+      background: constants.$ai-drawer-background;
+
+      /**
+       * Adds a border to visually separate the main content area from the left global drawer.
+       *
+       * Note: Direct border application is not possible for either target element:
+       * - Main content area: Uses `display: contents`, preventing border application
+       * - Nav panel: May be hidden, causing the border to disappear when separation is still needed
+      */
+      @include theming.dark-mode-only {
+        content: '';
+        position: absolute;
+        inset-block-start: $toolbar-height;
+        inset-inline-start: 0;
+        inline-size: awsui.$border-divider-section-width;
+        block-size: calc(100vh - #{$toolbar-height});
+        background: awsui.$color-border-layout;
+      }
+    }
+
+    &:after {
+      background-color: awsui.$color-background-layout-panel-content;
+      border-start-start-radius: awsui.$space-xxs;
+
+      @include theming.dark-mode-only {
+        display: none;
+      }
+    }
+  }
+
   &.disable-body-scroll {
     inset-block-start: 0px;
   }
 
+  > .universal-toolbar-ai-custom {
+    grid-column: 1;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-self: flex-start;
+    padding-inline: awsui.$space-static-s;
+    box-sizing: border-box;
+
+    /**
+     * Button sizing adjustments for theme-specific design requirements
+     *
+     * Light mode: Button width is set to 100% + border width to intentionally overlap
+     * with the bottom border, as specified in the UI design.
+     *
+     * Dark mode: Resets the overlap styling due to different design requirements
+     * where overlap should not occur.
+     */
+    block-size: calc(100% + #{awsui.$border-divider-section-width});
+    background: constants.$ai-drawer-background;
+
+    @include theming.dark-mode-only {
+      block-size: 100%;
+    }
+
+    &:before,
+    &:after {
+      content: '';
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: -5px;
+      inline-size: 5px;
+      block-size: 5px;
+      background: constants.$ai-drawer-background;
+
+      @include theming.dark-mode-only {
+        display: none;
+      }
+    }
+
+    &:after {
+      background-color: awsui.$color-background-layout-panel-content;
+      border-start-start-radius: awsui.$space-xxs;
+    }
+  }
+
   > .toolbar-container {
     block-size: 100%;
     align-items: center;
     display: grid;
-    column-gap: awsui.$space-static-xs;
     inline-size: 100%;
-    grid-template-columns: min-content minmax(0, 3fr) minmax(auto, 1fr);
+    grid-template-columns: min-content min-content minmax(0, 3fr) minmax(auto, 1fr);
     grid-template-rows: 1fr;
 
+    &.with-ai-drawer {
+      @include theming.dark-mode-only {
+        border-start-start-radius: awsui.$space-xxs;
+        border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-layout;
+      }
+    }
+
     > .universal-toolbar-nav {
-      grid-column: 1;
+      grid-column: 2;
+      padding-inline-start: awsui.$space-m;
       padding-inline-end: awsui.$space-static-xxs;
     }
 
     > .universal-toolbar-breadcrumbs {
-      grid-column: 2;
+      grid-column: 3;
+      padding-inline: awsui.$space-static-xs;
       background-color: transparent;
       flex: 1 0;
+      &:first-child {
+        padding-inline: calc(#{awsui.$space-static-xs} + #{awsui.$space-static-m});
+      }
     }
 
     > .universal-toolbar-drawers {
-      grid-column: 3;
+      grid-column: 4;
       column-gap: awsui.$space-static-xs;
       display: flex;
       justify-content: flex-end;
@@ -60,9 +157,7 @@
 .drawers-mobile-triggers-container {
   @include styles.styles-reset;
   background-color: transparent;
-  padding-inline: 0;
-  //matches the left padding of .universal-toolbar but allows for focus indicator to show correctly
-  padding-inline-end: awsui.$space-m;
+  padding-inline: awsui.$space-m;
   box-sizing: border-box;
   overflow-y: hidden;
   overflow-x: hidden;
diff --git a/src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.tsx b/src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.tsx
index 0f26da41f5..3ba6904a20 100644
--- a/src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.tsx
@@ -22,6 +22,7 @@ export interface TriggerButtonProps {
   className?: string;
   iconName?: IconProps.Name;
   iconSvg?: React.ReactNode;
+  customSvg?: React.ReactNode;
   ariaExpanded: boolean | undefined;
   ariaControls?: string;
   disabled?: boolean;
@@ -65,6 +66,7 @@ export interface TriggerButtonProps {
    */
   isForSplitPanel?: boolean;
   tabIndex?: number | undefined;
+  variant?: 'circle' | 'custom';
 }
 
 function TriggerButton(
@@ -73,6 +75,7 @@ function TriggerButton(
     className,
     iconName,
     iconSvg,
+    customSvg,
     ariaExpanded,
     ariaControls,
     onClick,
@@ -86,6 +89,7 @@ function TriggerButton(
     isMobile = false,
     isForPreviousActiveDrawer = false,
     isForSplitPanel = false,
+    variant = 'circle',
   }: TriggerButtonProps,
   ref: React.Ref<ButtonProps.Ref>
 ) {
@@ -217,6 +221,7 @@ function TriggerButton(
         disabled={disabled}
         className={clsx(
           styles.trigger,
+          styles[variant],
           {
             [styles.selected]: selected,
             [styles['trigger-with-badge']]: badge,
@@ -231,7 +236,7 @@ function TriggerButton(
         data-shift-focus="awsui-layout-drawer-trigger"
         {...getAnalyticsMetadataAttribute(triggerEventMetadata)}
       >
-        {(iconName || iconSvg) && <Icon name={iconName} svg={iconSvg} />}
+        {customSvg ?? ((iconName || iconSvg) && <Icon name={iconName} svg={iconSvg} />)}
       </button>
       {badge && <div className={styles.dot} />}
       {tooltipVisible && (
diff --git a/src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.scss b/src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.scss
index c11d6d7674..c238daa4e0 100644
--- a/src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.scss
@@ -13,14 +13,15 @@
 
   cursor: pointer;
   color: awsui.$color-text-interactive-default;
-  border-start-start-radius: 50%;
-  border-start-end-radius: 50%;
-  border-end-start-radius: 50%;
-  border-end-end-radius: 50%;
-  block-size: 30px;
-  inline-size: 30px;
   text-align: center;
 
+  &.custom {
+    display: flex;
+    block-size: 100%;
+    inline-size: 100%;
+    box-sizing: border-box;
+  }
+
   &-with-badge {
     clip-path: path(
       'M29.2862 10.4145C28.7243 10.5998 28.1238 10.7 27.4999 10.7C24.3519 10.7 21.7999 8.14803 21.7999 5C21.7999 3.92883 22.0954 2.92667 22.6093 2.07057C20.3785 0.754846 17.7774 0 15 0C6.71573 0 0 6.71573 0 15C0 23.2843 6.71573 30 15 30C23.2843 30 30 23.2843 30 15C30 13.4007 29.7497 11.8599 29.2862 10.4145Z'
@@ -33,30 +34,39 @@
     }
   }
 
-  &:hover {
-    background: awsui.$color-background-input-disabled;
-    color: awsui.$color-text-interactive-hover;
-  }
-
-  &:active {
-    background: awsui.$color-background-control-disabled;
-    color: awsui.$color-text-interactive-hover;
-  }
-
   &:focus {
     // custom outline attached on the wrapping element
     outline: none;
   }
 
-  &.selected {
-    background: awsui.$color-background-layout-toggle-selected-default;
-    color: awsui.$color-text-layout-toggle-selected;
+  &.circle {
+    border-start-start-radius: 50%;
+    border-start-end-radius: 50%;
+    border-end-start-radius: 50%;
+    border-end-end-radius: 50%;
+    block-size: 30px;
+    inline-size: 30px;
 
     &:hover {
-      background: awsui.$color-background-layout-toggle-selected-hover;
+      background: awsui.$color-background-input-disabled;
+      color: awsui.$color-text-interactive-hover;
     }
+
     &:active {
-      background: awsui.$color-background-layout-toggle-selected-active;
+      background: awsui.$color-background-control-disabled;
+      color: awsui.$color-text-interactive-hover;
+    }
+
+    &.selected {
+      background: awsui.$color-background-layout-toggle-selected-default;
+      color: awsui.$color-text-layout-toggle-selected;
+
+      &:hover {
+        background: awsui.$color-background-layout-toggle-selected-hover;
+      }
+      &:active {
+        background: awsui.$color-background-layout-toggle-selected-active;
+      }
     }
   }
 }
diff --git a/src/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.tsx b/src/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.tsx
index 901d56445d..d5ee652a7e 100644
--- a/src/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.tsx
+++ b/src/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.tsx
@@ -1,9 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useRef } from 'react';
 import clsx from 'clsx';
 
 import { createWidgetizedComponent } from '../../../internal/widgets';
+import { ActiveDrawersContext } from '../../utils/visibility-context';
+import { AppLayoutGlobalAiDrawerImplementation } from '../drawer/global-ai-drawer';
 import { AppLayoutNavigationImplementation as AppLayoutNavigation } from '../navigation';
 import { SkeletonPartProps } from '../skeleton/interfaces';
 import { BeforeMainSlotSkeleton } from '../skeleton/skeleton-parts';
@@ -14,6 +16,7 @@ import sharedStyles from '../../resize/styles.css.js';
 import styles from '../skeleton/styles.css.js';
 
 export const BeforeMainSlotImplementation = ({ toolbarProps, appLayoutState, appLayoutProps }: SkeletonPartProps) => {
+  const wasAiDrawerOpenRef = useRef(false);
   if (!isWidgetReady(appLayoutState)) {
     return (
       <BeforeMainSlotSkeleton
@@ -23,8 +26,27 @@ export const BeforeMainSlotImplementation = ({ toolbarProps, appLayoutState, app
       />
     );
   }
-  const { activeDrawer, navigationOpen, navigation, expandedDrawerId, navigationAnimationDisabled } =
-    appLayoutState.widgetizedState;
+  const {
+    activeDrawer,
+    navigationOpen,
+    navigation,
+    expandedDrawerId,
+    setExpandedDrawerId,
+    navigationAnimationDisabled,
+    activeAiDrawerId,
+    aiDrawerExpandedMode,
+    aiDrawer,
+    activeAiDrawerSize,
+    minAiDrawerSize,
+    maxAiDrawerSize,
+    onActiveAiDrawerResize,
+    aiDrawerFocusControl,
+    ariaLabels,
+    isMobile,
+    drawersOpenQueue,
+    onActiveAiDrawerChange,
+    activeAiDrawer,
+  } = appLayoutState.widgetizedState;
   const drawerExpandedMode = !!expandedDrawerId;
   const toolsOpen = !!activeDrawer;
   // Must use `toolbarProps` because all layouts have to apply this mode, not just the one with toolbar
@@ -32,9 +54,44 @@ export const BeforeMainSlotImplementation = ({ toolbarProps, appLayoutState, app
   const { __embeddedViewMode: embeddedViewMode } = appLayoutProps as any;
   return (
     <>
-      {!!toolbarProps && !embeddedViewMode && (
+      {!!toolbarProps && !embeddedViewMode && !aiDrawerExpandedMode && (
         <AppLayoutToolbar appLayoutInternals={appLayoutState.appLayoutInternals} toolbarProps={toolbarProps} />
       )}
+      {aiDrawer && (
+        <div
+          className={clsx(
+            styles['ai-drawer'],
+            (drawerExpandedMode || drawerExpandedModeInChildLayout) && !aiDrawerExpandedMode && styles.hidden
+          )}
+        >
+          <ActiveDrawersContext.Provider value={activeAiDrawer ? [activeAiDrawer.id] : []}>
+            {(!!activeAiDrawerId || (aiDrawer?.preserveInactiveContent && wasAiDrawerOpenRef.current)) && (
+              <>
+                {(wasAiDrawerOpenRef.current = true)}
+                <AppLayoutGlobalAiDrawerImplementation
+                  show={!!activeAiDrawerId}
+                  activeAiDrawer={aiDrawer ?? null}
+                  appLayoutInternals={appLayoutState.appLayoutInternals}
+                  aiDrawerProps={{
+                    activeAiDrawerSize: activeAiDrawerSize!,
+                    minAiDrawerSize: minAiDrawerSize!,
+                    maxAiDrawerSize: maxAiDrawerSize!,
+                    aiDrawer: aiDrawer!,
+                    ariaLabels,
+                    aiDrawerFocusControl,
+                    isMobile,
+                    drawersOpenQueue,
+                    onActiveAiDrawerChange,
+                    onActiveDrawerResize: ({ size }) => onActiveAiDrawerResize(size),
+                    expandedDrawerId,
+                    setExpandedDrawerId,
+                  }}
+                />
+              </>
+            )}
+          </ActiveDrawersContext.Provider>
+        </div>
+      )}
       {navigation && (
         <div
           className={clsx(
diff --git a/src/internal/components/panel-resize-handle/index.tsx b/src/internal/components/panel-resize-handle/index.tsx
index 9b8cb756cc..925ba05c33 100644
--- a/src/internal/components/panel-resize-handle/index.tsx
+++ b/src/internal/components/panel-resize-handle/index.tsx
@@ -11,15 +11,16 @@ interface ResizeHandleProps {
   className?: string;
   ariaLabel: string | undefined;
   tooltipText?: string | undefined;
-  position: 'side' | 'bottom';
+  position: 'side-start' | 'side' | 'bottom';
   ariaValuenow: number;
   onDirectionClick: DragHandleProps['onDirectionClick'];
   onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
   onPointerDown: (event: React.PointerEvent<HTMLElement>) => void;
+  disabled?: boolean;
 }
 
 export default React.forwardRef<HTMLDivElement, ResizeHandleProps>(function PanelResizeHandle(
-  { className, ariaLabel, tooltipText, ariaValuenow, position, onDirectionClick, onKeyDown, onPointerDown },
+  { className, ariaLabel, tooltipText, ariaValuenow, position, onDirectionClick, onKeyDown, onPointerDown, disabled },
   ref
 ) {
   return (
@@ -27,18 +28,28 @@ export default React.forwardRef<HTMLDivElement, ResizeHandleProps>(function Pane
       className={clsx(className, styles.slider, styles[`slider-${position}`])}
       ariaLabel={ariaLabel}
       tooltipText={tooltipText}
-      ariaValue={{ valueMin: 0, valueMax: 100, valueNow: ariaValuenow }}
-      variant={position === 'side' ? 'resize-horizontal' : 'resize-vertical'}
+      ariaValue={{ valueMin: 0, valueMax: 100, valueNow: ariaValuenow ?? 0 }}
+      variant={['side', 'side-start'].includes(position) ? 'resize-horizontal' : 'resize-vertical'}
       directions={
-        position === 'side'
+        disabled
           ? {
-              'inline-end': ariaValuenow === 0 ? 'disabled' : 'active',
-              'inline-start': ariaValuenow === 100 ? 'disabled' : 'active',
-            }
-          : {
-              'block-end': ariaValuenow === 0 ? 'disabled' : 'active',
-              'block-start': ariaValuenow === 100 ? 'disabled' : 'active',
+              'inline-start': 'disabled',
+              'inline-end': 'disabled',
             }
+          : position === 'side'
+            ? {
+                'inline-end': ariaValuenow === 0 ? 'disabled' : 'active',
+                'inline-start': ariaValuenow === 100 ? 'disabled' : 'active',
+              }
+            : position === 'side-start'
+              ? {
+                  'inline-end': ariaValuenow === 100 ? 'disabled' : 'active',
+                  'inline-start': ariaValuenow === 0 ? 'disabled' : 'active',
+                }
+              : {
+                  'block-end': ariaValuenow === 0 ? 'disabled' : 'active',
+                  'block-start': ariaValuenow === 100 ? 'disabled' : 'active',
+                }
       }
       onDirectionClick={onDirectionClick}
       onKeyDown={onKeyDown}
diff --git a/src/internal/components/panel-resize-handle/styles.scss b/src/internal/components/panel-resize-handle/styles.scss
index e4ebbdbef3..eac234f82f 100644
--- a/src/internal/components/panel-resize-handle/styles.scss
+++ b/src/internal/components/panel-resize-handle/styles.scss
@@ -27,7 +27,8 @@
   }
 }
 
-.slider-side {
+.slider-side,
+.slider-side-start {
   cursor: ew-resize;
   margin-block: 0;
   margin-inline-end: 0;
diff --git a/src/internal/plugins/widget.ts b/src/internal/plugins/widget.ts
new file mode 100644
index 0000000000..a5456b944d
--- /dev/null
+++ b/src/internal/plugins/widget.ts
@@ -0,0 +1,4 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export * from './widget/interfaces';
+export { registerLeftDrawer, updateDrawer, isAppLayoutReady } from './widget/internal';
diff --git a/src/internal/plugins/widget/interfaces.ts b/src/internal/plugins/widget/interfaces.ts
new file mode 100644
index 0000000000..3c3f00fc1b
--- /dev/null
+++ b/src/internal/plugins/widget/interfaces.ts
@@ -0,0 +1,64 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { NonCancelableEventHandler } from '../../events';
+
+interface Message<Type, Payload> {
+  type: Type;
+  payload: Payload;
+}
+
+type DrawerVisibilityChange = (callback: (isVisible: boolean) => void) => void;
+
+interface MountContentContext {
+  onVisibilityChange: DrawerVisibilityChange;
+}
+
+interface DrawerStateChangeParams {
+  isOpen: boolean;
+  initiatedByUserAction?: boolean;
+}
+
+export interface DrawerPayload {
+  id: string;
+  ariaLabels: {
+    content?: string;
+    closeButton?: string;
+    triggerButton?: string;
+    resizeHandle?: string;
+    resizeHandleTooltipText?: string;
+    expandedModeButton?: string;
+    exitExpandedModeButton?: string;
+  };
+  isExpandable?: boolean;
+  resizable?: boolean;
+  defaultSize?: number;
+  onResize?: NonCancelableEventHandler<{ size: number; id: string }>;
+  defaultActive?: boolean;
+  trigger?: {
+    iconSvg?: string;
+    customIcon?: string;
+  };
+  mountContent: (container: HTMLElement, mountContext: MountContentContext) => void;
+  unmountContent: (container: HTMLElement) => void;
+  preserveInactiveContent?: boolean;
+  onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;
+  mountHeader?: (container: HTMLElement) => void;
+  unmountHeader?: (container: HTMLElement) => void;
+}
+
+export type RegisterDrawerMessage = Message<'registerLeftDrawer', DrawerPayload>;
+export type UpdateDrawerConfigMessage = Message<
+  'updateDrawerConfig',
+  Omit<DrawerPayload, 'mountContent' | 'unmountContent' | 'mountHeader' | 'unmountHeader'>
+>;
+export type OpenDrawerMessage = Message<'openDrawer', { id: string }>;
+export type CloseDrawerMessage = Message<'closeDrawer', { id: string }>;
+export type ResizeDrawerMessage = Message<'resizeDrawer', { id: string; size: number }>;
+
+export type AppLayoutUpdateMessage =
+  | UpdateDrawerConfigMessage
+  | OpenDrawerMessage
+  | CloseDrawerMessage
+  | ResizeDrawerMessage;
+
+export type AppLayoutMessage = RegisterDrawerMessage | AppLayoutUpdateMessage;
diff --git a/src/internal/plugins/widget/internal.ts b/src/internal/plugins/widget/internal.ts
new file mode 100644
index 0000000000..77efb3746b
--- /dev/null
+++ b/src/internal/plugins/widget/internal.ts
@@ -0,0 +1,70 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { reportRuntimeApiWarning } from '../helpers/metrics';
+import { AppLayoutMessage, AppLayoutUpdateMessage, DrawerPayload, RegisterDrawerMessage } from './interfaces';
+
+const storageKeyMessageHandler = Symbol.for('awsui-widget-api-message-handler');
+const storageKeyInitialMessages = Symbol.for('awsui-widget-api-initial-messages');
+
+interface WindowWithApi extends Window {
+  [storageKeyMessageHandler]: AppLayoutHandler | undefined;
+  [storageKeyInitialMessages]: Array<RegisterDrawerMessage> | undefined;
+}
+
+type AppLayoutHandler = (event: AppLayoutMessage) => void;
+
+function getWindow() {
+  return window as Window as WindowWithApi;
+}
+
+function getAppLayoutMessageHandler() {
+  const win = getWindow();
+  return win[storageKeyMessageHandler];
+}
+
+export function getAppLayoutInitialState() {
+  return getWindow()[storageKeyInitialMessages];
+}
+
+export function registerAppLayoutHandler(handler: AppLayoutHandler) {
+  const win = getWindow();
+  if (win[storageKeyMessageHandler]) {
+    reportRuntimeApiWarning('AppLayoutWidget', 'Double registration attempt, the old handler will be overridden');
+  }
+  win[storageKeyMessageHandler] = handler;
+  return () => {
+    win[storageKeyMessageHandler] = undefined;
+  };
+}
+
+export function clearInitialMessages() {
+  getWindow()[storageKeyInitialMessages] = undefined;
+}
+
+/**
+ * Returns whether there is an app layout present on this page or not
+ */
+export function isAppLayoutReady() {
+  return !!getAppLayoutMessageHandler();
+}
+
+/**
+ * Registers a new runtime drawer to app layout
+ * @param drawer
+ */
+export function registerLeftDrawer(drawer: DrawerPayload) {
+  const win = getWindow();
+  const message: RegisterDrawerMessage = { type: 'registerLeftDrawer', payload: drawer };
+  win[storageKeyInitialMessages] = win[storageKeyInitialMessages] ?? [];
+  win[storageKeyInitialMessages].push(message);
+  getAppLayoutMessageHandler()?.(message);
+}
+
+/**
+ * Interact with already registered app layout drawers
+ * @param message
+ */
+export function updateDrawer(message: AppLayoutUpdateMessage) {
+  getAppLayoutMessageHandler()?.(message);
+}
diff --git a/src/internal/types.ts b/src/internal/types.ts
index b5c9f7d0c1..3fcc499e59 100644
--- a/src/internal/types.ts
+++ b/src/internal/types.ts
@@ -36,3 +36,12 @@ export type SomeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>
  * ```
  */
 export type Optional<Type> = Type | undefined;
+
+/**
+ * Use this function to mark conditions which should never be visited
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function assertNever(_value: never) {
+  /* istanbul ignore next: this code is not intended to be visited */
+  return null;
+}
diff --git a/src/s3-resource-selector/s3-modal/index.tsx b/src/s3-resource-selector/s3-modal/index.tsx
index 646531253e..0cad336f54 100644
--- a/src/s3-resource-selector/s3-modal/index.tsx
+++ b/src/s3-resource-selector/s3-modal/index.tsx
@@ -8,6 +8,7 @@ import { useInternalI18n } from '../../i18n/context';
 import { ForwardFocusRef } from '../../internal/hooks/forward-focus';
 import { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update';
 import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
+import { assertNever } from '../../internal/types';
 import InternalModal from '../../modal/internal';
 import InternalSpaceBetween from '../../space-between/internal';
 import { S3ResourceSelectorProps } from '../interfaces';
@@ -38,11 +39,6 @@ export interface S3ModalProps {
   onSubmit: (resource: S3ResourceSelectorProps.Resource) => void;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function assertNever(_value: never) {
-  return null;
-}
-
 interface S3BrowseState {
   selectedItem: string | null;
   currentView: 'buckets' | 'objects' | 'versions';