fix: add 10MB body size limit to MCP HTTP endpoints

All three POST handlers (/api/state, /api/restore, /api/history-svg)
now use a shared readBody() helper that enforces a 10MB limit and
returns 413 if exceeded, preventing memory exhaustion from oversized
requests.

Bumps @next-ai-drawio/mcp-server to 0.1.19.

.github/workflows/electron-release.yml

@@ -37,7 +37,7 @@ jobs:
       - name: Download draw.io static files for offline use
         run: |
           rm -rf public/drawio
-          git clone --depth 1 https://github.com/jgraph/drawio.git /tmp/drawio
+          git clone --depth 1 --branch v29.3.5 https://github.com/jgraph/drawio.git /tmp/drawio
           mkdir -p public/drawio
           cp -r /tmp/drawio/src/main/webapp/* public/drawio/
           rm -rf public/drawio/WEB-INF
@@ -70,7 +70,7 @@ jobs:
         shell: bash
         run: |
           rm -rf public/drawio
-          git clone --depth 1 https://github.com/jgraph/drawio.git /tmp/drawio
+          git clone --depth 1 --branch v29.3.5 https://github.com/jgraph/drawio.git /tmp/drawio
           mkdir -p public/drawio
           cp -r /tmp/drawio/src/main/webapp/* public/drawio/
           rm -rf public/drawio/WEB-INF

README.md

@@ -31,7 +31,7 @@ https://github.com/user-attachments/assets/9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1
   - [Table of Contents](#table-of-contents)
   - [Examples](#examples)
   - [Features](#features)
-  - [MCP Server](#mcp-server)
+  - [MCP Server (Preview)](#mcp-server-preview)
     - [Claude Code CLI](#claude-code-cli)
   - [Getting Started](#getting-started)
     - [Try it Online](#try-it-online)
@@ -63,24 +63,24 @@ Here are some example prompts and their generated diagrams:
   </tr>
   <tr>
     <td width="50%" valign="top">
-      <strong>RAG Technique Diagram</strong><br />
+      <strong>GCP architecture diagram</strong><br />
-      <p><strong>Prompt:</strong> Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion</p>
+      <p><strong>Prompt:</strong> Generate a GCP architecture diagram with **GCP icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
-      <img src="./public/rag_prod.svg" alt="RAG Architecture Diagram" width="480" />
+      <img src="./public/gcp_demo.svg" alt="GCP Architecture Diagram" width="480" />
     </td>
     <td width="50%" valign="top">
-      <strong>Authentication using React and AWS</strong><br />
+      <strong>AWS architecture diagram</strong><br />
-      <p><strong>Prompt:</strong> Generate authentication process using React with **AWS**. Use Serverless architecture.</p>
+      <p><strong>Prompt:</strong> Generate a AWS architecture diagram with **AWS icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
-      <img src="./public/auth.svg" alt="Authentication Architecture Diagram" width="480" />
+      <img src="./public/aws_demo.svg" alt="AWS Architecture Diagram" width="480" />
     </td>
   </tr>
   <tr>
     <td width="50%" valign="top">
-      <strong>Open Innovation</strong><br />
+      <strong>Azure architecture diagram</strong><br />
-      <p><strong>Prompt:</strong> Create visualization of Henry Chesbrough's Open Innovation model.</p>
+      <p><strong>Prompt:</strong> Generate a Azure architecture diagram with **Azure icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
-      <img src="./public/inno.svg" alt="Open Innovation Diagram" width="480" />
+      <img src="./public/azure_demo.svg" alt="Azure Architecture Diagram" width="480" />
     </td>
     <td width="50%" valign="top">
-      <strong>Cat sketch</strong><br />
+      <strong>Cat sketch prompt</strong><br />
       <p><strong>Prompt:</strong> Draw a cute cat for me.</p>
       <img src="./public/cat_demo.svg" alt="Cat Drawing" width="240" />
     </td>
@@ -99,7 +99,9 @@ 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
+## MCP Server (Preview)
+
+> **Preview Feature**: This feature is experimental and may not be stable.
 
 Use Next AI Draw.io with AI agents like Claude Desktop, Cursor, and VS Code via MCP (Model Context Protocol).
 

app/[lang]/about/cn/page.tsx

@@ -175,106 +175,92 @@ export default function AboutCN() {
                     </p>
 
                     <div className="space-y-8">
-                        {/* ResNet50 Architecture */}
+                        {/* Animated Transformer */}
                         <div className="text-center">
                             <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                ResNet50模型架构动画
+                                动画Transformer连接器
                             </h3>
                             <p className="text-gray-600 mb-4">
