diff --git a/blocks/aem-asset-selector/aem-asset-selector-util.js b/blocks/aem-asset-selector/aem-asset-selector-util.js
index cd068d7df..2e633842e 100644
--- a/blocks/aem-asset-selector/aem-asset-selector-util.js
+++ b/blocks/aem-asset-selector/aem-asset-selector-util.js
@@ -1,15 +1,106 @@
-/* eslint-disable no-console */
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+/**
+ * @typedef Links
+ */
+
+/**
+ * @typedef Asset
+ * @property {Links} _links Rels for the asset. Is expected to have a
+ *  http://ns.adobe.com/adobecloud/rel/rendition rel for retrieving the
+ *  asset's renditions, and a http://ns.adobe.com/adobecloud/rel/download
+ *  rel for retrieving a URL to the asset's original content, which
+ *  doesn't require authentication.
+ */
+
+/**
+ * @typedef Rendition
+ * @property {string} type Content type of the rendition.
+ * @property {number} width Width, in pixels, of the rendition.
+ * @property {string} href Full URL to the rendition's binary. This URL
+ *  will require authentication.
+ * @property {Links} _links Rels for the rendition. Is expected to have
+ *  a http://ns.adobe.com/adobecloud/rel/download rel for retrieving a
+ *  URL to the rendition's content, which doesn't require authentication.
+ */
+
+/**
+ * @typedef AssetSelectorConfig
+ * @property {string} [imsClientId] If provided, will be used as the client ID
+ *  when authenticating with IMS.
+ * @property {string} [repositoryId] If provided, will be used as the selected
+ *  repository in the Asset Selector.
+ * @property {string} [imsOrgId] If provided, will be used as the IMS org to use
+ *  when logging in through IMS.
+ * @property {string} [environment] If provided, will be the IMS environment to
+ *  use when logging in through IMS. Should be STAGE or PROD.
+ * @property {function} [onAssetSelected] If provided, will be invoked with the
+ *  repository metadata for the asset that was selected.
+ * @property {function} [onAssetDeselected] If provided, will be invoked with
+ *  no arguments if the currently selected asset is deselected.
+ * @property {function} [onAccessTokenReceived] If provided, will be invoked
+ *  when an IMS token is available for the user. May be invoked multiple times
+ *  with the same token during the session.
+ */
+
 const AS_MFE = 'https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/assets-selectors.js';
 const IMS_ENV_STAGE = 'stg1';
 const IMS_ENV_PROD = 'prod';
 const API_KEY = 'franklin';
 const WEB_TOOLS = 'https://master-sacred-dove.ngrok-free.app';
+const REL_DOWNLOAD = 'http://ns.adobe.com/adobecloud/rel/download';
+const REL_RENDITIONS = 'http://ns.adobe.com/adobecloud/rel/rendition';
 // TODO: change this to Asset Link IMS client ID
 const IMS_CLIENT_ID = 'p66302-franklin';
+const ASSET_SELECTOR_ID = 'asset-selector';
 
 let imsInstance = null;
 let imsEnvironment = IMS_ENV_PROD;
 
