From c9648cc9ccb1c7d3ba02b2f1072a793670bc62e3 Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Fri, 7 Nov 2025 13:05:25 +0200
Subject: [PATCH] docs: added kapa logo + link to mcp server (#14005)

---
 .../AiAssistant/ChatWindow/Footer/index.tsx   | 33 ++++++++++++-------
 .../AiAssistant/ChatWindow/Input/index.tsx    |  2 +-
 .../AiAssistant/Suggestions/index.tsx         | 17 ++++++++++
 .../src/components/Icons/Kapa/index.tsx       | 22 +++++++++++++
 4 files changed, 61 insertions(+), 13 deletions(-)
 create mode 100644 www/packages/docs-ui/src/components/Icons/Kapa/index.tsx

diff --git a/www/packages/docs-ui/src/components/AiAssistant/ChatWindow/Footer/index.tsx b/www/packages/docs-ui/src/components/AiAssistant/ChatWindow/Footer/index.tsx
index 6ce54c4827..c80f741e5c 100644
--- a/www/packages/docs-ui/src/components/AiAssistant/ChatWindow/Footer/index.tsx
+++ b/www/packages/docs-ui/src/components/AiAssistant/ChatWindow/Footer/index.tsx
@@ -1,27 +1,36 @@
 import React from "react"
 import clsx from "clsx"
 import { Kbd } from "../../../Kbd"
+import { KapaIcon } from "../../../Icons/Kapa"
+import { Tooltip } from "../../../Tooltip"
 
 export const AiAssistantChatWindowFooter = () => {
   return (
     <div
       className={clsx(
         "bg-medusa-bg-component border-t border-medusa-border-base",
-        "flex items-center justify-end gap-docs_0.75 text-compact-x-small",
+        "flex items-center justify-between gap-docs_0.75 text-compact-x-small",
         "py-docs_0.75 px-docs_1"
       )}
     >
-      <span className="text-medusa-fg-muted">Chat is cleared on refresh</span>
-      <span className="h-docs_0.75 w-px bg-medusa-border-base"></span>
-      <div className="flex items-center gap-docs_0.5">
-        <span className="text-medusa-fg-subtle">Line break</span>
-        <div className="flex items-center gap-[5px]">
-          <Kbd className="bg-medusa-bg-field-component border-medusa-border-strong w-[18px] h-[18px] inline-block p-0">
-            ⇧
-          </Kbd>
-          <Kbd className="bg-medusa-bg-field-component border-medusa-border-strong w-[18px] h-[18px] inline-block p-0">
-            ↵
-          </Kbd>
+      <Tooltip text="Powered by Kapa.ai">
+        <a href="https://kapa.ai" target="_blank" rel="noreferrer">
+          <KapaIcon className="text-medusa-fg-disabled hover:text-medusa-fg-muted transition-colors" />
+        </a>
+      </Tooltip>
+      <div className="flex items-center justify-end gap-docs_0.75">
+        <span className="text-medusa-fg-muted">Chat is cleared on refresh</span>
+        <span className="h-docs_0.75 w-px bg-medusa-border-base"></span>
+        <div className="flex items-center gap-docs_0.5">
+          <span className="text-medusa-fg-subtle">Line break</span>
+          <div className="flex items-center gap-[5px]">
+            <Kbd className="bg-medusa-bg-field-component border-medusa-border-strong w-[18px] h-[18px] inline-block p-0">
+              ⇧
+            </Kbd>
+            <Kbd className="bg-medusa-bg-field-component border-medusa-border-strong w-[18px] h-[18px] inline-block p-0">
+              ↵
+            </Kbd>
+          </div>
         </div>
       </div>
     </div>
diff --git a/www/packages/docs-ui/src/components/AiAssistant/ChatWindow/Input/index.tsx b/www/packages/docs-ui/src/components/AiAssistant/ChatWindow/Input/index.tsx
index 59d1441571..fd0c92b20b 100644
--- a/www/packages/docs-ui/src/components/AiAssistant/ChatWindow/Input/index.tsx
+++ b/www/packages/docs-ui/src/components/AiAssistant/ChatWindow/Input/index.tsx
@@ -158,7 +158,7 @@ export const AiAssistantChatWindowInput = ({
           placeholder="Ask me a question about Medusa..."
           disabled={loading}
         />
-        <div className="flex items-center justify-between">
+        <div className="flex items-center justify-end gap-docs_1">
           <Tooltip
             tooltipChildren={
               <span>
diff --git a/www/packages/docs-ui/src/components/AiAssistant/Suggestions/index.tsx b/www/packages/docs-ui/src/components/AiAssistant/Suggestions/index.tsx
index fec4a41953..1da871ce1b 100644
--- a/www/packages/docs-ui/src/components/AiAssistant/Suggestions/index.tsx
+++ b/www/packages/docs-ui/src/components/AiAssistant/Suggestions/index.tsx
@@ -5,10 +5,15 @@ import { SearchSuggestionType } from "../../Search/Suggestions"
 import { SearchHitGroupName } from "../../Search/Hits/GroupName"
 import { SearchSuggestionItem } from "../../Search/Suggestions/Item"
 import { useChat } from "@kapaai/react-sdk"
+import { Link } from "../../Link"
+import { useSiteConfig } from "../../../providers"
 
 type AiAssistantSuggestionsProps = React.AllHTMLAttributes<HTMLDivElement>
 
 export const AiAssistantSuggestions = (props: AiAssistantSuggestionsProps) => {
+  const {
+    config: { baseUrl },
+  } = useSiteConfig()
   const { submitQuery } = useChat()
   const suggestions: SearchSuggestionType[] = [
     {
@@ -34,6 +39,18 @@ export const AiAssistantSuggestions = (props: AiAssistantSuggestionsProps) => {
 
   return (
     <div {...props}>
+      <span className="text-medusa-fg-muted text-compact-small px-docs_0.5 py-docs_0.75 block">
+        Ask any questions about Medusa. Get help with your development.
+        <br />
+        You can also use the{" "}
+        <Link
+          href={`${baseUrl}/learn/introduction/build-with-llms-ai#mcp-remote-server`}
+          variant="content"
+        >
+          Medusa MCP server
+        </Link>{" "}
+        in Cursor, VSCode, etc...
+      </span>
       {suggestions.map((suggestion, index) => (
         <React.Fragment key={index}>
           <SearchHitGroupName name={suggestion.title} />
diff --git a/www/packages/docs-ui/src/components/Icons/Kapa/index.tsx b/www/packages/docs-ui/src/components/Icons/Kapa/index.tsx
new file mode 100644
index 0000000000..3971f37a8b
--- /dev/null
+++ b/www/packages/docs-ui/src/components/Icons/Kapa/index.tsx
@@ -0,0 +1,22 @@
+import React from "react"
+import { IconProps } from "@medusajs/icons/dist/types"
+
+export const KapaIcon = (props: IconProps) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20 5C20 2.23857 17.7614 0 15 0H5C2.23857 0 0 2.23857 0 5V15C0 17.7614 2.23857 20 5 20H15C17.7614 20 20 17.7614 20 15V5ZM8.39555 15.0667C8.4692 15.0667 8.5289 15.007 8.5289 14.9334V11.9801C8.5289 11.9064 8.5886 11.8467 8.66225 11.8467H9.7944C9.8414 11.8467 9.88495 11.8714 9.909 11.9118L11.7477 15.0015C11.7717 15.0419 11.8152 15.0667 11.8622 15.0667H14.5443C14.6486 15.0667 14.7125 14.9525 14.658 14.8637L11.9881 10.5123C11.9608 10.4677 11.962 10.4112 11.9914 10.3679L14.6593 6.42415C14.7192 6.3356 14.6558 6.2161 14.5489 6.2161H11.8788C11.8322 6.2161 11.7891 6.24045 11.7649 6.28025L9.8569 9.42475C9.8327 9.46455 9.7895 9.4889 9.7429 9.4889H8.66225C8.5886 9.4889 8.5289 9.4292 8.5289 9.35555V4.4667C8.5289 4.39307 8.4692 4.33337 8.39555 4.33337H6.0667C5.99305 4.33337 5.93335 4.39307 5.93335 4.4667V14.9334C5.93335 15.007 5.99305 15.0667 6.0667 15.0667H8.39555Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}