diff --git a/frontend/src/component/admin/apiToken/ApiTokenDocs/ApiTokenDocs.tsx b/frontend/src/component/admin/apiToken/ApiTokenDocs/ApiTokenDocs.tsx
index a6b94e2550d1..bff550cb7bb8 100644
--- a/frontend/src/component/admin/apiToken/ApiTokenDocs/ApiTokenDocs.tsx
+++ b/frontend/src/component/admin/apiToken/ApiTokenDocs/ApiTokenDocs.tsx
@@ -1,8 +1,33 @@
-import { Alert } from '@mui/material';
+import { Alert, Box, IconButton, styled, Tooltip } from '@mui/material';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import CopyIcon from '@mui/icons-material/FileCopy';
+import copy from 'copy-to-clipboard';
+import useToast from 'hooks/useToast';
+
+const GridContainer = styled('div')(({ theme }) => ({
+ display: 'grid',
+ gridTemplateColumns: 'auto auto 1fr',
+ gridAutoRows: 'min-content',
+ alignItems: 'center',
+ gap: theme.spacing(1),
+ marginTop: theme.spacing(1.5),
+}));
+const GridItem = Box;
export const ApiTokenDocs = () => {
const { uiConfig } = useUiConfig();
+ const { setToastData } = useToast();
+
+ const onCopyToClipboard = (url: string) => () => {
+ copy(url);
+ setToastData({
+ type: 'success',
+ title: 'Copied to clipboard',
+ });
+ };
+
+ const clientApiUrl = `${uiConfig.unleashUrl}/api/`;
+ const frontendApiUrl = `${uiConfig.unleashUrl}/api/frontend`;
return (
{uiConfig.unleashUrl}/api/+
{clientApiUrl}+
{frontendApiUrl}+