diff --git a/package-lock.json b/package-lock.json
index 216dbcb54d..eb2634966f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,11 @@
       "name": "@cloudscape-design/components",
       "version": "3.0.0",
       "dependencies": {
+        "@cloudscape-design/chat-components": "^1.0.0",
+        "@cloudscape-design/code-view": "^3.0.0",
         "@cloudscape-design/collection-hooks": "^1.0.0",
         "@cloudscape-design/component-toolkit": "^1.0.0-beta",
+        "@cloudscape-design/design-tokens": "^3.0.0",
         "@cloudscape-design/test-utils-core": "^1.0.0",
         "@cloudscape-design/theming-runtime": "^1.0.0",
         "@dnd-kit/core": "^6.0.8",
@@ -4622,6 +4625,15 @@
       "version": "1.42.0",
       "license": "BSD-3-Clause"
     },
+    "node_modules/ace-code": {
+      "version": "1.43.2",
+      "resolved": "https://amazon-149122183214.d.codeartifact.us-west-2.amazonaws.com/npm/shared/ace-code/-/ace-code-1.43.2.tgz",
+      "integrity": "sha512-GJnT2CjEJ45Hu4ydAmaRXDRtaujcZTAA0rWW6m2sSpcdGRquaIxLcZwQq/xJ35Mz9gD0+wZbj9jZB0wJPAZJDw==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "dev": true,
diff --git a/package.json b/package.json
index 2e75b7eebb..614cfc260a 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,9 @@
     "@cloudscape-design/component-toolkit": "^1.0.0-beta",
     "@cloudscape-design/test-utils-core": "^1.0.0",
     "@cloudscape-design/theming-runtime": "^1.0.0",
+    "@cloudscape-design/chat-components": "^1.0.0",
+    "@cloudscape-design/code-view": "^3.0.0",
+    "@cloudscape-design/design-tokens": "^3.0.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
@@ -167,7 +170,7 @@
     {
       "path": "lib/components/internal/widget-exports.js",
       "brotli": false,
-      "limit": "800 kB",
+      "limit": "801 kB",
       "ignore": "react-dom"
     }
   ],
