From ecf716125ebcbbb5608abe8f0c5bfe511ce9b0ea Mon Sep 17 00:00:00 2001
From: Dayuan Jiang <jdy.toh@gmail.com>
Date: Wed, 17 Dec 2025 14:48:36 +0900
Subject: [PATCH] feat: add MCP server notice to example panel

---
 components/chat-example-panel.tsx | 36 ++++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/components/chat-example-panel.tsx b/components/chat-example-panel.tsx
index d7e0ca7..1b547cf 100644
--- a/components/chat-example-panel.tsx
+++ b/components/chat-example-panel.tsx
@@ -1,6 +1,13 @@
 "use client"
 
-import { Cloud, FileText, GitBranch, Palette, Zap } from "lucide-react"
+import {
+    Cloud,
+    FileText,
+    GitBranch,
+    Palette,
+    Terminal,
+    Zap,
+} from "lucide-react"
 
 interface ExampleCardProps {
     icon: React.ReactNode
@@ -108,6 +115,33 @@ export default function ExamplePanel({
 
     return (
         <div className="py-6 px-2 animate-fade-in">
+            {/* MCP Server Notice */}
+            <a
+                href="https://github.com/DayuanJiang/next-ai-draw-io/tree/main/packages/mcp-server"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block mb-4 p-3 rounded-xl bg-gradient-to-r from-purple-500/10 to-blue-500/10 border border-purple-500/20 hover:border-purple-500/40 transition-colors group"
+            >
+                <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 rounded-lg bg-purple-500/20 flex items-center justify-center shrink-0">
+                        <Terminal className="w-4 h-4 text-purple-500" />
+                    </div>
+                    <div className="min-w-0">
+                        <div className="flex items-center gap-2">
+                            <span className="text-sm font-medium text-foreground group-hover:text-purple-500 transition-colors">
+                                MCP Server
+                            </span>
+                            <span className="px-1.5 py-0.5 text-[10px] font-semibold bg-purple-500 text-white rounded">
+                                PREVIEW
+                            </span>
+                        </div>
+                        <p className="text-xs text-muted-foreground">
+                            Use in Claude Desktop, VS Code & Cursor
+                        </p>
+                    </div>
+                </div>
+            </a>
+
             {/* Welcome section */}
             <div className="text-center mb-6">
                 <h2 className="text-lg font-semibold text-foreground mb-2">