style: auto-format with Biome

chore: add auto-format workflow and fix formatting
- Add GitHub Action to auto-format PRs with Biome - Fix formatting in app/manifest.ts and scripts/test-diagram-operations.mjs
2026-09-01 17:10:24 +08:00 · 2025-12-18 14:03:12 +00:00 · 2025-12-18 23:02:19 +09:00 · 2025-12-18 22:00:21 +09:00 · 2025-12-18 21:16:32 +09:00 · 2025-12-18 21:14:10 +09:00
30 changed files with 4061 additions and 150 deletions
--- a/.github/workflows/auto-format.yml
+++ b/.github/workflows/auto-format.yml
@@ -0,0 +1,47 @@
+name: Auto Format
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+
+permissions:
+  contents: write
+
+jobs:
+  format:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.head_ref }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install Biome
+        run: npm install --save-dev @biomejs/biome
+
+      - name: Run Biome format
+        run: npx @biomejs/biome check --write --no-errors-on-unmatched .
+
+      - name: Check for changes
+        id: changes
+        run: |
+          if git diff --quiet; then
+            echo "has_changes=false" >> $GITHUB_OUTPUT
+          else
+            echo "has_changes=true" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Commit changes
+        if: steps.changes.outputs.has_changes == 'true'
+        run: |
+          git config --global user.name "github-actions[bot]"
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          git add .
+          git commit -m "style: auto-format with Biome"
+          git push
--- a/.github/workflows/docker-build.yml
+++ b/.github/workflows/docker-build.yml
@@ -80,8 +80,11 @@ jobs:

      - name: Push to ECR (triggers App Runner auto-deploy)
        if: github.event_name != 'pull_request' && github.ref == 'refs/heads/main'
+        env:
+          REPO_LOWER: ${{ github.repository }}
        run: |
-          docker pull ghcr.io/${{ github.repository }}:latest
-          docker tag ghcr.io/${{ github.repository }}:latest ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.ap-northeast-1.amazonaws.com/next-ai-draw-io:latest
+          REPO_LOWER=$(echo "$REPO_LOWER" | tr '[:upper:]' '[:lower:]')
+          docker pull ghcr.io/${REPO_LOWER}:latest
+          docker tag ghcr.io/${REPO_LOWER}:latest ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.ap-northeast-1.amazonaws.com/next-ai-draw-io:latest
          docker push ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.ap-northeast-1.amazonaws.com/next-ai-draw-io:latest

--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,8 @@

 # dependencies
 /node_modules
+packages/*/node_modules
+packages/*/dist
 /.pnp
 .pnp.*
 .yarn/*
@@ -47,3 +49,4 @@ push-via-ec2.sh
 .open-next/
 .wrangler/
 .env*.local
+
--- a/README.md
+++ b/README.md
@@ -30,6 +30,7 @@ https://github.com/user-attachments/assets/9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1
  - [Table of Contents](#table-of-contents)
  - [Examples](#examples)
  - [Features](#features)
+  - [MCP Server (Preview)](#mcp-server-preview)
  - [Getting Started](#getting-started)
    - [Try it Online](#try-it-online)
    - [Run with Docker (Recommended)](#run-with-docker-recommended)
@@ -92,6 +93,36 @@ Here are some example prompts and their generated diagrams:
 -   **Cloud Architecture Diagram Support**: Specialized support for generating cloud architecture diagrams (AWS, GCP, Azure)
 -   **Animated Connectors**: Create dynamic and animated connectors between diagram elements for better visualization

+## MCP Server (Preview)
+
+> **Preview Feature**: This feature is experimental and may not stable.
+
+Use Next AI Draw.io with AI agents like Claude Desktop, Cursor, and VS Code via MCP (Model Context Protocol).
+
+```json
+{
+  "mcpServers": {
+    "drawio": {
+      "command": "npx",
+      "args": ["@next-ai-drawio/mcp-server@latest"]
+    }
+  }
+}
+```
+
+### Claude Code CLI
+
+```bash
+claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
+```
+
+Then ask Claude to create diagrams:
+> "Create a flowchart showing user authentication with login, MFA, and session management"
+
+The diagram appears in your browser in real-time!
+
+See the [MCP Server README](./packages/mcp-server/README.md) for VS Code, Cursor, and other client configurations.
+
 ## Getting Started

 ### Try it Online
--- a/app/manifest.ts
+++ b/app/manifest.ts
@@ -0,0 +1,28 @@
+import type { MetadataRoute } from "next"
+
+export default function manifest(): MetadataRoute.Manifest {
+    return {
+        name: "Next AI Draw.io",
+        short_name: "AIDraw.io",
+        description:
+            "Create AWS architecture diagrams, flowcharts, and technical diagrams using AI. Free online tool integrating draw.io with AI assistance for professional diagram creation.",
+        start_url: "/",
+        display: "standalone",
+        background_color: "#f9fafb",
+        theme_color: "#171d26",
+        icons: [
+            {
+                src: "/favicon-192x192.png",
+                sizes: "192x192",
+                type: "image/png",
+                purpose: "any",
+            },
+            {
+                src: "/favicon-512x512.png",
+                sizes: "512x512",
+                type: "image/png",
+                purpose: "any",
+            },
+        ],
+    }
+}
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { useEffect, useRef, useState } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 import { DrawIoEmbed } from "react-drawio"
 import type { ImperativePanelHandle } from "react-resizable-panels"
 import ChatPanel from "@/components/chat-panel"
@@ -15,8 +15,15 @@ const drawioBaseUrl =
    process.env.NEXT_PUBLIC_DRAWIO_BASE_URL || "https://embed.diagrams.net"

 export default function Home() {
-    const { drawioRef, handleDiagramExport, onDrawioLoad, resetDrawioReady } =
-        useDiagram()
+    const {
+        drawioRef,
+        handleDiagramExport,
+        onDrawioLoad,
+        resetDrawioReady,
+        saveDiagramToStorage,
+        showSaveDialog,
+        setShowSaveDialog,
+    } = useDiagram()
    const [isMobile, setIsMobile] = useState(false)
    const [isChatVisible, setIsChatVisible] = useState(true)
    const [drawioUi, setDrawioUi] = useState<"min" | "sketch">("min")
@@ -25,6 +32,29 @@ export default function Home() {
    const [closeProtection, setCloseProtection] = useState(false)

    const chatPanelRef = useRef<ImperativePanelHandle>(null)
+    const isSavingRef = useRef(false)
+    const mouseOverDrawioRef = useRef(false)
+    const isMobileRef = useRef(false)
+
+    // Reset saving flag when dialog closes (with delay to ignore lingering save events from draw.io)
+    useEffect(() => {
+        if (!showSaveDialog) {
+            const timeout = setTimeout(() => {
+                isSavingRef.current = false
+            }, 1000)
+            return () => clearTimeout(timeout)
+        }
+    }, [showSaveDialog])
+
+    // Handle save from draw.io's built-in save button
+    // Note: draw.io sends save events for various reasons (focus changes, etc.)
+    // We use mouse position to determine if the user is interacting with draw.io
+    const handleDrawioSave = useCallback(() => {
+        if (!mouseOverDrawioRef.current) return
+        if (isSavingRef.current) return
+        isSavingRef.current = true
+        setShowSaveDialog(true)
+    }, [setShowSaveDialog])

    // Load preferences from localStorage after mount
    useEffect(() => {
@@ -35,12 +65,10 @@ export default function Home() {

        const savedDarkMode = localStorage.getItem("next-ai-draw-io-dark-mode")
        if (savedDarkMode !== null) {
-            // Use saved preference
            const isDark = savedDarkMode === "true"
            setDarkMode(isDark)
            document.documentElement.classList.toggle("dark", isDark)
        } else {
-            // First visit: match browser preference
            const prefersDark = window.matchMedia(
                "(prefers-color-scheme: dark)",
            ).matches
@@ -58,25 +86,49 @@ export default function Home() {
        setIsLoaded(true)
    }, [])

-    const toggleDarkMode = () => {
+    const handleDarkModeChange = async () => {
+        await saveDiagramToStorage()
        const newValue = !darkMode
        setDarkMode(newValue)
        localStorage.setItem("next-ai-draw-io-dark-mode", String(newValue))
        document.documentElement.classList.toggle("dark", newValue)
-        // Reset so onDrawioLoad fires again after remount
        resetDrawioReady()
    }

-    // Check mobile
+    const handleDrawioUiChange = async () => {
+        await saveDiagramToStorage()
+        const newUi = drawioUi === "min" ? "sketch" : "min"
+        localStorage.setItem("drawio-theme", newUi)
+        setDrawioUi(newUi)
+        resetDrawioReady()
+    }
+
+    // Check mobile - save diagram and reset draw.io before crossing breakpoint
+    const isInitialRenderRef = useRef(true)
    useEffect(() => {
        const checkMobile = () => {
-            setIsMobile(window.innerWidth < 768)
+            const newIsMobile = window.innerWidth < 768
+            // If crossing the breakpoint (not initial render), save diagram and reset draw.io
+            if (
+                !isInitialRenderRef.current &&
+                newIsMobile !== isMobileRef.current
+            ) {
+                // Save diagram before remounting (fire and forget)
+                saveDiagramToStorage().catch(() => {
+                    // Ignore timeout errors during resize
+                })
+                // Reset draw.io ready state so onLoad triggers again after remount
+                resetDrawioReady()
+            }
+            isMobileRef.current = newIsMobile
+            isInitialRenderRef.current = false
+            setIsMobile(newIsMobile)
        }

        checkMobile()
        window.addEventListener("resize", checkMobile)
        return () => window.removeEventListener("resize", checkMobile)
-    }, [])
+    }, [saveDiagramToStorage, resetDrawioReady])

    const toggleChatPanel = () => {
        const panel = chatPanelRef.current
@@ -122,7 +174,6 @@ export default function Home() {
        <div className="h-screen bg-background relative overflow-hidden">
            <ResizablePanelGroup
                id="main-panel-group"
-                key={isMobile ? "mobile" : "desktop"}
                direction={isMobile ? "vertical" : "horizontal"}
                className="h-full"
            >
@@ -136,6 +187,12 @@ export default function Home() {
                        className={`h-full relative ${
                            isMobile ? "p-1" : "p-2"
                        }`}
+                        onMouseEnter={() => {
+                            mouseOverDrawioRef.current = true
+                        }}
+                        onMouseLeave={() => {
+                            mouseOverDrawioRef.current = false
+                        }}
                    >
                        <div className="h-full rounded-xl overflow-hidden shadow-soft-lg border border-border/30">
                            {isLoaded ? (
@@ -144,6 +201,7 @@ export default function Home() {
                                    ref={drawioRef}
                                    onExport={handleDiagramExport}
                                    onLoad={onDrawioLoad}
+                                    onSave={handleDrawioSave}
                                    baseUrl={drawioBaseUrl}
                                    urlParameters={{
                                        ui: drawioUi,
@@ -167,6 +225,7 @@ export default function Home() {

                {/* Chat Panel */}
                <ResizablePanel
+                    key={isMobile ? "mobile" : "desktop"}
                    id="chat-panel"
                    ref={chatPanelRef}
                    defaultSize={isMobile ? 50 : 33}