diff --git a/pages/app-layout/chat/additional-info/dialog.tsx b/pages/app-layout/chat/additional-info/dialog.tsx
new file mode 100644
index 0000000000..a827d2ca2b
--- /dev/null
+++ b/pages/app-layout/chat/additional-info/dialog.tsx
@@ -0,0 +1,55 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Button from '~components/button';
+
+import '../dialog.scss';
+
+const Dialog = React.forwardRef(
+  (
+    {
+      children,
+      footer,
+      onDismiss,
+      ariaLabel,
+    }: {
+      children: React.ReactNode;
+      footer: React.ReactNode;
+      onDismiss: () => void;
+      ariaLabel: string;
+    },
+    ref: React.Ref<HTMLDivElement>
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className="dialog"
+        role="dialog"
+        aria-label={ariaLabel}
+        aria-modal="false" // Maintains natural focus flow since it's an inline dialog
+        tabIndex={-1} // This allows the dialog to receive focus
+      >
+        <div className="content">
+          <div className="dismiss">
+            <Button
+              iconName="close"
+              variant="icon"
+              onClick={onDismiss}
+              ariaLabel="Close dialog"
+              data-testid="dialog-dismiss-button"
+            />
+          </div>
+
+          <div className="inner-content">{children}</div>
+        </div>
+
+        <div className="footer">{footer}</div>
+      </div>
+    );
+  }
+);
+
+Dialog.displayName = 'Dialog';
+
+export default Dialog;
diff --git a/pages/app-layout/chat/additional-info/feedback-dialog.tsx b/pages/app-layout/chat/additional-info/feedback-dialog.tsx
new file mode 100644
index 0000000000..e8beded947
--- /dev/null
+++ b/pages/app-layout/chat/additional-info/feedback-dialog.tsx
@@ -0,0 +1,125 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useRef } from 'react';
+
+import Box from '~components/box';
+import Button from '~components/button';
+import Checkbox from '~components/checkbox';
+import Form from '~components/form';
+import FormField from '~components/form-field';
+import SpaceBetween from '~components/space-between';
+import Textarea from '~components/textarea';
+
+import Dialog from './dialog';
+
+export default function FeedbackDialog({ onDismiss, onSubmit }: { onDismiss: () => void; onSubmit: () => void }) {
+  const [feedbackOptions, setFeedbackOptions] = React.useState({
+    harmful: false,
+    incomplete: false,
+    inaccurate: false,
+    other: false,
+  });
+  const [feedbackText, setFeedbackText] = React.useState('');
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    // Store the element that had focus before dialog opened
+    triggerRef.current = document.activeElement as HTMLElement;
+
+    // Focus the dialog container when it opens
+    dialogRef.current?.focus();
+
+    // Cleanup: Return focus to the trigger element when dialog closes
+    return () => {
+      triggerRef.current?.focus();
+    };
+  }, [dialogRef]);
+
+  const selectOption = (option: string, checked: boolean) =>
+    setFeedbackOptions({ ...feedbackOptions, [option]: checked });
+
+  const isFeedbackOptionSelected = Object.values(feedbackOptions).some(val => !!val);
+  const isSubmittable = isFeedbackOptionSelected || feedbackText.length > 0;
+
+  const submitFeedback = () => {
+    if (!isSubmittable) {
+      return;
+    }
+
+    onSubmit();
+  };
+
+  return (
+    <Dialog
+      ariaLabel="Feedback dialog"
+      ref={dialogRef}
+      onDismiss={onDismiss}
+      footer={
+        <div style={{ display: 'flex', flexDirection: 'row-reverse', gap: '4px' }}>
+          <Button
+            data-testid="feedback-submit-button"
+            onClick={submitFeedback}
+            ariaLabel="Submit form"
+            disabled={!isSubmittable}
+          >
+            Submit
+          </Button>
+
+          <Button variant="link" onClick={onDismiss} ariaLabel="Close dialog" data-testid="feedback-close-button">
+            Close
+          </Button>
+        </div>
+      }
+    >
+      <Form
+        header={
+          <Box variant="h4">
+            Tell us more - <i>optional</i>
+          </Box>
+        }
+      >
+        <SpaceBetween direction="vertical" size="l">
+          <FormField label="What did you dislike about the response?">
+            <SpaceBetween size="l" direction="horizontal">
+              <Checkbox
+                data-testid="feedback-checkbox-harmful"
+                checked={feedbackOptions.harmful}
+                onChange={({ detail }) => selectOption('harmful', detail.checked)}
+              >
+                Harmful
+              </Checkbox>
+              <Checkbox
+                checked={feedbackOptions.incomplete}
+                onChange={({ detail }) => selectOption('incomplete', detail.checked)}
+              >
+                Incomplete
+              </Checkbox>
+              <Checkbox
+                checked={feedbackOptions.inaccurate}
+                onChange={({ detail }) => selectOption('inaccurate', detail.checked)}
+              >
+                Inaccurate
+              </Checkbox>
+              <Checkbox
+                checked={feedbackOptions.other}
+                onChange={({ detail }) => selectOption('other', detail.checked)}
+              >
+                Other
+              </Checkbox>
+            </SpaceBetween>
+          </FormField>
+
+          <FormField label="Additional notes" stretch={true}>
+            <Textarea
+              rows={3}
+              onChange={({ detail }) => setFeedbackText(detail.value)}
+              value={feedbackText}
+              placeholder={'Additional feedback'}
+            />
+          </FormField>
+        </SpaceBetween>
+      </Form>
+    </Dialog>
+  );
+}
diff --git a/pages/app-layout/chat/chat.scss b/pages/app-layout/chat/chat.scss
new file mode 100644
index 0000000000..bdc31b82c4
--- /dev/null
+++ b/pages/app-layout/chat/chat.scss
@@ -0,0 +1,58 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: MIT-0
+
+@use '~design-tokens' as cs;
+
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  gap: cs.$space-static-l;
+
+  min-block-size: 100%;
+
+  &:not(.classic) {
+    @media only screen and (min-width: 688px) and (max-width: 1280px) {
+      padding-inline: 60px;
+    }
+  }
+
+  &.classic {
+    inline-size: 100%;
+    block-size: 1000px;
+  }
+}
+
+.chat-internal-container {
+  border-radius: 0 !important;
+  border: none !important;
+  margin-inline-end: 16px;
+}
+
+.messages {
+  display: flex;
+  flex-direction: column;
+  gap: cs.$space-scaled-xs;
+
+  padding-block-start: cs.$space-scaled-xxs;
+  padding-block-end: cs.$space-container-horizontal;
+  padding-inline: cs.$space-container-horizontal;
+}
+
+.access-denied-alert-wrapper {
+  display: flex;
+  gap: cs.$space-scaled-s;
+
+  &__box {
+    flex: 1;
+    overflow-x: auto;
+    padding-inline: cs.$space-scaled-m;
+    padding-block: cs.$space-scaled-s;
+    border: 2px solid cs.$color-border-input-default;
+    border-radius: cs.$border-radius-input;
+    background: cs.$color-background-input-default;
+  }
+}
+
+.other-content-vertically-align {
+  margin-inline-start: 36px;
+}
diff --git a/pages/app-layout/chat/chat.tsx b/pages/app-layout/chat/chat.tsx
new file mode 100644
index 0000000000..0b4fdd5b61
--- /dev/null
+++ b/pages/app-layout/chat/chat.tsx
@@ -0,0 +1,246 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useRef, useState } from 'react';
+
+import { SupportPromptGroupProps } from '@cloudscape-design/chat-components/support-prompt-group';
+
+import Box from '~components/box';
+import Container from '~components/container';
+import FileDropzone, { useFilesDragging } from '~components/file-dropzone';
+import FileInput from '~components/file-input';
+import FileTokenGroup from '~components/file-token-group';
+import Header from '~components/header';
+import Icon from '~components/icon';
+import Link from '~components/link';
+import PromptInput from '~components/prompt-input';
+import SpaceBetween from '~components/space-between';
+
+import { ScrollableContainer } from './common-components';
+import {
+  fileTokenGroupI18nStrings,
+  getInitialMessages,
+  getInvalidPromptResponse,
+  getLoadingMessage,
+  Message,
+  supportPromptItems,
+  supportPromptMessageOne,
+  supportPromptMessageTwo,
+  VALID_PROMPTS,
+  validLoadingPrompts,
+} from './config';
+import Messages from './messages';
+
+import styles from './chat.scss';
+
+export default function Chat() {
+  const waitTimeBeforeLoading = 300;
+  // The loading state will be shown for 4 seconds for loading prompt and 1.5 seconds for rest of the prompts
+  const waitTimeBeforeResponse = (isLoadingPrompt: boolean = false) => (isLoadingPrompt ? 4000 : 1500);
+
+  const [prompt, setPrompt] = useState('');
+  const [isGenAiResponseLoading, setIsGenAiResponseLoading] = useState(false);
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
+
+  const [files, setFiles] = useState<File[]>([]);
+  const promptInputRef = useRef<HTMLTextAreaElement>(null);
+  const [messages, setMessages] = useState<Message[]>([]);
+
+  const { areFilesDragging } = useFilesDragging();
+
+  const onSupportPromptClick = (detail: SupportPromptGroupProps.ItemClickDetail) => {
+    let newMessage: Message;
+
+    if (detail.id === 'typescript') {
+      newMessage = supportPromptMessageOne;
+    }
+
+    if (detail.id === 'expand') {
+      newMessage = supportPromptMessageTwo;
+    }
+
+    const supportPromptText = supportPromptItems.find(item => item.id === detail.id)?.text;
+
+    const newUserMessage: Message = {
+      type: 'chat-bubble',
+      authorId: 'user-jane-doe',
+      content: supportPromptText,
+      timestamp: new Date().toLocaleTimeString(),
+    };
+
+    setMessages(prevMessages => [...prevMessages, newUserMessage]);
+
+    promptInputRef.current?.focus();
+
+    setTimeout(() => {
+      setIsGenAiResponseLoading(true);
+      setMessages(prevMessages => [...prevMessages, getLoadingMessage()]);
+
+      setTimeout(() => {
+        setMessages(prevMessages => {
+          prevMessages.splice(prevMessages.length - 1, 1, newMessage);
+          return prevMessages;
+        });
+
+        setIsGenAiResponseLoading(false);
+      }, waitTimeBeforeResponse());
+    }, waitTimeBeforeLoading);
+  };
+
+  const setShowFeedbackDialog = (index: number, show: boolean) => {
+    setMessages(prevMessages => {
+      const updatedMessages = [...prevMessages];
+      const updatedMessage = { ...prevMessages[index], showFeedbackDialog: show };
+      updatedMessages.splice(index, 1, updatedMessage);
+      return updatedMessages;
+    });
+  };
+
+  const lastMessageContent = messages[messages.length - 1]?.content;
+
+  useEffect(() => {
+    setMessages(getInitialMessages(onSupportPromptClick));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    // Scroll to the bottom to show the new/latest message
+    setTimeout(() => {
+      if (messagesContainerRef.current) {
+        messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
+      }
+    }, 0);
+  }, [lastMessageContent]);
+
+  const onPromptSend = ({ detail: { value } }: { detail: { value: string } }) => {
+    if ((!value && files.length === 0) || (value.length === 0 && files.length === 0) || isGenAiResponseLoading) {
+      return;
+    }
+
+    const newMessage: Message = {
+      type: 'chat-bubble',
+      authorId: 'user-jane-doe',
+      content: value,
+      timestamp: new Date().toLocaleTimeString(),
+      files,
+    };
+
+    let fileValue = files;
+
+    setMessages(prevMessages => [...prevMessages, newMessage]);
+    setPrompt('');
+    setFiles([]);
+
+    const lowerCasePrompt = value.toLowerCase();
+
+    const isLoadingPrompt = validLoadingPrompts.includes(lowerCasePrompt);
+
+    // Show loading state
+    setTimeout(() => {
+      setIsGenAiResponseLoading(true);
+      setMessages(prevMessages => [...prevMessages, getLoadingMessage()]);
+
+      setTimeout(() => {
+        const validPrompt =
+          fileValue.length > 0
+            ? VALID_PROMPTS.find(({ prompt }) => prompt.includes('file'))
+            : VALID_PROMPTS.find(({ prompt }) => prompt.includes(lowerCasePrompt));
+
+        // Send Gen-AI response, replacing the loading chat bubble
+        setMessages(prevMessages => {
+          const response = validPrompt ? validPrompt.getResponse(onSupportPromptClick) : getInvalidPromptResponse();
+
+          prevMessages.splice(prevMessages.length - 1, 1, response);
+          return prevMessages;
+        });
+        setIsGenAiResponseLoading(false);
+        fileValue = [];
+      }, waitTimeBeforeResponse(isLoadingPrompt));
+    }, waitTimeBeforeLoading);
+  };
+
+  const addMessage = (index: number, message: Message) => {
+    setMessages(prevMessages => {
+      const updatedMessages = [...prevMessages];
+      updatedMessages.splice(index, 0, message);
+      return updatedMessages;
+    });
+  };
+
+  return (
+    <div className={`chat-container`}>
+      <Container
+        className={styles['chat-internal-container']}
+        header={<Header variant="h3">Generative AI chat</Header>}
+        // fitHeight={true}
+        // disableContentPaddings={true}
+        footer={
+          <>
+            {/* During loading, action button looks enabled but functionality is disabled. */}
+            {/* This will be fixed once prompt input receives an update where the action button can receive focus while being disabled. */}
+            {/* In the meantime, changing aria labels of prompt input and action button to reflect this. */}
+            <PromptInput
+              ref={promptInputRef}
+              onChange={({ detail }) => setPrompt(detail.value)}
+              onAction={onPromptSend}
+              value={prompt}
+              actionButtonAriaLabel={isGenAiResponseLoading ? 'Send message button - suppressed' : 'Send message'}
+              actionButtonIconName="send"
+              ariaLabel={isGenAiResponseLoading ? 'Prompt input - suppressed' : 'Prompt input'}
+              placeholder="Ask a question"
+              autoFocus={true}
+              disableSecondaryActionsPaddings={true}
+              secondaryActions={
+                <Box padding={{ left: 'xxs', top: 'xs' }}>
+                  <FileInput
+                    ariaLabel="Chat demo file input"
+                    variant="icon"
+                    multiple={true}
+                    value={files}
+                    onChange={({ detail }) => setFiles(prev => [...prev, ...detail.value])}
+                  />
+                </Box>
+              }
+              secondaryContent={
+                areFilesDragging ? (
+                  <FileDropzone onChange={({ detail }) => setFiles(prev => [...prev, ...detail.value])}>
+                    <SpaceBetween size="xs" alignItems="center">
+                      <Icon name="upload" />
+                      <Box>Drop files here</Box>
+                    </SpaceBetween>
+                  </FileDropzone>
+                ) : (
+                  files.length > 0 && (
+                    <FileTokenGroup
+                      items={files.map(file => ({ file }))}
+                      onDismiss={({ detail }) => {
+                        setFiles(files => files.filter((_, index) => index !== detail.fileIndex));
+                        if (files.length === 1) {
+                          promptInputRef.current?.focus();
+                        }
+                      }}
+                      limit={3}
+                      alignment="horizontal"
+                      showFileThumbnail={true}
+                      i18nStrings={fileTokenGroupI18nStrings}
+                    />
+                  )
+                )
+              }
+            />
+            <Box color="text-body-secondary" margin={{ top: 'xs' }} fontSize="body-s">
+              Use of this service is subject to the{' '}
+              <Link href="#" external={true} variant="primary" fontSize="inherit">
+                AWS Responsible AI Policy
+              </Link>
+              .
+            </Box>
+          </>
+        }
+      >
+        <ScrollableContainer ref={messagesContainerRef}>
+          <Messages messages={messages} setShowFeedbackDialog={setShowFeedbackDialog} addMessage={addMessage} />
+        </ScrollableContainer>
+      </Container>
+    </div>
+  );
+}
diff --git a/pages/app-layout/chat/common-components.tsx b/pages/app-layout/chat/common-components.tsx
new file mode 100644
index 0000000000..38696bcbf9
--- /dev/null
+++ b/pages/app-layout/chat/common-components.tsx
@@ -0,0 +1,173 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { forwardRef, useState } from 'react';
+
+import Avatar from '@cloudscape-design/chat-components/avatar';
+
+import ButtonGroup, { ButtonGroupProps } from '~components/button-group';
+import StatusIndicator from '~components/status-indicator';
+
+import { AuthorAvatarProps } from './config';
+
+export function ChatBubbleAvatar({ type, name, initials, loading }: AuthorAvatarProps) {
+  if (type === 'gen-ai') {
+    return <Avatar color="gen-ai" iconName="gen-ai" tooltipText={name} ariaLabel={name} loading={loading} />;
+  }
+
+  return <Avatar initials={initials} tooltipText={name} ariaLabel={name} />;
+}
+
+export function CodeViewActions({ contentToCopy }: { contentToCopy: string }) {
+  return (
+    <ButtonGroup
+      ariaLabel="Code snippet actions"
+      variant="icon"
+      onItemClick={({ detail }) => {
+        if (detail.id !== 'copy' || !navigator.clipboard) {
+          return;
+        }
+
+        navigator.clipboard.writeText(contentToCopy).catch(error => console.log('Failed to copy', error.message));
+      }}
+      items={[
+        {
+          type: 'group',
+          text: 'Feedback',
+          items: [
+            {
+              type: 'icon-button',
+              id: 'run-command',
+              iconName: 'play',
+              text: 'Run command',
+            },
+            {
+              type: 'icon-button',
+              id: 'send-cloudshell',
+              iconName: 'script',
+              text: 'Send to IDE',
+            },
+          ],
+        },
+        {
+          type: 'icon-button',
+          id: 'copy',
+          iconName: 'copy',
+          text: 'Copy',
+          popoverFeedback: <StatusIndicator type="success">Message copied</StatusIndicator>,
+        },
+      ]}
+    />
+  );
+}
+
+export const FittedContainer = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div style={{ position: 'relative', flexGrow: 1 }}>
+      <div>{children}</div>
+    </div>
+  );
+};
+
+export const ScrollableContainer = forwardRef(function ScrollableContainer(
+  { children }: { children: React.ReactNode },
+  ref: React.Ref<HTMLDivElement>
+) {
+  return (
+    <div style={{ position: 'relative', blockSize: '100%' }}>
+      <div style={{ overflowY: 'auto' }} ref={ref} data-testid="chat-scroll-container">
+        {children}
+      </div>
+    </div>
+  );
+});
+
+export function FeedbackActions({
+  contentToCopy,
+  onNotHelpfulFeedback,
+}: {
+  contentToCopy: string;
+  onNotHelpfulFeedback: () => void;
+}) {
+  const [feedback, setFeedback] = useState<string>('');
+  const [feedbackSubmitting, setFeedbackSubmitting] = useState<string>('');
+
+  const items: ButtonGroupProps.ItemOrGroup[] = [
+    {
+      type: 'group',
+      text: 'Vote',
+      items: [
+        {
+          type: 'icon-button',
+          id: 'helpful',
+          iconName: feedback === 'helpful' ? 'thumbs-up-filled' : 'thumbs-up',
+          text: 'Helpful',
+          disabled: !!feedback.length || feedbackSubmitting === 'not-helpful',
+          disabledReason: feedbackSubmitting.length
+            ? ''
+            : feedback === 'helpful'
+              ? '"Helpful" feedback has been submitted.'
+              : '"Helpful" option is unavailable after "Not helpful" feedback submitted.',
+          loading: feedbackSubmitting === 'helpful',
+          popoverFeedback:
+            feedback === 'helpful' ? (
+              <StatusIndicator type="success">Feedback submitted</StatusIndicator>
+            ) : (
+              'Submitting feedback'
+            ),
+        },
+        {
+          type: 'icon-button',
+          id: 'not-helpful',
+          iconName: feedback === 'not-helpful' ? 'thumbs-down-filled' : 'thumbs-down',
+          text: 'Not helpful',
+          disabled: !!feedback.length || feedbackSubmitting === 'helpful',
+          disabledReason: feedbackSubmitting.length
+            ? ''
+            : feedback === 'not-helpful'
+              ? '"Not helpful" feedback has been submitted.'
+              : '"Not helpful" option is unavailable after "Helpful" feedback submitted.',
+          loading: feedbackSubmitting === 'not-helpful',
+          popoverFeedback:
+            feedback === 'helpful' ? (
+              <StatusIndicator type="success">Feedback submitted</StatusIndicator>
+            ) : (
+              'Submitting feedback'
+            ),
+        },
+      ],
+    },
+    {
+      type: 'icon-button',
+      id: 'copy',
+      iconName: 'copy',
+      text: 'Copy',
+      popoverFeedback: <StatusIndicator type="success">Message copied</StatusIndicator>,
+    },
+  ];
+
+  return (
+    <ButtonGroup
+      ariaLabel="Chat actions"
+      variant="icon"
+      items={items}
+      onItemClick={({ detail }) => {
+        if (detail.id === 'copy' && navigator.clipboard) {
+          return navigator.clipboard
+            .writeText(contentToCopy)
+
+            .catch(error => console.log('Failed to copy', error.message));
+        }
+
+        setFeedbackSubmitting(detail.id);
+
+        setTimeout(() => {
+          setFeedback(detail.id);
+          setFeedbackSubmitting('');
+          if (detail.id === 'not-helpful') {
+            onNotHelpfulFeedback();
+          }
+        }, 2000);
+      }}
+    />
+  );
+}
diff --git a/pages/app-layout/chat/config.tsx b/pages/app-layout/chat/config.tsx
new file mode 100644
index 0000000000..0304a0a9a2
--- /dev/null
+++ b/pages/app-layout/chat/config.tsx
@@ -0,0 +1,492 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import SupportPromptGroup, { SupportPromptGroupProps } from '@cloudscape-design/chat-components/support-prompt-group';
+import CodeView from '@cloudscape-design/code-view/code-view';
+// @ts-ignore
+import typescriptHighlight from '@cloudscape-design/code-view/highlight/typescript';
+
+import Box from '~components/box';
+import CopyToClipboard from '~components/copy-to-clipboard';
+import ExpandableSection from '~components/expandable-section';
+import { FileTokenGroupProps } from '~components/file-token-group';
+import Link from '~components/link';
+import Popover from '~components/popover';
+import SpaceBetween from '~components/space-between';
+import TextContent from '~components/text-content';
+
+export type Message = ChatBubbleMessage | AlertMessage;
+
+interface ChatBubbleMessage {
+  type: 'chat-bubble';
+  authorId: string;
+  content: React.ReactNode;
+  timestamp: string;
+  actions?: 'feedback' | 'code-view';
+  hideAvatar?: boolean;
+  avatarLoading?: boolean;
+  files?: File[];
+  supportPrompts?: React.ReactNode;
+  showFeedbackDialog?: boolean;
+  contentToCopy?: string;
+}
+
+interface AlertMessage {
+  type: 'alert';
+  content: React.ReactNode;
+  header?: string;
+}
+
+export const supportPromptItems = [
+  {
+    text: 'What else can I do with TypeScript?',
+    id: 'typescript',
+  },
+  {
+    text: 'How would I add parameters and type checking to this function?',
+    id: 'expand',
+  },
+];
+
+export const responseList = (
+  <TextContent>
+    <ol>
+      <li>To see how an incoming response from generative AI is displayed, ask "Show a loading state example".</li>
+      <li>To see an error alert that appears when something goes wrong, ask "Show an error state example".</li>
+      <li>To see a how a file upload is displayed, upload one or more files.</li>
+      <li>To see support prompts, ask "Show support prompts".</li>
+    </ol>
+  </TextContent>
+);
+
+// added as function so that timestamp is evaluated when function is called
+export const getInvalidPromptResponse = (): Message => ({
+  type: 'chat-bubble',
+  authorId: 'gen-ai',
+  content: (
+    <>
+      The interactions and functionality of this demo are limited.
+      {responseList}
+    </>
+  ),
+  timestamp: new Date().toLocaleTimeString(),
+  actions: 'feedback',
+  contentToCopy: `The interactions and functionality of this demo are limited.
+ 1. To see how an incoming response from generative AI is displayed, ask "Show a loading state example".
+ 2. To see an error alert that appears when something goes wrong, ask "Show an error state example".
+ 3. To see a how a file upload is displayed, upload one or more files.
+ 4. To see support prompts, ask "Show support prompts".`,
+});
+
+export const getLoadingMessage = (): Message => ({
+  type: 'chat-bubble',
+  authorId: 'gen-ai',
+  content: <Box color="text-status-inactive">Generating a response</Box>,
+  timestamp: new Date().toLocaleTimeString(),
+  avatarLoading: true,
+});
+
+const getFileResponseMessage = (): Message => ({
+  type: 'chat-bubble',
+  authorId: 'gen-ai',
+  content:
+    'I see you have uploaded one or more files. I cannot parse the files right now, but you can see what uploaded files look like.',
+  timestamp: new Date().toLocaleTimeString(),
+  avatarLoading: false,
+  actions: 'feedback',
+  contentToCopy:
+    'I see you have uploaded one or more files. I cannot parse the files right now, but you can see what uploaded files look like.',
+});
+
+const getLoadingStateResponseMessage = (): Message => ({
+  type: 'chat-bubble',
+  authorId: 'gen-ai',
+  content: 'That was the loading state. To see the loading state again, ask "Show a loading state example".',
+  timestamp: new Date().toLocaleTimeString(),
+  avatarLoading: false,
+  actions: 'feedback',
+  contentToCopy: 'That was the loading state. To see the loading state again, ask "Show a loading state example".',
+});
+
+const getErrorStateResponseMessage = (): Message => ({
+  type: 'alert',
+  header: 'Access denied',
+  content: (
+    <SpaceBetween size="s">
+      <span>
+        You don't have permission to [AWSS3:ListBuckets]. To request access, copy the following text and send it to your
+        AWS administrator.{' '}
+        <Link href="#" external={true} variant="primary">
+          Learn more about troubleshooting access denied errors.
+        </Link>
+      </span>
+      <div className="access-denied-alert-wrapper">
+        <div className="access-denied-alert-wrapper__box">
+          <SpaceBetween size="xxxs">
+            <Box variant="code">
+              <div>User: [arn:aws:iam::123456789000:user/awsgenericuser]</div>
+              <div>Service: [AWSS3]</div>
+              <div>Action: [ListBuckets]</div>
+              <div>On resource(s): [arn:aws:S3:us-east-1:09876543211234567890]</div>
+              <div>Context: [no identity-based policy allows the AWSS3:ListBuckets action.]</div>
+            </Box>
+          </SpaceBetween>
+        </div>
+        <div>
+          <CopyToClipboard
+            copyButtonText="Copy"
+            copyErrorText="Text failed to copy"
+            copySuccessText="Text copied"
+            textToCopy={`User: [arn:aws:iam::123456789000:user/awsgenericuser]
+Service: [AWSS3]
+Action: [ListBuckets]
+On resource(s): [arn:aws:S3:us-east-1:09876543211234567890]
+Context: [no identity-based policy allows the AWSS3:ListBuckets action.]
+`}
+          />
+        </div>
+      </div>
+    </SpaceBetween>
+  ),
+});
+
+const getSupportPromptResponseMessage = (
+  onSupportPromptClick?: (detail: SupportPromptGroupProps.ItemClickDetail) => void
+): Message => ({
+  type: 'chat-bubble',
+  authorId: 'gen-ai',
+  content: (
+    <CodeView
+      content={`// This is the main function that will be executed when the script runs
+function main(): void {
+// Use console.log to print "Hello, World!" to the console
+console.log("Hello, World!");
+}
+// Call the main function to execute the program
+main();`}
+      highlight={typescriptHighlight}
+    />
+  ),
+  actions: 'code-view',
+  contentToCopy: `// This is the main function that will be executed when the script runs
+function main(): void {
+  // Use console.log to print "Hello, World!" to the console
+  console.log("Hello, World!");
+}
+// Call the main function to execute the program
+main();`,
+  timestamp: new Date().toLocaleTimeString(),
+  supportPrompts: (
+    <SupportPromptGroup
+      ariaLabel="Proposed prompts"
+      items={supportPromptItems}
+      onItemClick={({ detail }) => {
+        onSupportPromptClick?.(detail);
+      }}
+    />
+  ),
+});
+
+interface ValidPromptType {
+  prompt: Array<string>;
+  getResponse: (onSupportPromptClick?: (detail: SupportPromptGroupProps.ItemClickDetail) => void) => Message;
+}
+
+export const validLoadingPrompts = ['show a loading state example', 'loading state', 'loading'];
+
+export const VALID_PROMPTS: Array<ValidPromptType> = [
+  {
+    prompt: validLoadingPrompts,
+    getResponse: getLoadingStateResponseMessage,
+  },
+  {
+    prompt: ['show an error state example', 'error state', 'error'],
+    getResponse: getErrorStateResponseMessage,
+  },
+  {
+    prompt: ['file'],
+    getResponse: getFileResponseMessage,
+  },
+  {
+    prompt: ['show support prompts', 'support prompts', 'support prompt'],
+    getResponse: onSupportPromptClick => getSupportPromptResponseMessage(onSupportPromptClick),
+  },
+];
+
+// Needed only for the existing messages upon page load.
+function getTimestampMinutesAgo(minutesAgo: number) {
+  const d = new Date();
+  d.setMinutes(d.getMinutes() - minutesAgo);
+
+  return d.toLocaleTimeString();
+}
+
+export interface AuthorAvatarProps {
+  type: 'user' | 'gen-ai';
+  name: string;
+  initials?: string;
+  loading?: boolean;
+}
+interface AuthorsType {
+  [key: string]: AuthorAvatarProps;
+}
+export const AUTHORS: AuthorsType = {
+  'user-jane-doe': { type: 'user', name: 'Jane Doe', initials: 'JD' },
+  'gen-ai': { type: 'gen-ai', name: 'Generative AI assistant' },
+};
+
+const CitationPopover = ({ count, href }: { count: number; href: string }) => (
+  <Box color="text-status-info" display="inline">
+    <Popover
+      header="Source"
+      content={
+        <Link href={href} external={true} variant="primary">
+          {href}
+        </Link>
+      }
+      position="right"
+    >
+      [{count}]
+    </Popover>
+  </Box>
+);
+
+export const getInitialMessages = (
+  onSupportPromptClick: (detail: SupportPromptGroupProps.ItemClickDetail) => void
+): Array<Message> => {
+  return [
+    {
+      type: 'chat-bubble',
+      authorId: 'user-jane-doe',
+      content: 'What can I do with Amazon S3?',
+      timestamp: getTimestampMinutesAgo(10),
+    },
+    {
+      type: 'chat-bubble',
+      authorId: 'gen-ai',
+      content:
+        'Amazon S3 provides a simple web service interface that you can use to store and retrieve any amount of data, at any time, from anywhere. Using this service, you can easily build applications that make use of cloud native storage. Since Amazon S3 is highly scalable and you only pay for what you use, you can start small and grow your application as you wish, with no compromise on performance or reliability.',
+      timestamp: getTimestampMinutesAgo(9),
+      actions: 'feedback',
+      contentToCopy:
+        'Amazon S3 provides a simple web service interface that you can use to store and retrieve any amount of data, at any time, from anywhere. Using this service, you can easily build applications that make use of cloud native storage. Since Amazon S3 is highly scalable and you only pay for what you use, you can start small and grow your application as you wish, with no compromise on performance or reliability.',
+    },
+    {
+      type: 'chat-bubble',
+      authorId: 'user-jane-doe',
+      content: 'How can I create an S3 bucket configuration?',
+      timestamp: getTimestampMinutesAgo(8),
+    },
+    {
+      type: 'chat-bubble',
+      authorId: 'gen-ai',
+      content: (
+        <TextContent>
+          Creating a configuration for Amazon S3 involves setting up a bucket and configuring its properties{' '}
+          <CitationPopover
+            count={1}
+            href="https://docs.aws.amazon.com/AmazonS3/latest/userguide/GetStartedWithS3.html"
+          />
+          . Here's a step-by-step guide to help you create an S3 configuration:
+          <ol>
+            <li>Sign in to AWS Management Console</li>
+            <li>Access Amazon S3 console</li>
+            <li>Create a new S3 bucket</li>
+            <li>
+              Configure bucket settings{' '}
+              <CitationPopover
+                count={2}
+                href="https://docs.aws.amazon.com/appconfig/latest/userguide/appconfig-creating-configuration-and-profile-S3-source.html"
+              />
+            </li>
+            <li>Review and create</li>
+          </ol>
+          <Box padding={{ top: 'xs' }}>
+            <ExpandableSection headerText="Sources">
+              <div>
+                <Link
+                  href="https://docs.aws.amazon.com/AmazonS3/latest/userguide/GetStartedWithS3.html"
+                  external={true}
+                  variant="primary"
+                >
+                  [1] Getting started with Amazon S3 - Amazon Simple Storage Service
+                </Link>
+              </div>
+              <div>
+                <Link
+                  href="https://docs.aws.amazon.com/appconfig/latest/userguide/appconfig-creating-configuration-and-profile-S3-source.html"
+                  external={true}
+                  variant="primary"
+                >
+                  [2] Understanding configurations stored in Amazon S3 - AWS AppConfig
+                </Link>
+              </div>
+              <div>
+                <Link
+                  href="https://docs.aws.amazon.com/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html"
+                  external={true}
+                  variant="primary"
+                >
+                  [3] Tutorial: Configuring a static website on Amazon S3 - Amazon Simple Storage Service
+                </Link>
+              </div>
+            </ExpandableSection>
+          </Box>
+        </TextContent>
+      ),
+      timestamp: getTimestampMinutesAgo(7),
+      actions: 'feedback',
+      contentToCopy: `Creating a configuration for Amazon S3 involves setting up a bucket and configuring its properties. Here's a step-by-step guide to help you create an S3 configuration:
+1. Sign in to AWS Management Console
+2. Access Amazon S3 console
+3. Create a new S3 bucket
+4. Configure bucket settings
+5. Review and create`,
+    },
+    {
+      type: 'chat-bubble',
+      authorId: 'user-jane-doe',
+      content: 'Give me an example of a Typescript code block.',
+      timestamp: getTimestampMinutesAgo(6),
+    },
+    {
+      type: 'chat-bubble',
+      authorId: 'gen-ai',
+      content: "Here's a simple TypeScript code example that implements the 'Hello, World!' functionality:",
+      timestamp: getTimestampMinutesAgo(5),
+      actions: 'feedback',
+      contentToCopy: "Here's a simple TypeScript code example that implements the 'Hello, World!' functionality:",
+    },
+    {
+      type: 'chat-bubble',
+      authorId: 'gen-ai',
+      content: (
+        <CodeView
+          content={`// This is the main function that will be executed when the script runs
+function main(): void {
+  // Use console.log to print "Hello, World!" to the console
+  console.log("Hello, World!");
+}
+// Call the main function to execute the program
+main();`}
+          highlight={typescriptHighlight}
+        />
+      ),
+      actions: 'code-view',
+      contentToCopy: `// This is the main function that will be executed when the script runs
+function main(): void {
+  // Use console.log to print "Hello, World!" to the console
+  console.log("Hello, World!");
+}
+// Call the main function to execute the program
+main();`,
+      timestamp: getTimestampMinutesAgo(4),
+      hideAvatar: true,
+      supportPrompts: (
+        <SupportPromptGroup
+          ariaLabel="Typescript support prompt group"
+          items={supportPromptItems}
+          onItemClick={({ detail }) => {
+            onSupportPromptClick(detail);
+          }}
+        />
+      ),
+    },
+  ];
+};
+
+export const supportPromptMessageOne: Message = {
+  type: 'chat-bubble',
+  authorId: 'gen-ai',
+  content: (
+    <>
+      TypeScript is a powerful programming language that builds upon JavaScript by adding static typing and other
+      features. Here are key things you can do with TypeScript:
+      <ol>
+        <li>
+          Web developement
+          <ul>
+            <li>Build frontend applications using frameworks like Angular, React, or Vue.js</li>
+            <li>Create robust server-side applications with Node.js</li>
+            <li>Develop full-stack applications with enhanced type safety</li>
+          </ul>
+        </li>
+
+        <li>
+          Type safety features
+          <ul>
+            <li>Define explicit types for variables, functions, and objects</li>
+            <li>Catch errors during development before runtime</li>
+            <li>Use interfaces and type declarations for better code organization</li>
+          </ul>
+        </li>
+        <li>
+          Object-oriented programming
+          <ul>
+            <li>Create classes with proper inheritance</li>
+            <li>Implement interfaces</li>
+            <li>Use access modifiers (public, private, protected)</li>
+          </ul>
+        </li>
+      </ol>
+      TypeScript is particularly valuable for large projects where type safety and code maintainability are important
+      considerations.
+    </>
+  ),
+  timestamp: new Date().toLocaleTimeString(),
+  actions: 'feedback',
+  contentToCopy: `TypeScript is a powerful programming language that builds upon JavaScript by adding static typing and other features. Here are key things you can do with TypeScript:
+1. Web developement
+ - Build frontend applications using frameworks like Angular, React, or Vue.js
+ - Create robust server-side applications with Node.js
+ - Develop full-stack applications with enhanced type safety
+2. Type safety features
+ - Define explicit types for variables, functions, and objects
+ - Catch errors during development before runtime
+ - Use interfaces and type declarations for better code organization
+3. Object-oriented programming
+ - Create classes with proper inheritance
+ - Implement interfaces
+ - Use access modifiers (public, private, protected)
+TypeScript is particularly valuable for large projects where type safety and code maintainability are important considerations.`,
+};
+
+export const supportPromptMessageTwo: Message = {
+  type: 'chat-bubble',
+  authorId: 'gen-ai',
+  content: (
+    <CodeView
+      highlight={typescriptHighlight}
+      content={`// Here's how you might add input parameters and type checking
+function enhancedMain(name: string, greeting: string = "Hello"): void {
+  if (!name) {
+    throw new error('Name parameter is required.');
+  }
+  console.log(\`\${greeting}, \${name}!\`);
+}
+
+// Call the enhancedMain function to execute the program
+enhancedMain('Greetings', 'Earth');`}
+    />
+  ),
+  actions: 'code-view',
+  contentToCopy: `// Add input parameters and type checking
+function enhancedMain(name: string, greeting: string = "Hello"): void {
+  if (!name) {
+   throw new error('Name parameter is required.');
+  }
+  console.log("{greeting}, {name}!");
+}
+// Call the enhancedMain function to execute the program
+enhancedMain('Greetings', 'Earth');`,
+  timestamp: new Date().toLocaleTimeString(),
+};
+
+export const fileTokenGroupI18nStrings: FileTokenGroupProps.I18nStrings = {
+  removeFileAriaLabel: index => `Remove file ${index + 1}`,
+  limitShowFewer: 'Show fewer files',
+  limitShowMore: 'Show more files',
+  errorIconAriaLabel: 'Error',
+  warningIconAriaLabel: 'Warning',
+};
diff --git a/pages/app-layout/chat/dialog.scss b/pages/app-layout/chat/dialog.scss
new file mode 100644
index 0000000000..4ca981674f
--- /dev/null
+++ b/pages/app-layout/chat/dialog.scss
@@ -0,0 +1,37 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: MIT-0
+
+@use '~design-tokens' as cs;
+
+.dialog {
+  border: 1px solid cs.$color-border-dialog;
+  border-radius: cs.$border-radius-container;
+  background-color: cs.$color-background-dialog;
+  width: fit-content;
+
+  outline-offset: 5px;
+}
+
+.content {
+  display: flex;
+  align-items: baseline;
+}
+
+.dismiss {
+  order: 1;
+  padding-inline-end: cs.$space-container-horizontal;
+}
+
+.inner-content {
+  flex: 1;
+
+  padding-block-start: cs.$space-scaled-s;
+  padding-block-end: cs.$space-scaled-l;
+  padding-inline-start: cs.$space-container-horizontal;
+}
+
+.footer {
+  border-top: 1px solid cs.$color-border-divider-default;
+  padding-block: cs.$space-scaled-s;
+  padding-inline: cs.$space-container-horizontal;
+}
diff --git a/pages/app-layout/chat/messages.tsx b/pages/app-layout/chat/messages.tsx
new file mode 100644
index 0000000000..8550c56849
--- /dev/null
+++ b/pages/app-layout/chat/messages.tsx
@@ -0,0 +1,119 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import ChatBubble from '@cloudscape-design/chat-components/chat-bubble';
+import Alert from '@cloudscape-design/components/alert';
+import FileTokenGroup from '@cloudscape-design/components/file-token-group';
+import LiveRegion from '@cloudscape-design/components/live-region';
+import SpaceBetween from '@cloudscape-design/components/space-between';
+
+import FeedbackDialog from './additional-info/feedback-dialog';
+import { ChatBubbleAvatar, CodeViewActions, FeedbackActions } from './common-components';
+import { AUTHORS, fileTokenGroupI18nStrings, Message, supportPromptItems } from './config';
+
+import './chat.scss';
+
+export default function Messages({
+  messages = [],
+  setShowFeedbackDialog,
+  addMessage,
+}: {
+  messages: Array<Message>;
+  setShowFeedbackDialog: (index: number, show: boolean) => void;
+  addMessage: (index: number, message: Message) => void;
+}) {
+  const latestMessage: Message = messages[messages.length - 1];
+
+  const promptText = supportPromptItems.map(item => item.text);
+
+  return (
+    <div className="messages" role="region" aria-label="Chat">
+      <LiveRegion hidden={true} assertive={latestMessage?.type === 'alert'}>
+        {latestMessage?.type === 'alert' && latestMessage.header}
+        {latestMessage?.content}
+        {latestMessage?.type === 'chat-bubble' &&
+          latestMessage.supportPrompts &&
+          `There are ${promptText.length} support prompts accompanying this message. ${promptText}`}
+      </LiveRegion>
+
+      {messages.map((message, index) => {
+        if (message.type === 'alert') {
+          return (
+            <Alert
+              key={'error-alert' + index}
+              header={message.header}
+              type="error"
+              statusIconAriaLabel="Error"
+              data-testid={'error-alert' + index}
+            >
+              {message.content}
+            </Alert>
+          );
+        }
+
+        const author = AUTHORS[message.authorId];
+
+        return (
+          <SpaceBetween size="xs" key={message.authorId + message.timestamp}>
+            <ChatBubble
+              avatar={<ChatBubbleAvatar {...author} loading={message.avatarLoading} />}
+              ariaLabel={`${author.name} at ${message.timestamp}`}
+              type={author.type === 'gen-ai' ? 'incoming' : 'outgoing'}
+              hideAvatar={message.hideAvatar}
+              actions={
+                message.actions === 'code-view' ? (
+                  <CodeViewActions contentToCopy={message.contentToCopy || ''} />
+                ) : message.actions === 'feedback' ? (
+                  <FeedbackActions
+                    contentToCopy={message.contentToCopy || ''}
+                    onNotHelpfulFeedback={() => setShowFeedbackDialog(index, true)}
+                  />
+                ) : null
+              }
+            >
+              <SpaceBetween size="xs">
+                <div key={message.authorId + message.timestamp + 'content'}>{message.content}</div>
+                {message.files && message.files.length > 0 && (
+                  <FileTokenGroup
+                    readOnly={true}
+                    items={message.files.map(file => ({ file }))}
+                    limit={3}
+                    onDismiss={() => {
+                      /* empty function for read only token */
+                    }}
+                    alignment="horizontal"
+                    showFileThumbnail={true}
+                    i18nStrings={fileTokenGroupI18nStrings}
+                  />
+                )}
+              </SpaceBetween>
+            </ChatBubble>
+
+            {message.showFeedbackDialog && (
+              <div className="other-content-vertically-align">
+                <FeedbackDialog
+                  onDismiss={() => setShowFeedbackDialog(index, false)}
+                  onSubmit={() => {
+                    setShowFeedbackDialog(index, false);
+                    addMessage(index + 1, {
+                      type: 'chat-bubble',
+                      authorId: 'gen-ai',
+                      content: 'Your feedback has been submitted. Thank you for your additional feedback.',
+                      timestamp: new Date().toLocaleTimeString(),
+                      hideAvatar: true,
+                    });
+                  }}
+                />
+              </div>
+            )}
+
+            {latestMessage.type === 'chat-bubble' && latestMessage.supportPrompts && index === messages.length - 1 && (
+              <div className="other-content-vertically-align">{message.supportPrompts}</div>
+            )}
+          </SpaceBetween>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/pages/app-layout/runtime-drawers.page.tsx b/pages/app-layout/runtime-drawers.page.tsx
index 68706db78c..5c08296745 100644
--- a/pages/app-layout/runtime-drawers.page.tsx
+++ b/pages/app-layout/runtime-drawers.page.tsx
@@ -1,9 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useContext, useRef, useState } from 'react';
+import ReactDOM, { unmountComponentAtNode } from 'react-dom';
 
 import {
   AppLayout,
+  Box,
   Button,
   ContentLayout,
   Header,
@@ -14,6 +16,7 @@ import {
   Toggle,
 } from '~components';
 import { AppLayoutProps } from '~components/app-layout';
+import { useMobile } from '~components/internal/hooks/use-mobile';
 import awsuiPlugins from '~components/internal/plugins';
 
 import './utils/external-widget';
@@ -31,6 +34,50 @@ type DemoContext = React.Context<
   }>
 >;
 
+const AIDrawer = () => {
+  const isMobile = useMobile();
+
+  return (
+    <div
+      style={{
+        background: 'white',
+        marginInlineEnd: isMobile ? undefined : '16px',
+      }}
+    >
+      <Box variant="h2" padding={{ bottom: 'm' }}>
+        Chat demo
+      </Box>
+      {new Array(100).fill(null).map((_, index) => (
+        <div key={index}>Tela content</div>
+      ))}
+    </div>
+  );
+};
+
+awsuiPlugins.appLayout.registerDrawer({
+  id: 'amazon-q',
+  type: 'global-ai',
+  resizable: true,
+  isExpandable: true,
+  defaultSize: 500,
+
+  ariaLabels: {
+    closeButton: 'Close button',
+    content: 'Content',
+    triggerButton: 'Trigger button',
+    resizeHandle: 'Resize handle',
+  },
+
+  trigger: {
+    iconSvg: `<svg viewBox="0 0 16 16" data-analytics-type="widgetDetail" data-analytics="ChatExperienceEntry" data-analytics-render="true" data-analytics-processed="true"><path d="m14.22,3.41L8.87.32c-.24-.14-.55-.21-.87-.21s-.63.07-.87.21L1.78,3.41c-.48.27-.87.95-.87,1.5v6.18c0,.55.39,1.22.87,1.5l5.36,3.09c.24.14.55.21.87.21s.63-.07.87-.21l5.36-3.09c.48-.28.87-.95.87-1.5v-6.18c0-.55-.39-1.23-.87-1.5Zm-6.22,10.47l-5.09-2.94v-5.88l5.09-2.94,5.09,2.94v4.72l-3.09-1.78v-.74c0-.26-.14-.49-.36-.62l-1.28-.74c-.11-.06-.24-.1-.36-.1s-.25.03-.36.1l-1.28.74c-.22.13-.36.37-.36.62v1.48c0,.26.14.49.36.62l1.28.74c.11.06.24.1.36.1s.25-.03.36-.1l.64-.37,3.09,1.78-4.09,2.36Z" fill="currentColor" stroke-width="0"></path></svg>`,
+  },
+
+  mountContent: container => {
+    ReactDOM.render(<AIDrawer />, container);
+  },
+  unmountContent: container => unmountComponentAtNode(container),
+});
+
 export default function WithDrawers() {
   const [activeDrawerId, setActiveDrawerId] = useState<string | null>(null);
   const [helpPathSlug, setHelpPathSlug] = useState<string>('default');
diff --git a/pages/app-layout/sidecar-demo.page.tsx b/pages/app-layout/sidecar-demo.page.tsx
index 39fbac18e5..729bcf9330 100644
--- a/pages/app-layout/sidecar-demo.page.tsx
+++ b/pages/app-layout/sidecar-demo.page.tsx
@@ -24,7 +24,7 @@ import './utils/external-sidecar-widget-demo';
 import AppContext, { AppContextType } from '../app/app-context';
 import { generateItems, Instance } from '../table/generate-data';
 import { columnsConfig } from '../table/shared-configs';
-import { Breadcrumbs } from './utils/content-blocks';
+import { Breadcrumbs, CustomDrawerContent } from './utils/content-blocks';
 import { drawerLabels } from './utils/drawers';
 import appLayoutLabels from './utils/labels';
 import { splitPaneli18nStrings } from './utils/strings';
@@ -44,6 +44,7 @@ export default function WithDrawers() {
   const [activeHref, setActiveHref] = useState('#/');
   const [navigationOpen, setNavigationOpen] = useState(true);
   const [toolsOpen, setToolsOpen] = useState(false);
+  const [activeDrawerId, setActiveDrawerId] = useState<string | null>(null);
 
   const items = generateItems(20);
 
@@ -51,6 +52,28 @@ export default function WithDrawers() {
     setToolsOpen(true);
   }
 
+  const drawersProps: Pick<AppLayoutProps, 'activeDrawerId' | 'onDrawerChange' | 'drawers'> | null = {
+    activeDrawerId: activeDrawerId,
+    drawers: [
+      {
+        ariaLabels: {
+          closeButton: 'ProHelp close button',
+          drawerName: 'ProHelp drawer content',
+          triggerButton: 'ProHelp trigger button',
+          resizeHandle: 'ProHelp resize handle',
+        },
+        content: <CustomDrawerContent />,
+        id: 'pro-help',
+        trigger: {
+          iconName: 'contact',
+        },
+      },
+    ],
+    onDrawerChange: event => {
+      setActiveDrawerId(event.detail.activeDrawerId);
+    },
+  };
+
   return (
     <AppLayout
       ariaLabels={{ ...appLayoutLabels, ...drawerLabels }}
@@ -193,6 +216,7 @@ export default function WithDrawers() {
           </ul>
         </HelpPanel>
       }
+      {...drawersProps}
     />
   );
 }
diff --git a/pages/app-layout/utils/external-sidecar-widget-demo.tsx b/pages/app-layout/utils/external-sidecar-widget-demo.tsx
index 5c12162e38..640a567ee4 100644
--- a/pages/app-layout/utils/external-sidecar-widget-demo.tsx
+++ b/pages/app-layout/utils/external-sidecar-widget-demo.tsx
@@ -3,21 +3,12 @@
 import React from 'react';
 import ReactDOM, { unmountComponentAtNode } from 'react-dom';
 
-import {
-  Alert,
-  BarChart,
-  Box,
-  ColumnLayout,
-  Drawer,
-  FormField,
-  Input,
-  SpaceBetween,
-  Textarea,
-  Tiles,
-} from '~components';
+import { BarChart, Box, ColumnLayout, Drawer, FormField, Input, SpaceBetween, Textarea, Tiles } from '~components';
 import ButtonDropdown from '~components/button-dropdown';
 import awsuiPlugins from '~components/internal/plugins';
 
+import Chat from '../chat/chat';
+
 function Details() {
   const [value, setValue] = React.useState('item1');
   const [inputValue, setInputValue] = React.useState('');
@@ -138,15 +129,6 @@ function Details() {
   );
 }
 
-function Chats() {
-  return (
-    <SpaceBetween size="m">
-      <Alert header="Known issues/limitations">
-        Review the documentation to learn about potential compatibility issues with specific database versions.
-      </Alert>
-    </SpaceBetween>
-  );
-}
 awsuiPlugins.appLayout.registerDrawer({
   id: 'bolt-global',
   type: 'global',
@@ -195,47 +177,25 @@ awsuiPlugins.appLayout.registerDrawer({
 });
 
 awsuiPlugins.appLayout.registerDrawer({
-  id: 'q-global',
-  type: 'global',
-  defaultActive: false,
+  id: 'amazon-q',
+  type: 'global-ai',
   resizable: true,
-  defaultSize: 350,
-  preserveInactiveContent: true,
-
   isExpandable: true,
+  defaultSize: 500,
 
   ariaLabels: {
     closeButton: 'Close button',
     content: 'Content',
     triggerButton: 'Trigger button',
     resizeHandle: 'Resize handle',
-    expandedModeButton: 'Expanded mode button',
-  },
-  onToggle: event => {
-    console.log('g-global drawer on toggle', event.detail);
   },
 
   trigger: {
-    iconSvg: `<svg viewBox="0 0 16 16" focusable="false" aria-hidden="true" role="presentation"><path d="m14.22,3.41L8.87.32c-.24-.14-.55-.21-.87-.21s-.63.07-.87.21L1.78,3.41c-.48.27-.87.95-.87,1.5v6.18c0,.55.39,1.22.87,1.5l5.36,3.09c.24.14.55.21.87.21s.63-.07.87-.21l5.36-3.09c.48-.28.87-.95.87-1.5v-6.18c0-.55-.39-1.23-.87-1.5Zm-6.22,10.47l-5.09-2.94v-5.88l5.09-2.94,5.09,2.94v4.72l-3.09-1.78v-.74c0-.26-.14-.49-.36-.62l-1.28-.74c-.11-.06-.24-.1-.36-.1s-.25.03-.36.1l-1.28.74c-.22.13-.36.37-.36.62v1.48c0,.26.14.49.36.62l1.28.74c.11.06.24.1.36.1s.25-.03.36-.1l.64-.37,3.09,1.78-4.09,2.36Z" fill="currentColor" stroke-width="0"></path></svg>
-`,
-  },
-
-  onResize: event => {
-    console.log('resize', event.detail);
+    iconSvg: `<svg viewBox="0 0 16 16" data-analytics-type="widgetDetail" data-analytics="ChatExperienceEntry" data-analytics-render="true" data-analytics-processed="true"><path d="m14.22,3.41L8.87.32c-.24-.14-.55-.21-.87-.21s-.63.07-.87.21L1.78,3.41c-.48.27-.87.95-.87,1.5v6.18c0,.55.39,1.22.87,1.5l5.36,3.09c.24.14.55.21.87.21s.63-.07.87-.21l5.36-3.09c.48-.28.87-.95.87-1.5v-6.18c0-.55-.39-1.23-.87-1.5Zm-6.22,10.47l-5.09-2.94v-5.88l5.09-2.94,5.09,2.94v4.72l-3.09-1.78v-.74c0-.26-.14-.49-.36-.62l-1.28-.74c-.11-.06-.24-.1-.36-.1s-.25.03-.36.1l-1.28.74c-.22.13-.36.37-.36.62v1.48c0,.26.14.49.36.62l1.28.74c.11.06.24.1.36.1s.25-.03.36-.1l.64-.37,3.09,1.78-4.09,2.36Z" fill="currentColor" stroke-width="0"></path></svg>`,
   },
 
   mountContent: container => {
-    ReactDOM.render(
-      <SpaceBetween size="l">
-        <div style={{ paddingBlockStart: '15px', paddingInlineStart: '20px', margin: 0 }}>
-          <Box variant="h3">Amazon Q</Box>
-        </div>
-        <Box padding={{ left: 'l', right: 'l' }}>
-          <Chats />
-        </Box>
-      </SpaceBetween>,
-      container
-    );
+    ReactDOM.render(<Chat />, container);
   },
   unmountContent: container => unmountComponentAtNode(container),
 });
diff --git a/src/app-layout/__tests__/__snapshots__/widget-contract-split-panel.test.tsx.snap b/src/app-layout/__tests__/__snapshots__/widget-contract-split-panel.test.tsx.snap
index a5414f3640..109f0647a6 100644
--- a/src/app-layout/__tests__/__snapshots__/widget-contract-split-panel.test.tsx.snap
+++ b/src/app-layout/__tests__/__snapshots__/widget-contract-split-panel.test.tsx.snap
@@ -4,11 +4,29 @@ exports[`Theme=refresh-toolbar, Size=desktop contract with split panel (trigger
 Map {
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -65,8 +83,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": "__JSX__",
@@ -86,6 +106,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -136,11 +157,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -197,8 +236,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": "__JSX__",
@@ -218,6 +259,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -322,11 +364,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -383,8 +443,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": "__JSX__",
@@ -404,6 +466,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -454,11 +517,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -515,8 +596,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": "__JSX__",
@@ -536,6 +619,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -586,11 +670,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -647,8 +749,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": "__JSX__",
@@ -668,6 +772,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -761,11 +866,29 @@ exports[`Theme=refresh-toolbar, Size=desktop contract with split panel 1`] = `
 Map {
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -822,8 +945,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": "__JSX__",
@@ -845,6 +970,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -897,11 +1023,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -958,8 +1102,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": "__JSX__",
@@ -981,6 +1127,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1089,11 +1236,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -1150,8 +1315,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": "__JSX__",
@@ -1173,6 +1340,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1225,11 +1393,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -1286,8 +1472,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": "__JSX__",
@@ -1309,6 +1497,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1361,11 +1550,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -1422,8 +1629,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": "__JSX__",
@@ -1445,6 +1654,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
diff --git a/src/app-layout/__tests__/__snapshots__/widget-contract.test.tsx.snap b/src/app-layout/__tests__/__snapshots__/widget-contract.test.tsx.snap
index 08b6cb4001..2cc318bf68 100644
--- a/src/app-layout/__tests__/__snapshots__/widget-contract.test.tsx.snap
+++ b/src/app-layout/__tests__/__snapshots__/widget-contract.test.tsx.snap
@@ -4,11 +4,29 @@ exports[`Theme=refresh-toolbar, Size=desktop contract for default use-case 1`] =
 Map {
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -63,8 +81,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -84,6 +104,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -134,11 +155,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -193,8 +232,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -214,6 +255,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -295,11 +337,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -354,8 +414,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -375,6 +437,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -425,11 +488,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -484,8 +565,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -505,6 +588,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -555,11 +639,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -614,8 +716,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -635,6 +739,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -730,11 +835,29 @@ exports[`Theme=refresh-toolbar, Size=desktop contract with all slots provided 1`
 Map {
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -793,8 +916,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <div>
@@ -816,6 +941,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -866,11 +992,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -929,8 +1073,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <div>
@@ -952,6 +1098,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1005,11 +1152,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -1068,8 +1233,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <div>
@@ -1091,6 +1258,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1174,11 +1342,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -1237,8 +1423,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <div>
@@ -1260,6 +1448,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1310,11 +1499,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -1373,8 +1580,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <div>
@@ -1396,6 +1605,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1446,11 +1656,29 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": undefined,
       "activeDrawerSize": 290,
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -1509,8 +1737,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <div>
@@ -1532,6 +1762,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1630,6 +1861,8 @@ exports[`Theme=refresh-toolbar, Size=desktop contract with drawers 1`] = `
 Map {
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": {
         "ariaLabels": {
           "closeButton": "Security close button",
@@ -1649,6 +1882,22 @@ Map {
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -1705,8 +1954,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -1726,6 +1977,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1776,6 +2028,8 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": {
         "ariaLabels": {
           "closeButton": "Security close button",
@@ -1795,6 +2049,22 @@ Map {
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -1851,8 +2121,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -1872,6 +2144,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -1953,6 +2226,8 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": {
         "ariaLabels": {
           "closeButton": "Security close button",
@@ -1972,6 +2247,22 @@ Map {
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -2028,8 +2319,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -2049,6 +2342,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -2099,6 +2393,8 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": {
         "ariaLabels": {
           "closeButton": "Security close button",
@@ -2118,6 +2414,22 @@ Map {
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -2174,8 +2486,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -2195,6 +2509,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [Function],
       "onActiveDrawerChange": [Function],
       "onActiveDrawerResize": [Function],
       "onActiveGlobalDrawersChange": [Function],
@@ -2245,6 +2560,8 @@ Map {
   },
   [Function] => {
     "appLayoutInternals": {
+      "activeAiDrawer": null,
+      "activeAiDrawerSize": 0,
       "activeDrawer": {
         "ariaLabels": {
           "closeButton": "Security close button",
@@ -2264,6 +2581,22 @@ Map {
       "activeGlobalDrawers": [],
       "activeGlobalDrawersIds": [],
       "activeGlobalDrawersSizes": {},
+      "aiDrawer": undefined,
+      "aiDrawerFocusControl": {
+        "loseFocus": [Function],
+        "refs": {
+          "close": {
+            "current": null,
+          },
+          "slider": {
+            "current": null,
+          },
+          "toggle": {
+            "current": null,
+          },
+        },
+        "setFocus": [Function],
+      },
       "ariaLabels": {
         "drawers": undefined,
         "drawersOverflow": undefined,
@@ -2320,8 +2653,10 @@ Map {
       },
       "headerVariant": undefined,
       "isMobile": false,
+      "maxAiDrawerSize": Infinity,
       "maxDrawerSize": Infinity,
       "maxGlobalDrawersSizes": {},
+      "minAiDrawerSize": 300,
       "minDrawerSize": 290,
       "minGlobalDrawersSizes": {},
       "navigation": <React.Fragment />,
@@ -2341,6 +2676,7 @@ Map {
         "setFocus": [Function],
       },
       "navigationOpen": true,
+      "onActiveAiDrawerChange": [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 2ebf951069..a00f96be4b 100644
--- a/src/app-layout/__tests__/multi-layout-props.test.tsx
+++ b/src/app-layout/__tests__/multi-layout-props.test.tsx
@@ -10,6 +10,7 @@ describe('mergeMultiAppLayoutProps', () => {
   const mockParentActiveGlobalDrawerChange = jest.fn();
   const mockParentSplitPanelToggle = jest.fn();
   const mockSetExpandedDrawerId = jest.fn();
+  const mockParentActiveAiDrawerChange = jest.fn();
   const ownProps: SharedProps = {
     forceDeduplicationType: 'primary',
     ariaLabels: {
@@ -45,6 +46,9 @@ describe('mergeMultiAppLayoutProps', () => {
     splitPanelFocusRef: React.createRef(),
     onSplitPanelToggle: mockParentSplitPanelToggle,
     setExpandedDrawerId: mockSetExpandedDrawerId,
+    aiDrawer: undefined,
+    onActiveAiDrawerChange: mockParentActiveAiDrawerChange,
+    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/runtime-drawer/index.tsx b/src/app-layout/runtime-drawer/index.tsx
index 14004148a6..a1657a88c0 100644
--- a/src/app-layout/runtime-drawer/index.tsx
+++ b/src/app-layout/runtime-drawer/index.tsx
@@ -21,6 +21,7 @@ export interface DrawersLayout {
   global: Array<RuntimeDrawer>;
   localBefore: Array<RuntimeDrawer>;
   localAfter: Array<RuntimeDrawer>;
+  aiDrawer?: RuntimeDrawer;
 }
 
 type VisibilityCallback = (isVisible: boolean) => void;
@@ -93,7 +94,8 @@ const mapRuntimeConfigToDrawer = (
 
 export function convertRuntimeDrawers(
   localDrawers: Array<RuntimeDrawerConfig>,
-  globalDrawers: Array<RuntimeDrawerConfig>
+  globalDrawers: Array<RuntimeDrawerConfig>,
+  aiDrawer?: RuntimeDrawerConfig
 ): DrawersLayout {
   const converted = localDrawers.map(mapRuntimeConfigToDrawer);
   const sorted = sortByPriority(converted);
@@ -101,5 +103,8 @@ export function convertRuntimeDrawers(
     global: sortByPriority(globalDrawers.map(mapRuntimeConfigToDrawer)),
     localBefore: sorted.filter(item => (item.orderPriority ?? 0) > 0),
     localAfter: sorted.filter(item => (item.orderPriority ?? 0) <= 0),
+    ...(aiDrawer && {
+      aiDrawer: mapRuntimeConfigToDrawer(aiDrawer),
+    }),
   };
 }
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-drawers.ts b/src/app-layout/utils/use-drawers.ts
index d5201cf6a8..7cbb25c4df 100644
--- a/src/app-layout/utils/use-drawers.ts
+++ b/src/app-layout/utils/use-drawers.ts
@@ -79,9 +79,10 @@ function useRuntimeDrawers(
       return;
     }
     const unsubscribe = awsuiPluginsInternal.appLayout.onDrawersRegistered(drawers => {
-      const localDrawers = drawers.filter(drawer => drawer.type !== 'global');
+      const localDrawers = drawers.filter(drawer => !drawer.type?.includes('global'));
       const globalDrawers = drawers.filter(drawer => drawer.type === 'global');
-      setRuntimeDrawers(convertRuntimeDrawers(localDrawers, globalDrawers));
+      const aiDrawer = drawers.find(drawer => drawer.type === 'global-ai');
+      setRuntimeDrawers(convertRuntimeDrawers(localDrawers, globalDrawers, aiDrawer));
       if (!localDrawerWasOpenRef.current) {
         const defaultActiveLocalDrawer = sortByPriority(localDrawers).find(drawer => drawer.defaultActive);
         if (defaultActiveLocalDrawer) {
@@ -173,11 +174,15 @@ function applyToolsDrawer(toolsProps: ToolsProps, runtimeDrawers: DrawersLayout)
 }
 
 export const MIN_DRAWER_SIZE = 290;
+// TODO replace with a real value
+const DEFAULT_AI_DRAWER_SIZE = 350;
+const MIN_AI_DRAWER_SIZE = 300;
 
 type UseDrawersProps = Pick<AppLayoutProps, 'drawers' | 'activeDrawerId' | 'onDrawerChange'> & {
   __disableRuntimeDrawers?: boolean;
   onGlobalDrawerFocus?: (drawerId: string, open: boolean) => void;
   onAddNewActiveDrawer?: (drawerId: string) => void;
+  onAiDrawerFocus?: () => void;
 };
 
 export function useDrawers(
@@ -187,6 +192,7 @@ export function useDrawers(
     onDrawerChange,
     onGlobalDrawerFocus,
     onAddNewActiveDrawer,
+    onAiDrawerFocus,
     __disableRuntimeDrawers: disableRuntimeDrawers,
   }: UseDrawersProps,
   ariaLabels: AppLayoutProps['ariaLabels'],
@@ -198,6 +204,7 @@ export function useDrawers(
     changeHandler: 'onChange',
   });
   const [activeGlobalDrawersIds, setActiveGlobalDrawersIds] = useState<Array<string>>([]);
+  const [activeAiDrawerId, setActiveAiDrawerId] = useState<string | null>(null);
   const [drawerSizes, setDrawerSizes] = useState<Record<string, number>>({});
   const [expandedDrawerId, setExpandedDrawerId] = useState<string | null>(null);
   // FIFO queue that keeps track of open drawers, where the first element is the most recently opened drawer
@@ -210,6 +217,27 @@ export function useDrawers(
     fireNonCancelableEvent(activeGlobalDrawer?.onResize, { id, size });
   }
 
+  function onActiveAiDrawerChange(
+    newDrawerId: string | null,
+    { initiatedByUserAction }: OnChangeParams = DEFAULT_ON_CHANGE_PARAMS
+  ) {
+    setActiveAiDrawerId(newDrawerId);
+
+    if (newDrawerId) {
+      fireNonCancelableEvent(runtimeDrawers?.aiDrawer?.onToggle, { isOpen: true, initiatedByUserAction });
+    }
+
+    if (activeAiDrawerId) {
+      fireNonCancelableEvent(runtimeDrawers?.aiDrawer?.onToggle, { isOpen: false, initiatedByUserAction });
+
+      if (activeAiDrawerId === expandedDrawerId) {
+        setExpandedDrawerId(null);
+      }
+    }
+
+    onAiDrawerFocus?.();
+  }
+
   function onActiveDrawerChange(
     newDrawerId: string | null,
     { initiatedByUserAction }: OnChangeParams = DEFAULT_ON_CHANGE_PARAMS
@@ -278,7 +306,7 @@ export function useDrawers(
     activeGlobalDrawersIds,
     onActiveGlobalDrawersChange
   );
-  const { localBefore, localAfter, global: runtimeGlobalDrawers } = runtimeDrawers;
+  const { localBefore, localAfter, global: runtimeGlobalDrawers, aiDrawer } = runtimeDrawers;
   const combinedLocalDrawers = drawers
     ? [...localBefore, ...drawers, ...localAfter]
     : applyToolsDrawer(toolsProps, runtimeDrawers);
@@ -311,6 +339,10 @@ export function useDrawers(
     },
     {}
   );
+  const activeAiDrawer = activeAiDrawerId ? aiDrawer : null;
+  const activeAiDrawerSize = activeAiDrawerId
+    ? (drawerSizes[activeAiDrawerId] ?? activeAiDrawer?.defaultSize ?? DEFAULT_AI_DRAWER_SIZE)
+    : 0;
   const minGlobalDrawersSizes: Record<string, number> = runtimeGlobalDrawers.reduce((acc, globalDrawer) => {
     return {
       ...acc,
@@ -321,6 +353,7 @@ export function useDrawers(
     toolsProps?.toolsOpen ? toolsProps.toolsWidth : (activeDrawer?.defaultSize ?? MIN_DRAWER_SIZE),
     MIN_DRAWER_SIZE
   );
+  const minAiDrawerSize = Math.min(activeAiDrawer?.defaultSize ?? MIN_AI_DRAWER_SIZE, MIN_AI_DRAWER_SIZE);
 
   return {
     ariaLabelsWithDrawers: ariaLabels,
@@ -341,5 +374,11 @@ export function useDrawers(
     onActiveGlobalDrawersChange,
     expandedDrawerId,
     setExpandedDrawerId,
+    aiDrawer,
+    onActiveAiDrawerChange,
+    activeAiDrawer,
+    activeAiDrawerId,
+    activeAiDrawerSize,
+    minAiDrawerSize,
   };
 }
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..05894fa355
--- /dev/null
+++ b/src/app-layout/visual-refresh-toolbar/drawer/global-ai-drawer.tsx
@@ -0,0 +1,195 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useRef, useState } 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 { createWidgetizedComponent } from '../../../internal/widgets';
+import { getLimitedValue } from '../../../split-panel/utils/size-utils';
+import Toggle from '../../../toggle/internal';
+import { AppLayoutInternals } 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 AppLayoutGlobalAiDrawerImplementationProps {
+  appLayoutInternals: AppLayoutInternals;
+}
+
+export function AppLayoutGlobalAiDrawerImplementation({
+  appLayoutInternals,
+}: AppLayoutGlobalAiDrawerImplementationProps) {
+  const {
+    activeAiDrawer,
+    activeAiDrawerSize,
+    minAiDrawerSize,
+    maxAiDrawerSize,
+    ariaLabels,
+    aiDrawerFocusControl,
+    isMobile,
+    verticalOffsets,
+    drawersOpenQueue,
+    onActiveAiDrawerChange,
+    onActiveDrawerResize,
+    expandedDrawerId,
+    setExpandedDrawerId,
+  } = appLayoutInternals;
+  const drawerRef = useRef<HTMLDivElement>(null);
+  const activeDrawerId = activeAiDrawer?.id;
+  const [isWhiteHeader, setIsWhiteHeader] = useState(false);
+
+  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 lastOpenedDrawerId = drawersOpenQueue?.length ? drawersOpenQueue[0] : activeDrawerId;
+  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}}px)`;
+
+  return (
+    <Transition nodeRef={drawerRef} in={!!activeAiDrawer || isExpanded} appear={true} timeout={0}>
+      {state => (
+        <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,
+              [styles['last-opened']]: lastOpenedDrawerId === activeDrawerId || isExpanded,
+              [testutilStyles['active-drawer']]: activeDrawerId,
+              [styles['drawer-hidden']]: !activeAiDrawer,
+              [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: verticalOffsets.toolbar,
+            ...(!isMobile && {
+              [customCssProps.drawerSize]: `${['entering', 'entered'].includes(state) ? size : 0}px`,
+            }),
+          }}
+          data-testid={activeDrawerId && `awsui-app-layout-drawer-${activeDrawerId}`}
+        >
+          {!isMobile && activeAiDrawer?.resizable && (
+            <div className={styles['drawer-slider']}>
+              <PanelResizeHandle
+                ref={aiDrawerFocusControl.refs.slider}
+                position="side-start"
+                className={testutilStyles['drawers-slider']}
+                ariaLabel={activeAiDrawer?.ariaLabels?.resizeHandle}
+                tooltipText={activeAiDrawer?.ariaLabels?.resizeHandleTooltipText}
+                ariaValuenow={resizeProps.relativeSize}
+                onKeyDown={resizeProps.onKeyDown}
+                onPointerDown={resizeProps.onPointerDown}
+                onDirectionClick={resizeProps.onDirectionClick}
+              />
+            </div>
+          )}
+          <div className={clsx(styles['drawer-content-container'], sharedStyles['with-motion-horizontal'])}>
+            <div className={styles['drawer-content']}>
+              <header className={clsx(styles['drawer-content-header'], isWhiteHeader && styles['white-header'])}>
+                <div>
+                  <svg width="113" height="30" viewBox="0 0 113 30" fill="none" focusable="true">
+                    <path
+                      d="M0 15C0 6.71573 6.71573 0 15 0C23.2843 0 30 6.71573 30 15C30 23.2843 23.2843 30 15 30C6.71573 30 0 23.2843 0 15Z"
+                      fill="url(#paint0_linear_562_24682)"
+                    />
+                    <path
+                      d="M21.2099 10.4099L15.8599 7.31986C15.6199 7.17986 15.3099 7.10986 14.9899 7.10986C14.6699 7.10986 14.3599 7.17986 14.1199 7.31986L8.7699 10.4099C8.2899 10.6799 7.8999 11.3599 7.8999 11.9099V18.0899C7.8999 18.6399 8.2899 19.3099 8.7699 19.5899L14.1299 22.6799C14.3699 22.8199 14.6799 22.8899 14.9999 22.8899C15.3199 22.8899 15.6299 22.8199 15.8699 22.6799L21.2299 19.5899C21.7099 19.3099 22.0999 18.6399 22.0999 18.0899V11.9099C22.0999 11.3599 21.7099 10.6799 21.2299 10.4099H21.2099ZM14.9899 20.8799L9.8999 17.9399V12.0599L14.9899 9.11986L20.0799 12.0599V16.7799L16.9899 14.9999V14.2599C16.9899 13.9999 16.8499 13.7699 16.6299 13.6399L15.3499 12.8999C15.2399 12.8399 15.1099 12.7999 14.9899 12.7999C14.8699 12.7999 14.7399 12.8299 14.6299 12.8999L13.3499 13.6399C13.1299 13.7699 12.9899 14.0099 12.9899 14.2599V15.7399C12.9899 15.9999 13.1299 16.2299 13.3499 16.3599L14.6299 17.0999C14.7399 17.1599 14.8699 17.1999 14.9899 17.1999C15.1099 17.1999 15.2399 17.1699 15.3499 17.0999L15.9899 16.7299L19.0799 18.5099L14.9899 20.8699V20.8799Z"
+                      fill="white"
+                    />
+                    <path
+                      d="M38.48 21C38.2987 21 38.208 20.9307 38.208 20.792C38.208 20.76 38.2133 20.7227 38.224 20.68C38.2347 20.6373 38.2613 20.5627 38.304 20.456L42.032 10.264C42.0853 10.1253 42.1493 10.0347 42.224 9.992C42.2987 9.93867 42.3947 9.912 42.512 9.912H43.92C44.0373 9.912 44.1333 9.93867 44.208 9.992C44.2933 10.0347 44.3573 10.1253 44.4 10.264L48.112 20.456C48.1547 20.5627 48.1813 20.6373 48.192 20.68C48.2027 20.7227 48.208 20.76 48.208 20.792C48.208 20.9307 48.1173 21 47.936 21H46.544C46.3413 21 46.2027 20.8933 46.128 20.68L45.296 18.216H41.04L40.224 20.68C40.1493 20.8933 40.0107 21 39.808 21H38.48ZM41.504 16.792H44.848L43.168 11.672L41.504 16.792ZM50.7899 21H49.6059C49.3712 21 49.2539 20.8827 49.2539 20.648V13.208C49.2539 12.9733 49.3712 12.856 49.6059 12.856H50.4539C50.6992 12.856 50.8432 12.968 50.8859 13.192L50.9979 13.672C52.0325 12.968 53.0139 12.616 53.9419 12.616C54.4539 12.616 54.8752 12.712 55.2059 12.904C55.5472 13.0853 55.8085 13.3573 55.9899 13.72C57.0565 12.984 58.0805 12.616 59.0619 12.616C59.4779 12.616 59.8672 12.6907 60.2299 12.84C60.5925 12.9787 60.8859 13.224 61.1099 13.576C61.3339 13.928 61.4459 14.408 61.4459 15.016V20.648C61.4459 20.8827 61.3285 21 61.0939 21H59.9099C59.6752 21 59.5579 20.8827 59.5579 20.648V15.48C59.5579 14.9893 59.4619 14.6373 59.2699 14.424C59.0779 14.2107 58.7632 14.104 58.3259 14.104C57.9739 14.104 57.6112 14.1627 57.2379 14.28C56.8645 14.3973 56.5499 14.536 56.2939 14.696V20.648C56.2939 20.8827 56.1765 21 55.9419 21H54.7579C54.5232 21 54.4059 20.8827 54.4059 20.648V15.48C54.4059 14.9893 54.3099 14.6373 54.1179 14.424C53.9259 14.2107 53.6112 14.104 53.1739 14.104C52.8965 14.104 52.5765 14.152 52.2139 14.248C51.8619 14.3333 51.5045 14.4827 51.1419 14.696V20.648C51.1419 20.8827 51.0245 21 50.7899 21ZM65.387 21.24C64.651 21.24 64.0483 21.016 63.579 20.568C63.1097 20.12 62.875 19.5387 62.875 18.824C62.875 18.0347 63.1577 17.4053 63.723 16.936C64.2883 16.4667 65.0563 16.232 66.027 16.232C66.5923 16.232 67.211 16.312 67.883 16.472V15.528C67.883 14.9947 67.7657 14.6213 67.531 14.408C67.307 14.184 66.8963 14.072 66.299 14.072C65.9363 14.072 65.5417 14.1093 65.115 14.184C64.6883 14.2587 64.2883 14.3547 63.915 14.472C63.8083 14.504 63.7177 14.52 63.643 14.52C63.5043 14.52 63.435 14.4187 63.435 14.216V13.624C63.435 13.4533 63.4617 13.3413 63.515 13.288C63.5683 13.224 63.675 13.16 63.835 13.096C64.251 12.936 64.699 12.8187 65.179 12.744C65.659 12.6587 66.1337 12.616 66.603 12.616C67.6483 12.616 68.4163 12.8293 68.907 13.256C69.4083 13.6827 69.659 14.3493 69.659 15.256V20.648C69.659 20.8827 69.5417 21 69.307 21H68.459C68.2243 21 68.091 20.8933 68.059 20.68L67.979 20.216C67.6163 20.536 67.2057 20.7867 66.747 20.968C66.299 21.1493 65.8457 21.24 65.387 21.24ZM65.915 19.896C66.2243 19.896 66.5497 19.8267 66.891 19.688C67.243 19.5493 67.5737 19.3627 67.883 19.128V17.592C67.6483 17.5387 67.3977 17.496 67.131 17.464C66.8643 17.432 66.6137 17.416 66.379 17.416C65.2697 17.416 64.715 17.848 64.715 18.712C64.715 19.0747 64.8163 19.3627 65.019 19.576C65.2323 19.7893 65.531 19.896 65.915 19.896ZM77.2623 21H71.3423C71.1076 21 70.9903 20.8827 70.9903 20.648V20.04C70.9903 19.848 71.0009 19.7147 71.0223 19.64C71.0543 19.5547 71.1396 19.432 71.2783 19.272L75.5343 14.296H71.5023C71.2676 14.296 71.1503 14.1787 71.1503 13.944V13.208C71.1503 12.9733 71.2676 12.856 71.5023 12.856H77.2143C77.4489 12.856 77.5663 12.9733 77.5663 13.208V13.816C77.5663 13.9973 77.5503 14.1307 77.5183 14.216C77.4969 14.3013 77.4169 14.424 77.2783 14.584L73.0223 19.56H77.2623C77.4969 19.56 77.6143 19.6773 77.6143 19.912V20.648C77.6143 20.8827 77.4969 21 77.2623 21ZM82.3608 21.24C81.1341 21.24 80.1688 20.8613 79.4648 20.104C78.7714 19.3467 78.4248 18.2853 78.4248 16.92C78.4248 15.5547 78.7714 14.4987 79.4648 13.752C80.1688 12.9947 81.1341 12.616 82.3608 12.616C83.5874 12.616 84.5474 12.9947 85.2408 13.752C85.9448 14.4987 86.2968 15.5547 86.2968 16.92C86.2968 18.2853 85.9448 19.3467 85.2408 20.104C84.5474 20.8613 83.5874 21.24 82.3608 21.24ZM82.3608 19.752C83.0221 19.752 83.5234 19.5227 83.8648 19.064C84.2061 18.6053 84.3768 17.8907 84.3768 16.92C84.3768 15.9493 84.2061 15.24 83.8648 14.792C83.5234 14.3333 83.0221 14.104 82.3608 14.104C81.7101 14.104 81.2088 14.3333 80.8568 14.792C80.5154 15.24 80.3448 15.9493 80.3448 16.92C80.3448 17.8907 80.5154 18.6053 80.8568 19.064C81.2088 19.5227 81.7101 19.752 82.3608 19.752ZM89.4005 21H88.2165C87.9818 21 87.8645 20.8827 87.8645 20.648V13.208C87.8645 12.9733 87.9818 12.856 88.2165 12.856H89.0645C89.2032 12.856 89.3045 12.8773 89.3685 12.92C89.4325 12.952 89.4752 13.032 89.4965 13.16L89.6245 13.752C90.6272 12.9947 91.6725 12.616 92.7605 12.616C93.5498 12.616 94.1418 12.824 94.5365 13.24C94.9418 13.6453 95.1445 14.2373 95.1445 15.016V20.648C95.1445 20.8827 95.0272 21 94.7925 21H93.6085C93.3738 21 93.2565 20.8827 93.2565 20.648V15.608C93.2565 15.0747 93.1498 14.6907 92.9365 14.456C92.7232 14.2213 92.3818 14.104 91.9125 14.104C91.5605 14.104 91.1978 14.168 90.8245 14.296C90.4618 14.4133 90.1045 14.584 89.7525 14.808V20.648C89.7525 20.8827 89.6352 21 89.4005 21ZM110.751 23.64C110.602 23.64 110.421 23.6133 110.207 23.56C109.333 23.336 108.522 23.032 107.775 22.648C107.039 22.2747 106.351 21.8107 105.711 21.256C104.666 21.224 103.759 20.9733 102.991 20.504C102.234 20.0347 101.647 19.3733 101.231 18.52C100.826 17.6667 100.623 16.648 100.623 15.464C100.623 14.2587 100.837 13.224 101.263 12.36C101.701 11.4853 102.314 10.8187 103.103 10.36C103.893 9.89067 104.831 9.656 105.919 9.656C107.007 9.656 107.946 9.89067 108.735 10.36C109.535 10.8187 110.149 11.4853 110.575 12.36C111.002 13.224 111.215 14.2587 111.215 15.464C111.215 16.9467 110.89 18.1733 110.239 19.144C109.599 20.1147 108.709 20.7547 107.567 21.064C108.037 21.3413 108.511 21.5493 108.991 21.688C109.471 21.8267 110.031 21.9227 110.671 21.976C110.917 21.9973 111.039 22.12 111.039 22.344V23.32C111.039 23.5333 110.943 23.64 110.751 23.64ZM105.919 19.64C106.997 19.64 107.818 19.2827 108.383 18.568C108.949 17.8533 109.231 16.8187 109.231 15.464C109.231 14.0987 108.949 13.064 108.383 12.36C107.818 11.6453 106.997 11.288 105.919 11.288C104.842 11.288 104.021 11.6453 103.455 12.36C102.89 13.064 102.607 14.0987 102.607 15.464C102.607 16.8187 102.89 17.8533 103.455 18.568C104.021 19.2827 104.842 19.64 105.919 19.64Z"
+                      fill="#0F141A"
+                    />
+                    <defs>
+                      <linearGradient
+                        id="paint0_linear_562_24682"
+                        x1="36.7021"
+                        y1="5"
+                        x2="2.58231"
+                        y2="24.2488"
+                        gradientUnits="userSpaceOnUse"
+                      >
+                        <stop stopColor="#77FFED" />
+                        <stop offset="1" stopColor="#9A28EC" />
+                      </linearGradient>
+                    </defs>
+                  </svg>
+                </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>
+              </header>
+              <Toggle checked={isWhiteHeader} onChange={({ detail }) => setIsWhiteHeader(detail.checked)}>
+                White header
+              </Toggle>
+              {activeAiDrawer?.content}
+            </div>
+          </div>
+          {!isMobile && <div className={styles['drawer-gap']} />}
+        </aside>
+      )}
+    </Transition>
+  );
+}
+
+export const createWidgetizedGlobalAppLayoutAiDrawer = createWidgetizedComponent(AppLayoutGlobalAiDrawerImplementation);
diff --git a/src/app-layout/visual-refresh-toolbar/drawer/styles.scss b/src/app-layout/visual-refresh-toolbar/drawer/styles.scss
index 7b6e89d191..da6fc3faa6 100644
--- a/src/app-layout/visual-refresh-toolbar/drawer/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/drawer/styles.scss
@@ -237,4 +237,51 @@ $drawer-resize-handle-size: awsui.$space-m;
       }
     }
   }
+
+  &.ai-drawer {
+    grid-template-columns: 1fr awsui.$space-m;
+
+    > .drawer-gap {
+      grid-column: 3;
+      grid-row: 1;
+      block-size: 100%;
+      inline-size: $global-drawer-gap-size;
+      background: awsui.$color-gap-global-drawer;
+      border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-layout;
+      border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-layout;
+    }
+
+    > .drawer-slider {
+      grid-column: 2;
+    }
+
+    > .drawer-content-container {
+      min-inline-size: auto;
+
+      > .drawer-content {
+        > .drawer-content-header {
+          block-size: 41px;
+          box-sizing: border-box;
+          position: sticky;
+          z-index: 1000;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          inset-block-start: 0;
+          padding-inline: awsui.$space-m;
+          background: awsui.$color-gap-global-drawer;
+          border-block-end: awsui.$border-divider-section-width solid transparent;
+
+          &.white-header {
+            background-color: awsui.$color-background-layout-panel-content;
+            border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-layout;
+          }
+
+          > .drawer-actions {
+            display: flex;
+          }
+        }
+      }
+    }
+  }
 }
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/index.tsx b/src/app-layout/visual-refresh-toolbar/index.tsx
index b78bfa65b0..53f59c960e 100644
--- a/src/app-layout/visual-refresh-toolbar/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/index.tsx
@@ -29,6 +29,7 @@ import { AppLayoutVisibilityContext } from './contexts';
 import { AppLayoutInternalProps, AppLayoutInternals } from './interfaces';
 import {
   AppLayoutDrawer,
+  AppLayoutGlobalAiDrawer,
   AppLayoutGlobalDrawers,
   AppLayoutNavigation,
   AppLayoutNotifications,
@@ -133,12 +134,17 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
       closeFirstDrawer();
     };
 
+    const onAiDrawerFocus = () => {
+      aiDrawerFocusControl.setFocus(true);
+    };
+
     const {
       drawers,
       activeDrawer,
       minDrawerSize,
       minGlobalDrawersSizes,
       activeDrawerSize,
+      activeAiDrawerSize,
       ariaLabelsWithDrawers,
       globalDrawers,
       activeGlobalDrawers,
@@ -151,7 +157,11 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
       onActiveGlobalDrawersChange,
       expandedDrawerId,
       setExpandedDrawerId,
-    } = useDrawers({ ...rest, onGlobalDrawerFocus, onAddNewActiveDrawer }, ariaLabels, {
+      aiDrawer,
+      onActiveAiDrawerChange,
+      activeAiDrawer,
+      minAiDrawerSize,
+    } = useDrawers({ ...rest, onGlobalDrawerFocus, onAddNewActiveDrawer, onAiDrawerFocus }, ariaLabels, {
       ariaLabels,
       toolsHide,
       toolsOpen,
@@ -225,6 +235,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
 
     const globalDrawersFocusControl = useMultipleFocusControl(true, activeGlobalDrawersIds);
     const drawersFocusControl = useFocusControl(!!activeDrawer?.id, true, activeDrawer?.id);
+    const aiDrawerFocusControl = useFocusControl(!!activeAiDrawer?.id, true, activeAiDrawer?.id);
     const navigationFocusControl = useFocusControl(navigationOpen, navigationTriggerHide);
     const splitPanelFocusControl = useSplitPanelFocusControl([splitPanelPreferences, splitPanelOpen]);
 
@@ -255,6 +266,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
       splitPanelPosition,
       maxGlobalDrawersSizes,
       resizableSpaceAvailable,
+      maxAiDrawerSize,
     } = computeHorizontalLayout({
       activeDrawerSize: activeDrawer ? activeDrawerSize : 0,
       splitPanelSize,
@@ -266,6 +278,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
       splitPanelPosition: splitPanelPreferences?.position,
       isMobile,
       activeGlobalDrawersSizes,
+      activeAiDrawerSize,
     });
 
     const { ref: intersectionObserverRef, isIntersecting } = useIntersectionObserver({ initialState: true });
@@ -298,6 +311,10 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
         onSplitPanelToggle: onSplitPanelToggleHandler,
         expandedDrawerId,
         setExpandedDrawerId,
+        aiDrawer,
+        onActiveAiDrawerChange,
+        activeAiDrawerId: activeAiDrawer?.id ?? null,
+        aiDrawerFocusRef: aiDrawerFocusControl.refs.toggle,
       },
       isIntersecting
     );
@@ -356,6 +373,13 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
       splitPanelAnimationDisabled,
       expandedDrawerId,
       setExpandedDrawerId,
+      aiDrawer,
+      onActiveAiDrawerChange,
+      activeAiDrawer,
+      activeAiDrawerSize,
+      minAiDrawerSize,
+      maxAiDrawerSize,
+      aiDrawerFocusControl,
     };
 
     const splitPanelInternals: SplitPanelProviderProps = {
@@ -427,7 +451,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
 
       const activeNavigationWidth = !navigationHide && navigationOpen ? navigationWidth : 0;
       const scrollWidth = activeNavigationWidth + CONTENT_PADDING + totalActiveDrawersMinSize;
-      const hasHorizontalScroll = scrollWidth > placement.inlineSize;
+      const hasHorizontalScroll = scrollWidth > placement.inlineSize - activeAiDrawerSize;
       if (hasHorizontalScroll) {
         if (!navigationHide && navigationOpen) {
           onNavigationToggle(false);
@@ -445,6 +469,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
       navigationWidth,
       onNavigationToggle,
       placement.inlineSize,
+      activeAiDrawerSize,
     ]);
 
     /**
@@ -493,6 +518,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
           // which means the child layout isn't rendered at all in that case
           drawerExpandedModeInChildLayout={!!toolbarProps?.expandedDrawerId}
           drawerExpandedMode={!!expandedDrawerId}
+          aiDrawerExpandedMode={expandedDrawerId === activeAiDrawer?.id}
           style={{
             paddingBlockEnd: splitPanelOffsets.mainContentPaddingBlockEnd,
             ...(hasToolbar || !isNested
@@ -553,6 +579,7 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
           contentType={contentType}
           maxContentWidth={maxContentWidth}
           disableContentPaddings={disableContentPaddings}
+          aiDrawer={activeAiDrawer && <AppLayoutGlobalAiDrawer appLayoutInternals={appLayoutInternals} />}
         />
       </AppLayoutVisibilityContext.Provider>
     );
diff --git a/src/app-layout/visual-refresh-toolbar/interfaces.ts b/src/app-layout/visual-refresh-toolbar/interfaces.ts
index 0de8881fed..0c62cb178d 100644
--- a/src/app-layout/visual-refresh-toolbar/interfaces.ts
+++ b/src/app-layout/visual-refresh-toolbar/interfaces.ts
@@ -66,4 +66,11 @@ export interface AppLayoutInternals {
   splitPanelAnimationDisabled?: boolean;
   expandedDrawerId: string | null;
   setExpandedDrawerId: (value: string | null) => void;
+  aiDrawer?: InternalDrawer;
+  onActiveAiDrawerChange: (newDrawerId: string | null, params: OnChangeParams) => void;
+  activeAiDrawer?: InternalDrawer | null;
+  activeAiDrawerSize: number;
+  minAiDrawerSize: number;
+  maxAiDrawerSize: number;
+  aiDrawerFocusControl: FocusControlState;
 }
diff --git a/src/app-layout/visual-refresh-toolbar/internal.tsx b/src/app-layout/visual-refresh-toolbar/internal.tsx
index 0f7e01ece4..edfec619ee 100644
--- a/src/app-layout/visual-refresh-toolbar/internal.tsx
+++ b/src/app-layout/visual-refresh-toolbar/internal.tsx
@@ -1,6 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { createWidgetizedAppLayoutDrawer, createWidgetizedAppLayoutGlobalDrawers } from './drawer';
+import { createWidgetizedGlobalAppLayoutAiDrawer } from './drawer/global-ai-drawer';
 import { createWidgetizedAppLayoutNavigation } from './navigation';
 import { createWidgetizedAppLayoutNotifications } from './notifications';
 import {
@@ -12,6 +13,7 @@ import { createWidgetizedAppLayoutToolbar } from './toolbar';
 export const AppLayoutNavigation = createWidgetizedAppLayoutNavigation();
 export const AppLayoutDrawer = createWidgetizedAppLayoutDrawer();
 export const AppLayoutGlobalDrawers = createWidgetizedAppLayoutGlobalDrawers();
+export const AppLayoutGlobalAiDrawer = createWidgetizedGlobalAppLayoutAiDrawer();
 export const AppLayoutNotifications = createWidgetizedAppLayoutNotifications();
 export const AppLayoutToolbar = createWidgetizedAppLayoutToolbar();
 export const AppLayoutSplitPanelBottom = createWidgetizedAppLayoutSplitPanelDrawerBottom();
diff --git a/src/app-layout/visual-refresh-toolbar/multi-layout.ts b/src/app-layout/visual-refresh-toolbar/multi-layout.ts
index 53e125765b..69ac6c8d6f 100644
--- a/src/app-layout/visual-refresh-toolbar/multi-layout.ts
+++ b/src/app-layout/visual-refresh-toolbar/multi-layout.ts
@@ -34,6 +34,10 @@ export interface SharedProps {
   onSplitPanelToggle: () => void;
   expandedDrawerId?: string | null;
   setExpandedDrawerId: (value: string | null) => void;
+  aiDrawer: AppLayoutProps.Drawer | undefined;
+  onActiveAiDrawerChange: (value: string | null) => void;
+  activeAiDrawerId?: string | null;
+  aiDrawerFocusRef: React.Ref<Focusable> | undefined;
 }
 
 function checkAlreadyExists(value: boolean, propName: string) {
@@ -70,6 +74,12 @@ export function mergeProps(
       toolbar.activeGlobalDrawersIds = props.activeGlobalDrawersIds;
       toolbar.onActiveGlobalDrawersChange = props.onActiveGlobalDrawersChange;
     }
+    if (props.aiDrawer && !checkAlreadyExists(!!toolbar.aiDrawer, 'aiDrawer')) {
+      toolbar.aiDrawer = props.aiDrawer;
+      toolbar.onActiveAiDrawerChange = props.onActiveAiDrawerChange;
+      toolbar.activeAiDrawerId = props.activeAiDrawerId;
+      toolbar.aiDrawerFocusRef = props.aiDrawerFocusRef;
+    }
     if (props.navigation && !checkAlreadyExists(!!toolbar.hasNavigation, 'navigation')) {
       toolbar.hasNavigation = true;
       toolbar.navigationOpen = props.navigationOpen;
diff --git a/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx b/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
index 921091e46a..aa5bff817c 100644
--- a/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
@@ -47,6 +47,8 @@ interface SkeletonLayoutProps
   isNested?: boolean;
   drawerExpandedMode: boolean;
   drawerExpandedModeInChildLayout: boolean;
+  aiDrawerExpandedMode: boolean;
+  aiDrawer?: React.ReactNode;
 }
 
 const componentAnalyticsMetadata: GeneratedAnalyticsMetadataAppLayoutToolbarComponent = {
@@ -85,6 +87,8 @@ export const SkeletonLayout = React.forwardRef<HTMLDivElement, SkeletonLayoutPro
       isNested,
       drawerExpandedMode,
       drawerExpandedModeInChildLayout,
+      aiDrawerExpandedMode,
+      aiDrawer,
     },
     ref
   ) => {
@@ -99,6 +103,7 @@ export const SkeletonLayout = React.forwardRef<HTMLDivElement, SkeletonLayoutPro
             [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)`,
@@ -109,6 +114,16 @@ export const SkeletonLayout = React.forwardRef<HTMLDivElement, SkeletonLayoutPro
           {...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })}
         >
           {toolbar}
+          <div
+            className={styles['ai-drawer']}
+            style={{
+              // TODO replace with a var
+              insetBlockStart: '41px',
+              blockSize: 'calc(100vh - 41px)',
+            }}
+          >
+            {aiDrawer}
+          </div>
           {navigation && (
             <div
               className={clsx(
diff --git a/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss b/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
index a2997c154c..80d2ca0a7c 100644
--- a/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
@@ -24,7 +24,7 @@
   grid-column: 1 / -1;
 
   @include desktop-only {
-    grid-column: 2 / 5;
+    grid-column: 3 / 6;
   }
 }
 
@@ -50,10 +50,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 +83,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 +115,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/toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx
index c8dc199153..4d6e3071b0 100644
--- a/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx
@@ -50,6 +50,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 {
@@ -84,6 +89,10 @@ export function AppLayoutToolbarImplementation({
     onSplitPanelToggle,
     expandedDrawerId,
     setExpandedDrawerId,
+    aiDrawer,
+    activeAiDrawerId,
+    onActiveAiDrawerChange,
+    aiDrawerFocusRef,
   } = toolbarProps;
   const drawerExpandedMode = !!expandedDrawerId;
   const ref = useRef<HTMLElement>(null);
@@ -123,6 +132,30 @@ export function AppLayoutToolbarImplementation({
       }}
     >
       <div className={styles['toolbar-container']}>
+        {aiDrawer && !activeAiDrawerId && (
+          <div className={styles['universal-toolbar-ai-drawer']}>
+            <TriggerButton
+              // ariaLabel={ariaLabels?.navigationToggle ?? undefined}
+              ariaExpanded={!!activeAiDrawerId}
+              iconName={aiDrawer.trigger!.iconName}
+              iconSvg={aiDrawer.trigger!.iconSvg}
+              className={testutilStyles['ai-drawer-toggle']}
+              onClick={() => {
+                if (setExpandedDrawerId) {
+                  setExpandedDrawerId(null);
+                }
+                if (expandedDrawerId && expandedDrawerId) {
+                  return;
+                }
+                onActiveAiDrawerChange?.(aiDrawer?.id);
+              }}
+              ref={aiDrawerFocusRef}
+              selected={!drawerExpandedMode && !!activeAiDrawerId}
+              disabled={anyPanelOpenInMobile}
+            />
+            <div className={styles['group-divider']} />
+          </div>
+        )}
         {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..eb9d28fa7b 100644
--- a/src/app-layout/visual-refresh-toolbar/toolbar/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/toolbar/styles.scss
@@ -32,22 +32,33 @@
     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, 4fr) minmax(auto, 1fr);
     grid-template-rows: 1fr;
 
-    > .universal-toolbar-nav {
+    > .universal-toolbar-ai-drawer {
       grid-column: 1;
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      block-size: 100%;
+      align-items: center;
+      gap: awsui.$space-xs;
+      padding-inline-end: awsui.$space-static-xs;
+    }
+
+    > .universal-toolbar-nav {
+      grid-column: 2;
       padding-inline-end: awsui.$space-static-xxs;
     }
 
     > .universal-toolbar-breadcrumbs {
-      grid-column: 2;
+      grid-column: 3;
       background-color: transparent;
       flex: 1 0;
     }
 
     > .universal-toolbar-drawers {
-      grid-column: 3;
+      grid-column: 4;
       column-gap: awsui.$space-static-xs;
       display: flex;
       justify-content: flex-end;
diff --git a/src/internal/components/panel-resize-handle/index.tsx b/src/internal/components/panel-resize-handle/index.tsx
index 9b8cb756cc..934d532a22 100644
--- a/src/internal/components/panel-resize-handle/index.tsx
+++ b/src/internal/components/panel-resize-handle/index.tsx
@@ -11,7 +11,7 @@ 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;
@@ -28,17 +28,22 @@ export default React.forwardRef<HTMLDivElement, ResizeHandleProps>(function Pane
       ariaLabel={ariaLabel}
       tooltipText={tooltipText}
       ariaValue={{ valueMin: 0, valueMax: 100, valueNow: ariaValuenow }}
-      variant={position === 'side' ? 'resize-horizontal' : 'resize-vertical'}
+      variant={['side', 'side-start'].includes(position) ? 'resize-horizontal' : 'resize-vertical'}
       directions={
         position === 'side'
           ? {
               'inline-end': ariaValuenow === 0 ? 'disabled' : 'active',
               'inline-start': ariaValuenow === 100 ? 'disabled' : 'active',
             }
-          : {
-              'block-end': ariaValuenow === 0 ? 'disabled' : 'active',
-              'block-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/controllers/drawers.ts b/src/internal/plugins/controllers/drawers.ts
index d30706d411..ac53125f46 100644
--- a/src/internal/plugins/controllers/drawers.ts
+++ b/src/internal/plugins/controllers/drawers.ts
@@ -17,7 +17,7 @@ export interface DrawerStateChangeParams {
 
 export interface DrawerConfig {
   id: string;
-  type?: 'local' | 'global';
+  type?: 'local' | 'global' | 'global-ai';
   ariaLabels: {
     content?: string;
     closeButton?: string;