diff --git a/apps/webapp/app/assets/icons/SparkleListIcon.tsx b/apps/webapp/app/assets/icons/SparkleListIcon.tsx
new file mode 100644
index 0000000000..264fc227c8
--- /dev/null
+++ b/apps/webapp/app/assets/icons/SparkleListIcon.tsx
@@ -0,0 +1,14 @@
+export function SparkleListIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17 11C17.4304 11 17.8126 11.2754 17.9487 11.6838L18.4743 13.2607C18.6734 13.858 19.142 14.3266 19.7393 14.5257L21.3162 15.0513C21.7246 15.1874 22 15.5696 22 16C22 16.4304 21.7246 16.8126 21.3162 16.9487L19.7393 17.4743C19.142 17.6734 18.6734 18.142 18.4743 18.7393L17.9487 20.3162C17.8126 20.7246 17.4304 21 17 21C16.5696 21 16.1874 20.7246 16.0513 20.3162L15.5257 18.7393C15.3266 18.142 14.858 17.6734 14.2607 17.4743L12.6838 16.9487C12.2754 16.8126 12 16.4304 12 16C12 15.5696 12.2754 15.1874 12.6838 15.0513L14.2607 14.5257C14.858 14.3266 15.3266 13.858 15.5257 13.2607L16.0513 11.6838C16.1874 11.2754 16.5696 11 17 11Z"
+        fill="currentColor"
+      />
+      <rect x="2" y="6" width="20" height="2" rx="1" fill="currentColor" />
+      <rect x="2" y="15" width="7" height="2" rx="1" fill="currentColor" />
+    </svg>
+  );
+}
diff --git a/apps/webapp/app/components/AskAI.tsx b/apps/webapp/app/components/AskAI.tsx
new file mode 100644
index 0000000000..23b575b771
--- /dev/null
+++ b/apps/webapp/app/components/AskAI.tsx
@@ -0,0 +1,542 @@
+import {
+  ArrowPathIcon,
+  ArrowUpIcon,
+  HandThumbDownIcon,
+  HandThumbUpIcon,
+  StopIcon,
+} from "@heroicons/react/20/solid";
+import { type FeedbackComment, KapaProvider, type QA, useChat } from "@kapaai/react-sdk";
+import { useSearchParams } from "@remix-run/react";
+import { motion } from "framer-motion";
+import { marked } from "marked";
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { AISparkleIcon } from "~/assets/icons/AISparkleIcon";
+import { SparkleListIcon } from "~/assets/icons/SparkleListIcon";
+import { Button } from "./primitives/Buttons";
+import { Callout } from "./primitives/Callout";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./primitives/Dialog";
+import { Header2 } from "./primitives/Headers";
+import { Paragraph } from "./primitives/Paragraph";
+import { Spinner } from "./primitives/Spinner";
+import {
+  SimpleTooltip,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./primitives/Tooltip";
+import DOMPurify from "dompurify";
+
+type AskAIContextType = {
+  isOpen: boolean;
+  openAskAI: (question?: string) => void;
+  closeAskAI: () => void;
+  websiteId: string | null;
+};
+
+const AskAIContext = createContext<AskAIContextType | null>(null);
+
+export function useAskAI() {
+  const context = useContext(AskAIContext);
+  if (!context) {
+    throw new Error("useAskAI must be used within an AskAIProvider");
+  }
+  return context;
+}
+
+type AskAIProviderProps = {
+  children: ReactNode;
+  websiteId: string | null;
+};
+
+export function AskAIProvider({ children, websiteId }: AskAIProviderProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [initialQuery, setInitialQuery] = useState<string | undefined>();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const openAskAI = useCallback((question?: string) => {
+    if (question) {
+      setInitialQuery(question);
+    } else {
+      setInitialQuery(undefined);
+    }
+    setIsOpen(true);
+  }, []);
+
+  const closeAskAI = useCallback(() => {
+    setIsOpen(false);
+    setInitialQuery(undefined);
+  }, []);
+
+  // Handle URL param functionality
+  useEffect(() => {
+    const aiHelp = searchParams.get("aiHelp");
+    if (aiHelp) {
+      const decodedAiHelp = decodeURIComponent(aiHelp);
+
+      // Delay to avoid hCaptcha bot detection
+      const timeoutId = window.setTimeout(() => openAskAI(decodedAiHelp), 1000);
+
+      // Clone instead of mutating in place
+      const next = new URLSearchParams(searchParams);
+      next.delete("aiHelp");
+      setSearchParams(next);
+
+      return () => clearTimeout(timeoutId);
+    }
+  }, [searchParams.toString(), openAskAI]);
+
+  const contextValue: AskAIContextType = {
+    isOpen,
+    openAskAI,
+    closeAskAI,
+    websiteId,
+  };
+
+  if (!websiteId) {
+    return <AskAIContext.Provider value={contextValue}>{children}</AskAIContext.Provider>;
+  }
+
+  return (
+    <AskAIContext.Provider value={contextValue}>
+      <KapaProvider
+        integrationId={websiteId}
+        callbacks={{
+          askAI: {
+            onQuerySubmit: () => openAskAI(),
+            onAnswerGenerationCompleted: () => openAskAI(),
+          },
+        }}
+        botProtectionMechanism="hcaptcha"
+      >
+        {children}
+        <AskAIDialog initialQuery={initialQuery} isOpen={isOpen} onOpenChange={setIsOpen} />
+      </KapaProvider>
+    </AskAIContext.Provider>
+  );
+}
+
+type AskAIDialogProps = {
+  initialQuery?: string;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+function AskAIDialog({ initialQuery, isOpen, onOpenChange }: AskAIDialogProps) {
+  const { closeAskAI } = useAskAI();
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      closeAskAI();
+    } else {
+      onOpenChange(open);
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
+      <DialogContent className="animated-gradient-glow flex max-h-[90vh] min-h-fit w-full flex-col justify-between gap-0 px-0 pb-0 pt-0 sm:max-w-prose">
+        <DialogHeader className="flex h-[2.75rem] items-start justify-center rounded-t-md bg-background-bright pl-3">
+          <div className="flex items-center gap-1">
+            <AISparkleIcon className="size-5" />
+            <DialogTitle className="text-sm font-medium text-text-bright">Ask AI</DialogTitle>
+          </div>
+        </DialogHeader>
+        <ChatInterface initialQuery={initialQuery} />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function ChatMessages({
+  conversation,
+  isPreparingAnswer,
+  isGeneratingAnswer,
+  onReset,
+  onExampleClick,
+  error,
+  addFeedback,
+}: {
+  conversation: QA[];
+  isPreparingAnswer: boolean;
+  isGeneratingAnswer: boolean;
+  onReset: () => void;
+  onExampleClick: (question: string) => void;
+  error: string | null;
+  addFeedback: (
+    questionAnswerId: string,
+    reaction: "upvote" | "downvote",
+    comment?: FeedbackComment
+  ) => void;
+}) {
+  const [feedbackGivenForQAs, setFeedbackGivenForQAs] = useState<Set<string>>(new Set());
+
+  // Reset feedback state when conversation is reset
+  useEffect(() => {
+    if (conversation.length === 0) {
+      setFeedbackGivenForQAs(new Set());
+    }
+  }, [conversation.length]);
+
+  // Check if feedback has been given for the latest QA
+  const latestQA = conversation[conversation.length - 1];
+  const hasFeedbackForLatestQA = latestQA?.id ? feedbackGivenForQAs.has(latestQA.id) : false;
+
+  const exampleQuestions = [
+    "How do I increase my concurrency limit?",
+    "How do I debug errors in my task?",
+    "How do I deploy my task?",
+  ];
+
+  return (
+    <div className="flex-1 overflow-y-auto p-4 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      {conversation.length === 0 ? (
+        <motion.div
+          className="flex flex-col gap-2 pb-2"
+          initial="hidden"
+          animate="visible"
+          variants={{
+            hidden: { opacity: 0 },
+            visible: {
+              opacity: 1,
+              transition: {
+                staggerChildren: 0.1,
+                delayChildren: 0.2,
+              },
+            },
+          }}
+        >
+          <Paragraph className="mb-3 mt-1.5 pl-1">
+            I'm trained on docs, examples, and other content. Ask me anything about Trigger.dev.
+          </Paragraph>
+          {exampleQuestions.map((question, index) => (
+            <motion.button
+              key={index}
+              className="group flex w-fit items-center gap-2 rounded-full border border-dashed border-charcoal-600 px-4 py-2 transition-colors hover:border-solid hover:border-indigo-500"
+              onClick={() => onExampleClick(question)}
+              variants={{
+                hidden: {
+                  opacity: 0,
+                  x: 20,
+                },
+                visible: {
+                  opacity: 1,
+                  x: 0,
+                  transition: {
+                    opacity: {
+                      duration: 0.5,
+                      ease: "linear",
+                    },
+                    x: {
+                      type: "spring",
+                      stiffness: 300,
+                      damping: 25,
+                    },
+                  },
+                },
+              }}
+            >
+              <SparkleListIcon className="size-4 text-text-dimmed transition group-hover:text-indigo-500" />
+              <Paragraph variant="small" className="transition group-hover:text-text-bright">
+                {question}
+              </Paragraph>
+            </motion.button>
+          ))}
+        </motion.div>
+      ) : (
+        conversation.map((qa) => (
+          <div key={qa.id || `temp-${qa.question}`} className="mb-4">
+            <Header2 spacing>{qa.question}</Header2>
+            <div
+              className="prose prose-invert max-w-none text-text-dimmed"
+              dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(marked(qa.answer)) }}
+            />
+          </div>
+        ))
+      )}
+      {conversation.length > 0 &&
+        !isPreparingAnswer &&
+        !isGeneratingAnswer &&
+        !error &&
+        !latestQA?.id && (
+          <div className="flex items-center justify-between border-t border-grid-bright pt-3">
+            <Paragraph variant="small" className="text-text-dimmed">
+              Answer generation was stopped
+            </Paragraph>
+            <Button
+              variant="minimal/small"
+              LeadingIcon={<ArrowPathIcon className="size-4" />}
+              onClick={onReset}
+              className="w-fit pl-1.5"
+              iconSpacing="gap-x-1.5"
+            >
+              Reset chat
+            </Button>
+          </div>
+        )}
+      {conversation.length > 0 &&
+        !isPreparingAnswer &&
+        !isGeneratingAnswer &&
+        !error &&
+        latestQA?.id && (
+          <div className="flex items-center justify-between border-t border-grid-bright pt-3">
+            {hasFeedbackForLatestQA ? (
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.3 }}
+              >
+                <Paragraph variant="small" className="text-text-dimmed">
+                  Thanks for your feedback!
+                </Paragraph>
+              </motion.div>
+            ) : (
+              <div className="flex items-center gap-2">
+                <Paragraph variant="small" className="text-text-dimmed">
+                  Was this helpful?
+                </Paragraph>
+                <div className="flex items-center">
+                  <Button
+                    variant="minimal/small"
+                    onClick={() => {
+                      const latestQA = conversation[conversation.length - 1];
+                      if (latestQA?.id) {
+                        addFeedback(latestQA.id, "upvote");
+                        setFeedbackGivenForQAs((prev) => new Set(prev).add(latestQA.id));
+                      }
+                    }}
+                    className="size-8 px-1.5"
+                  >
+                    <HandThumbUpIcon className="size-4 text-text-dimmed transition group-hover/button:text-success" />
+                  </Button>
+                  <Button
+                    variant="minimal/small"
+                    onClick={() => {
+                      const latestQA = conversation[conversation.length - 1];
+                      if (latestQA?.id) {
+                        addFeedback(latestQA.id, "downvote");
+                        setFeedbackGivenForQAs((prev) => new Set(prev).add(latestQA.id));
+                      }
+                    }}
+                    className="size-8 px-1.5"
+                  >
+                    <HandThumbDownIcon className="size-4 text-text-dimmed transition group-hover/button:text-error" />
+                  </Button>
+                </div>
+              </div>
+            )}
+            <Button
+              variant="minimal/small"
+              LeadingIcon={<ArrowPathIcon className="size-4" />}
+              onClick={onReset}
+              className="w-fit pl-1.5"
+              iconSpacing="gap-x-1.5"
+            >
+              Reset chat
+            </Button>
+          </div>
+        )}
+      {isPreparingAnswer && (
+        <div className="flex items-center gap-2">
+          <Spinner
+            color={{
+              background: "rgba(99, 102, 241, 1)",
+              foreground: "rgba(217, 70, 239, 1)",
+            }}
+            className="size-4"
+          />
+          <Paragraph className="text-text-dimmed">Preparing answer…</Paragraph>
+        </div>
+      )}
+      {error && (
+        <div className="flex flex-col">
+          <Callout variant="error" className="mb-4">
+            <Paragraph className="font-semibold text-error">Error generating answer:</Paragraph>
+            <Paragraph className="text-rose-300">
+              {error} If the problem persists after retrying, please contact support.
+            </Paragraph>
+          </Callout>
+          <div className="flex justify-end">
+            <Button
+              variant="secondary/small"
+              LeadingIcon={<ArrowPathIcon className="size-4" />}
+              onClick={onReset}
+              className="w-fit pl-1.5"
+              iconSpacing="gap-x-1.5"
+            >
+              Reset chat
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ChatInterface({ initialQuery }: { initialQuery?: string }) {
+  const [message, setMessage] = useState("");
+  const [isExpanded, setIsExpanded] = useState(false);
+  const hasSubmittedInitialQuery = useRef(false);
+  const {
+    conversation,
+    submitQuery,
+    isGeneratingAnswer,
+    isPreparingAnswer,
+    resetConversation,
+    stopGeneration,
+    error,
+    addFeedback,
+  } = useChat();
+
+  useEffect(() => {
+    if (initialQuery && !hasSubmittedInitialQuery.current) {
+      hasSubmittedInitialQuery.current = true;
+      setIsExpanded(true);
+      submitQuery(initialQuery);
+    }
+  }, [initialQuery, submitQuery]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (message.trim()) {
+      setIsExpanded(true);
+      submitQuery(message);
+      setMessage("");
+    }
+  };
+
+  const handleExampleClick = (question: string) => {
+    setIsExpanded(true);
+    submitQuery(question);
+  };
+
+  const handleReset = () => {
+    resetConversation();
+    setIsExpanded(false);
+  };
+
+  return (
+    <motion.div
+      className="flex h-full max-h-[90vh] grow flex-col overflow-y-auto rounded-b-md bg-background-bright"
+      animate={{ height: isExpanded ? "90vh" : "auto" }}
+      transition={{ type: "spring", damping: 25, stiffness: 300 }}
+      initial={{ height: "auto" }}
+    >
+      <ChatMessages
+        conversation={conversation}
+        isPreparingAnswer={isPreparingAnswer}
+        isGeneratingAnswer={isGeneratingAnswer}
+        onReset={handleReset}
+        onExampleClick={handleExampleClick}
+        error={error}
+        addFeedback={addFeedback}
+      />
+      <form onSubmit={handleSubmit} className="flex-shrink-0 border-t border-grid-bright p-4">
+        <div className="flex gap-3">
+          <input
+            type="text"
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            placeholder="Ask a question..."
+            disabled={isGeneratingAnswer}
+            autoFocus
+            className="flex-1 rounded-md border border-grid-bright bg-background-dimmed px-3 py-2 text-text-bright placeholder:text-text-dimmed focus-visible:focus-custom"
+          />
+          {isGeneratingAnswer ? (
+            <SimpleTooltip
+              button={
+                <span
+                  onClick={() => stopGeneration()}
+                  className="group relative z-10 flex size-10 min-w-10 cursor-pointer items-center justify-center"
+                >
+                  <StopIcon className="z-10 size-5 text-indigo-500 transition group-hover:text-indigo-400" />
+                  <GradientSpinnerBackground
+                    className="absolute inset-0 animate-spin"
+                    hoverEffect
+                  />
+                </span>
+              }
+              content="Stop generating"
+            />
+          ) : isPreparingAnswer ? (
+            <GradientSpinnerBackground className="flex size-10 min-w-10 items-center justify-center">
+              <Spinner
+                color={{
+                  background: "rgba(99, 102, 241, 1)",
+                  foreground: "rgba(217, 70, 239, 1)",
+                }}
+                className="size-5"
+              />
+            </GradientSpinnerBackground>
+          ) : (
+            <Button
+              type="submit"
+              disabled={!message.trim()}
+              LeadingIcon={<ArrowUpIcon className="size-5 text-text-bright" />}
+              variant="primary/large"
+              className="size-10 min-w-10 rounded-full group-disabled/button:border-charcoal-550 group-disabled/button:bg-charcoal-600"
+            />
+          )}
+        </div>
+      </form>
+    </motion.div>
+  );
+}
+
+function GradientSpinnerBackground({
+  children,
+  className,
+  hoverEffect = false,
+}: {
+  children?: React.ReactNode;
+  className?: string;
+  hoverEffect?: boolean;
+}) {
+  return (
+    <div
+      className={`flex rounded-full bg-gradient-to-br from-indigo-500 via-purple-500 to-fuchsia-500 p-px ${className}`}
+    >
+      <div
+        className={`flex h-full w-full items-center justify-center rounded-full bg-charcoal-600 ${
+          hoverEffect ? "transition group-hover:bg-charcoal-550" : ""
+        }`}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export function AskAIButton({ question }: { question?: string }) {
+  const { openAskAI } = useAskAI();
+
+  return (
+    <TooltipProvider disableHoverableContent>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div className="inline-flex">
+            <Button
+              variant="minimal/small"
+              onClick={() => openAskAI(question)}
+              className="pl-0.5 pr-1"
+              data-action="ask-ai"
+            >
+              <AISparkleIcon className="size-5" />
+            </Button>
+          </div>
+        </TooltipTrigger>
+        <TooltipContent side="top" className="flex items-center gap-1 px-2 py-1.5 text-xs">
+          Ask AI
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index d9170d68e9..0cf70c0153 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -22,11 +22,13 @@ import { useNavigation } from "@remix-run/react";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import simplur from "simplur";
 import { AISparkleIcon } from "~/assets/icons/AISparkleIcon";
+import { BranchEnvironmentIconSmall } from "~/assets/icons/EnvironmentIcons";
 import { RunsIconExtraSmall } from "~/assets/icons/RunsIcon";
 import { TaskIconSmall } from "~/assets/icons/TaskIcon";
 import { WaitpointTokenIcon } from "~/assets/icons/WaitpointTokenIcon";
 import { Avatar } from "~/components/primitives/Avatar";
 import { type MatchedEnvironment } from "~/hooks/useEnvironment";
+import { useFeatures } from "~/hooks/useFeatures";
 import { type MatchedOrganization } from "~/hooks/useOrganizations";
 import { type MatchedProject } from "~/hooks/useProject";
 import { useHasAdminAccess } from "~/hooks/useUser";
@@ -61,7 +63,7 @@ import {
   v3UsagePath,
   v3WaitpointTokensPath,
 } from "~/utils/pathBuilder";
-import { useKapaWidget } from "../../hooks/useKapaWidget";
+import { useAskAI } from "../AskAI";
 import { FreePlanUsage } from "../billing/FreePlanUsage";
 import { ConnectionIcon, DevPresencePanel, useDevPresence } from "../DevPresence";
 import { ImpersonationBanner } from "../ImpersonationBanner";
@@ -80,14 +82,12 @@ import { TextLink } from "../primitives/TextLink";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../primitives/Tooltip";
 import { ShortcutsAutoOpen } from "../Shortcuts";
 import { UserProfilePhoto } from "../UserProfilePhoto";
+import { V4Badge } from "../V4Badge";
 import { EnvironmentSelector } from "./EnvironmentSelector";
 import { HelpAndFeedback } from "./HelpAndFeedbackPopover";
 import { SideMenuHeader } from "./SideMenuHeader";
 import { SideMenuItem } from "./SideMenuItem";
 import { SideMenuSection } from "./SideMenuSection";
-import { BranchEnvironmentIconSmall } from "~/assets/icons/EnvironmentIcons";
-import { V4Badge } from "../V4Badge";
-import { useFeatures } from "~/hooks/useFeatures";
 
 type SideMenuUser = Pick<User, "email" | "admin"> & { isImpersonating: boolean };
 export type SideMenuProject = Pick<
@@ -586,12 +586,14 @@ function SelectorDivider() {
 }
 
 function HelpAndAI() {
-  const { isKapaEnabled, isKapaOpen, openKapa } = useKapaWidget();
+  const features = useFeatures();
+  const { openAskAI, websiteId } = useAskAI();
+  const isKapaEnabled = features.isManagedCloud && websiteId;
 
   return (
     <>
       <ShortcutsAutoOpen />
-      <HelpAndFeedback disableShortcut={isKapaOpen} />
+      <HelpAndFeedback />
       {isKapaEnabled && (
         <TooltipProvider disableHoverableContent>
           <Tooltip>
@@ -603,9 +605,7 @@ function HelpAndAI() {
                   shortcut={{ modifiers: ["mod"], key: "/", enabledOnInputElements: true }}
                   hideShortcutKey
                   data-modal-override-open-class-ask-ai="true"
-                  onClick={() => {
-                    openKapa();
-                  }}
+                  onClick={() => openAskAI()}
                 >
                   <AISparkleIcon className="size-5" />
                 </Button>
diff --git a/apps/webapp/app/components/primitives/Dialog.tsx b/apps/webapp/app/components/primitives/Dialog.tsx
index 7a78b5e02b..5ac179646b 100644
--- a/apps/webapp/app/components/primitives/Dialog.tsx
+++ b/apps/webapp/app/components/primitives/Dialog.tsx
@@ -50,22 +50,15 @@ const DialogContent = React.forwardRef<
     >
       <hr className="absolute left-0 top-11 w-full" />
       {children}
-      <DialogPrimitive.Close className="data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-3 top-2 rounded-sm py-1 pr-1 opacity-70 transition-opacity focus-custom hover:opacity-100 disabled:pointer-events-none">
-        <div className="flex gap-x-2">
-          <ShortcutKey
-            shortcut={{
-              windows: {
-                key: "esc",
-              },
-              mac: {
-                key: "esc",
-              },
-            }}
-            variant={"small"}
-          />
-          <XMarkIcon className="h-5 w-5" />
-          <span className="sr-only">Close</span>
-        </div>
+      <DialogPrimitive.Close className="data-[state=open]:bg-accent data-[state=open]:text-muted-foreground group absolute right-2 top-[0.5625rem] flex items-center gap-1 rounded-sm p-1 py-1 pl-0 pr-1 opacity-70 transition focus-custom hover:bg-charcoal-750 hover:opacity-100 focus-visible:focus-custom disabled:pointer-events-none">
+        <ShortcutKey
+          shortcut={{
+            key: "esc",
+          }}
+          variant="medium"
+        />
+        <XMarkIcon className="size-4 text-text-dimmed transition group-hover:text-text-bright" />
+        <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
diff --git a/apps/webapp/app/components/primitives/ShortcutKey.tsx b/apps/webapp/app/components/primitives/ShortcutKey.tsx
index acfd599c73..04b1f36737 100644
--- a/apps/webapp/app/components/primitives/ShortcutKey.tsx
+++ b/apps/webapp/app/components/primitives/ShortcutKey.tsx
@@ -13,8 +13,8 @@ const medium =
 
 export const variants = {
   small:
-    "text-[0.6rem] font-medium min-w-[17px] rounded-[2px] tabular-nums px-1 ml-1 -mr-0.5 flex items-center gap-x-1 border border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60 transition uppercase",
-  medium,
+    "text-[0.6rem] font-medium min-w-[17px] rounded-[2px] tabular-nums px-1 ml-1 -mr-0.5 flex items-center gap-x-1 border border-text-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-text-dimmed/60 transition uppercase",
+  medium: cn(medium, "group-hover:border-charcoal-550"),
   "medium/bright": cn(medium, "bg-charcoal-750 text-text-bright border-charcoal-650"),
 };
 
diff --git a/apps/webapp/app/hooks/useKapaWidget.tsx b/apps/webapp/app/hooks/useKapaWidget.tsx
deleted file mode 100644
index 3f0f8eef44..0000000000
--- a/apps/webapp/app/hooks/useKapaWidget.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import { useMatches, useSearchParams } from "@remix-run/react";
-import { useCallback, useEffect, useState } from "react";
-import { useFeatures } from "~/hooks/useFeatures";
-import { type loader } from "~/root";
-import { useShortcuts } from "../components/primitives/ShortcutsProvider";
-import { useTypedMatchesData } from "./useTypedMatchData";
-
-type OpenOptions = { mode: string; query: string; submit: boolean };
-
-declare global {
-  interface Window {
-    Kapa: (
-      command: string,
-      options?: (() => void) | { onRender?: () => void } | OpenOptions,
-      remove?: string | { onRender?: () => void }
-    ) => void;
-  }
-}
-
-export function KapaScripts({ websiteId }: { websiteId?: string }) {
-  if (!websiteId) return null;
-
-  return (
-    <>
-      <script
-        async
-        src="https://widget.kapa.ai/kapa-widget.bundle.js"
-        data-website-id={websiteId}
-        data-project-name={"Trigger.dev"}
-        data-project-color={"#6366F1"}
-        data-project-logo={"https://content.trigger.dev/trigger-logo-circle.png"}
-        data-render-on-load={"false"}
-        data-button-hide={"true"}
-        data-modal-disclaimer-bg-color={"#D7D9DD"}
-        data-modal-header-bg-color={"#2C3034"}
-        data-modal-title-color={"#D7D9DD"}
-      ></script>
-      <script
-        dangerouslySetInnerHTML={{
-          __html: `
-                    (function () {
-                      let k = window.Kapa;
-                      if (!k) {
-                        let i = function () {
-                          i.c(arguments);
-                        };
-                        i.q = [];
-                        i.c = function (args) {
-                          i.q.push(args);
-                        };
-                        window.Kapa = i;
-                      }
-                    })();
-                  `,
-        }}
-      />
-    </>
-  );
-}
-
-export function useKapaConfig() {
-  const matches = useMatches();
-  const routeMatch = useTypedMatchesData<typeof loader>({
-    id: "root",
-    matches,
-  });
-  return routeMatch?.kapa;
-}
-
-export function useKapaWidget() {
-  const kapa = useKapaConfig();
-  const features = useFeatures();
-  const { disableShortcuts, enableShortcuts, areShortcutsEnabled } = useShortcuts();
-  const [isKapaOpen, setIsKapaOpen] = useState(false);
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const handleModalClose = useCallback(() => {
-    setIsKapaOpen(false);
-    enableShortcuts();
-  }, [enableShortcuts]);
-
-  const handleModalOpen = useCallback(() => {
-    setIsKapaOpen(true);
-    disableShortcuts();
-  }, [disableShortcuts]);
-
-  // Handle opening/closing
-  useEffect(() => {
-    if (!features.isManagedCloud || !kapa?.websiteId) return;
-
-    window.Kapa("render", {
-      onRender: () => {
-        //this auto-opens the Kapa widget on page load if the query contains ?aiHelp=
-        const aiHelp = searchParams.get("aiHelp");
-        if (aiHelp) {
-          setSearchParams((prev) => {
-            prev.delete("aiHelp");
-            return prev;
-          });
-
-          //we need to decode the aiHelp string because it's urlencoded
-          const decodedAiHelp = decodeURIComponent(aiHelp);
-          //sadly this delay is required, otherwise it fails the Kapa browser verification…
-          setTimeout(() => {
-            openKapa(decodedAiHelp);
-          }, 500);
-        }
-      },
-    });
-    window.Kapa("onModalOpen", handleModalOpen);
-    window.Kapa("onModalClose", handleModalClose);
-
-    return () => {
-      window.Kapa("onModalOpen", handleModalOpen, "remove");
-      window.Kapa("onModalClose", handleModalClose, "remove");
-    };
-  }, [features.isManagedCloud, kapa?.websiteId, searchParams, setSearchParams]);
-
-  // Handle opening the Kapa widget
-  const openKapa = useCallback(
-    (query?: string) => {
-      if (!features.isManagedCloud || !kapa?.websiteId) return;
-
-      window.Kapa(
-        "open",
-        query
-          ? {
-              mode: "ai",
-              query,
-              submit: true,
-            }
-          : undefined
-      );
-      setIsKapaOpen(true);
-      disableShortcuts();
-    },
-    [disableShortcuts, features.isManagedCloud, kapa?.websiteId]
-  );
-
-  return {
-    isKapaEnabled: features.isManagedCloud && kapa?.websiteId,
-    openKapa,
-    isKapaOpen,
-  };
-}
diff --git a/apps/webapp/app/root.tsx b/apps/webapp/app/root.tsx
index 2256e8af19..ac556e0f2c 100644
--- a/apps/webapp/app/root.tsx
+++ b/apps/webapp/app/root.tsx
@@ -1,19 +1,12 @@
 import type { LinksFunction, LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import type { ShouldRevalidateFunction } from "@remix-run/react";
-import {
-  Links,
-  LiveReload,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-  useMatches,
-} from "@remix-run/react";
+import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react";
 import { type UseDataFunctionReturn, typedjson, useTypedLoaderData } from "remix-typedjson";
 import { ExternalScripts } from "remix-utils/external-scripts";
 import type { ToastMessage } from "~/models/message.server";
 import { commitSession, getSession } from "~/models/message.server";
 import tailwindStylesheetUrl from "~/tailwind.css";
+import { AskAIProvider } from "./components/AskAI";
 import { RouteErrorDisplay } from "./components/ErrorDisplay";
 import { AppContainer, MainCenteredContainer } from "./components/layout/AppLayout";
 import { ShortcutsProvider } from "./components/primitives/ShortcutsProvider";
@@ -21,10 +14,8 @@ import { Toast } from "./components/primitives/Toast";
 import { env } from "./env.server";
 import { featuresForRequest } from "./features.server";
 import { usePostHog } from "./hooks/usePostHog";
-import { useTypedMatchesData } from "./hooks/useTypedMatchData";
 import { getUser } from "./services/session.server";
 import { appEnvTitleTag } from "./utils";
-import { KapaScripts } from "./hooks/useKapaWidget";
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: tailwindStylesheetUrl }];
@@ -115,13 +106,14 @@ export default function App() {
         <head>
           <Meta />
           <Links />
-          <KapaScripts websiteId={kapa.websiteId} />
         </head>
         <body className="h-full overflow-hidden bg-background-dimmed">
-          <ShortcutsProvider>
-            <Outlet />
-            <Toast />
-          </ShortcutsProvider>
+          <AskAIProvider websiteId={kapa.websiteId || null}>
+            <ShortcutsProvider>
+              <Outlet />
+              <Toast />
+            </ShortcutsProvider>
+          </AskAIProvider>
           <ScrollRestoration />
           <ExternalScripts />
           <Scripts />
diff --git a/apps/webapp/app/tailwind.css b/apps/webapp/app/tailwind.css
index 2d39d5207a..860ffa0e74 100644
--- a/apps/webapp/app/tailwind.css
+++ b/apps/webapp/app/tailwind.css
@@ -5,6 +5,12 @@
 @tailwind components;
 @tailwind utilities;
 
+@property --gradient-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
 @layer base {
   * {
     @apply border-grid-bright;
@@ -39,3 +45,39 @@
     --chart-5: 340 75% 55%;
   }
 }
+
+@layer utilities {
+  .animated-gradient-glow {
+    position: relative;
+    overflow: visible;
+  }
+
+  .animated-gradient-glow::before {
+    content: "";
+    position: absolute;
+    inset: -8px;
+    z-index: -1;
+    background: conic-gradient(
+      from var(--gradient-angle),
+      rgb(99 102 241),
+      rgb(245 158 11),
+      rgb(236 72 153),
+      rgb(245 158 11),
+      rgb(99 102 241)
+    );
+    border-radius: inherit;
+    animation: gradient-rotation 3s linear infinite;
+    pointer-events: none;
+    filter: blur(0.5rem);
+    opacity: 0.1;
+  }
+}
+
+@keyframes gradient-rotation {
+  0% {
+    --gradient-angle: 0deg;
+  }
+  100% {
+    --gradient-angle: 360deg;
+  }
+}
diff --git a/apps/webapp/package.json b/apps/webapp/package.json
index 9d4fb449c6..acea241b5c 100644
--- a/apps/webapp/package.json
+++ b/apps/webapp/package.json
@@ -55,6 +55,7 @@
     "@internal/tracing": "workspace:*",
     "@internal/zod-worker": "workspace:*",
     "@internationalized/date": "^3.5.1",
+    "@kapaai/react-sdk": "^0.1.2",
     "@lezer/highlight": "^1.1.6",
     "@opentelemetry/api": "1.9.0",
     "@opentelemetry/api-logs": "0.52.1",
@@ -125,6 +126,7 @@
     "cronstrue": "^2.21.0",
     "cross-env": "^7.0.3",
     "cuid": "^2.1.8",
+    "dompurify": "^3.2.6",
     "dotenv": "^16.4.5",
     "effect": "^3.11.7",
     "emails": "workspace:*",
@@ -210,6 +212,7 @@
     "@types/bcryptjs": "^2.4.2",
     "@types/compression": "^1.7.2",
     "@types/cookie": "^0.6.0",
+    "@types/dompurify": "^3.2.0",
     "@types/eslint": "^8.4.6",
     "@types/express": "^4.17.13",
     "@types/humanize-duration": "^3.27.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 499dd64c0a..e246e59b7c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -260,6 +260,9 @@ importers:
       '@internationalized/date':
         specifier: ^3.5.1
         version: 3.5.1
+      '@kapaai/react-sdk':
+        specifier: ^0.1.2
+        version: 0.1.2(react-dom@18.2.0)(react@18.2.0)
       '@lezer/highlight':
         specifier: ^1.1.6
         version: 1.1.6
@@ -470,6 +473,9 @@ importers:
       cuid:
         specifier: ^2.1.8
         version: 2.1.8
+      dompurify:
+        specifier: ^3.2.6
+        version: 3.2.6
       dotenv:
         specifier: ^16.4.5
         version: 16.4.5
@@ -720,6 +726,9 @@ importers:
       '@types/cookie':
         specifier: ^0.6.0
         version: 0.6.0
+      '@types/dompurify':
+        specifier: ^3.2.0
+        version: 3.2.0
       '@types/eslint':
         specifier: ^8.4.6
         version: 8.4.10
@@ -7009,6 +7018,27 @@ packages:
     resolution: {integrity: sha512-JUFJad5lv7jxj926GPgymrWQxxjPYuJNiNjNMzqT+HiuP6Vl3dk5xzG+8sTX96np0ZAluvaMzPsjhHZ5rNuNQQ==}
     engines: {node: '>=14'}
 
+  /@fingerprintjs/fingerprintjs-pro-react@2.6.3:
+    resolution: {integrity: sha512-/axCq/cfjZkIM+WFZM/05FQvqtNfdKbIFKU6b2yrwPKlgT8BqWkAq8XvFX6JCPlq8/udVLJjFEDCK+1JQh1L6g==}
+    requiresBuild: true
+    dependencies:
+      '@fingerprintjs/fingerprintjs-pro-spa': 1.3.2
+      fast-deep-equal: 3.1.3
+    dev: false
+
+  /@fingerprintjs/fingerprintjs-pro-spa@1.3.2:
+    resolution: {integrity: sha512-s1YGsx1XQLmjU+av4UrUHNxyzwPHyZRB0GXJQFOJK8ZHCYc2SNukxnJmZA++bNBa8twU3wW+QgSJhA4Prjnd0g==}
+    dependencies:
+      '@fingerprintjs/fingerprintjs-pro': 3.11.9
+      tslib: 2.8.1
+    dev: false
+
+  /@fingerprintjs/fingerprintjs-pro@3.11.9:
+    resolution: {integrity: sha512-GTow49I86tBlV/U+edBTLA2dPCDXrfHVsNuTV7a5nZjWFV3Q44Tj6yb5O0GcGT/EHwbSy3UmCO9+PS1ERR+b2g==}
+    dependencies:
+      tslib: 2.8.1
+    dev: false
+
   /@floating-ui/core@0.7.3:
     resolution: {integrity: sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg==}
     dev: false
@@ -7196,6 +7226,22 @@ packages:
       '@hapi/hoek': 11.0.2
     dev: false
 
+  /@hcaptcha/loader@2.0.0:
+    resolution: {integrity: sha512-fFQH6ApU/zCCl6Y1bnbsxsp1Er/lKX+qlgljrpWDeFcenpEtoP68hExlKSXECospzKLeSWcr06cbTjlR/x3IJA==}
+    dev: false
+
+  /@hcaptcha/react-hcaptcha@1.12.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-QiHnQQ52k8SJJSHkc3cq4TlYzag7oPd4f5ZqnjVSe4fJDSlZaOQFtu5F5AYisVslwaitdDELPVLRsRJxiiI0Aw==}
+    peerDependencies:
+      react: '>= 16.3.0'
+      react-dom: '>= 16.3.0'
+    dependencies:
+      '@babel/runtime': 7.27.0
+      '@hcaptcha/loader': 2.0.0
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@headlessui/react@1.7.8(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-zcwb0kd7L05hxmoAMIioEaOn235Dg0fUO+iGbLPgLVSjzl/l39V6DTpC2Df49PE5aG5/f5q0PZ9ZHZ78ENNV+A==}
     engines: {node: '>=10'}
@@ -7968,6 +8014,21 @@ packages:
     resolution: {integrity: sha512-Lg3PnLp0QXpxwLIAuuJboLeRaIhrgJjeuh797QADg3xz8wGLugQOS5DpsE8A6i6Adgzf+bacllkKZG3J0tGfDw==}
     dev: true
 
+  /@kapaai/react-sdk@0.1.2(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-+FUNmg9sMMqKiNG8UX02C+rLTSFK4pR8Q6GSiBQcA7mtCwo/k1JFRn11eGQnlspGpuyMolmrfqpb0+bmDIGfUA==}
+    peerDependencies:
+      react: '>=17.0.0'
+      react-dom: '>=17.0.0'
+    dependencies:
+      '@fingerprintjs/fingerprintjs-pro-react': 2.6.3
+      '@hcaptcha/react-hcaptcha': 1.12.0(react-dom@18.2.0)(react@18.2.0)
+      '@tanstack/react-query': 5.76.1(react@18.2.0)
+      js-cookie: 3.0.5
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      tldts: 7.0.7
+    dev: false
+
   /@kubernetes/client-node@0.20.0:
     resolution: {integrity: sha512-xxlv5GLX4FVR/dDKEsmi4SPeuB49aRc35stndyxcC73XnUEEwF39vXbROpHOirmDse8WE9vxOjABnSVS+jb7EA==}
     dependencies:
@@ -17335,6 +17396,19 @@ packages:
       tailwindcss: 4.0.17
     dev: true
 
+  /@tanstack/query-core@5.76.0:
+    resolution: {integrity: sha512-FN375hb8ctzfNAlex5gHI6+WDXTNpe0nbxp/d2YJtnP+IBM6OUm7zcaoCW6T63BawGOYZBbKC0iPvr41TteNVg==}
+    dev: false
+
+  /@tanstack/react-query@5.76.1(react@18.2.0):
+    resolution: {integrity: sha512-YxdLZVGN4QkT5YT1HKZQWiIlcgauIXEIsMOTSjvyD5wLYK8YVvKZUPAysMqossFJJfDpJW3pFn7WNZuPOqq+fw==}
+    peerDependencies:
+      react: ^18 || ^19
+    dependencies:
+      '@tanstack/query-core': 5.76.0
+      react: 18.2.0
+    dev: false
+
   /@tanstack/react-virtual@3.0.4(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-tiqKW/e2MJVCr7/pRUXulpkyxllaOclkHNfhKTo4pmHjJIqnhMfwIjc1Q1R0Un3PI3kQywywu/791c8z9u0qeA==}
     peerDependencies:
@@ -17615,6 +17689,13 @@ packages:
       '@types/ssh2': 1.15.1
     dev: true
 
+  /@types/dompurify@3.2.0:
+    resolution: {integrity: sha512-Fgg31wv9QbLDA0SpTOXO3MaxySc4DKGLi8sna4/Utjo4r3ZRPdCt4UQee8BWr+Q5z21yifghREPJGYaEOEIACg==}
+    deprecated: This is a stub types definition. dompurify provides its own type definitions, so you do not need this installed.
+    dependencies:
+      dompurify: 3.2.6
+    dev: true
+
   /@types/email-reply-parser@1.4.2:
     resolution: {integrity: sha512-kmMoK9WMX4zXf3c0D3tkWHDl0E50V2dv6fVirdTQd/mkvE/Jixh0DZAh3kBgpltr1eaWM3W+kAf4A2c2Z2iU2A==}
     dev: true
@@ -17656,6 +17737,7 @@ packages:
 
   /@types/estree@1.0.6:
     resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
+    dev: true
 
   /@types/estree@1.0.7:
     resolution: {integrity: sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==}
@@ -18125,6 +18207,11 @@ packages:
     resolution: {integrity: sha512-4YIL/2AvvZqKBWenjvEpxpblT2KGO6793ipr5QS7/6DpQ3O3SwZGgNGWezxf3pzeYZc24a2pJIrR/+Jxh/wYNQ==}
     dev: true
 
+  /@types/trusted-types@2.0.7:
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+    requiresBuild: true
+    optional: true
+
   /@types/unist@2.0.6:
     resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
 
@@ -21693,6 +21780,11 @@ packages:
       domelementtype: 2.3.0
     dev: false
 
+  /dompurify@3.2.6:
+    resolution: {integrity: sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==}
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
   /domutils@3.0.1:
     resolution: {integrity: sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==}
     dependencies:
@@ -24413,7 +24505,7 @@ packages:
   /hast-util-to-jsx-runtime@2.3.6:
     resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
     dependencies:
-      '@types/estree': 1.0.6
+      '@types/estree': 1.0.7
       '@types/hast': 3.0.4
       '@types/unist': 3.0.3
       comma-separated-tokens: 2.0.3
@@ -33099,6 +33191,17 @@ packages:
     engines: {node: '>=14.0.0'}
     dev: true
 
+  /tldts-core@7.0.7:
+    resolution: {integrity: sha512-ECqb8imSroX1UmUuhRBNPkkmtZ8mHEenieim80UVxG0M5wXVjY2Fp2tYXCPvk+nLy1geOhFpeD5YQhM/gF63Jg==}
+    dev: false
+
+  /tldts@7.0.7:
+    resolution: {integrity: sha512-ETNXj36ql5BXDa4VVJk3wgqansg8TI1Yqo217twSAPjyDnh/b2T+XzrI0ftn6EnzVPbXpMTZHOWj5s3a8/uGPA==}
+    hasBin: true
+    dependencies:
+      tldts-core: 7.0.7
+    dev: false
+
   /tmp-promise@3.0.3:
     resolution: {integrity: sha512-RwM7MoPojPxsOBYnyd2hy0bxtIlVrihNs9pj5SUvY8Zz1sQcQG2tG1hSr8PDxfgEB8RNKDhqbIlroIarSNDNsQ==}
     dependencies: