prometheus · ArthurSens · Apr 10, 2026 · Apr 10, 2026 · Apr 10, 2026
diff --git a/public/assets/prometheus-logo.svg b/public/assets/prometheus-logo.svg
diff --git a/src/app/ask-ai/page.tsx b/src/app/ask-ai/page.tsx
@@ -0,0 +1,12 @@
+import { getPageMetadata } from "@/page-metadata";
+import KapaPageLauncher from "@/components/KapaPageLauncher";
+
+export const metadata = getPageMetadata({
+  pageTitle: "Ask AI",
+  pageDescription: "Chat with the Prometheus documentation using Kapa.ai.",
+  pagePath: "/ask-ai/",
+});
+
+export default function AskAiPage() {
+  return <KapaPageLauncher />;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -21,6 +21,7 @@ import "@mantine/code-highlight/styles.layer.css";
 import "@mantine/spotlight/styles.layer.css";
 import "./globals.css";
 import { Header } from "@/components/Header";
+import KapaWidget from "@/components/KapaWidget";
 import {
   ANNOUNCEMENT_HEIGHT_PX,
   isAnnouncementActive,
@@ -74,6 +75,7 @@ export default function RootLayout({
       </head>
       <body>
         <MantineProvider theme={theme} defaultColorScheme="auto">
+          <KapaWidget variant="page" />
           <AppShell header={{ height: "var(--header-height)" }}>
             <Header announcement={activeAnnouncement} />
 

diff --git a/src/components/Header.module.css b/src/components/Header.module.css
@@ -39,3 +39,7 @@
     );
   }
 }
+
+.askAiButton {
+  font-weight: 500;
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -8,11 +8,12 @@ import {
   Container,
   TextInput,
   ActionIcon,
+  Button,
   AppShell,
   Popover,
 } from "@mantine/core";
 import Image from "next/image";
-import { IconSearch } from "@tabler/icons-react";
+import { IconSearch, IconSparkles } from "@tabler/icons-react";
 import prometheusLogo from "../assets/prometheus-logo.svg";
 import classes from "./Header.module.css";
 import githubLogo from "../assets/github-logo.svg";
@@ -61,6 +62,33 @@ export const Header = ({
     </Link>
   ));
 
+  const renderAskAiButton = ({
+    hiddenFrom,
+    onClick,
+  }: {
+    hiddenFrom?: "sm" | "md" | "lg";
+    onClick?: () => void;
+  }) => (
+    <Button
+      component={Link}
+      href="/ask-ai"
+      variant="subtle"
+      color="gray"
+      size="compact-sm"
+      className={classes.askAiButton}
+      leftSection={
+        <IconSparkles
+          style={{ width: rem(16), height: rem(16) }}
+          stroke={1.8}
+        />
+      }
+      hiddenFrom={hiddenFrom}
+      onClick={onClick}
+    >
+      Ask AI
+    </Button>
+  );
+
   const actionIcons = (
     <>
       <ActionIcon
@@ -137,6 +165,7 @@ export const Header = ({
             <Group align="center">
               <Group gap={5} visibleFrom="sm" align="center">
                 {items}
+                {renderAskAiButton({})}
               </Group>
 
               <Group visibleFrom="md" gap="xs">
@@ -190,6 +219,12 @@ export const Header = ({
                 </Popover.Target>
                 <Popover.Dropdown>
                   {items}
+                  <Group m="xs" gap="xs">
+                    {renderAskAiButton({
+                      hiddenFrom: "sm",
+                      onClick: closeBurger,
+                    })}
+                  </Group>
                   <Group m="xs" gap="xs">
                     {actionIcons}
                   </Group>

diff --git a/src/components/KapaPageLauncher.tsx b/src/components/KapaPageLauncher.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { Button, Stack, Text, Title } from "@mantine/core";
+import { useEffect, useState } from "react";
+
+declare global {
+  interface Window {
+    Kapa?: {
+      close?: () => void;
+      open?: (options?: {
+        mode?: "search" | "ai";
+        query?: string;
+        submit?: boolean;
+      }) => void;
+      render?: (options?: { onRender?: () => void }) => void;
+      unmount?: () => void;
+    };
+  }
+}
+
+export default function KapaPageLauncher() {
+  const [hasRendered, setHasRendered] = useState(false);
+
+  const openAssistant = () => {
+    if (!window.Kapa?.render) {
+      return;
+    }
+
+    window.Kapa.render({
+      onRender: () => {
+        setHasRendered(true);
+        window.Kapa?.open?.({ mode: "ai" });
+      },
+    });
+  };
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const openWhenReady = () => {
+      if (cancelled) {
+        return;
+      }
+
+      if (!window.Kapa?.render) {
+        window.setTimeout(openWhenReady, 100);
+        return;
+      }
+
+      window.Kapa.render({
+        onRender: () => {
+          if (cancelled) {
+            return;
+          }
+
+          setHasRendered(true);
+          window.Kapa?.open?.({ mode: "ai" });
+        },
+      });
+    };
+
+    openWhenReady();
+
+    return () => {
+      cancelled = true;
+      window.Kapa?.close?.();
+      window.Kapa?.unmount?.();
+    };
+  }, []);
+
+  return (
+    <Stack gap="md" maw={640}>
+      <Title order={1}>Ask AI</Title>
+      <Text c="dimmed">
+        This branch gives Kapa a dedicated route, then opens the assistant in a
+        full-screen experience so the conversation gets most of the viewport.
+      </Text>
+      <Text c="dimmed">
+        {hasRendered
+          ? "If you close the assistant, use the button below to open it again."
+          : "Loading the assistant..."}
+      </Text>
+      <Button w="fit-content" onClick={openAssistant}>
+        Open Ask AI
+      </Button>
+    </Stack>
+  );
+}
diff --git a/src/components/KapaWidget.tsx b/src/components/KapaWidget.tsx
@@ -0,0 +1,53 @@
+import Script from "next/script";
+import docsConfig from "../../docs-config";
+
+export type KapaWidgetVariant = "drawer" | "modal" | "page";
+
+type KapaWidgetProps = {
+  variant: KapaWidgetVariant;
+};
+
+const WEBSITE_ID = "80cbacc9-0b84-48aa-bfb8-0002270176bf";
+const PROJECT_NAME = "Prometheus";
+const PROJECT_COLOR = "#D86444";
+const ASK_AI_TRIGGER_SELECTOR = "[data-kapa-trigger='ask-ai']";
+const PROJECT_LOGO_URL = new URL(
+  "/assets/prometheus-logo.svg",
+  docsConfig.siteUrl,
+).toString();
+
+export default function KapaWidget({ variant }: KapaWidgetProps) {
+  const triggerProps =
+    variant === "page"
+      ? {}
+      : {
+          "data-modal-override-open-selector-ask-ai": ASK_AI_TRIGGER_SELECTOR,
+        };
+
+  const variantProps =
+    variant === "drawer"
+      ? {
+          "data-view-mode": "sidebar",
+        }
+      : variant === "page"
+        ? {
+            "data-render-on-load": "false",
+            "data-modal-full-screen": "true",
+          }
+        : {};
+
+  return (
+    <Script
+      id="kapa-widget"
+      strategy="afterInteractive"
+      src="https://widget.kapa.ai/kapa-widget.bundle.js"
+      data-website-id={WEBSITE_ID}
+      data-project-name={PROJECT_NAME}
+      data-project-color={PROJECT_COLOR}
+      data-project-logo={PROJECT_LOGO_URL}
+      data-button-hide="true"
+      {...triggerProps}
+      {...variantProps}
+    />
+  );
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -39,3 +39,7 @@ @@
         );
       }
     }
+    .askAiButton {
+      font-weight: 500;
+    }