-                                <strong>Prompt:</strong> Give me an{" "}
+                                <strong>提示词：</strong> 给我一个带有
-                                <strong>animated</strong> architecture diagram
+                                <strong>动画连接器</strong>的Transformer架构图。
-                                of the ResNet50 model.
                             </p>
-                            <div className="bg-neutral-950 rounded-lg p-4 inline-block">
+                            <Image
-                                <Image
+                                src="/animated_connectors.svg"
-                                    src="/resnet50.svg"
+                                alt="带动画连接器的Transformer架构"
-                                    alt="ResNet50模型架构图"
+                                width={480}
-                                    width={480}
+                                height={360}
-                                    height={360}
+                                className="mx-auto"
-                                    className="mx-auto"
+                            />
-                                />
-                            </div>
                         </div>
 
-                        {/* Diagram Grid */}
+                        {/* Cloud Architecture Grid */}
                         <div className="grid md:grid-cols-2 gap-6">
                             <div className="text-center">
                                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    RAG技术图
+                                    GCP架构图
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate a RAG
+                                    <strong>提示词：</strong> 使用
-                                    architecture diagram for{" "}
+                                    <strong>GCP图标</strong>
-                                    <strong>chat application</strong>. Use
+                                    生成一个GCP架构图。用户连接到托管在实例上的前端。
-                                    connected diagram for data ingestion
                                 </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
+                                <Image
-                                    <Image
+                                    src="/gcp_demo.svg"
-                                        src="/rag_prod.svg"
+                                    alt="GCP架构图"
-                                        alt="RAG架构图"
+                                    width={400}
-                                        width={480}
+                                    height={300}
-                                        height={360}
+                                    className="mx-auto"
-                                        className="max-w-full max-h-full object-contain"
+                                />
-                                    />
-                                </div>
                             </div>
                             <div className="text-center">
                                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    React和AWS认证流程
+                                    AWS架构图
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate
+                                    <strong>提示词：</strong> 使用
-                                    authentication process using React with{" "}
+                                    <strong>AWS图标</strong>
-                                    <strong>AWS</strong>. Use Serverless
+                                    生成一个AWS架构图。用户连接到托管在实例上的前端。
-                                    architecture.
                                 </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
+                                <Image
-                                    <Image
+                                    src="/aws_demo.svg"
-                                        src="/auth.svg"
+                                    alt="AWS架构图"
-                                        alt="认证架构图"
+                                    width={400}
-                                        width={480}
+                                    height={300}
-                                        height={360}
+                                    className="mx-auto"
-                                        className="max-w-full max-h-full object-contain"
+                                />
-                                    />
-                                </div>
                             </div>
                             <div className="text-center">
                                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    敏捷Scrum流程
+                                    Azure架构图
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate agile
+                                    <strong>提示词：</strong> 使用
-                                    scrum workflow diagram for software
+                                    <strong>Azure图标</strong>
-                                    development team.
+                                    生成一个Azure架构图。用户连接到托管在实例上的前端。
                                 </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
+                                <Image
-                                    <Image
+                                    src="/azure_demo.svg"
-                                        src="/agile_scrum.svg"
+                                    alt="Azure架构图"
-                                        alt="敏捷Scrum流程图"
+                                    width={400}
-                                        width={480}
+                                    height={300}
-                                        height={360}
+                                    className="mx-auto"
-                                        className="max-w-full max-h-full object-contain"
+                                />
-                                    />
-                                </div>
                             </div>
                             <div className="text-center">
                                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    开放式创新
+                                    猫咪素描
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Create
+                                    <strong>提示词：</strong>{" "}
-                                    visualization of Henry Chesbrough&apos;s
+                                    给我画一只可爱的猫。
-                                    Open Innovation model.
                                 </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
+                                <Image
-                                    <Image
+                                    src="/cat_demo.svg"
-                                        src="/inno.svg"
+                                    alt="猫咪绘图"
-                                        alt="开放式创新图"
+                                    width={240}
-                                        width={480}
+                                    height={240}
-                                        height={360}
+                                    className="mx-auto"
-                                        className="max-w-full max-h-full object-contain"
+                                />
-                                    />
-                                </div>
                             </div>
                         </div>
                     </div>

app/[lang]/about/ja/page.tsx

