https://github.com/dstackai/dstack-cloud/issues/296

Author: olgenn

frontend/public/index.html

@@ -22,5 +22,19 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div class="b-page-header" id="header"></div>
     <div id="root"></div>
+
+    <script src="https://widget.kapa.ai/kapa-widget.bundle.js"
+            data-website-id="1c028b8e-609e-40e3-b792-f3939a461850"
+            data-project-name="dstack"
+            data-project-color="rgba(0, 0, 0, 0.87)"
+            data-font-size-lg="0.78rem"
+            data-button-hide="true"
+            data-modal-image="/logo-notext.svg"
+            data-modal-z-index="1100"
+            data-modal-title="Ask me anything"
+            data-project-logo="/assets/images/kapa.svg"
+            data-modal-disclaimer="This is a custom LLM for dstack with access to Documentation, API references and GitHub issues. This feature is experimental - Give it a try!"
+            data-user-analytics-fingerprint-enabled="true"
+            async></script>
   </body>
 </html>

frontend/public/logo-notext.svg

@@ -137,6 +137,11 @@ const AppLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
 
     const ThemeIcon = THEME_ICON_MAP[systemMode];
 
+    const askAi = () => {
+        window.document.body.focus();
+        window?.Kapa?.open();
+    };
+
     return (
         <AnnotationContext>
             <HeaderPortal>
@@ -150,7 +155,7 @@ const AppLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
                         utilities={[
                             process.env.UI_VERSION === 'sky' && {
                                 type: 'button',
-                                iconName: 'gen-ai',
+                                iconName: 'suggestions',
                                 title: t('common.tutorial_other'),
                                 onClick: toggleTutorialPanel,
                             },
@@ -172,6 +177,13 @@ const AppLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
                                 iconSvg: <ThemeIcon />,
                                 onClick: onChangeSystemModeToggle,
                             },
+                            process.env.UI_VERSION === 'sky' && {
+                                type: 'button',
+                                iconName: 'gen-ai',
+                                text: t('common.ask_ai'),
+                                title: t('common.ask_ai'),
+                                onClick: askAi,
+                            },
                             {
                                 'data-class': 'user-menu',
                                 type: 'menu-dropdown',

frontend/src/layouts/AppLayout/index.tsx

@@ -48,7 +48,8 @@
     "danger_zone": "Danger Zone",
     "control_plane": "Control plane",
     "refresh": "Refresh",
-    "quickstart": "Quickstart"
+    "quickstart": "Quickstart",
+    "ask_ai": "Ask AI"
   },
 
   "auth": {