@@ -182,15 +241,9 @@ export default function Home() {
                            isVisible={isChatVisible}
                            onToggleVisibility={toggleChatPanel}
                            drawioUi={drawioUi}
-                            onToggleDrawioUi={() => {
-                                const newUi =
-                                    drawioUi === "min" ? "sketch" : "min"
-                                localStorage.setItem("drawio-theme", newUi)
-                                setDrawioUi(newUi)
-                                resetDrawioReady()
-                            }}
+                            onToggleDrawioUi={handleDrawioUiChange}
                            darkMode={darkMode}
-                            onToggleDarkMode={toggleDarkMode}
+                            onToggleDarkMode={handleDarkModeChange}
                            isMobile={isMobile}
                            onCloseProtectionChange={setCloseProtection}
                        />
--- 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">
--- a/components/chat-input.tsx
+++ b/components/chat-input.tsx
@@ -155,12 +155,16 @@ export function ChatInput({
    minimalStyle = false,
    onMinimalStyleChange = () => {},
 }: ChatInputProps) {
-    const { diagramHistory, saveDiagramToFile } = useDiagram()
+    const {
+        diagramHistory,
+        saveDiagramToFile,
+        showSaveDialog,
+        setShowSaveDialog,
+    } = useDiagram()
    const textareaRef = useRef<HTMLTextAreaElement>(null)
    const fileInputRef = useRef<HTMLInputElement>(null)
    const [isDragging, setIsDragging] = useState(false)
    const [showClearDialog, setShowClearDialog] = useState(false)
-    const [showSaveDialog, setShowSaveDialog] = useState(false)

    // Allow retry when there's an error (even if status is still "streaming" or "submitted")
    const isDisabled =
@@ -331,7 +335,7 @@ export function ChatInput({
                {/* Action bar */}
                <div className="flex items-center justify-between px-3 py-2 border-t border-border/50">
                    {/* Left actions */}
-                    <div className="flex items-center gap-1">
+                    <div className="flex items-center gap-1 overflow-x-hidden">
                        <ButtonWithTooltip
                            type="button"
                            variant="ghost"
@@ -382,7 +386,7 @@ export function ChatInput({
                    </div>

                    {/* Right actions */}
-                    <div className="flex items-center gap-1">
+                    <div className="flex items-center gap-1 overflow-hidden justify-end">
                        <ButtonWithTooltip
                            type="button"
                            variant="ghost"
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -35,6 +35,9 @@ const STORAGE_XML_SNAPSHOTS_KEY = "next-ai-draw-io-xml-snapshots"
 const STORAGE_SESSION_ID_KEY = "next-ai-draw-io-session-id"
 export const STORAGE_DIAGRAM_XML_KEY = "next-ai-draw-io-diagram-xml"

+// sessionStorage keys
+const SESSION_STORAGE_INPUT_KEY = "next-ai-draw-io-input"
+
 // Type for message parts (tool calls and their states)
 interface MessagePart {
    type: string
@@ -106,7 +109,6 @@ export default function ChatPanel({
        resolverRef,
        chartXML,
        clearDiagram,
-        isDrawioReady,
    } = useDiagram()

    const onFetchChart = (saveToHistory = true) => {
@@ -148,6 +150,14 @@ export default function ChatPanel({
    const [showNewChatDialog, setShowNewChatDialog] = useState(false)
    const [minimalStyle, setMinimalStyle] = useState(false)

+    // Restore input from sessionStorage on mount (when ChatPanel remounts due to key change)
+    useEffect(() => {
+        const savedInput = sessionStorage.getItem(SESSION_STORAGE_INPUT_KEY)
+        if (savedInput) {
+            setInput(savedInput)
+        }
+    }, [])
+
    // Check config on mount
    useEffect(() => {
        fetch("/api/config")
@@ -210,9 +220,6 @@ export default function ChatPanel({
    const localStorageDebounceRef = useRef<ReturnType<
        typeof setTimeout
    > | null>(null)
-    const xmlStorageDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(
-        null,
-    )
    const LOCAL_STORAGE_DEBOUNCE_MS = 1000 // Save at most once per second

    const {
@@ -725,47 +732,6 @@ Continue from EXACTLY where you stopped.`,
        }
    }, [setMessages])

-    // Restore diagram XML when DrawIO becomes ready
-    const hasDiagramRestoredRef = useRef(false)
-    const [canSaveDiagram, setCanSaveDiagram] = useState(false)
-    useEffect(() => {
-        // Reset restore flag when DrawIO is not ready (e.g., theme/UI change remounts it)
-        if (!isDrawioReady) {
-            hasDiagramRestoredRef.current = false
-            setCanSaveDiagram(false)
-            return
-        }
-        if (hasDiagramRestoredRef.current) return
-        hasDiagramRestoredRef.current = true
-
-        try {
-            const savedDiagramXml = localStorage.getItem(
-                STORAGE_DIAGRAM_XML_KEY,
-            )
-            console.log(
-                "[ChatPanel] Restoring diagram, has saved XML:",
-                !!savedDiagramXml,
-            )
-            if (savedDiagramXml) {
-                console.log(
-                    "[ChatPanel] Loading saved diagram XML, length:",
-                    savedDiagramXml.length,
-                )
-                // Skip validation for trusted saved diagrams
-                onDisplayChart(savedDiagramXml, true)
-                chartXMLRef.current = savedDiagramXml
-            }
-        } catch (error) {
-            console.error("Failed to restore diagram from localStorage:", error)
-        }
-
-        // Allow saving after restore is complete
-        setTimeout(() => {
-            console.log("[ChatPanel] Enabling diagram save")
-            setCanSaveDiagram(true)
-        }, 500)
-    }, [isDrawioReady, onDisplayChart])
-
    // Save messages to localStorage whenever they change (debounced to prevent blocking during streaming)
    useEffect(() => {
        if (!hasRestoredRef.current) return
@@ -795,28 +761,6 @@ Continue from EXACTLY where you stopped.`,
        }
    }, [messages])

-    // Save diagram XML to localStorage whenever it changes (debounced)
-    useEffect(() => {
-        if (!canSaveDiagram) return
-        if (!chartXML || chartXML.length <= 300) return
-
-        // Clear any pending save
-        if (xmlStorageDebounceRef.current) {
-            clearTimeout(xmlStorageDebounceRef.current)
-        }
-
-        // Debounce: save after 1 second of no changes
-        xmlStorageDebounceRef.current = setTimeout(() => {
-            localStorage.setItem(STORAGE_DIAGRAM_XML_KEY, chartXML)
-        }, LOCAL_STORAGE_DEBOUNCE_MS)
-
-        return () => {
-            if (xmlStorageDebounceRef.current) {
-                clearTimeout(xmlStorageDebounceRef.current)
-            }
-        }
-    }, [chartXML, canSaveDiagram])
-
    // Save XML snapshots to localStorage whenever they change
    const saveXmlSnapshots = useCallback(() => {
        try {
@@ -916,6 +860,7 @@ Continue from EXACTLY where you stopped.`,
                        },
                    ] as any)
                    setInput("")
+                    sessionStorage.removeItem(SESSION_STORAGE_INPUT_KEY)
                    setFiles([])
                    return
                }
@@ -963,6 +908,7 @@ Continue from EXACTLY where you stopped.`,

                // Token count is tracked in onFinish with actual server usage
                setInput("")
+                sessionStorage.removeItem(SESSION_STORAGE_INPUT_KEY)
                setFiles([])
            } catch (error) {
                console.error("Error fetching chart data:", error)
@@ -985,6 +931,7 @@ Continue from EXACTLY where you stopped.`,
            localStorage.removeItem(STORAGE_XML_SNAPSHOTS_KEY)
            localStorage.removeItem(STORAGE_DIAGRAM_XML_KEY)
            localStorage.setItem(STORAGE_SESSION_ID_KEY, newSessionId)
+            sessionStorage.removeItem(SESSION_STORAGE_INPUT_KEY)
            toast.success("Started a fresh chat")
        } catch (error) {
            console.error("Failed to clear localStorage:", error)
@@ -999,9 +946,14 @@ Continue from EXACTLY where you stopped.`,
    const handleInputChange = (
        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
    ) => {
+        saveInputToSessionStorage(e.target.value)
        setInput(e.target.value)
    }

+    const saveInputToSessionStorage = (input: string) => {
+        sessionStorage.setItem(SESSION_STORAGE_INPUT_KEY, input)
+    }
+
    // Helper functions for message actions (regenerate/edit)
    // Extract previous XML snapshot before a given message index
    const getPreviousXml = (beforeIndex: number): string => {
@@ -1277,14 +1229,14 @@ Continue from EXACTLY where you stopped.`,
                className={`${isMobile ? "px-3 py-2" : "px-5 py-4"} border-b border-border/50`}
            >
                <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 overflow-x-hidden">
                        <div className="flex items-center gap-2">
                            <Image
                                src="/favicon.ico"
                                alt="Next AI Drawio"
                                width={isMobile ? 24 : 28}
                                height={isMobile ? 24 : 28}
-                                className="rounded"
+                                className="rounded flex-shrink-0"
                            />
                            <h1
                                className={`${isMobile ? "text-sm" : "text-base"} font-semibold tracking-tight whitespace-nowrap`}
@@ -1319,7 +1271,7 @@ Continue from EXACTLY where you stopped.`,
                            </Link>
                        )}
                    </div>
-                    <div className="flex items-center gap-1">
+                    <div className="flex items-center gap-1 justify-end overflow-x-hidden">
                        <ButtonWithTooltip
                            tooltipContent="Start fresh chat"
                            variant="ghost"
--- a/components/save-dialog.tsx
+++ b/components/save-dialog.tsx
@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button"
 import {
    Dialog,
    DialogContent,
+    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
@@ -72,6 +73,9 @@ export function SaveDialog({
            <DialogContent className="sm:max-w-md">
                <DialogHeader>
                    <DialogTitle>Save Diagram</DialogTitle>
+                    <DialogDescription>
+                        Choose a format and filename to save your diagram.
+                    </DialogDescription>
                </DialogHeader>
                <div className="space-y-4">
                    <div className="space-y-2">
--- a/contexts/diagram-context.tsx
+++ b/contexts/diagram-context.tsx
@@ -1,7 +1,7 @@
 "use client"

 import type React from "react"
-import { createContext, useContext, useRef, useState } from "react"
+import { createContext, useContext, useEffect, useRef, useState } from "react"
 import type { DrawIoEmbedRef } from "react-drawio"
 import { STORAGE_DIAGRAM_XML_KEY } from "@/components/chat-panel"
 import type { ExportFormat } from "@/components/save-dialog"
@@ -23,9 +23,12 @@ interface DiagramContextType {
        format: ExportFormat,
        sessionId?: string,
    ) => void
+    saveDiagramToStorage: () => Promise<void>
    isDrawioReady: boolean
    onDrawioLoad: () => void
    resetDrawioReady: () => void
+    showSaveDialog: boolean
+    setShowSaveDialog: (show: boolean) => void
 }

 const DiagramContext = createContext<DiagramContextType | undefined>(undefined)
@@ -37,11 +40,15 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
        { svg: string; xml: string }[]
    >([])
    const [isDrawioReady, setIsDrawioReady] = useState(false)
+    const [canSaveDiagram, setCanSaveDiagram] = useState(false)
+    const [showSaveDialog, setShowSaveDialog] = useState(false)
    const hasCalledOnLoadRef = useRef(false)
    const drawioRef = useRef<DrawIoEmbedRef | null>(null)
    const resolverRef = useRef<((value: string) => void) | null>(null)
    // Track if we're expecting an export for history (user-initiated)
    const expectHistoryExportRef = useRef<boolean>(false)
+    // Track if diagram has been restored from localStorage
+    const hasDiagramRestoredRef = useRef<boolean>(false)

    const onDrawioLoad = () => {
        // Only set ready state once to prevent infinite loops
@@ -57,6 +64,48 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
        setIsDrawioReady(false)
    }

+    // Restore diagram XML when DrawIO becomes ready
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- loadDiagram uses refs internally and is stable
+    useEffect(() => {
+        // Reset restore flag when DrawIO is not ready (e.g., theme/UI change remounts it)
+        if (!isDrawioReady) {
+            hasDiagramRestoredRef.current = false
+            setCanSaveDiagram(false)
+            return
+        }
+        if (hasDiagramRestoredRef.current) return
+        hasDiagramRestoredRef.current = true
+
+        try {
+            const savedDiagramXml = localStorage.getItem(
+                STORAGE_DIAGRAM_XML_KEY,
+            )
+            if (savedDiagramXml) {
+                // Skip validation for trusted saved diagrams
+                loadDiagram(savedDiagramXml, true)
+            }
+        } catch (error) {
+            console.error("Failed to restore diagram from localStorage:", error)
+        }
+
+        // Allow saving after restore is complete
+        setTimeout(() => {
+            setCanSaveDiagram(true)
+        }, 500)
+    }, [isDrawioReady])
+
+    // Save diagram XML to localStorage whenever it changes (debounced)
+    useEffect(() => {
+        if (!canSaveDiagram) return
+        if (!chartXML || chartXML.length <= 300) return
+
+        const timeoutId = setTimeout(() => {
+            localStorage.setItem(STORAGE_DIAGRAM_XML_KEY, chartXML)
+        }, 1000)
+
+        return () => clearTimeout(timeoutId)
+    }, [chartXML, canSaveDiagram])
+
    // Track if we're expecting an export for file save (stores raw export data)
    const saveResolverRef = useRef<{
        resolver: ((data: string) => void) | null
@@ -82,6 +131,30 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
        }
    }

+    // Save current diagram to localStorage (used before theme/UI changes)
+    const saveDiagramToStorage = async (): Promise<void> => {
+        if (!drawioRef.current) return
+
+        try {
+            const currentXml = await Promise.race([
+                new Promise<string>((resolve) => {
+                    resolverRef.current = resolve
+                    drawioRef.current?.exportDiagram({ format: "xmlsvg" })
+                }),
+                new Promise<string>((_, reject) =>
+                    setTimeout(() => reject(new Error("Export timeout")), 2000),
+                ),
+            ])
+
+            // Only save if diagram has meaningful content (not empty template)
+            if (currentXml && currentXml.length > 300) {
+                localStorage.setItem(STORAGE_DIAGRAM_XML_KEY, currentXml)
+            }
+        } catch (error) {
+            console.error("Failed to save diagram to storage:", error)
+        }
+    }
+
    const loadDiagram = (
        chart: string,
        skipValidation?: boolean,
@@ -280,9 +353,12 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
                handleDiagramExport,
                clearDiagram,
                saveDiagramToFile,
+                saveDiagramToStorage,
                isDrawioReady,
                onDrawioLoad,
                resetDrawioReady,
+                showSaveDialog,
+                setShowSaveDialog,
            }}
        >
            {children}
--- a/docs/README_CN.md
+++ b/docs/README_CN.md
@@ -26,6 +26,7 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
  - [目录](#目录)
  - [示例](#示例)
  - [功能特性](#功能特性)
+  - [MCP服务器（预览）](#mcp服务器预览)
  - [快速开始](#快速开始)
    - [在线试用](#在线试用)
    - [使用Docker运行（推荐）](#使用docker运行推荐)
@@ -88,6 +89,36 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
 -   **云架构图支持**：专门支持生成云架构图（AWS、GCP、Azure）
 -   **动画连接器**：在图表元素之间创建动态动画连接器，实现更好的可视化效果

+## MCP服务器（预览）
+
+> **预览功能**：此功能为实验性功能，可能会有变化。
+
+通过MCP（模型上下文协议）在Claude Desktop、Cursor和VS Code等AI代理中使用Next AI Draw.io。
+
+```json
+{
+  "mcpServers": {
+    "drawio": {
+      "command": "npx",
+      "args": ["@next-ai-drawio/mcp-server@latest"]
+    }
+  }
+}
+```
+
+### Claude Code CLI
+
+```bash
+claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
+```
+
+然后让Claude创建图表：
+> "创建一个展示用户认证流程的流程图，包含登录、MFA和会话管理"
+
+图表会实时显示在浏览器中！
+
+详情请参阅[MCP服务器README](../packages/mcp-server/README.md)，了解VS Code、Cursor等客户端配置。
+
 ## 快速开始

 ### 在线试用
--- a/docs/README_JA.md
+++ b/docs/README_JA.md
@@ -26,6 +26,7 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
  - [目次](#目次)
  - [例](#例)
  - [機能](#機能)
+  - [MCPサーバー（プレビュー）](#mcpサーバープレビュー)
  - [はじめに](#はじめに)
    - [オンラインで試す](#オンラインで試す)
    - [Dockerで実行（推奨）](#dockerで実行推奨)
@@ -88,6 +89,36 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
 -   **クラウドアーキテクチャダイアグラムサポート**：クラウドアーキテクチャダイアグラムの生成を専門的にサポート（AWS、GCP、Azure）
 -   **アニメーションコネクタ**：より良い可視化のためにダイアグラム要素間に動的でアニメーション化されたコネクタを作成

+## MCPサーバー（プレビュー）
+
+> **プレビュー機能**：この機能は実験的であり、変更される可能性があります。
+
+MCP（Model Context Protocol）を介して、Claude Desktop、Cursor、VS CodeなどのAIエージェントでNext AI Draw.ioを使用できます。
+
+```json
+{
+  "mcpServers": {
+    "drawio": {
+      "command": "npx",
+      "args": ["@next-ai-drawio/mcp-server@latest"]
+    }
+  }
+}
+```
+
+### Claude Code CLI
+
+```bash
+claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
+```
+
+Claudeにダイアグラムの作成を依頼：
+> 「ログイン、MFA、セッション管理を含むユーザー認証のフローチャートを作成してください」
+
+ダイアグラムがリアルタイムでブラウザに表示されます！
+
+詳細は[MCPサーバーREADME](../packages/mcp-server/README.md)をご覧ください（VS Code、Cursorなどのクライアント設定も含む）。
+
 ## はじめに

 ### オンラインで試す
--- a/docs/ai-providers.md
+++ b/docs/ai-providers.md
@@ -136,6 +136,42 @@ Optional custom URL:
 OLLAMA_BASE_URL=http://localhost:11434
 ```

+### Vercel AI Gateway
+
+Vercel AI Gateway provides unified access to multiple AI providers through a single API key. This simplifies authentication and allows you to switch between providers without managing multiple API keys.
+
+**Basic Usage (Vercel-hosted Gateway):**
+
+```bash
+AI_GATEWAY_API_KEY=your_gateway_api_key
+AI_MODEL=openai/gpt-4o
+```
+
+**Custom Gateway URL (for local development or self-hosted Gateway):**
+
+```bash
+AI_GATEWAY_API_KEY=your_custom_api_key
+AI_GATEWAY_BASE_URL=https://your-custom-gateway.com/v1/ai
+AI_MODEL=openai/gpt-4o
+```
+
+Model format uses `provider/model` syntax:
+
+-   `openai/gpt-4o` - OpenAI GPT-4o
+-   `anthropic/claude-sonnet-4-5` - Anthropic Claude Sonnet 4.5
+-   `google/gemini-2.0-flash` - Google Gemini 2.0 Flash
+
+**Configuration notes:**
+
+-   If `AI_GATEWAY_BASE_URL` is not set, the default Vercel Gateway URL (`https://ai-gateway.vercel.sh/v1/ai`) is used
+-   Custom base URL is useful for:
+    -   Local development with a custom Gateway instance
+    -   Self-hosted AI Gateway deployments
+    -   Enterprise proxy configurations
+-   When using a custom base URL, you must also provide `AI_GATEWAY_API_KEY`
+
+Get your API key from the [Vercel AI Gateway dashboard](https://vercel.com/ai-gateway).
+
 ## Auto-Detection

 If you only configure **one** provider's API key, the system will automatically detect and use that provider. No need to set `AI_PROVIDER`.
@@ -143,7 +179,7 @@ If you only configure **one** provider's API key, the system will automatically
 If you configure **multiple** API keys, you must explicitly set `AI_PROVIDER`:

 ```bash
-AI_PROVIDER=google  # or: openai, anthropic, deepseek, siliconflow, azure, bedrock, openrouter, ollama
+AI_PROVIDER=google  # or: openai, anthropic, deepseek, siliconflow, azure, bedrock, openrouter, ollama, gateway
 ```

 ## Model Capability Requirements
--- a/env.example
+++ b/env.example
@@ -1,6 +1,6 @@
 # AI Provider Configuration
 # AI_PROVIDER: Which provider to use
-# Options: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow
+# Options: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow, gateway
 # Default: bedrock
 AI_PROVIDER=bedrock

@@ -68,6 +68,13 @@ AI_MODEL=global.anthropic.claude-sonnet-4-5-20250929-v1:0
 # SILICONFLOW_API_KEY=sk-...
 # SILICONFLOW_BASE_URL=https://api.siliconflow.com/v1  # Optional: switch to https://api.siliconflow.cn/v1 if needed

+# Vercel AI Gateway Configuration
+# Get your API key from: https://vercel.com/ai-gateway
+# Model format: "provider/model" e.g., "openai/gpt-4o", "anthropic/claude-sonnet-4-5"
+# AI_GATEWAY_API_KEY=...
+# AI_GATEWAY_BASE_URL=https://your-custom-gateway.com/v1/ai  # Optional: Custom Gateway URL (for local dev or self-hosted Gateway)
+#                                                              # If not set, uses Vercel default: https://ai-gateway.vercel.sh/v1/ai
+
 # Langfuse Observability (Optional)
 # Enable LLM tracing and analytics - https://langfuse.com
 # LANGFUSE_PUBLIC_KEY=pk-lf-...
--- a/lib/ai-providers.ts
+++ b/lib/ai-providers.ts
@@ -2,6 +2,7 @@ import { createAmazonBedrock } from "@ai-sdk/amazon-bedrock"
 import { createAnthropic } from "@ai-sdk/anthropic"
 import { azure, createAzure } from "@ai-sdk/azure"
 import { createDeepSeek, deepseek } from "@ai-sdk/deepseek"
+import { createGateway, gateway } from "@ai-sdk/gateway"
 import { createGoogleGenerativeAI, google } from "@ai-sdk/google"
 import { createOpenAI, openai } from "@ai-sdk/openai"
 import { fromNodeProviderChain } from "@aws-sdk/credential-providers"
@@ -18,6 +19,7 @@ export type ProviderName =
    | "openrouter"
    | "deepseek"
    | "siliconflow"
+    | "gateway"

 interface ModelConfig {
    model: any
@@ -42,6 +44,7 @@ const ALLOWED_CLIENT_PROVIDERS: ProviderName[] = [
    "openrouter",
    "deepseek",
    "siliconflow",
+    "gateway",
 ]

 // Bedrock provider options for Anthropic beta features
@@ -333,8 +336,10 @@ function buildProviderOptions(

        case "deepseek":
        case "openrouter":
-        case "siliconflow": {
+        case "siliconflow":
+        case "gateway": {
            // These providers don't have reasoning configs in AI SDK yet
+            // Gateway passes through to underlying providers which handle their own configs
            break
        }

@@ -356,6 +361,7 @@ const PROVIDER_ENV_VARS: Record<ProviderName, string | null> = {
    openrouter: "OPENROUTER_API_KEY",
    deepseek: "DEEPSEEK_API_KEY",
    siliconflow: "SILICONFLOW_API_KEY",
+    gateway: "AI_GATEWAY_API_KEY",
 }

 /**
@@ -495,6 +501,7 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
            if (configured.length === 0) {
                throw new Error(
                    `No AI provider configured. Please set one of the following API keys in your .env.local file:\n` +
+                        `- AI_GATEWAY_API_KEY for Vercel AI Gateway\n` +
                        `- DEEPSEEK_API_KEY for DeepSeek\n` +
                        `- OPENAI_API_KEY for OpenAI\n` +
                        `- ANTHROPIC_API_KEY for Anthropic\n` +
@@ -672,9 +679,30 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
            break
        }

+        case "gateway": {
+            // Vercel AI Gateway - unified access to multiple AI providers
+            // Model format: "provider/model" e.g., "openai/gpt-4o", "anthropic/claude-sonnet-4-5"
+            // See: https://vercel.com/ai-gateway
+            const apiKey = overrides?.apiKey || process.env.AI_GATEWAY_API_KEY
+            const baseURL =
+                overrides?.baseUrl || process.env.AI_GATEWAY_BASE_URL
+            // Only use custom configuration if explicitly set (local dev or custom Gateway)
+            // Otherwise undefined → AI SDK uses Vercel default (https://ai-gateway.vercel.sh/v1/ai) + OIDC
+            if (baseURL || overrides?.apiKey) {
+                const customGateway = createGateway({
+                    apiKey,
+                    ...(baseURL && { baseURL }),
+                })
+                model = customGateway(modelId)
+            } else {
+                model = gateway(modelId)
+            }
+            break
+        }
+
        default:
            throw new Error(
-                `Unknown AI provider: ${provider}. Supported providers: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow`,
+                `Unknown AI provider: ${provider}. Supported providers: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow, gateway`,
            )
    }

--- a/package-lock.json
+++ b/package-lock.json
@@ -1,18 +1,19 @@
 {
    "name": "next-ai-draw-io",
-    "version": "0.4.0",
+    "version": "0.4.3",
    "lockfileVersion": 3,
    "requires": true,
    "packages": {
        "": {
            "name": "next-ai-draw-io",
-            "version": "0.4.0",
+            "version": "0.4.3",
            "license": "Apache-2.0",
            "dependencies": {
                "@ai-sdk/amazon-bedrock": "^3.0.70",
                "@ai-sdk/anthropic": "^2.0.44",
                "@ai-sdk/azure": "^2.0.69",
                "@ai-sdk/deepseek": "^1.0.30",
+                "@ai-sdk/gateway": "^2.0.21",
                "@ai-sdk/google": "^2.0.0",
                "@ai-sdk/openai": "^2.0.19",
                "@ai-sdk/react": "^2.0.107",
@@ -62,7 +63,7 @@
            },
            "devDependencies": {
                "@anthropic-ai/tokenizer": "^0.0.4",
-                "@biomejs/biome": "2.3.8",
+                "@biomejs/biome": "^2.3.8",
                "@tailwindcss/postcss": "^4",
                "@tailwindcss/typography": "^0.5.19",
                "@types/node": "^20",
@@ -199,13 +200,13 @@
            }
        },
        "node_modules/@ai-sdk/gateway": {
-            "version": "2.0.18",
-            "resolved": "https://registry.npmjs.org/@ai-sdk/gateway/-/gateway-2.0.18.tgz",
-            "integrity": "sha512-sDQcW+6ck2m0pTIHW6BPHD7S125WD3qNkx/B8sEzJp/hurocmJ5Cni0ybExg6sQMGo+fr/GWOwpHF1cmCdg5rQ==",
+            "version": "2.0.21",
+            "resolved": "https://registry.npmjs.org/@ai-sdk/gateway/-/gateway-2.0.21.tgz",
+            "integrity": "sha512-BwV7DU/lAm3Xn6iyyvZdWgVxgLu3SNXzl5y57gMvkW4nGhAOV5269IrJzQwGt03bb107sa6H6uJwWxc77zXoGA==",
            "license": "Apache-2.0",
            "dependencies": {
                "@ai-sdk/provider": "2.0.0",
-                "@ai-sdk/provider-utils": "3.0.18",
+                "@ai-sdk/provider-utils": "3.0.19",
                "@vercel/oidc": "3.0.5"
            },
            "engines": {
@@ -215,6 +216,23 @@
                "zod": "^3.25.76 || ^4.1.8"
            }
        },
+        "node_modules/@ai-sdk/gateway/node_modules/@ai-sdk/provider-utils": {
+            "version": "3.0.19",
+            "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-3.0.19.tgz",
+            "integrity": "sha512-W41Wc9/jbUVXVwCN/7bWa4IKe8MtxO3EyA0Hfhx6grnmiYlCvpI8neSYWFE0zScXJkgA/YK3BRybzgyiXuu6JA==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@ai-sdk/provider": "2.0.0",
+                "@standard-schema/spec": "^1.0.0",
+                "eventsource-parser": "^3.0.6"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "peerDependencies": {
+                "zod": "^3.25.76 || ^4.1.8"
+            }
+        },
        "node_modules/@ai-sdk/google": {
            "version": "2.0.0",
            "resolved": "https://registry.npmjs.org/@ai-sdk/google/-/google-2.0.0.tgz",
@@ -6130,6 +6148,23 @@
                "zod": "^3.25.76 || ^4.1.8"
            }
        },
+        "node_modules/ai/node_modules/@ai-sdk/gateway": {
+            "version": "2.0.18",
+            "resolved": "https://registry.npmjs.org/@ai-sdk/gateway/-/gateway-2.0.18.tgz",
+            "integrity": "sha512-sDQcW+6ck2m0pTIHW6BPHD7S125WD3qNkx/B8sEzJp/hurocmJ5Cni0ybExg6sQMGo+fr/GWOwpHF1cmCdg5rQ==",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@ai-sdk/provider": "2.0.0",
+                "@ai-sdk/provider-utils": "3.0.18",
+                "@vercel/oidc": "3.0.5"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "peerDependencies": {
+                "zod": "^3.25.76 || ^4.1.8"
+            }
+        },
        "node_modules/ajv": {
            "version": "6.12.6",
            "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
    "name": "next-ai-draw-io",
-    "version": "0.4.2",
+    "version": "0.4.3",
    "license": "Apache-2.0",
    "private": true,
    "scripts": {
@@ -17,6 +17,7 @@
        "@ai-sdk/anthropic": "^2.0.44",
        "@ai-sdk/azure": "^2.0.69",
        "@ai-sdk/deepseek": "^1.0.30",
+        "@ai-sdk/gateway": "^2.0.21",
        "@ai-sdk/google": "^2.0.0",
        "@ai-sdk/openai": "^2.0.19",
        "@ai-sdk/react": "^2.0.107",
@@ -72,7 +73,7 @@
    },
    "devDependencies": {
        "@anthropic-ai/tokenizer": "^0.0.4",
-        "@biomejs/biome": "2.3.8",
+        "@biomejs/biome": "^2.3.8",
        "@tailwindcss/postcss": "^4",
        "@tailwindcss/typography": "^0.5.19",
        "@types/node": "^20",
--- a/packages/mcp-server/README.md
+++ b/packages/mcp-server/README.md
@@ -0,0 +1,162 @@
+# Next AI Draw.io MCP Server
+
+MCP (Model Context Protocol) server that enables AI agents like Claude Desktop and Cursor to generate and edit draw.io diagrams with **real-time browser preview**.
+
+**Self-contained** - includes an embedded HTTP server, no external dependencies required.
+
+## Quick Start
+
+```json
+{
+  "mcpServers": {
+    "drawio": {
+      "command": "npx",
+      "args": ["@next-ai-drawio/mcp-server@latest"]
+    }
+  }
+}
+```
+
+## Installation
+
+### Claude Desktop
+
+Add to your Claude Desktop config (`~/Library/Application Support/Claude/claude_desktop_config.json` on macOS):
+
+```json
+{
+  "mcpServers": {
+    "drawio": {
+      "command": "npx",
+      "args": ["@next-ai-drawio/mcp-server@latest"]
+    }
+  }
+}
+```
+
+### VS Code
+
+Add to your VS Code settings (`.vscode/mcp.json` in workspace or user settings):
+
+```json
+{
+  "mcpServers": {
+    "drawio": {
+      "command": "npx",
+      "args": ["@next-ai-drawio/mcp-server@latest"]
+    }
+  }
+}
+```
+
+### Cursor
+
+Add to Cursor MCP config (`~/.cursor/mcp.json`):
+
+```json
+{
+  "mcpServers": {
+    "drawio": {
+      "command": "npx",
+      "args": ["@next-ai-drawio/mcp-server@latest"]
+    }
+  }
+}
+```
+
+### Claude Code CLI
+
+```bash
+claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
+```
+
+### Other MCP Clients
+
+Use the standard MCP configuration with:
+- **Command**: `npx`
+- **Args**: `["@next-ai-drawio/mcp-server@latest"]`
+
+## Usage
+
+1. Restart your MCP client after updating config
+2. Ask the AI to create a diagram:
+   > "Create a flowchart showing user authentication with login, MFA, and session management"
+3. The diagram appears in your browser in real-time!
+
+## Features
+
+- **Real-time Preview**: Diagrams appear and update in your browser as the AI creates them
+- **Natural Language**: Describe diagrams in plain text - flowcharts, architecture diagrams, etc.
+- **Edit Support**: Modify existing diagrams with natural language instructions
+- **Export**: Save diagrams as `.drawio` files
+- **Self-contained**: Embedded server, works offline (except draw.io UI which loads from embed.diagrams.net)
+
+## Available Tools
+
+| Tool | Description |
+|------|-------------|
+| `start_session` | Opens browser with real-time diagram preview |
+| `display_diagram` | Create a new diagram from XML |
+| `edit_diagram` | Edit diagram by ID-based operations (update/add/delete cells) |
+| `get_diagram` | Get the current diagram XML |
+| `export_diagram` | Save diagram to a `.drawio` file |
+
+## How It Works
+
+```
+┌─────────────────┐     stdio      ┌─────────────────┐
+│  Claude Desktop │ <───────────> │   MCP Server    │
+│    (AI Agent)   │               │  (this package) │
+└─────────────────┘               └────────┬────────┘
+                                          │
+                                 ┌────────▼────────┐
+                                 │ Embedded HTTP   │
+                                 │ Server (:6002)  │
+                                 └────────┬────────┘
+                                          │
+                                 ┌────────▼────────┐
+                                 │  User's Browser │
+                                 │ (draw.io embed) │
+                                 └─────────────────┘
+```
+
+1. **MCP Server** receives tool calls from Claude via stdio
+2. **Embedded HTTP Server** serves the draw.io UI and handles state
+3. **Browser** shows real-time diagram updates via polling
+
+## Configuration
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `PORT` | `6002` | Port for the embedded HTTP server |
+
+## Troubleshooting
+
+### Port already in use
+
+If port 6002 is in use, the server will automatically try the next available port (up to 6020).
+
+Or set a custom port:
+```json
+{
+  "mcpServers": {
+    "drawio": {
+      "command": "npx",
+      "args": ["@next-ai-drawio/mcp-server@latest"],
+      "env": { "PORT": "6003" }
+    }
+  }
+}
+```
+
+### "No active session"
+
+Call `start_session` first to open the browser window.
+
+### Browser not updating
+
+Check that the browser URL has the `?mcp=` query parameter. The MCP session ID connects the browser to the server.
+
+## License
+
+Apache-2.0
--- a/packages/mcp-server/package-lock.json
+++ b/packages/mcp-server/package-lock.json
--- a/packages/mcp-server/package.json
+++ b/packages/mcp-server/package.json
@@ -0,0 +1,55 @@
+{
+    "name": "@next-ai-drawio/mcp-server",
+    "version": "0.1.2",
+    "description": "MCP server for Next AI Draw.io - AI-powered diagram generation with real-time browser preview",
+    "type": "module",
+    "main": "dist/index.js",
+    "bin": {
+        "next-ai-drawio-mcp": "./dist/index.js"
+    },
+    "scripts": {
+        "build": "tsc",
+        "dev": "tsx watch src/index.ts",
+        "start": "node dist/index.js",
+        "prepublishOnly": "npm run build"
+    },
+    "keywords": [
+        "mcp",
+        "drawio",
+        "diagram",
+        "ai",
+        "claude",
+        "model-context-protocol"
+    ],
+    "author": "Biki-dev",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/Biki-dev/next-ai-draw-io",
+        "directory": "packages/mcp-server"
+    },
+    "homepage": "https://next-ai-drawio.jiang.jp",
+    "bugs": {
+        "url": "https://github.com/Biki-dev/next-ai-draw-io/issues"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "@modelcontextprotocol/sdk": "^1.0.4",
+        "linkedom": "^0.18.0",
+        "open": "^10.1.0",
+        "zod": "^3.24.0"
+    },
+    "devDependencies": {
+        "@types/node": "^20",
+        "tsx": "^4.19.0",
+        "typescript": "^5"
+    },
+    "engines": {
+        "node": ">=18"
+    },
+    "files": [
+        "dist"
+    ]
+}
--- a/packages/mcp-server/src/diagram-operations.ts
+++ b/packages/mcp-server/src/diagram-operations.ts
@@ -0,0 +1,219 @@
+/**
+ * ID-based diagram operations
+ * Copied from lib/utils.ts to avoid cross-package imports
+ */
+
+export interface DiagramOperation {
+    type: "update" | "add" | "delete"
+    cell_id: string
+    new_xml?: string
+}
+
+export interface OperationError {
+    type: "update" | "add" | "delete"
+    cellId: string
+    message: string
+}
+
+export interface ApplyOperationsResult {
+    result: string
+    errors: OperationError[]
+}
+
+/**
+ * Apply diagram operations (update/add/delete) using ID-based lookup.
+ * This replaces the text-matching approach with direct DOM manipulation.
+ *
+ * @param xmlContent - The full mxfile XML content
+ * @param operations - Array of operations to apply
+ * @returns Object with result XML and any errors
+ */
+export function applyDiagramOperations(
+    xmlContent: string,
+    operations: DiagramOperation[],
+): ApplyOperationsResult {
+    const errors: OperationError[] = []
+
+    // Parse the XML
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(xmlContent, "text/xml")
+
+    // Check for parse errors
+    const parseError = doc.querySelector("parsererror")
+    if (parseError) {
+        return {
+            result: xmlContent,
+            errors: [
+                {
+                    type: "update",
+                    cellId: "",
+                    message: `XML parse error: ${parseError.textContent}`,
+                },
+            ],
+        }
+    }
+
+    // Find the root element (inside mxGraphModel)
+    const root = doc.querySelector("root")
+    if (!root) {
+        return {
+            result: xmlContent,
+            errors: [
+                {
+                    type: "update",
+                    cellId: "",
+                    message: "Could not find <root> element in XML",
+                },
+            ],
+        }
+    }
+
+    // Build a map of cell IDs to elements
+    const cellMap = new Map<string, Element>()
+    root.querySelectorAll("mxCell").forEach((cell) => {
+        const id = cell.getAttribute("id")
+        if (id) cellMap.set(id, cell)
+    })
+
+    // Process each operation
+    for (const op of operations) {
+        if (op.type === "update") {
+            const existingCell = cellMap.get(op.cell_id)
+            if (!existingCell) {
+                errors.push({
+                    type: "update",
+                    cellId: op.cell_id,
+                    message: `Cell with id="${op.cell_id}" not found`,
+                })
+                continue
+            }
+
+            if (!op.new_xml) {
+                errors.push({
+                    type: "update",
+                    cellId: op.cell_id,
+                    message: "new_xml is required for update operation",
+                })
+                continue
+            }
+
+            // Parse the new XML
+            const newDoc = parser.parseFromString(
+                `<wrapper>${op.new_xml}</wrapper>`,
+                "text/xml",
+            )
+            const newCell = newDoc.querySelector("mxCell")
+            if (!newCell) {
+                errors.push({
+                    type: "update",
+                    cellId: op.cell_id,
+                    message: "new_xml must contain an mxCell element",
+                })
+                continue
+            }
+
+            // Validate ID matches
+            const newCellId = newCell.getAttribute("id")
+            if (newCellId !== op.cell_id) {
+                errors.push({
+                    type: "update",
+                    cellId: op.cell_id,
+                    message: `ID mismatch: cell_id is "${op.cell_id}" but new_xml has id="${newCellId}"`,
+                })
+                continue
+            }
+
+            // Import and replace the node
+            const importedNode = doc.importNode(newCell, true)
+            existingCell.parentNode?.replaceChild(importedNode, existingCell)
+
+            // Update the map with the new element
+            cellMap.set(op.cell_id, importedNode)
+        } else if (op.type === "add") {
+            // Check if ID already exists
+            if (cellMap.has(op.cell_id)) {
+                errors.push({
+                    type: "add",
+                    cellId: op.cell_id,
+                    message: `Cell with id="${op.cell_id}" already exists`,
+                })
+                continue
+            }
+
+            if (!op.new_xml) {
+                errors.push({
+                    type: "add",
+                    cellId: op.cell_id,
+                    message: "new_xml is required for add operation",
+                })
+                continue
+            }
+
+            // Parse the new XML
+            const newDoc = parser.parseFromString(
+                `<wrapper>${op.new_xml}</wrapper>`,
+                "text/xml",
+            )
+            const newCell = newDoc.querySelector("mxCell")
+            if (!newCell) {
+                errors.push({
+                    type: "add",
+                    cellId: op.cell_id,
+                    message: "new_xml must contain an mxCell element",
+                })
+                continue
+            }
+
+            // Validate ID matches
+            const newCellId = newCell.getAttribute("id")
+            if (newCellId !== op.cell_id) {
+                errors.push({
+                    type: "add",
+                    cellId: op.cell_id,
+                    message: `ID mismatch: cell_id is "${op.cell_id}" but new_xml has id="${newCellId}"`,
+                })
+                continue
+            }
+
+            // Import and append the node
+            const importedNode = doc.importNode(newCell, true)
+            root.appendChild(importedNode)
+
+            // Add to map
+            cellMap.set(op.cell_id, importedNode)
+        } else if (op.type === "delete") {
+            const existingCell = cellMap.get(op.cell_id)
+            if (!existingCell) {
+                errors.push({
+                    type: "delete",
+                    cellId: op.cell_id,
+                    message: `Cell with id="${op.cell_id}" not found`,
+                })
+                continue
+            }
+
+            // Check for edges referencing this cell (warning only, still delete)
+            const referencingEdges = root.querySelectorAll(
+                `mxCell[source="${op.cell_id}"], mxCell[target="${op.cell_id}"]`,
+            )
+            if (referencingEdges.length > 0) {
+                const edgeIds = Array.from(referencingEdges)
+                    .map((e) => e.getAttribute("id"))
+                    .join(", ")
+                console.warn(
+                    `[applyDiagramOperations] Deleting cell "${op.cell_id}" which is referenced by edges: ${edgeIds}`,
+                )
+            }
+
+            // Remove the node
+            existingCell.parentNode?.removeChild(existingCell)
+            cellMap.delete(op.cell_id)
+        }
+    }
+
+    // Serialize back to string
+    const serializer = new XMLSerializer()
+    const result = serializer.serializeToString(doc)
+
+    return { result, errors }
+}
--- a/packages/mcp-server/src/http-server.ts
+++ b/packages/mcp-server/src/http-server.ts
@@ -0,0 +1,384 @@
+/**
+ * Embedded HTTP Server for MCP
+ *
+ * Serves a static HTML page with draw.io embed and handles state sync.
+ * This eliminates the need for an external Next.js app.
+ */
+
+import http from "node:http"
+import { log } from "./logger.js"
+
+interface SessionState {
+    xml: string
+    version: number
+    lastUpdated: Date
+}
+
+// In-memory state store (shared with MCP server in same process)
+export const stateStore = new Map<string, SessionState>()
+
+let server: http.Server | null = null
+let serverPort: number = 6002
+const MAX_PORT = 6020 // Don't retry beyond this port
+const SESSION_TTL = 60 * 60 * 1000 // 1 hour
+
+/**
+ * Get state for a session
+ */
+export function getState(sessionId: string): SessionState | undefined {
+    return stateStore.get(sessionId)
+}
+
+/**
+ * Set state for a session
+ */
+export function setState(sessionId: string, xml: string): number {
+    const existing = stateStore.get(sessionId)
+    const newVersion = (existing?.version || 0) + 1
+
+    stateStore.set(sessionId, {
+        xml,
+        version: newVersion,
+        lastUpdated: new Date(),
+    })
+
+    log.debug(`State updated: session=${sessionId}, version=${newVersion}`)
+    return newVersion
+}
+
+/**
+ * Start the embedded HTTP server
+ */
+export function startHttpServer(port: number = 6002): Promise<number> {
+    return new Promise((resolve, reject) => {
+        if (server) {
+            resolve(serverPort)
+            return
+        }
+
+        serverPort = port
+        server = http.createServer(handleRequest)
+
+        server.on("error", (err: NodeJS.ErrnoException) => {
+            if (err.code === "EADDRINUSE") {
+                if (port >= MAX_PORT) {
+                    reject(
+                        new Error(
+                            `No available ports in range 6002-${MAX_PORT}`,
+                        ),
+                    )
+                    return
+                }
+                log.info(`Port ${port} in use, trying ${port + 1}`)
+                server = null
+                startHttpServer(port + 1)
+                    .then(resolve)
+                    .catch(reject)
+            } else {
+                reject(err)
+            }
+        })
+
+        server.listen(port, () => {
+            serverPort = port
+            log.info(`Embedded HTTP server running on http://localhost:${port}`)
+            resolve(port)
+        })
+    })
+}
+
+/**
+ * Stop the HTTP server
+ */
+export function stopHttpServer(): void {
+    if (server) {
+        server.close()
+        server = null
+    }
+}
+
+/**
+ * Clean up expired sessions
+ */
+function cleanupExpiredSessions(): void {
+    const now = Date.now()
+    for (const [sessionId, state] of stateStore) {
+        if (now - state.lastUpdated.getTime() > SESSION_TTL) {
+            stateStore.delete(sessionId)
+            log.info(`Cleaned up expired session: ${sessionId}`)
+        }
+    }
+}
+
+// Run cleanup every 5 minutes
+setInterval(cleanupExpiredSessions, 5 * 60 * 1000)
+
+/**
+ * Get the current server port
+ */
+export function getServerPort(): number {
+    return serverPort
+}
+
+/**
+ * Handle HTTP requests
+ */
+function handleRequest(
+    req: http.IncomingMessage,
+    res: http.ServerResponse,
+): void {
+    const url = new URL(req.url || "/", `http://localhost:${serverPort}`)
+
+    // CORS headers for local development
+    res.setHeader("Access-Control-Allow-Origin", "*")
+    res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
+    res.setHeader("Access-Control-Allow-Headers", "Content-Type")
+
+    if (req.method === "OPTIONS") {
+        res.writeHead(204)
+        res.end()
+        return
+    }
+
+    // Route handling
+    if (url.pathname === "/" || url.pathname === "/index.html") {
+        serveHtml(req, res, url)
+    } else if (
+        url.pathname === "/api/state" ||
+        url.pathname === "/api/mcp/state"
+    ) {
+        handleStateApi(req, res, url)
+    } else if (
+        url.pathname === "/api/health" ||
+        url.pathname === "/api/mcp/health"
+    ) {
+        res.writeHead(200, { "Content-Type": "application/json" })
+        res.end(JSON.stringify({ status: "ok", mcp: true }))
+    } else {
+        res.writeHead(404)
+        res.end("Not Found")
+    }
+}
+
+/**
+ * Serve the HTML page with draw.io embed
+ */
+function serveHtml(
+    req: http.IncomingMessage,
+    res: http.ServerResponse,
+    url: URL,
+): void {
+    const sessionId = url.searchParams.get("mcp") || ""
+
+    res.writeHead(200, { "Content-Type": "text/html" })
+    res.end(getHtmlPage(sessionId))
+}
+
+/**
+ * Handle state API requests
+ */
+function handleStateApi(
+    req: http.IncomingMessage,
+    res: http.ServerResponse,
+    url: URL,
+): void {
+    if (req.method === "GET") {
+        const sessionId = url.searchParams.get("sessionId")
+        if (!sessionId) {
+            res.writeHead(400, { "Content-Type": "application/json" })
+            res.end(JSON.stringify({ error: "sessionId required" }))
+            return
+        }
+
+        const state = stateStore.get(sessionId)
+        res.writeHead(200, { "Content-Type": "application/json" })
+        res.end(
+            JSON.stringify({
+                xml: state?.xml || null,
+                version: state?.version || 0,
+                lastUpdated: state?.lastUpdated?.toISOString() || null,
+            }),
+        )
+    } else if (req.method === "POST") {
+        let body = ""
+        req.on("data", (chunk) => {
+            body += chunk
+        })
+        req.on("end", () => {
+            try {
+                const { sessionId, xml } = JSON.parse(body)
+                if (!sessionId) {
+                    res.writeHead(400, { "Content-Type": "application/json" })
+                    res.end(JSON.stringify({ error: "sessionId required" }))
+                    return
+                }
+
+                const version = setState(sessionId, xml)
+                res.writeHead(200, { "Content-Type": "application/json" })
+                res.end(JSON.stringify({ success: true, version }))
+            } catch {
+                res.writeHead(400, { "Content-Type": "application/json" })
+                res.end(JSON.stringify({ error: "Invalid JSON" }))
+            }
+        })
+    } else {
+        res.writeHead(405)
+        res.end("Method Not Allowed")
+    }
+}
+
+/**
+ * Generate the HTML page with draw.io embed
+ */
+function getHtmlPage(sessionId: string): string {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Draw.io MCP - ${sessionId || "No Session"}</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        html, body { width: 100%; height: 100%; overflow: hidden; }
+        #container { width: 100%; height: 100%; display: flex; flex-direction: column; }
+        #header {
+            padding: 8px 16px;
+            background: #1a1a2e;
+            color: #eee;
+            font-family: system-ui, sans-serif;
+            font-size: 14px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        #header .session { color: #888; font-size: 12px; }
+        #header .status { font-size: 12px; }
+        #header .status.connected { color: #4ade80; }
+        #header .status.disconnected { color: #f87171; }
+        #drawio { flex: 1; border: none; }
+    </style>
+</head>
+<body>
+    <div id="container">
+        <div id="header">
+            <div>
+                <strong>Draw.io MCP</strong>
+                <span class="session">${sessionId ? `Session: ${sessionId}` : "No MCP session"}</span>
+            </div>
+            <div id="status" class="status disconnected">Connecting...</div>
+        </div>
+        <iframe id="drawio" src="https://embed.diagrams.net/?embed=1&proto=json&spin=1&libraries=1"></iframe>
+    </div>
+
+    <script>
+        const sessionId = "${sessionId}";
+        const iframe = document.getElementById('drawio');
+        const statusEl = document.getElementById('status');
+
+        let currentVersion = 0;
+        let isDrawioReady = false;
+        let pendingXml = null;
+        let lastLoadedXml = null;
+
+        // Listen for messages from draw.io
+        window.addEventListener('message', (event) => {
+            if (event.origin !== 'https://embed.diagrams.net') return;
+
+            try {
+                const msg = JSON.parse(event.data);
+                handleDrawioMessage(msg);
+            } catch (e) {
+                // Ignore non-JSON messages
+            }
+        });
+
+        function handleDrawioMessage(msg) {
+            if (msg.event === 'init') {
+                isDrawioReady = true;
+                statusEl.textContent = 'Ready';
+                statusEl.className = 'status connected';
+
+                // Load pending XML if any
+                if (pendingXml) {
+                    loadDiagram(pendingXml);
+                    pendingXml = null;
+                }
+            } else if (msg.event === 'save') {
+                // User saved - push to state
+                if (msg.xml && msg.xml !== lastLoadedXml) {
+                    pushState(msg.xml);
+                }
+            } else if (msg.event === 'export') {
+                // Export completed
+                if (msg.data) {
+                    pushState(msg.data);
+                }
+            } else if (msg.event === 'autosave') {
+                // Autosave - push to state
+                if (msg.xml && msg.xml !== lastLoadedXml) {
+                    pushState(msg.xml);
+                }
+            }
+        }
+
+        function loadDiagram(xml) {
+            if (!isDrawioReady) {
+                pendingXml = xml;
+                return;
+            }
+
+            lastLoadedXml = xml;
+            iframe.contentWindow.postMessage(JSON.stringify({
+                action: 'load',
+                xml: xml,
+                autosave: 1
+            }), '*');
+        }
+
+        async function pushState(xml) {
+            if (!sessionId) return;
+
+            try {
+                const response = await fetch('/api/state', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ sessionId, xml })
+                });
+
+                if (response.ok) {
+                    const result = await response.json();
+                    currentVersion = result.version;
+                    lastLoadedXml = xml;
+                }
+            } catch (e) {
+                console.error('Failed to push state:', e);
+            }
+        }
+
+        async function pollState() {
+            if (!sessionId) return;
+
+            try {
+                const response = await fetch('/api/state?sessionId=' + encodeURIComponent(sessionId));
+                if (!response.ok) return;
+
+                const state = await response.json();
+
+                if (state.version && state.version > currentVersion && state.xml) {
+                    currentVersion = state.version;
+                    loadDiagram(state.xml);
+                }
+            } catch (e) {
+                console.error('Failed to poll state:', e);
+            }
+        }
+
+        // Start polling if we have a session
+        if (sessionId) {
+            pollState();
+            setInterval(pollState, 2000);
+        }
+    </script>
+</body>
+</html>`
+}
--- a/packages/mcp-server/src/index.ts
+++ b/packages/mcp-server/src/index.ts
@@ -0,0 +1,476 @@
+#!/usr/bin/env node
+/**
+ * MCP Server for Next AI Draw.io
+ *
+ * Enables AI agents (Claude Desktop, Cursor, etc.) to generate and edit
+ * draw.io diagrams with real-time browser preview.
+ *
+ * Uses an embedded HTTP server - no external dependencies required.
+ */
+
+// Setup DOM polyfill for Node.js (required for XML operations)
+import { DOMParser } from "linkedom"
+;(globalThis as any).DOMParser = DOMParser
+
+// Create XMLSerializer polyfill using outerHTML
+class XMLSerializerPolyfill {
+    serializeToString(node: any): string {
+        if (node.outerHTML !== undefined) {
+            return node.outerHTML
+        }
+        if (node.documentElement) {
+            return node.documentElement.outerHTML
+        }
+        return ""
+    }
+}
+;(globalThis as any).XMLSerializer = XMLSerializerPolyfill
+
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"
+import open from "open"
+import { z } from "zod"
+import {
+    applyDiagramOperations,
+    type DiagramOperation,
+} from "./diagram-operations.js"
+import {
+    getServerPort,
+    getState,
+    setState,
+    startHttpServer,
+} from "./http-server.js"
+import { log } from "./logger.js"
+
+// Server configuration
+const config = {
+    port: parseInt(process.env.PORT || "6002"),
+}
+
+// Session state (single session for simplicity)
+let currentSession: {
+    id: string
+    xml: string
+    version: number
+} | null = null
+
+// Create MCP server
+const server = new McpServer({
+    name: "next-ai-drawio",
+    version: "0.1.2",
+})
+
+// Register prompt with workflow guidance
+server.prompt(
+    "diagram-workflow",
+    "Guidelines for creating and editing draw.io diagrams",
+    () => ({
+        messages: [
+            {
+                role: "user",
+                content: {
+                    type: "text",
+                    text: `# Draw.io Diagram Workflow Guidelines
+
+## Creating a New Diagram
+1. Call start_session to open the browser preview
+2. Use display_diagram with complete mxGraphModel XML to create a new diagram
+
+## Adding Elements to Existing Diagram
+1. Use edit_diagram with "add" operation
+2. Provide a unique cell_id and complete mxCell XML
+3. No need to call get_diagram first - the server fetches latest state automatically
+
+## Modifying or Deleting Existing Elements
+1. FIRST call get_diagram to see current cell IDs and structure
+2. THEN call edit_diagram with "update" or "delete" operations
+3. For update, provide the cell_id and complete new mxCell XML
+
+## Important Notes
+- display_diagram REPLACES the entire diagram - only use for new diagrams
+- edit_diagram PRESERVES user's manual changes (fetches browser state first)
+- Always use unique cell_ids when adding elements (e.g., "shape-1", "arrow-2")`,
+                },
+            },
+        ],
+    }),
+)
+
+// Tool: start_session
+server.registerTool(
+    "start_session",
+    {
+        description:
+            "Start a new diagram session and open the browser for real-time preview. " +
+            "Starts an embedded server and opens a browser window with draw.io. " +
+            "The browser will show diagram updates as they happen.",
+        inputSchema: {},
+    },
+    async () => {
+        try {
+            // Start embedded HTTP server
+            const port = await startHttpServer(config.port)
+
+            // Create session
+            const sessionId = `mcp-${Date.now().toString(36)}-${Math.random().toString(36).substring(2, 8)}`
+            currentSession = {
+                id: sessionId,
+                xml: "",
+                version: 0,
+            }
+
+            // Open browser
+            const browserUrl = `http://localhost:${port}?mcp=${sessionId}`
+            await open(browserUrl)
+
+            log.info(`Started session ${sessionId}, browser at ${browserUrl}`)
+
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: `Session started successfully!\n\nSession ID: ${sessionId}\nBrowser URL: ${browserUrl}\n\nThe browser will now show real-time diagram updates.`,
+                    },
+                ],
+            }
+        } catch (error) {
+            const message =
+                error instanceof Error ? error.message : String(error)
+            log.error("start_session failed:", message)
+            return {
+                content: [{ type: "text", text: `Error: ${message}` }],
+                isError: true,
+            }
+        }
+    },
+)
+
+// Tool: display_diagram
+server.registerTool(
+    "display_diagram",
+    {
+        description:
+            "Display a NEW draw.io diagram from XML. REPLACES the entire diagram. " +
+            "Use this for creating new diagrams from scratch. " +
+            "To ADD elements to an existing diagram, use edit_diagram with 'add' operation instead. " +
+            "You should generate valid draw.io/mxGraph XML format.",
+        inputSchema: {
+            xml: z
+                .string()
+                .describe("The draw.io XML to display (mxGraphModel format)"),
+        },
+    },
+    async ({ xml }) => {
+        try {
+            if (!currentSession) {
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: "Error: No active session. Please call start_session first.",
+                        },
+                    ],
+                    isError: true,
+                }
+            }
+
+            log.info(`Displaying diagram, ${xml.length} chars`)
+
+            // Update session state
+            currentSession.xml = xml
+            currentSession.version++
+
+            // Push to embedded server state
+            setState(currentSession.id, xml)
+
+            log.info(`Diagram displayed successfully`)
+
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: `Diagram displayed successfully!\n\nThe diagram is now visible in your browser.\n\nXML length: ${xml.length} characters`,
+                    },
+                ],
+            }
+        } catch (error) {
+            const message =
+                error instanceof Error ? error.message : String(error)
+            log.error("display_diagram failed:", message)
+            return {
+                content: [{ type: "text", text: `Error: ${message}` }],
+                isError: true,
+            }
+        }
+    },
+)
+
+// Tool: edit_diagram
+server.registerTool(
+    "edit_diagram",
+    {
+        description:
+            "Edit the current diagram by ID-based operations (update/add/delete cells). " +
+            "ALWAYS fetches the latest state from browser first, so user's manual changes are preserved.\n\n" +
+            "IMPORTANT workflow:\n" +
+            "- For ADD operations: Can use directly - just provide new unique cell_id and new_xml.\n" +
+            "- For UPDATE/DELETE: Call get_diagram FIRST to see current cell IDs, then edit.\n\n" +
+            "Operations:\n" +
+            "- add: Add a new cell. Provide cell_id (new unique id) and new_xml.\n" +
+            "- update: Replace an existing cell by its id. Provide cell_id and complete new_xml.\n" +
+            "- delete: Remove a cell by its id. Only cell_id is needed.\n\n" +
+            "For add/update, new_xml must be a complete mxCell element including mxGeometry.",
+        inputSchema: {
+            operations: z
+                .array(
+                    z.object({
+                        type: z
+                            .enum(["update", "add", "delete"])
+                            .describe("Operation type"),
+                        cell_id: z.string().describe("The id of the mxCell"),
+                        new_xml: z
+                            .string()
+                            .optional()
+                            .describe(
+                                "Complete mxCell XML element (required for update/add)",
+                            ),
+                    }),
+                )
+                .describe("Array of operations to apply"),
+        },
+    },
+    async ({ operations }) => {
+        try {
+            if (!currentSession) {
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: "Error: No active session. Please call start_session first.",
+                        },
+                    ],
+                    isError: true,
+                }
+            }
+
+            // Fetch latest state from browser
+            const browserState = getState(currentSession.id)
+            if (browserState?.xml) {
+                currentSession.xml = browserState.xml
+                log.info("Fetched latest diagram state from browser")
+            }
+
+            if (!currentSession.xml) {
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: "Error: No diagram to edit. Please create a diagram first with display_diagram.",
+                        },
+                    ],
+                    isError: true,
+                }
+            }
+
+            log.info(`Editing diagram with ${operations.length} operation(s)`)
+
+            // Apply operations
+            const { result, errors } = applyDiagramOperations(
+                currentSession.xml,
+                operations as DiagramOperation[],
+            )
+
+            if (errors.length > 0) {
+                const errorMessages = errors
+                    .map((e) => `${e.type} ${e.cellId}: ${e.message}`)
+                    .join("\n")
+                log.warn(`Edit had ${errors.length} error(s): ${errorMessages}`)
+            }
+
+            // Update state
+            currentSession.xml = result
+            currentSession.version++
+
+            // Push to embedded server
+            setState(currentSession.id, result)
+
+            log.info(`Diagram edited successfully`)
+
+            const successMsg = `Diagram edited successfully!\n\nApplied ${operations.length} operation(s).`
+            const errorMsg =
+                errors.length > 0
+                    ? `\n\nWarnings:\n${errors.map((e) => `- ${e.type} ${e.cellId}: ${e.message}`).join("\n")}`
+                    : ""
+
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: successMsg + errorMsg,
+                    },
+                ],
+            }
+        } catch (error) {
+            const message =
+                error instanceof Error ? error.message : String(error)
+            log.error("edit_diagram failed:", message)
+            return {
+                content: [{ type: "text", text: `Error: ${message}` }],
+                isError: true,
+            }
+        }
+    },
+)
+
+// Tool: get_diagram
+server.registerTool(
+    "get_diagram",
+    {
+        description:
+            "Get the current diagram XML (fetches latest from browser, including user's manual edits). " +
+            "Call this BEFORE edit_diagram if you need to update or delete existing elements, " +
+            "so you can see the current cell IDs and structure.",
+    },
+    async () => {
+        try {
+            if (!currentSession) {
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: "Error: No active session. Please call start_session first.",
+                        },
+                    ],
+                    isError: true,
+                }
+            }
+
+            // Fetch latest state from browser
+            const browserState = getState(currentSession.id)
+            if (browserState?.xml) {
+                currentSession.xml = browserState.xml
+            }
+
+            if (!currentSession.xml) {
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: "No diagram exists yet. Use display_diagram to create one.",
+                        },
+                    ],
+                }
+            }
+
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: `Current diagram XML:\n\n${currentSession.xml}`,
+                    },
+                ],
+            }
+        } catch (error) {
+            const message =
+                error instanceof Error ? error.message : String(error)
+            log.error("get_diagram failed:", message)
+            return {
+                content: [{ type: "text", text: `Error: ${message}` }],
+                isError: true,
+            }
+        }
+    },
+)
+
+// Tool: export_diagram
+server.registerTool(
+    "export_diagram",
+    {
+        description: "Export the current diagram to a .drawio file.",
+        inputSchema: {
+            path: z
+                .string()
+                .describe(
+                    "File path to save the diagram (e.g., ./diagram.drawio)",
+                ),
+        },
+    },
+    async ({ path }) => {
+        try {
+            if (!currentSession) {
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: "Error: No active session. Please call start_session first.",
+                        },
+                    ],
+                    isError: true,
+                }
+            }
+
+            // Fetch latest state
+            const browserState = getState(currentSession.id)
+            if (browserState?.xml) {
+                currentSession.xml = browserState.xml
+            }
+
+            if (!currentSession.xml) {
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: "Error: No diagram to export. Please create a diagram first.",
+                        },
+                    ],
+                    isError: true,
+                }
+            }
+
+            const fs = await import("node:fs/promises")
+            const nodePath = await import("node:path")
+
+            let filePath = path
+            if (!filePath.endsWith(".drawio")) {
+                filePath = `${filePath}.drawio`
+            }
+
+            const absolutePath = nodePath.resolve(filePath)
+            await fs.writeFile(absolutePath, currentSession.xml, "utf-8")
+
+            log.info(`Diagram exported to ${absolutePath}`)
+
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: `Diagram exported successfully!\n\nFile: ${absolutePath}\nSize: ${currentSession.xml.length} characters`,
+                    },
+                ],
+            }
+        } catch (error) {
+            const message =
+                error instanceof Error ? error.message : String(error)
+            log.error("export_diagram failed:", message)
+            return {
+                content: [{ type: "text", text: `Error: ${message}` }],
+                isError: true,
+            }
+        }
+    },
+)
+
+// Start the MCP server
+async function main() {
+    log.info("Starting MCP server for Next AI Draw.io (embedded mode)...")
+
+    const transport = new StdioServerTransport()
+    await server.connect(transport)
+
+    log.info("MCP server running on stdio")
+}
+
+main().catch((error) => {
+    log.error("Fatal error:", error)
+    process.exit(1)
+})
--- a/packages/mcp-server/src/logger.ts
+++ b/packages/mcp-server/src/logger.ts
@@ -0,0 +1,24 @@
+/**
+ * Logger for MCP server
+ *
+ * CRITICAL: MCP servers communicate via STDIO (stdin/stdout).
+ * Using console.log() will corrupt the JSON-RPC protocol messages.
+ * ALL logging MUST use console.error() which writes to stderr.
+ */
+
+export const log = {
+    info: (msg: string, ...args: unknown[]) => {
+        console.error(`[MCP-DrawIO] [INFO] ${msg}`, ...args)
+    },
+    error: (msg: string, ...args: unknown[]) => {
+        console.error(`[MCP-DrawIO] [ERROR] ${msg}`, ...args)
+    },
+    debug: (msg: string, ...args: unknown[]) => {
+        if (process.env.DEBUG === "true") {
+            console.error(`[MCP-DrawIO] [DEBUG] ${msg}`, ...args)
+        }
+    },
+    warn: (msg: string, ...args: unknown[]) => {
+        console.error(`[MCP-DrawIO] [WARN] ${msg}`, ...args)
+    },
+}
--- a/packages/mcp-server/tsconfig.json
+++ b/packages/mcp-server/tsconfig.json
@@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+        "target": "ES2022",
+        "module": "Node16",
+        "moduleResolution": "Node16",
+        "outDir": "./dist",
+        "rootDir": "./src",
+        "strict": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "declaration": true,
+        "declarationMap": true,
+        "sourceMap": true,
+        "resolveJsonModule": true
+    },
+    "include": ["src/**/*"],
+    "exclude": ["node_modules", "dist"]
+}
--- a/public/favicon-192x192.png
+++ b/public/favicon-192x192.png
--- a/public/favicon-512x512.png
+++ b/public/favicon-512x512.png
--- a/scripts/test-diagram-operations.mjs
+++ b/scripts/test-diagram-operations.mjs
@@ -20,7 +20,13 @@ function applyDiagramOperations(xmlContent, operations) {
    if (parseError) {
        return {
            result: xmlContent,
-            errors: [{ type: "update", cellId: "", message: `XML parse error: ${parseError.textContent}` }],
+            errors: [
+                {
+                    type: "update",
+                    cellId: "",
+                    message: `XML parse error: ${parseError.textContent}`,
+                },
+            ],
        }
    }

@@ -28,7 +34,13 @@ function applyDiagramOperations(xmlContent, operations) {
    if (!root) {
        return {
            result: xmlContent,
-            errors: [{ type: "update", cellId: "", message: "Could not find <root> element in XML" }],
+            errors: [
+                {
+                    type: "update",
+                    cellId: "",
+                    message: "Could not find <root> element in XML",
+                },
+            ],
        }
    }

@@ -42,22 +54,41 @@ function applyDiagramOperations(xmlContent, operations) {
        if (op.type === "update") {
            const existingCell = cellMap.get(op.cell_id)
            if (!existingCell) {
-                errors.push({ type: "update", cellId: op.cell_id, message: `Cell with id="${op.cell_id}" not found` })
+                errors.push({
+                    type: "update",
+                    cellId: op.cell_id,
+                    message: `Cell with id="${op.cell_id}" not found`,
+                })
                continue
            }
            if (!op.new_xml) {
-                errors.push({ type: "update", cellId: op.cell_id, message: "new_xml is required for update operation" })
+                errors.push({
+                    type: "update",
+                    cellId: op.cell_id,
+                    message: "new_xml is required for update operation",
+                })
                continue
            }
-            const newDoc = parser.parseFromString(`<wrapper>${op.new_xml}</wrapper>`, "text/xml")
+            const newDoc = parser.parseFromString(
+                `<wrapper>${op.new_xml}</wrapper>`,
+                "text/xml",
+            )
            const newCell = newDoc.querySelector("mxCell")
            if (!newCell) {
-                errors.push({ type: "update", cellId: op.cell_id, message: "new_xml must contain an mxCell element" })
+                errors.push({
+                    type: "update",
+                    cellId: op.cell_id,
+                    message: "new_xml must contain an mxCell element",
+                })
                continue
            }
            const newCellId = newCell.getAttribute("id")
            if (newCellId !== op.cell_id) {
-                errors.push({ type: "update", cellId: op.cell_id, message: `ID mismatch: cell_id is "${op.cell_id}" but new_xml has id="${newCellId}"` })
+                errors.push({
+                    type: "update",
+                    cellId: op.cell_id,
+                    message: `ID mismatch: cell_id is "${op.cell_id}" but new_xml has id="${newCellId}"`,
+                })
                continue
            }
            const importedNode = doc.importNode(newCell, true)
@@ -65,22 +96,41 @@ function applyDiagramOperations(xmlContent, operations) {
            cellMap.set(op.cell_id, importedNode)
        } else if (op.type === "add") {
            if (cellMap.has(op.cell_id)) {
-                errors.push({ type: "add", cellId: op.cell_id, message: `Cell with id="${op.cell_id}" already exists` })
+                errors.push({
+                    type: "add",
+                    cellId: op.cell_id,
+                    message: `Cell with id="${op.cell_id}" already exists`,
+                })
                continue
            }
            if (!op.new_xml) {
-                errors.push({ type: "add", cellId: op.cell_id, message: "new_xml is required for add operation" })
+                errors.push({
+                    type: "add",
+                    cellId: op.cell_id,
+                    message: "new_xml is required for add operation",
+                })
                continue
            }
-            const newDoc = parser.parseFromString(`<wrapper>${op.new_xml}</wrapper>`, "text/xml")
+            const newDoc = parser.parseFromString(
+                `<wrapper>${op.new_xml}</wrapper>`,
+                "text/xml",
+            )
            const newCell = newDoc.querySelector("mxCell")
            if (!newCell) {
-                errors.push({ type: "add", cellId: op.cell_id, message: "new_xml must contain an mxCell element" })
+                errors.push({
+                    type: "add",
+                    cellId: op.cell_id,
+                    message: "new_xml must contain an mxCell element",
+                })
                continue
            }
            const newCellId = newCell.getAttribute("id")
            if (newCellId !== op.cell_id) {
-                errors.push({ type: "add", cellId: op.cell_id, message: `ID mismatch: cell_id is "${op.cell_id}" but new_xml has id="${newCellId}"` })
+                errors.push({
+                    type: "add",
+                    cellId: op.cell_id,
+                    message: `ID mismatch: cell_id is "${op.cell_id}" but new_xml has id="${newCellId}"`,
+                })
                continue
            }
            const importedNode = doc.importNode(newCell, true)
@@ -89,7 +139,11 @@ function applyDiagramOperations(xmlContent, operations) {
        } else if (op.type === "delete") {
            const existingCell = cellMap.get(op.cell_id)
            if (!existingCell) {
-                errors.push({ type: "delete", cellId: op.cell_id, message: `Cell with id="${op.cell_id}" not found` })
+                errors.push({
+                    type: "delete",
+                    cellId: op.cell_id,
+                    message: `Cell with id="${op.cell_id}" not found`,
+                })
                continue
            }
            existingCell.parentNode?.removeChild(existingCell)
@@ -149,28 +203,52 @@ test("Update operation changes cell value", () => {
        {
            type: "update",
            cell_id: "2",
-            new_xml: '<mxCell id="2" value="Updated Box A" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="100" y="100" width="120" height="60" as="geometry"/></mxCell>',
+            new_xml:
+                '<mxCell id="2" value="Updated Box A" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="100" y="100" width="120" height="60" as="geometry"/></mxCell>',
        },
    ])
-    assert(errors.length === 0, `Expected no errors, got: ${JSON.stringify(errors)}`)
-    assert(result.includes('value="Updated Box A"'), "Updated value should be in result")
-    assert(!result.includes('value="Box A"'), "Old value should not be in result")
+    assert(
+        errors.length === 0,
+        `Expected no errors, got: ${JSON.stringify(errors)}`,
+    )
+    assert(
+        result.includes('value="Updated Box A"'),
+        "Updated value should be in result",
+    )
+    assert(
+        !result.includes('value="Box A"'),
+        "Old value should not be in result",
+    )
 })

 test("Update operation fails for non-existent cell", () => {
    const { errors } = applyDiagramOperations(sampleXml, [
-        { type: "update", cell_id: "999", new_xml: '<mxCell id="999" value="Test"/>' },
+        {
+            type: "update",
+            cell_id: "999",
+            new_xml: '<mxCell id="999" value="Test"/>',
+        },
    ])
    assert(errors.length === 1, "Should have one error")
-    assert(errors[0].message.includes("not found"), "Error should mention not found")
+    assert(
+        errors[0].message.includes("not found"),
+        "Error should mention not found",
+    )
 })

 test("Update operation fails on ID mismatch", () => {
    const { errors } = applyDiagramOperations(sampleXml, [
-        { type: "update", cell_id: "2", new_xml: '<mxCell id="WRONG" value="Test"/>' },
+        {
+            type: "update",
+            cell_id: "2",
+            new_xml: '<mxCell id="WRONG" value="Test"/>',
+        },
    ])
    assert(errors.length === 1, "Should have one error")
-    assert(errors[0].message.includes("ID mismatch"), "Error should mention ID mismatch")
+    assert(
+        errors[0].message.includes("ID mismatch"),
+        "Error should mention ID mismatch",
+    )
 })

 test("Add operation creates new cell", () => {
@@ -178,41 +256,72 @@ test("Add operation creates new cell", () => {
        {
            type: "add",
            cell_id: "new1",
-            new_xml: '<mxCell id="new1" value="New Box" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="500" y="100" width="120" height="60" as="geometry"/></mxCell>',
+            new_xml:
+                '<mxCell id="new1" value="New Box" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="500" y="100" width="120" height="60" as="geometry"/></mxCell>',
        },
    ])
-    assert(errors.length === 0, `Expected no errors, got: ${JSON.stringify(errors)}`)
+    assert(
+        errors.length === 0,
+        `Expected no errors, got: ${JSON.stringify(errors)}`,
+    )
    assert(result.includes('id="new1"'), "New cell should be in result")
-    assert(result.includes('value="New Box"'), "New cell value should be in result")
+    assert(
+        result.includes('value="New Box"'),
+        "New cell value should be in result",
+    )
 })

 test("Add operation fails for duplicate ID", () => {
    const { errors } = applyDiagramOperations(sampleXml, [
-        { type: "add", cell_id: "2", new_xml: '<mxCell id="2" value="Duplicate"/>' },
+        {
+            type: "add",
+            cell_id: "2",
+            new_xml: '<mxCell id="2" value="Duplicate"/>',
+        },
    ])
    assert(errors.length === 1, "Should have one error")
-    assert(errors[0].message.includes("already exists"), "Error should mention already exists")
+    assert(
+        errors[0].message.includes("already exists"),
+        "Error should mention already exists",
+    )
 })

 test("Add operation fails on ID mismatch", () => {
    const { errors } = applyDiagramOperations(sampleXml, [
-        { type: "add", cell_id: "new1", new_xml: '<mxCell id="WRONG" value="Test"/>' },
+        {
+            type: "add",
+            cell_id: "new1",
+            new_xml: '<mxCell id="WRONG" value="Test"/>',
+        },
    ])
    assert(errors.length === 1, "Should have one error")
-    assert(errors[0].message.includes("ID mismatch"), "Error should mention ID mismatch")
+    assert(
+        errors[0].message.includes("ID mismatch"),
+        "Error should mention ID mismatch",
+    )
 })

 test("Delete operation removes cell", () => {
-    const { result, errors } = applyDiagramOperations(sampleXml, [{ type: "delete", cell_id: "3" }])
-    assert(errors.length === 0, `Expected no errors, got: ${JSON.stringify(errors)}`)
+    const { result, errors } = applyDiagramOperations(sampleXml, [
+        { type: "delete", cell_id: "3" },
+    ])
+    assert(
+        errors.length === 0,
+        `Expected no errors, got: ${JSON.stringify(errors)}`,
+    )
    assert(!result.includes('id="3"'), "Deleted cell should not be in result")
    assert(result.includes('id="2"'), "Other cells should remain")
 })

 test("Delete operation fails for non-existent cell", () => {
-    const { errors } = applyDiagramOperations(sampleXml, [{ type: "delete", cell_id: "999" }])
+    const { errors } = applyDiagramOperations(sampleXml, [
+        { type: "delete", cell_id: "999" },
+    ])
    assert(errors.length === 1, "Should have one error")
-    assert(errors[0].message.includes("not found"), "Error should mention not found")
+    assert(
+        errors[0].message.includes("not found"),
+        "Error should mention not found",
+    )
 })

 test("Multiple operations in sequence", () => {
@@ -220,30 +329,45 @@ test("Multiple operations in sequence", () => {
        {
            type: "update",
            cell_id: "2",
-            new_xml: '<mxCell id="2" value="Updated" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="100" y="100" width="120" height="60" as="geometry"/></mxCell>',
+            new_xml:
+                '<mxCell id="2" value="Updated" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="100" y="100" width="120" height="60" as="geometry"/></mxCell>',
        },
        {
            type: "add",
            cell_id: "new1",
-            new_xml: '<mxCell id="new1" value="Added" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="500" y="100" width="120" height="60" as="geometry"/></mxCell>',
+            new_xml:
+                '<mxCell id="new1" value="Added" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="500" y="100" width="120" height="60" as="geometry"/></mxCell>',
        },
        { type: "delete", cell_id: "3" },
    ])
-    assert(errors.length === 0, `Expected no errors, got: ${JSON.stringify(errors)}`)
-    assert(result.includes('value="Updated"'), "Updated value should be present")
+    assert(
+        errors.length === 0,
+        `Expected no errors, got: ${JSON.stringify(errors)}`,
+    )
+    assert(
+        result.includes('value="Updated"'),
+        "Updated value should be present",
+    )
    assert(result.includes('id="new1"'), "Added cell should be present")
    assert(!result.includes('id="3"'), "Deleted cell should not be present")
 })

 test("Invalid XML returns parse error", () => {
-    const { errors } = applyDiagramOperations("<not valid xml", [{ type: "delete", cell_id: "1" }])
+    const { errors } = applyDiagramOperations("<not valid xml", [
+        { type: "delete", cell_id: "1" },
+    ])
    assert(errors.length === 1, "Should have one error")
 })

 test("Missing root element returns error", () => {
-    const { errors } = applyDiagramOperations("<mxfile></mxfile>", [{ type: "delete", cell_id: "1" }])
+    const { errors } = applyDiagramOperations("<mxfile></mxfile>", [
+        { type: "delete", cell_id: "1" },
+    ])
    assert(errors.length === 1, "Should have one error")
-    assert(errors[0].message.includes("root"), "Error should mention root element")
+    assert(
+        errors[0].message.includes("root"),
+        "Error should mention root element",
+    )
 })

 // Summary
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -29,5 +29,5 @@
        ".next/types/**/*.ts",
        ".next/dev/types/**/*.ts"
    ],
-    "exclude": ["node_modules"]
+    "exclude": ["node_modules", "packages"]
 }
Author	SHA1	Message	Date
github-actions[bot]	68f74f74e0	style: auto-format with Biome	2025-12-18 14:03:12 +00:00
dayuan.jiang	4ad505f432	chore: add auto-format workflow and fix formatting - Add GitHub Action to auto-format PRs with Biome - Fix formatting in app/manifest.ts and scripts/test-diagram-operations.mjs	2025-12-18 23:02:19 +09:00
RainX	a91bd9d1e8	feat: add support for custom AI Gateway base URL (#315 ) * feat: add support for custom AI Gateway base URL - Add createGateway support with configurable baseURL - Allow AI_GATEWAY_BASE_URL environment variable for: * Local development with custom Gateway * Self-hosted AI Gateway deployments * Enterprise proxy configurations - Maintain backward compatibility: defaults to Vercel Gateway when not set - Update documentation with usage examples and configuration notes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * fix: remove errant character in error message --------- Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com> Co-authored-by: dayuan.jiang <jdy.toh@gmail.com>	2025-12-18 22:00:21 +09:00
E66Crisp	81eb71e704	fix(components): Send and sidebar buttons become inaccessible when chat-panel is resized (#309 )	2025-12-18 21:16:32 +09:00
E66Crisp	58b6b19526	fix: Prevent DrawIO remount and data loss when resizing window across 768px breakpoint (#306 ) * fix: Prevent DrawIO remount and data loss when resizing window across 768px breakpoint * fix: prevent DrawIO remount and data loss when resizing window - Move key from ResizablePanelGroup to chat-panel only - Save diagram to localStorage before breakpoint change - Restore defaultSize on drawio-panel to prevent layout flash - Keep save button functionality from main * fix: reset draw.io ready state on breakpoint change to restore diagram * fix: skip initial render save and remove console logs - Add isInitialRenderRef to skip unnecessary save/reset on first render - Remove console.log statements for production cleanliness - Add eslint-disable comment explaining loadDiagram dependency --------- Co-authored-by: dayuan.jiang <jdy.toh@gmail.com>	2025-12-18 21:14:10 +09:00
Dayuan Jiang	f65ef548b2	fix: make draw.io built-in save button work with mouse tracking (#296 ) - Add showSaveDialog state to DiagramContext for shared state - Add mouse tracking to only respond to save events when mouse is over draw.io panel - Prevents save dialog from opening when clicking Send in chat panel - Add DialogDescription to SaveDialog for accessibility	2025-12-17 20:24:53 +09:00
Dayuan Jiang	741a00db89	Revert "fix: make draw.io built-in save button work (#293 )" (#294 ) This reverts commit `bcc6684ecb`.	2025-12-17 19:46:52 +09:00
Dayuan Jiang	bcc6684ecb	fix: make draw.io built-in save button work (#293 ) - Lift showSaveDialog state to DiagramContext for sharing between components - Add onSave handler to DrawIoEmbed that opens the save dialog - Add guard (isSavingRef) with 1s delay to prevent repeated save events from draw.io - Add deprecation notice to custom download button tooltip Closes #93, Closes #290	2025-12-17 19:14:15 +09:00
Dayuan Jiang	a9415d24e7	Revise preview feature stability note Updated the preview feature note for stability.	2025-12-17 14:52:39 +09:00
Dayuan Jiang	439bdd4577	feat: add MCP server package for npx distribution (#284 ) * feat: add MCP server package for npx distribution - Self-contained MCP server with embedded HTTP server - Real-time browser preview via draw.io iframe - Tools: start_session, display_diagram, edit_diagram, get_diagram, export_diagram - Port retry limit (6002-6020) and session TTL cleanup (1 hour) - Published as @next-ai-drawio/mcp-server on npm * chore: bump version to 0.1.2 * docs: add MCP server section to README (preview feature) * docs: add multi-client installation instructions for MCP server * fix: exclude packages from Next.js build * docs: use @latest instead of -y flag for npx (match Playwright MCP style) * chore: bump version to 0.4.3 and add release notes * chore: remove release notes * feat: add MCP server notice to example panel	2025-12-17 14:50:07 +09:00
Ted Cao	98b890bb06	feat: add Vercel AI Gateway support (#274 ) * feat: add Vercel AI Gateway support - Updated environment configuration to include AI_GATEWAY_API_KEY for unified access to multiple AI providers. - Added gateway provider to the list of supported AI providers in the codebase. - Enhanced documentation to explain the usage of Vercel AI Gateway and its model format. This change simplifies authentication and allows users to switch between providers seamlessly. * Update package @ai-sdk/gateway to latest version 2.0.21	2025-12-17 12:43:33 +09:00
Bridget Amana	f039e4a3c8	Feat/add manifest.ts (#270 ) * Add manifest file for Next AI Draw.io application This file defines the manifest for the Next AI Draw.io application, including metadata like name, description, and icons. * Add different sizes of favicon * Update app/manifest.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update app/manifest.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Dayuan Jiang <34411969+DayuanJiang@users.noreply.github.com>	2025-12-16 13:38:53 +09:00
Biki Kalita	7857858074	feat: add warning dialog for theme and UI style changes (#248 ) ## Summary - Auto-saves diagram to localStorage before theme or UI style changes to prevent data loss - Extracts inline handler to `handleDrawioUiChange` for cleaner code - Renames `toggleDarkMode` to `handleDarkModeChange` for consistency ## Problem Changing themes (dark/light) or draw.io UI styles (min/sketch) causes the DrawIoEmbed component to remount, losing all unsaved edits without warning. ## Solution Added `saveDiagramToStorage()` function that exports the current diagram and saves it to localStorage before any theme/UI change. The existing restore mechanism then loads it back after remount. ## Related Issues Fixes #243	2025-12-15 22:40:21 +09:00
dayuan.jiang	f0919117eb	fix: lowercase repo name for docker pull in ECR push step	2025-12-15 21:47:32 +09:00