@@ -168,106 +168,93 @@ export default function AboutJA() {
                     </p>
 
                     <div className="space-y-8">
-                        {/* ResNet50 Architecture */}
+                        {/* Animated Transformer */}
                         <div className="text-center">
                             <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                ResNet50モデルアーキテクチャアニメーション
+                                アニメーションTransformerコネクタ
                             </h3>
                             <p className="text-gray-600 mb-4">
-                                <strong>Prompt:</strong> Give me an{" "}
+                                <strong>プロンプト：</strong>{" "}
-                                <strong>animated</strong> architecture diagram
+                                <strong>アニメーションコネクタ</strong>
-                                of the ResNet50 model.
+                                付きのTransformerアーキテクチャ図を作成してください。
                             </p>
-                            <div className="bg-neutral-950 rounded-lg p-4 inline-block">
+                            <Image
-                                <Image
+                                src="/animated_connectors.svg"
-                                    src="/resnet50.svg"
+                                alt="アニメーションコネクタ付きTransformerアーキテクチャ"
-                                    alt="ResNet50モデルアーキテクチャ図"
+                                width={480}
-                                    width={480}
+                                height={360}
-                                    height={360}
+                                className="mx-auto"
-                                    className="mx-auto"
+                            />
-                                />
-                            </div>
                         </div>
 
-                        {/* Diagram Grid */}
+                        {/* Cloud Architecture Grid */}
                         <div className="grid md:grid-cols-2 gap-6">
                             <div className="text-center">
                                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    RAG技術ダイアグラム
+                                    GCPアーキテクチャ図
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate a RAG
+                                    <strong>プロンプト：</strong>{" "}
-                                    architecture diagram for{" "}
+                                    <strong>GCPアイコン</strong>
-                                    <strong>chat application</strong>. Use
+                                    を使用してGCPアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
-                                    connected diagram for data ingestion
                                 </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
+                                <Image
-                                    <Image
+                                    src="/gcp_demo.svg"
-                                        src="/rag_prod.svg"
+                                    alt="GCPアーキテクチャ図"
-                                        alt="RAGアーキテクチャ図"
+                                    width={400}
-                                        width={480}
+                                    height={300}
-                                        height={360}
+                                    className="mx-auto"
-                                        className="max-w-full max-h-full object-contain"
+                                />
-                                    />
-                                </div>
                             </div>
                             <div className="text-center">
                                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    ReactとAWSによる認証
+                                    AWSアーキテクチャ図
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate
+                                    <strong>プロンプト：</strong>{" "}
-                                    authentication process using React with{" "}
+                                    <strong>AWSアイコン</strong>
-                                    <strong>AWS</strong>. Use Serverless
+                                    を使用してAWSアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
-                                    architecture.
                                 </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
+                                <Image
-                                    <Image
+                                    src="/aws_demo.svg"
-                                        src="/auth.svg"
+                                    alt="AWSアーキテクチャ図"
-                                        alt="認証アーキテクチャ図"
+                                    width={400}
-                                        width={480}
+                                    height={300}
-                                        height={360}
+                                    className="mx-auto"
-                                        className="max-w-full max-h-full object-contain"
+                                />
-                                    />
-                                </div>
                             </div>
                             <div className="text-center">
                                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    アジャイルスクラムプロセス
+                                    Azureアーキテクチャ図
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate agile
+                                    <strong>プロンプト：</strong>{" "}
-                                    scrum workflow diagram for software
+                                    <strong>Azureアイコン</strong>
-                                    development team.
+                                    を使用してAzureアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
                                 </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
+                                <Image
-                                    <Image
+                                    src="/azure_demo.svg"
-                                        src="/agile_scrum.svg"
+                                    alt="Azureアーキテクチャ図"
-                                        alt="アジャイルスクラム図"
+                                    width={400}
-                                        width={480}
+                                    height={300}
-                                        height={360}
+                                    className="mx-auto"
-                                        className="max-w-full max-h-full object-contain"
+                                />
-                                    />
-                                </div>
                             </div>
                             <div className="text-center">
                                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    オープンイノベーション
+                                    猫のスケッチ
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Create
+                                    <strong>プロンプト：</strong>{" "}
-                                    visualization of Henry Chesbrough&apos;s
+                                    かわいい猫を描いてください。
-                                    Open Innovation model.
                                 </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
+                                <Image
-                                    <Image
+                                    src="/cat_demo.svg"
-                                        src="/inno.svg"
+                                    alt="猫の絵"
-                                        alt="オープンイノベーション図"
+                                    width={240}
-                                        width={480}
+                                    height={240}
-                                        height={360}
+                                    className="mx-auto"
-                                        className="max-w-full max-h-full object-contain"
+                                />
-                                    />
-                                </div>
                             </div>
                         </div>
                     </div>

app/[lang]/about/page.tsx

@@ -182,106 +182,96 @@ export default function About() {
                     </p>
 
                     <div className="space-y-8">
-                        {/* ResNet50 Architecture */}
+                        {/* Animated Transformer */}
                         <div className="text-center">
                             <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                Animated ResNet50 Model Architecture
+                                Animated Transformer Connectors
                             </h3>
                             <p className="text-gray-600 mb-4">
                                 <strong>Prompt:</strong> Give me an{" "}
-                                <strong>animated</strong> architecture diagram
+                                <strong>animated connector</strong> diagram of
-                                of the ResNet50 model.
+                                transformer&apos;s architecture.
                             </p>
-                            <div className="bg-neutral-950 rounded-lg p-4 inline-block">
+                            <Image
-                                <Image
+                                src="/animated_connectors.svg"
-                                    src="/resnet50.svg"
+                                alt="Transformer Architecture with Animated Connectors"
-                                    alt="Architecture diagram for ResNet50 model"
+                                width={480}
-                                    width={480}
+                                height={360}
-                                    height={360}
+                                className="mx-auto"
-                                    className="mx-auto"
+                            />
-                                />
-                            </div>
                         </div>
 
-                        {/* Diagram Grid */}
+                        {/* Cloud Architecture Grid */}
                         <div className="grid md:grid-cols-2 gap-6">
                             <div className="text-center">
                                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    RAG Technique Diagram
+                                    GCP Architecture Diagram
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate a RAG
+                                    <strong>Prompt:</strong> Generate a GCP
-                                    architecture diagram for{" "}
+                                    architecture diagram with{" "}
-                                    <strong>chat application</strong>. Use
+                                    <strong>GCP icons</strong>. Users connect to
-                                    connected diagram for data ingestion
+                                    a frontend hosted on an instance.
                                 </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
+                                <Image
-                                    <Image
+                                    src="/gcp_demo.svg"
-                                        src="/rag_prod.svg"
+                                    alt="GCP Architecture Diagram"
-                                        alt="RAG Architecture Diagram"
+                                    width={400}
-                                        width={480}
+                                    height={300}
-                                        height={360}
+                                    className="mx-auto"
-                                        className="max-w-full max-h-full object-contain"
+                                />
-                                    />
-                                </div>
                             </div>
                             <div className="text-center">
                                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    Authentication using React and AWS
+                                    AWS Architecture Diagram
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate
+                                    <strong>Prompt:</strong> Generate an AWS
-                                    authentication process using React with{" "}
+                                    architecture diagram with{" "}
-                                    <strong>AWS</strong>. Use Serverless
+                                    <strong>AWS icons</strong>. Users connect to
-                                    architecture.
+                                    a frontend hosted on an instance.
                                 </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
+                                <Image
-                                    <Image
+                                    src="/aws_demo.svg"
-                                        src="/auth.svg"
+                                    alt="AWS Architecture Diagram"
-                                        alt="Authentication Architecture Diagram"
+                                    width={400}
-                                        width={480}
+                                    height={300}
-                                        height={360}
+                                    className="mx-auto"
-                                        className="max-w-full max-h-full object-contain"
+                                />
-                                    />
-                                </div>
                             </div>
                             <div className="text-center">
                                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    Agile Scrum Process
+                                    Azure Architecture Diagram
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate agile
+                                    <strong>Prompt:</strong> Generate an Azure
-                                    scrum workflow diagram for software
+                                    architecture diagram with{" "}
-                                    development team.
+                                    <strong>Azure icons</strong>. Users connect
+                                    to a frontend hosted on an instance.
                                 </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
+                                <Image
-                                    <Image
+                                    src="/azure_demo.svg"
-                                        src="/agile_scrum.svg"
+                                    alt="Azure Architecture Diagram"
-                                        alt="Agile Scrum Diagram"
+                                    width={400}
-                                        width={480}
+                                    height={300}
-                                        height={360}
+                                    className="mx-auto"
-                                        className="max-w-full max-h-full object-contain"
+                                />
-                                    />
-                                </div>
                             </div>
                             <div className="text-center">
                                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    Open Innovation
+                                    Cat Sketch
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Create
+                                    <strong>Prompt:</strong> Draw a cute cat for
-                                    visualization of Henry Chesbrough&apos;s
+                                    me.
-                                    Open Innovation model.
                                 </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
+                                <Image
-                                    <Image
+                                    src="/cat_demo.svg"
-                                        src="/inno.svg"
+                                    alt="Cat Drawing"
-                                        alt="Open Innovation Diagram"
+                                    width={240}
-                                        width={480}
+                                    height={240}
-                                        height={360}
+                                    className="mx-auto"
-                                        className="max-w-full max-h-full object-contain"
+                                />
-                                    />
-                                </div>
                             </div>
                         </div>
                     </div>

app/[lang]/page.tsx

@@ -100,8 +100,12 @@ export default function Home() {
     const handleDrawioAutoSave = useCallback(
         (data: { xml?: string }) => {
             handleDiagramAutoSave(data)
+            // Only suppress modified state when persistence is available
+            if (canPersist) {
+                drawioRef.current?.status({ message: "", modified: false })
+            }
         },
-        [handleDiagramAutoSave],
+        [canPersist, drawioRef, handleDiagramAutoSave],
     )
 
     const handleDarkModeChange = () => {

components/chat-example-panel.tsx

@@ -141,6 +141,9 @@ export default function ExamplePanel({
                                     <span className="text-sm font-medium text-foreground group-hover:text-purple-500 transition-colors">
                                         {dict.examples.mcpServer}
                                     </span>
+                                    <span className="px-1.5 py-0.5 text-[10px] font-semibold bg-purple-500 text-white rounded">
+                                        {dict.examples.preview}
+                                    </span>
                                 </div>
                                 <p className="text-xs text-muted-foreground">
                                     {dict.examples.mcpDescription}

components/chat-message-display.tsx

@@ -417,7 +417,6 @@ export function ChatMessageDisplay({
 
     // Track previous message count to detect bulk loads vs streaming
     const prevMessageCountRef = useRef(0)
-    const scrollThrottleRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
     useEffect(() => {
         if (messagesEndRef.current && messages.length > 0) {
@@ -431,17 +430,8 @@ export function ChatMessageDisplay({
                 return
             }
 
-            // Throttle scroll during streaming to avoid layout thrashing
+            // Single message added - smooth scroll
-            // Leading + trailing: scroll immediately, then once more after cooldown
+            messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
-            if (!scrollThrottleRef.current) {
-                messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
-                scrollThrottleRef.current = setTimeout(() => {
-                    scrollThrottleRef.current = null
-                    messagesEndRef.current?.scrollIntoView({
-                        behavior: "smooth",
-                    })
-                }, 150)
-            }
         }
     }, [messages])
 

components/chat/ChatLobby.tsx

@@ -107,8 +107,8 @@ export function ChatLobby({
     currentInput = "",
     dict,
 }: ChatLobbyProps) {
-    const [templatesExpanded, setTemplatesExpanded] = useState(true)
+    const [templatesExpanded, setTemplatesExpanded] = useState(false)
-    const [examplesExpanded, setExamplesExpanded] = useState(true)
+    const [examplesExpanded, setExamplesExpanded] = useState(false)
     const [panelVisibility, setPanelVisibility] = useState(getPanelVisibility)
     const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
     const [sessionToDelete, setSessionToDelete] = useState<string | null>(null)
@@ -125,25 +125,19 @@ export function ChatLobby({
     const hasHistory = sessions.length > 0
 
     if (!hasHistory) {
-        if (!panelVisibility.myTemplates && !panelVisibility.quickExamples) {
+        if (panelVisibility.myTemplates) {
-            return null
+            return (
+                <TemplatePanel
+                    setInput={setInput}
+                    onSendTemplate={onSendTemplate}
+                    currentInput={currentInput}
+                />
+            )
         }
-        return (
+        if (panelVisibility.quickExamples) {
-            <div className="animate-fade-in">
+            return <ExamplePanel setInput={setInput} setFiles={setFiles} />
-                {panelVisibility.myTemplates && (
+        }
-                    <TemplatePanel
+        return null
-                        setInput={setInput}
-                        onSendTemplate={onSendTemplate}
-                        currentInput={currentInput}
-                    />
-                )}
-                {panelVisibility.quickExamples && (
-                    <div className={panelVisibility.myTemplates ? "mt-6" : ""}>
-                        <ExamplePanel setInput={setInput} setFiles={setFiles} />
-                    </div>
-                )}
-            </div>
-        )
     }
 
     // Show history + collapsible examples when there are sessions

components/chat/ToolCallCard.tsx

@@ -195,22 +195,7 @@ export function ToolCallCard({
             {input && isExpanded && (
                 <div className="px-4 py-3 border-t border-border/40 bg-muted/20">
                     {typeof input === "object" && input.xml ? (
-                        state === "input-streaming" ||
+                        <CodeBlock code={input.xml} language="xml" />
-                        state === "input-available" ? (
-                            <pre
-                                className="text-[11px] leading-relaxed overflow-x-auto overflow-y-auto max-h-48 scrollbar-thin break-all whitespace-pre-wrap"
-                                style={{
-                                    fontFamily:
-                                        "var(--font-mono), ui-monospace, monospace",
-                                    margin: 0,
-                                    padding: 0,
-                                }}
-                            >
-                                {input.xml}
-                            </pre>
-                        ) : (
-                            <CodeBlock code={input.xml} language="xml" />
-                        )
                     ) : typeof input === "object" &&
                       input.operations &&
                       Array.isArray(input.operations) ? (

docs/cn/README_CN.md

@@ -30,7 +30,7 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
   - [目录](#目录)
   - [示例](#示例)
   - [功能特性](#功能特性)
-  - [MCP服务器](#mcp服务器)
+  - [MCP服务器（预览）](#mcp服务器预览)
     - [Claude Code CLI](#claude-code-cli)
   - [快速开始](#快速开始)
     - [在线试用](#在线试用)
@@ -56,31 +56,31 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
   <tr>
     <td colspan="2" valign="top" align="center">
       <strong>动画Transformer连接器</strong><br />
-      <p><strong>Prompt:</strong> Give me a **animated connector** diagram of transformer's architecture.</p>
+      <p><strong>提示词：</strong> 给我一个带有**动画连接器**的Transformer架构图。</p>
       <img src="../../public/animated_connectors.svg" alt="带动画连接器的Transformer架构" width="480" />
     </td>
   </tr>
   <tr>
     <td width="50%" valign="top">
-      <strong>RAG技术图</strong><br />
+      <strong>GCP架构图</strong><br />
-      <p><strong>Prompt:</strong> Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion</p>
+      <p><strong>提示词：</strong> 使用**GCP图标**生成一个GCP架构图。在这个图中，用户连接到托管在实例上的前端。</p>
-      <img src="../../public/rag_prod.svg" alt="RAG架构图" width="480" />
+      <img src="../../public/gcp_demo.svg" alt="GCP架构图" width="480" />
     </td>
     <td width="50%" valign="top">
-      <strong>React和AWS认证流程</strong><br />
+      <strong>AWS架构图</strong><br />
-      <p><strong>Prompt:</strong> Generate authentication process using React with **AWS**. Use Serverless architecture.</p>
+      <p><strong>提示词：</strong> 使用**AWS图标**生成一个AWS架构图。在这个图中，用户连接到托管在实例上的前端。</p>
-      <img src="../../public/auth.svg" alt="认证架构图" width="480" />
+      <img src="../../public/aws_demo.svg" alt="AWS架构图" width="480" />
     </td>
   </tr>
   <tr>
     <td width="50%" valign="top">
-      <strong>开放式创新</strong><br />
+      <strong>Azure架构图</strong><br />
-      <p><strong>Prompt:</strong> Create visualization of Henry Chesbrough's Open Innovation model.</p>
+      <p><strong>提示词：</strong> 使用**Azure图标**生成一个Azure架构图。在这个图中，用户连接到托管在实例上的前端。</p>
-      <img src="../../public/inno.svg" alt="开放式创新图" width="480" />
+      <img src="../../public/azure_demo.svg" alt="Azure架构图" width="480" />
     </td>
     <td width="50%" valign="top">
       <strong>猫咪素描</strong><br />
-      <p><strong>Prompt:</strong> Draw a cute cat for me.</p>
+      <p><strong>提示词：</strong> 给我画一只可爱的猫。</p>
       <img src="../../public/cat_demo.svg" alt="猫咪绘图" width="240" />
     </td>
   </tr>
@@ -98,7 +98,9 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
 -   **云架构图支持**：专门支持生成云架构图（AWS、GCP、Azure）
 -   **动画连接器**：在图表元素之间创建动态动画连接器，实现更好的可视化效果
 
-## MCP服务器
+## MCP服务器（预览）
+
+> **预览功能**：此功能为实验性功能，可能不稳定。
 
 通过MCP（模型上下文协议）在Claude Desktop、Cursor和VS Code等AI代理中使用Next AI Draw.io。
 

docs/ja/README_JA.md

@@ -28,7 +28,7 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
   - [目次](#目次)
   - [例](#例)
   - [機能](#機能)
-  - [MCPサーバー](#mcpサーバー)
+  - [MCPサーバー（プレビュー）](#mcpサーバープレビュー)
     - [Claude Code CLI](#claude-code-cli)
   - [はじめに](#はじめに)
     - [オンラインで試す](#オンラインで試す)
@@ -54,31 +54,31 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
   <tr>
     <td colspan="2" valign="top" align="center">
       <strong>アニメーションTransformerコネクタ</strong><br />
-      <p><strong>Prompt:</strong> Give me a **animated connector** diagram of transformer's architecture.</p>
+      <p><strong>プロンプト：</strong> **アニメーションコネクタ**付きのTransformerアーキテクチャ図を作成してください。</p>
       <img src="../../public/animated_connectors.svg" alt="アニメーションコネクタ付きTransformerアーキテクチャ" width="480" />
     </td>
   </tr>
   <tr>
     <td width="50%" valign="top">
-      <strong>RAG技術ダイアグラム</strong><br />
+      <strong>GCPアーキテクチャ図</strong><br />
-      <p><strong>Prompt:</strong> Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion</p>
+      <p><strong>プロンプト：</strong> **GCPアイコン**を使用してGCPアーキテクチャ図を生成してください。この図では、ユーザーがインスタンス上でホストされているフロントエンドに接続します。</p>
-      <img src="../../public/rag_prod.svg" alt="RAGアーキテクチャ図" width="480" />
+      <img src="../../public/gcp_demo.svg" alt="GCPアーキテクチャ図" width="480" />
     </td>
     <td width="50%" valign="top">
-      <strong>ReactとAWSによる認証</strong><br />
+      <strong>AWSアーキテクチャ図</strong><br />
-      <p><strong>Prompt:</strong> Generate authentication process using React with **AWS**. Use Serverless architecture.</p>
+      <p><strong>プロンプト：</strong> **AWSアイコン**を使用してAWSアーキテクチャ図を生成してください。この図では、ユーザーがインスタンス上でホストされているフロントエンドに接続します。</p>
-      <img src="../../public/auth.svg" alt="認証アーキテクチャ図" width="480" />
+      <img src="../../public/aws_demo.svg" alt="AWSアーキテクチャ図" width="480" />
     </td>
   </tr>
   <tr>
     <td width="50%" valign="top">
-      <strong>オープンイノベーション</strong><br />
+      <strong>Azureアーキテクチャ図</strong><br />
-      <p><strong>Prompt:</strong> Create visualization of Henry Chesbrough's Open Innovation model.</p>
+      <p><strong>プロンプト：</strong> **Azureアイコン**を使用してAzureアーキテクチャ図を生成してください。この図では、ユーザーがインスタンス上でホストされているフロントエンドに接続します。</p>
-      <img src="../../public/inno.svg" alt="オープンイノベーション図" width="480" />
+      <img src="../../public/azure_demo.svg" alt="Azureアーキテクチャ図" width="480" />
     </td>
     <td width="50%" valign="top">
       <strong>猫のスケッチ</strong><br />
-      <p><strong>Prompt:</strong> Draw a cute cat for me.</p>
+      <p><strong>プロンプト：</strong> かわいい猫を描いてください。</p>
       <img src="../../public/cat_demo.svg" alt="猫の絵" width="240" />
     </td>
   </tr>
@@ -96,7 +96,9 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
 -   **クラウドアーキテクチャダイアグラムサポート**：クラウドアーキテクチャダイアグラムの生成を専門的にサポート（AWS、GCP、Azure）
 -   **アニメーションコネクタ**：より良い可視化のためにダイアグラム要素間に動的でアニメーション化されたコネクタを作成
 
-## MCPサーバー
+## MCPサーバー（プレビュー）
+
+> **プレビュー機能**：この機能は実験的であり、安定しない可能性があります。
 
 MCP（Model Context Protocol）を介して、Claude Desktop、Cursor、VS CodeなどのAIエージェントでNext AI Draw.ioを使用できます。
 

lib/ai-providers.ts

@@ -1356,11 +1356,12 @@ export function supportsImageInput(modelId: string): boolean {
     }
 
     // Qwen text models (not vision variants like qwen-vl)
-    // Qwen3.5 series (qwen3.5, qwen3.5-plus, qwen3.5-flash) natively support image input
+    // qwen3.5-plus is a vision model
     if (
         lowerModelId.includes("qwen") &&
         !hasVisionIndicator &&
-        !lowerModelId.includes("qwen3.5")
+        !lowerModelId.includes("qwen3.5-plus") &&
+        !lowerModelId.includes("qwen3.5-flash")
     ) {
         return false
     }

lib/i18n/dictionaries/en.json

@@ -76,7 +76,8 @@
         "creativeDescription": "Draw something fun and creative",
         "cachedNote": "Examples are cached for instant response",
         "mcpServer": "MCP Server",
-        "mcpDescription": "Use in Claude Desktop, VS Code & Cursor"
+        "mcpDescription": "Use in Claude Desktop, VS Code & Cursor",
+        "preview": "PREVIEW"
     },
     "settings": {
         "title": "Settings",

lib/i18n/dictionaries/ja.json

@@ -76,7 +76,8 @@
         "creativeDescription": "楽しくてクリエイティブなものを描く",
         "cachedNote": "例はキャッシュされ、即座に応答します",
         "mcpServer": "MCP サーバー",
-        "mcpDescription": "Claude Desktop、VS Code、Cursor で使用"
+        "mcpDescription": "Claude Desktop、VS Code、Cursor で使用",
+        "preview": "プレビュー"
     },
     "settings": {
         "title": "設定",

lib/i18n/dictionaries/zh-Hant.json

@@ -76,7 +76,8 @@
         "creativeDescription": "繪製有趣且富有創意的內容",
         "cachedNote": "範例已快取，可即時回應",
         "mcpServer": "MCP 伺服器",
-        "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用"
+        "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用",
+        "preview": "預覽"
     },
     "settings": {
         "title": "設定",

lib/i18n/dictionaries/zh.json

@@ -76,7 +76,8 @@
         "creativeDescription": "绘制有趣且富有创意的内容",
         "cachedNote": "示例已缓存，可即时响应",
         "mcpServer": "MCP 服务器",
-        "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用"
+        "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用",
+        "preview": "预览"
     },
     "settings": {
         "title": "设置",

packages/mcp-server/package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "@next-ai-drawio/mcp-server",
-    "version": "0.2.0",
+    "version": "0.1.17",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@next-ai-drawio/mcp-server",
-            "version": "0.2.0",
+            "version": "0.1.17",
             "license": "Apache-2.0",
             "dependencies": {
                 "@modelcontextprotocol/sdk": "^1.0.4",

packages/mcp-server/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@next-ai-drawio/mcp-server",
-    "version": "0.2.0",
+    "version": "0.1.19",
     "description": "MCP server for Next AI Draw.io - AI-powered diagram generation with real-time browser preview",
     "type": "module",
     "main": "dist/index.js",

packages/mcp-server/src/index.ts

@@ -155,22 +155,19 @@ server.registerTool(
 server.registerTool(
     "create_new_diagram",
     {
-        description: `Create a NEW diagram from mxGraphModel XML. ONLY use this when creating a diagram from scratch.
+        description: `Create a NEW diagram from mxGraphModel XML. Use this when creating a diagram from scratch or replacing the current diagram entirely.
-
-⚠️ DO NOT use this tool to modify an existing diagram — it will DESTROY all existing content and user changes. Use edit_diagram instead for ANY modifications to an existing diagram.
 
 CRITICAL: You MUST provide the 'xml' argument in EVERY call. Do NOT call this tool without xml.
 
 When to use this tool:
-- Creating a new diagram from scratch (no existing diagram)
+- Creating a new diagram from scratch
-- The user explicitly asks to "start over" or "create a new diagram"
+- Replacing the current diagram with a completely different one
+- Major structural changes that require regenerating the diagram
 
-When to use edit_diagram instead (ALWAYS prefer edit_diagram if a diagram already exists):
+When to use edit_diagram instead:
-- ANY modifications to an existing diagram
+- Small modifications to existing diagram
-- Adding/removing/moving elements
+- Adding/removing individual elements
-- Changing labels, colors, styles, or positions
+- Changing labels, colors, or positions
-- Restructuring or reorganizing existing content
-- Adding new elements to an existing diagram
 
 XML FORMAT - Full mxGraphModel structure:
 <mxGraphModel>

packages/mcp-server/tsconfig.json

@@ -12,8 +12,7 @@
         "declaration": true,
         "declarationMap": true,
         "sourceMap": true,
-        "resolveJsonModule": true,
+        "resolveJsonModule": true
-        "types": ["node"]
     },
     "include": ["src/**/*"],
     "exclude": ["node_modules", "dist"]

tests/unit/ai-providers.test.ts

@@ -200,8 +200,6 @@ describe("supportsImageInput", () => {
 
     it("returns true for Qwen vision models", () => {
         expect(supportsImageInput("qwen-vl")).toBe(true)
-        expect(supportsImageInput("Qwen3.5")).toBe(true)
-        expect(supportsImageInput("qwen3.5")).toBe(true)
         expect(supportsImageInput("qwen3.5-plus")).toBe(true)
         expect(supportsImageInput("qwen3.5-flash")).toBe(true)
         expect(supportsImageInput("qwen3-vl-plus")).toBe(true)