From 00761b919df5e2e6961dd77190c48c8d886fb293 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Sat, 18 Jul 2026 00:45:47 +0000
Subject: [PATCH] Add MCP CTA to dashboard AI chat empty state

Co-Authored-By: Konstantin Wohlwend <n2d4xc@gmail.com>
---
 .../src/components/assistant-ui/thread.tsx    | 49 +++++++++++++++++--
 .../hexclave-companion/ai-chat-widget.tsx     |  3 +-
 2 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/apps/dashboard/src/components/assistant-ui/thread.tsx b/apps/dashboard/src/components/assistant-ui/thread.tsx
index 5c25a1b4b..7bdc3ebcf 100644
--- a/apps/dashboard/src/components/assistant-ui/thread.tsx
+++ b/apps/dashboard/src/components/assistant-ui/thread.tsx
@@ -557,6 +557,50 @@ const Composer: FC<{ placeholder?: ComposerPlaceholder, autoFocus?: boolean }> =
   );
 };
 
+/**
+ * Canonical link to the "set up the Hexclave MCP server" docs. Uses the docs
+ * base URL when configured (so it points at localhost:8104 in dev) and falls
+ * back to the public docs site otherwise.
+ */
+function getMcpDocsUrl(): string {
+  const base = (getPublicEnvVar("NEXT_PUBLIC_STACK_DOCS_BASE_URL") ?? "https://docs.hexclave.com").replace(/\/$/, "");
+  return `${base}/guides/getting-started/ai-integration#option-3-mcp`;
+}
+
+/**
+ * Empty-state variant of the agent-eject CTA: an "or" divider followed by a
+ * card inviting the user to continue the chat in their own coding agent via
+ * the Hexclave MCP server. Rendered inside the welcome node of general-purpose
+ * dashboard AI chats, where there is no transcript to copy yet.
+ */
+export const AgentEjectWelcomeCta: FC = () => {
+  const mcpDocsUrl = useMemo(() => getMcpDocsUrl(), []);
+
+  return (
+    <div className="mt-8 flex w-full max-w-[280px] flex-col items-center">
+      <div className="flex w-full items-center gap-3 text-[10px] font-medium uppercase tracking-[0.2em] text-muted-foreground/40">
+        <div className="h-px flex-1 bg-border/60" />
+        <span>or</span>
+        <div className="h-px flex-1 bg-border/60" />
+      </div>
+      <a
+        href={mcpDocsUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="group mt-4 inline-flex items-center gap-2.5 rounded-xl border border-border/60 bg-muted/20 px-3.5 py-2.5 text-center text-xs leading-snug text-muted-foreground transition-colors hover:transition-none hover:border-border hover:bg-muted/50 hover:text-foreground"
+      >
+        <PlugsConnectedIcon className="h-4 w-4 shrink-0 text-purple-400" weight="bold" />
+        <span>
+          Chat with Hexclave in your own agent with our{" "}
+          <span className="font-medium text-foreground/80 underline decoration-foreground/20 underline-offset-2 group-hover:decoration-foreground/40">
+            MCP server
+          </span>
+        </span>
+      </a>
+    </div>
+  );
+};
+
 function serializeThreadToMarkdown(messages: readonly ThreadMessage[]): string {
   const blocks: string[] = [];
   for (const message of messages) {
@@ -589,10 +633,7 @@ const AgentEjectFooter: FC = () => {
     return threadRuntime.subscribe(sync);
   }, [threadRuntime]);
 
-  const mcpDocsUrl = useMemo(() => {
-    const base = (getPublicEnvVar("NEXT_PUBLIC_STACK_DOCS_BASE_URL") ?? "https://docs.hexclave.com").replace(/\/$/, "");
-    return `${base}/guides/getting-started/ai-integration#option-3-mcp`;
-  }, []);
+  const mcpDocsUrl = useMemo(() => getMcpDocsUrl(), []);
 
   const hasMessages = messageCount > 0;
 
diff --git a/apps/dashboard/src/components/hexclave-companion/ai-chat-widget.tsx b/apps/dashboard/src/components/hexclave-companion/ai-chat-widget.tsx
index 3143c42be..ecd6aa12b 100644
--- a/apps/dashboard/src/components/hexclave-companion/ai-chat-widget.tsx
+++ b/apps/dashboard/src/components/hexclave-companion/ai-chat-widget.tsx
@@ -4,7 +4,7 @@ import { cn } from "@/components/ui";
 import { createUnifiedAiChatAdapter, getFriendlyAiErrorMessage } from "@/components/assistant-ui/chat-stream";
 import { ImageAttachmentAdapter } from "@/components/assistant-ui/image-attachment-adapter";
 import { MarkdownText } from "@/components/assistant-ui/markdown-text";
-import { Thread } from "@/components/assistant-ui/thread";
+import { AgentEjectWelcomeCta, Thread } from "@/components/assistant-ui/thread";
 import { ToolFallback } from "@/components/assistant-ui/tool-fallback";
 import {
   createConversation,
@@ -547,6 +547,7 @@ function AskAiWelcome() {
         <p className="text-xs text-muted-foreground text-center max-w-[260px] leading-relaxed">
           Get AI-powered answers about Hexclave, your project, and analytics.
         </p>
+        <AgentEjectWelcomeCta />
       </div>
     </div>
   );