+/**
+ * Logs a message to the console.
+ * @param  {...any} theArgs Arguments to pass to the console log
+ *  statement.
+ */
+function logMessage(...theArgs) {
+  // eslint-disable-next-line no-console
+  console.log.apply(null, theArgs);
+}
+
+/**
+ * Retrieves the value of a rel from repository metadata.
+ * @param {Asset|Rendition} repositoryMetadata Metadata whose links
+ *  will be used.
+ * @param {string} rel The rel to retrieve.
+ */
+function getRel(repositoryMetadata, rel) {
+  if (!repositoryMetadata) {
+    return undefined;
+  }
+  // eslint-disable-next-line no-underscore-dangle
+  return repositoryMetadata._links[rel];
+}
+
+/**
+ * Adds a new <script> tag to the documents <head>.
+ * @param {string} url URL of the script to load.
+ * @param {function} callback Invoked after the script has
+ *  finished loading.
+ * @param {string} [type] If provided, the value to use in
+ *  the scripts "type" property. If unspecified the type
+ *  will be left blank.
+ * @returns {HTMLElement} The newly created script tag.
+ */
 function loadScript(url, callback, type) {
   const $head = document.querySelector('head');
   const $script = document.createElement('script');
@@ -22,6 +113,12 @@ function loadScript(url, callback, type) {
   return $script;
 }
 
+/**
+ * Loads the asset selector by registering the IMS auth service it
+ * should use to authorize users.
+ * @param {AssetSelectorConfig} cfg Configuration to use for the
+ *  selector.
+ */
 function load(cfg) {
   const imsProps = {
     imsClientId: cfg['ims-client-id'] ? cfg['ims-client-id'] : IMS_CLIENT_ID,
@@ -37,6 +134,13 @@ function load(cfg) {
   imsInstance = registeredTokenService;
 }
 
+/**
+ * Initializes the asset selector by loading its script file, and registering
+ * the IMS auth service it should use to authenticate with IMS.
+ * @param {AssetSelectorConfig} cfg Configuration for the selector.
+ * @param {function} [callback] If provided, will be invoked after
+ *  all intialization steps are complete.
+ */
 export function init(cfg, callback) {
   if (cfg.environment) {
     if (cfg.environment.toUpperCase() === 'STAGE') {
@@ -55,10 +159,12 @@ export function init(cfg, callback) {
   });
 }
 
-function onClose() {
-  document.getElementById('asset-selector-dialog').close();
-}
-
+/**
+ * Generates a URL that can be used to retrieve an asset's binary
+ * without authentication.
+ * @param {string} url URL to the asset in AEM.
+ * @returns {Promise} Resolves with the public asset URL.
+ */
 async function getAssetPublicUrl(url) {
   const response = await fetch(`${WEB_TOOLS}/asset-bin?src=${url}`, {
     headers: {
@@ -66,28 +172,51 @@ async function getAssetPublicUrl(url) {
       'x-api-key': API_KEY,
     },
   });
-  if (response && response.ok) {
-    const json = await response.json();
-    return json['asset-url'];
+  if (!response) {
+    throw new Error('No response from request');
   }
-  if (response && !response.ok) {
-    throw new Error(response.statusTest);
+  if (!response.ok) {
+    throw new Error(`Request failed with status ${response.status}: ${response.statusText}`);
   }
-  return null;
+  const json = await response.json();
+  return json['asset-url'];
 }
 
-async function handleSelection(selection) {
-  const selectedAsset = selection[0];
+/**
+ * Retrieves the rendition that should be copied into the clipboard for
+ * the given asset.
+ * @param {Asset} asset Asset whose copy rendition should be retrieved.
+ * @returns {Rendition} Rendition whose content should be copied to
+ *  the clipboard. Will return a falsy value if no suitable rendition
+ *  could be found.
+ */
+function getCopyRendition(asset) {
   let maxRendition = null;
-  // eslint-disable-next-line no-underscore-dangle
-  selectedAsset._links['http://ns.adobe.com/adobecloud/rel/rendition'].forEach((rendition) => {
-    if ((!maxRendition || maxRendition.width < rendition.width)) {
-      maxRendition = rendition;
-    }
-  });
+  const renditions = getRel(asset, REL_RENDITIONS);
+  if (!renditions) {
+    return maxRendition;
+  }
+  renditions
+    // TODO: the clipboard API only supports using PNGs as the blob, so
+    // only using PNG renditions. Will be fixed to allow altnernate
+    // formats in a follow-up ticket
+    .filter((rendition) => rendition.type === 'image/png')
+    .forEach((rendition) => {
+      if ((!maxRendition || maxRendition.width < rendition.width)) {
+        maxRendition = rendition;
+      }
+    });
+  return maxRendition;
+}
 
-  const assetPublicUrl = await getAssetPublicUrl(maxRendition.href.substring(0, maxRendition.href.indexOf('?')));
-  console.log('Asset public URL:', assetPublicUrl);
+/**
+ * Uses the navigator global object to write a clipboard item to the clipboard.
+ * The clipboard item's content will be an <img /> tag with the given URL as
+ * its src property.
+ * @param {string} assetPublicUrl URL to use as the image's src.
+ * @returns {Promise} Resolves when the item has been written to the clipboard.
+ */
+async function copyToClipboardWithHtml(assetPublicUrl) {
   const assetMarkup = `<img src="${assetPublicUrl}"  />`;
 
   const data = [
@@ -95,22 +224,160 @@ async function handleSelection(selection) {
     new ClipboardItem({ 'text/html': new Blob([assetMarkup], { type: 'text/html' }) }),
   ];
   // Write the new clipboard contents
-  await navigator.clipboard.write(data);
-  // onClose();
+  return navigator.clipboard.write(data);
+}
+
+/**
+ * Uses the navigator global object to write a clipboard item to the clipboard.
+ * The clipboard item's content will be a Blob containing the image binary from
+ * the given URL, which the method will retrieve.
+ * @param {string} assetPublicUrl URL of the image to retrieve.
+ * @param {string} mimeType Content type of the image being retrieved.
+ * @returns {Promise} Resolves when the item has been written to the clipboard.
+ */
+async function copyToClipboardWithBinary(assetPublicUrl, mimeType) {
+  const binary = await fetch(assetPublicUrl);
+
+  if (!binary || !binary.ok) {
+    throw new Error(`Unexpected status code ${binary.status} retrieving asset binary`);
+  }
+
+  const blob = await binary.blob();
+  if (!blob) {
+    throw new Error('No blob provided in asset response');
+  }
+  const clipboardOptions = {};
+  clipboardOptions[mimeType] = blob;
+  const data = [
+    new ClipboardItem(clipboardOptions),
+  ];
+  return navigator.clipboard.write(data);
 }
 
-// eslint-disable-next-line no-unused-vars
-function handleNavigateToAsset(asset) {
-  // onClose();
+/**
+ * Copies the given asset to the clipboard, without using the Repository API,
+ * and therefore avoiding calls directly to AEM. The primary case for using
+ * this method would be if AEM's CORS policies would deny requests from the
+ * asset selector.
+ * @param {Asset} asset Asset repository metadata, as provided by the asset
+ *  selector.
+ * @returns {Promise<boolean>} Resolves with true if the asset was
+ *  copied successfully, otherwise resolves with false.
+ */
+export async function copyAssetWithoutRapi(asset) {
+  const maxRendition = getCopyRendition(asset);
+  if (!maxRendition) {
+    logMessage('No rendition to copy found');
+    return false;
+  }
+  try {
+    const assetPublicUrl = await getAssetPublicUrl(maxRendition.href.substring(0, maxRendition.href.indexOf('?')));
+    if (!assetPublicUrl) {
+      logMessage('Unable to generate public url for copy');
+      return false;
+    }
+    await copyToClipboardWithHtml(assetPublicUrl);
+  } catch (e) {
+    logMessage('Error copying asset to clipboard', e);
+    return false;
+  }
+  return true;
 }
 
+/**
+ * Copies the given asset to the clipboard, using the Repository API to
+ * generate a download URL for the asset, then using the generated URL
+ * to copy the asset's content to the clipboard.
+ * @param {Asset} asset Asset repository metadata, as provided by the
+ *  asset selector.
+ * @returns {Promise<boolean>} Resolves with true if the asset was
+ *  copied successfully, otherwise resolves with false.
+ */
+export async function copyAssetWithRapi(asset) {
+  // eslint-disable-next-line no-underscore-dangle
+  if (!asset) {
+    logMessage('Asset metadata does not contain sufficient information');
+    return false;
+  }
+  const rendition = getCopyRendition(asset);
+  if (!rendition) {
+    logMessage('No rendition to copy found');
+    return false;
+  }
+  const download = getRel(rendition, REL_DOWNLOAD);
+  if (!download || !download.href) {
+    logMessage('Rendition does not contain sufficient information');
+    return false;
+  }
+  try {
+    const url = download.href;
+    const res = await fetch(url, {
+      headers: {
+        Authorization: `Bearer ${imsInstance.getImsToken()}`,
+      },
+    });
+    if (!res.ok) {
+      logMessage(`Download request for rendition binary failed with status code ${res.status}: ${res.statusText}`);
+      return false;
+    }
+    const downloadJson = await res.json();
+    if (!downloadJson) {
+      logMessage('Rendition download JSON not provided');
+      return false;
+    }
+    await copyToClipboardWithBinary(downloadJson.href, downloadJson.type);
+  } catch (e) {
+    logMessage('error copying asset to clipboard', e);
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * Retrieves the asset selector's containing element.
+ * @returns {HTMLElement} The asset selector.
+ */
+function getAssetSelector() {
+  return document.getElementById(ASSET_SELECTOR_ID);
+}
+
+/**
+ * Invoked when the currently selected asset in the asset selector has
+ * changed. Will invoke either onAssetSelected() or onAssetDeselected()
+ * depending on the new selection state.
+ * @param {Array<Asset>} selection The new selection in the selector.
+ * @param {AssetSelectorConfig} cfg Configuration for the asset selector.
+ */
+function handleAssetSelection(selection, cfg) {
+  if (cfg) {
+    if (selection.length && cfg.onAssetSelected) {
+      if (selection.length > 0) {
+        logMessage('Multiple items received in selection, but only the first will be used');
+      }
+      cfg.onAssetSelected(selection[0]);
+    } else if (!selection.length && cfg.onAssetDeselected) {
+      cfg.onAssetDeselected();
+    }
+  }
+}
+
+/**
+ * Renders the asset selector according to a given configuration. The
+ * selector will use its IMS flow to ensure that the user has logged
+ * in.
+ * @param {AssetSelectorConfig} cfg Configuration to use for the
+ *  asset selector.
+ * @returns {Promise} Resolves when the IMS flow has been initiated.
+ */
 export async function renderAssetSelectorWithImsFlow(cfg) {
   const assetSelectorProps = {
-    onClose,
-    handleSelection,
-    handleNavigateToAsset,
+    handleAssetSelection: (e) => handleAssetSelection(e, cfg),
     env: cfg.environment ? cfg.environment.toUpperCase() : 'PROD',
     apiKey: API_KEY,
+    hideTreeNav: true,
+    runningInUnifiedShell: false,
+    noWrap: true,
   };
 
   if (cfg['repository-id']) {
@@ -119,16 +386,15 @@ export async function renderAssetSelectorWithImsFlow(cfg) {
   if (cfg['ims-org-id']) {
     assetSelectorProps.imsOrg = cfg['ims-org-id'];
   }
-  const container = document.getElementById('asset-selector');
+
   // eslint-disable-next-line no-undef
-  PureJSSelectors.renderAssetSelectorWithAuthFlow(container, assetSelectorProps, () => {
-    const assetSelectorDialog = document.getElementById('asset-selector-dialog');
-    assetSelectorDialog.showModal();
-  });
+  PureJSSelectors.renderAssetSelectorWithAuthFlow(getAssetSelector(), assetSelectorProps);
 }
 
+/**
+ * Does the work of logging out of IMS.
+ * @returns {Promise} Resolves when logout has finished.
+ */
 export async function logoutImsFlow() {
-  // eslint-disable-next-line no-console
-  console.log('Signing out...', imsInstance);
-  await imsInstance.signOut();
+  return imsInstance.signOut();
 }
diff --git a/blocks/aem-asset-selector/aem-asset-selector.css b/blocks/aem-asset-selector/aem-asset-selector.css
index 47cdcbb6e..94891fe88 100644
--- a/blocks/aem-asset-selector/aem-asset-selector.css
+++ b/blocks/aem-asset-selector/aem-asset-selector.css
@@ -1,40 +1,104 @@
-#asset-selector {
-  height: calc(100vh - 80px);
-  width: calc(100vw - 60px);
-  margin: -20px;
-}
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
 
 footer,
 header {
   display: none;
 }
 
-.aem-asset-selector-container {
-  display: flex;
+main .section.aem-asset-selector-container {
+  padding: 0;
+  margin: 0;
+}
+
+main .section > div.aem-asset-selector-wrapper {
+  padding: 0;
+  margin: 0;
+  max-width: unset;
 }
 
 .action-container {
   display: flex;
-  justify-content: space-around;
+  justify-content: center;
+  align-items: center;
+  gap: .5rem;
+  position: absolute;
+  right: 20px;
+  left: 20px;
+  z-index: 1;
+  height: 70px;
+}
+
+.action-container img {
+  max-height: 40px;
+}
+
+.action-container > div {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-grow: 1;
+}
+
+.action-container button {
+  width: 120px;
 }
 
 .action-container > button {
   padding: 10px;
+  flex-grow: auto;
+  display: none;
 }
 
-main .asset-overlay {
+#asset-selector {
   position: absolute;
   inset: 0;
+  overflow: hidden;
+  margin-top: 70px;
+}
+
+main .asset-overlay {
+  position: absolute;
+  top: 70px;
+  left: 0;
+  right: 0;
+  bottom: 0;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
   background-color: white;
   z-index: 10;
 }
 
+main .asset-overlay.loading {
+  align-items: center;
+}
+
 main #login {
+  display: none;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   text-align: center;
 }
+
+main #login p {
+  font-size: 18px;
+  padding: 1rem 2rem;
+}
+
+main button.disabled {
+  color: gray;
+  background-color: lightgray;
+  cursor: pointer;
+  pointer-events: none;
+}
diff --git a/blocks/aem-asset-selector/aem-asset-selector.js b/blocks/aem-asset-selector/aem-asset-selector.js
index a5f0b26cc..f96770c8c 100644
--- a/blocks/aem-asset-selector/aem-asset-selector.js
+++ b/blocks/aem-asset-selector/aem-asset-selector.js
@@ -1,42 +1,96 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
 import { readBlockConfig } from '../../scripts/lib-franklin.js';
 import {
-  init, renderAssetSelectorWithImsFlow, logoutImsFlow,
+  init,
+  renderAssetSelectorWithImsFlow,
+  logoutImsFlow,
+  copyAssetWithoutRapi,
+  copyAssetWithRapi,
 } from './aem-asset-selector-util.js';
 
-export default function decorate(block) {
+const LOGIN_TIMEOUT = 2000;
+
+export default async function decorate(block) {
   let rendered = false;
+  let selected = false;
   const cfg = readBlockConfig(block);
   block.textContent = '';
   block.innerHTML = `
-    <div class="asset-overlay">
+    <div class="asset-overlay loading">
+      <img id="loading" src="${cfg.loading}" />
       <div id="login">
-        <p>Welcome to the Asset Selector! After signing in you'll have the option to select which assets to use.</p>
+        <p>Welcome to the Asset Selector. Please sign in to view your assets.</p>
         <button id="as-login">Sign In</button>
       </div>
     </div>
     <div class="action-container">
+        <div><img src="${cfg.logo}" /></div>
+        <button id="as-copy" class="disabled">Copy</button>
         <button id="as-cancel">Sign Out</button>
     </div>
-    <dialog id="asset-selector-dialog">
-        <div id="asset-selector" style="height: calc(100vh - 80px); width: calc(100vw - 60px); margin: -20px;">
-        </div>
-    </dialog>
-    `;
+    <div id="asset-selector">
+    </div>
+  `;
+
   block.querySelector('#as-login').addEventListener('click', (e) => {
     e.preventDefault();
     renderAssetSelectorWithImsFlow(cfg);
   });
 
+  const copy = block.querySelector('#as-copy');
+  copy.addEventListener('click', async (e) => {
+    e.preventDefault();
+    if (selected) {
+      copy.classList.add('disabled');
+      copy.innerText = 'Copying...';
+      const copyMethod = cfg['use-rapi'] ? copyAssetWithRapi : copyAssetWithoutRapi;
+      const success = await copyMethod(selected);
+      if (success) {
+        copy.innerText = 'Copied!';
+      } else {
+        copy.innerText = 'Error!';
+      }
+      copy.classList.remove('disabled');
+    }
+  });
+
   block.querySelector('#as-cancel').addEventListener('click', (e) => {
     e.preventDefault();
     logoutImsFlow();
   });
 
+  // give a little time for onAccessTokenReceived() to potentially come in
+  setTimeout(() => {
+    const overlay = block.querySelector('.asset-overlay');
+    if (overlay.style.display !== 'none') {
+      // at this point the overlay is still visible, meaning that we haven't
+      // gotten an event indicating the user is logged in. Display the
+      // sign in interface
+      overlay.classList.remove('loading');
+      block.querySelector('#loading').style.display = 'none';
+      block.querySelector('#login').style.display = 'flex';
+    }
+  }, LOGIN_TIMEOUT);
+
   // this will be sent by the auth service if the user has a token, meaning
   // they're logged in. if that happens, hide the login overlay and show
   // the asset selector
   cfg.onAccessTokenReceived = () => {
     block.querySelector('.asset-overlay').style.display = 'none';
+    block.querySelectorAll('.action-container button').forEach((button) => {
+      button.style.display = 'block';
+    });
     if (!rendered) {
       rendered = true;
       // calling this shouldn't prompt the user to log in, since they're logged
@@ -44,5 +98,18 @@ export default function decorate(block) {
       renderAssetSelectorWithImsFlow(cfg);
     }
   };
+
+  cfg.onAssetSelected = (e) => {
+    selected = e;
+    copy.classList.remove('disabled');
+    copy.innerText = 'Copy';
+  };
+
+  cfg.onAssetDeselected = () => {
+    selected = false;
+    copy.classList.add('disabled');
+    copy.innerText = 'Copy';
+  };
+
   init(cfg);
 }
diff --git a/tools/sidekick/config.json b/tools/sidekick/config.json
index f13886575..226d48d1a 100644
--- a/tools/sidekick/config.json
+++ b/tools/sidekick/config.json
@@ -10,7 +10,18 @@
       "url": "/aem-asset-selector",
       "isPalette": true,
       "includePaths": [ "**.docx**" ],
-      "paletteRect": "top: auto; bottom: 20px; left: 20px; width:1000px; height:700px"
+      "paletteRect": "top: 50px; bottom: 10px; right: 10px; left: auto; width:400px; height: calc(100vh - 60px)"
+    },
+    {
+      "id": "asset-library-stage",
+      "title": "AEM Assets Library Stage",
+      "environments": [
+        "edit"
+      ],
+      "url": "/aem-asset-selector-stage",
+      "isPalette": true,
+      "includePaths": [ "**.docx**" ],
+      "paletteRect": "top: 50px; bottom: 10px; right: 10px; left: auto; width:400px; height: calc(100vh - 60px)"
     }
   ]
 }