feat: expand PR review scope to catch more issues

- Add categories for scope creep, suspicious .gitignore additions, UI inconsistencies
- Change from 'be very selective' to 'report ALL issues found'
- Simplify DO NOT comment list to allow more actionable feedback

.github/workflows/claude-code.yml

@@ -0,0 +1,114 @@
+name: Claude Code
+
+on:
+  issue_comment:
+    types: [created]
+  pull_request_review_comment:
+    types: [created]
+  issues:
+    types: [opened, assigned]
+  pull_request_review:
+    types: [submitted]
+  pull_request_target:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  claude:
+    if: |
+      (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
+      (github.event_name == 'issues' && contains(github.event.issue.body, '@claude'))
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      issues: write
+      id-token: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          role-to-assume: ${{ secrets.AWS_ROLE_TO_ASSUME }}
+          aws-region: us-east-1
+
+      - name: Run Claude Code
+        uses: anthropics/claude-code-action@v1
+        with:
+          use_bedrock: "true"
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+
+  pr-review:
+    if: github.event_name == 'pull_request_target'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
+      id-token: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          role-to-assume: ${{ secrets.AWS_ROLE_TO_ASSUME }}
+          aws-region: us-east-1
+
+      - name: Run Claude Code PR Review
+        uses: anthropics/claude-code-action@v1
+        with:
+          use_bedrock: "true"
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          allowed_non_write_users: "*"
+          prompt: |
+            REPO: ${{ github.repository }}
+            PR NUMBER: ${{ github.event.pull_request.number }}
+
+            This is a personal project - an AI-powered draw.io diagram generator built with:
+            - Next.js 15 with React 19
+            - Vercel AI SDK (streamText, useChat, tool calling)
+            - Multiple AI providers: Bedrock, Anthropic, OpenAI, Google, Azure, OpenRouter, Ollama
+
+            First, check previous review comments from github-actions bot using `gh api repos/${{ github.repository }}/pulls/${{ github.event.pull_request.number }}/comments`.
+            For each previous comment:
+            - If the issue is fixed in the current code, resolve the comment thread using:
+              `gh api graphql -f query='mutation { resolveReviewThread(input: {threadId: "THREAD_ID"}) { thread { isResolved } } }'`
+              Get the thread ID from the comment's node_id field.
+            - If the issue still exists, leave it alone
+
+            Then review the current diff for NEW issues only:
+
+            Review this PR for these issues (report ALL that apply):
+            1. Bugs that would cause runtime errors or broken functionality
+            2. Security issues (exposed secrets, API key leaks)
+            3. AI SDK misuse - specifically check for:
+               - Client-side: Should use useChat/useCompletion/useObject hooks, NOT raw fetch()
+               - Server-side: Should use streamText/generateText/streamObject/generateObject
+               - Message handling: Access message.parts array, not legacy content property
+               - Tool definitions: Must use Zod schemas for inputSchema
+               - Status handling: Check status (submitted/streaming/ready/error) before actions
+               - Stream cleanup: Call stop() when aborting streams
+            4. Unrelated changes that should be in separate PRs (scope creep)
+            5. Suspicious .gitignore additions or accidentally committed files
+            6. UI/UX inconsistencies (e.g., alignment issues)
+
+            When reviewing AI SDK usage, fetch https://ai-sdk.dev/docs/ to verify correct patterns.
+            Key doc pages: /docs/ai-sdk-ui/chatbot, /docs/ai-sdk-core/generating-text, /docs/ai-sdk-core/tools-and-tool-calling
+
+            DO NOT comment on:
+            - Minor performance optimizations
+            - Code style preferences (unless clearly wrong)
+            - Type annotations that don't affect functionality
+
+            Use `mcp__github_inline_comment__create_inline_comment` for inline comments.
+            Report ALL issues found - create multiple inline comments if needed. Only say "LGTM" if there are truly no issues.
+          claude_args: |
+            --allowedTools "mcp__github_inline_comment__create_inline_comment,Bash(gh pr comment:*),Bash(gh pr diff:*),Bash(gh pr view:*),Bash(gh api:*),WebFetch(domain:ai-sdk.dev)"

README.md

@@ -4,7 +4,7 @@ A next.js web application that integrates AI capabilities with draw.io diagrams.
 
 https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
 
-Demo site: [https://next-ai-draw-io.vercel.app/](https://next-ai-draw-io.vercel.app/)
+Demo site: [https://next-ai-draw-io.vercel.app](https://next-ai-draw-io.vercel.app)
 
 ## Features
 
@@ -12,8 +12,48 @@ Demo site: [https://next-ai-draw-io.vercel.app/](https://next-ai-draw-io.vercel.
 -   **Image-Based Diagram Replication**: Upload existing diagrams or images and have the AI replicate and enhance them automatically
 -   **Diagram History**: Comprehensive version control that tracks all changes, allowing you to view and restore previous versions of your diagrams before the AI editing.
 -   **Interactive Chat Interface**: Communicate with AI to refine your diagrams in real-time
--   **Smart Editing**: Modify existing diagrams using simple text prompts
--   **Targeted XML Editing**: AI can now make precise edits to specific parts of diagrams without regenerating the entire XML, making updates faster and more efficient
+-   **AWS Architecture Diagram Support**: Specialized support for generating AWS architecture diagrams
+-   **Animated Connectors**: Create dynamic and animated connectors between diagram elements for better visualization
+
+## **Examples**
+
+Here are some example prompts and their generated diagrams:
+
+<div align="center">
+<table width="100%">
+  <tr>
+    <td width="50%" valign="top">
+      <strong>GCP architecture diagram</strong><br />
+      <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/gcp_demo.svg" alt="GCP Architecture Diagram" width="480" />
+    </td>
+    <td width="50%" valign="top">
+      <strong>AWS architecture diagram</strong><br />
+      <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/aws_demo.svg" alt="AWS Architecture Diagram" width="480" />
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <strong>Azure architecture diagram</strong><br />
+      <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/azure_demo.svg" alt="Azure Architecture Diagram" width="480" />
+    </td>
+    <td width="50%" valign="top">
+      <strong>Animated transformer connectors</strong><br />
+      <p><strong>Prompt:</strong> Give me a **animated connector** diagram of transformer's architecture.</p>
+      <img src="./public/animated_connectors.svg" alt="Transformer Architecture with Animated Connectors" width="480" />
+    </td>
+  </tr>
+  <tr>
+    <td colspan="2" valign="top" align="center">
+      <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="260" />
+    </td>
+  </tr>
+</table>
+</div>
 
 ## How It Works
 
@@ -27,18 +67,12 @@ Diagrams are represented as XML that can be rendered in draw.io. The AI processe
 
 ## Multi-Provider Support
 
-This application supports multiple AI providers, making it easy to deploy with your preferred service. Choose from:
-
-### Supported Providers
-
-| Provider         | Status       | Best For                                    |
-| ---------------- | ------------ | ------------------------------------------- |
-| **AWS Bedrock**  | ✅ Default   | Claude models via AWS infrastructure        |
-| **OpenAI**       | ✅ Supported | GPT-4, GPT-5, and reasoning models          |
-| **Anthropic**    | ✅ Supported | Direct access to Claude models              |
-| **Google AI**    | ✅ Supported | Gemini models with multi-modal capabilities |
-| **Azure OpenAI** | ✅ Supported | Enterprise OpenAI deployments               |
-| **Ollama**       | ✅ Supported | Local/self-hosted open source models        |
+-   AWS Bedrock (default)
+-   OpenAI / OpenAI-compatible APIs (via `OPENAI_BASE_URL`)
+-   Anthropic
+-   Google AI
+-   Azure OpenAI
+-   Ollama
 
 Note that `claude-sonnet-4-5` has trained on draw.io diagrams with AWS logos, so if you want to create AWS architecture diagrams, this is the best choice.
 
@@ -115,6 +149,7 @@ public/               # Static assets including example images
 -   [x] Allow the LLM to modify the XML instead of generating it from scratch everytime.
 -   [x] Improve the smoothness of shape streaming updates.
 -   [x] Add multiple AI provider support (OpenAI, Anthropic, Google, Azure, Ollama)
+-   [ ] Solve the bug that generation will fail for session that longer than 60s.
 
 ## License
 

app/about/page.tsx

@@ -0,0 +1,336 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { FaGithub } from "react-icons/fa";
+
+export const metadata: Metadata = {
+    title: "About - AI-Powered Diagram Generator | Next AI Draw.io",
+    description: "Learn about Next AI Draw.io, a free AI-powered diagram creation tool. Create AWS architecture diagrams, flowcharts, and UML diagrams using Claude Sonnet and GPT-4. No login required.",
+    keywords: ["about AI diagram generator", "diagram tool features", "how to create diagrams", "AI drawing tool capabilities", "draw.io integration"],
+};
+
+export default function About() {
+    return (
+        <div className="min-h-screen bg-gray-50">
+            {/* Navigation */}
+            <header className="bg-white border-b border-gray-200">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+                    <div className="flex items-center justify-between">
+                        <Link href="/" className="text-xl font-bold text-gray-900 hover:text-gray-700">
+                            Next AI Draw.io
+                        </Link>
+                        <nav className="flex items-center gap-6 text-sm">
+                            <Link href="/" className="text-gray-600 hover:text-gray-900 transition-colors">
+                                Editor
+                            </Link>
+                            <Link href="/about" className="text-blue-600 font-semibold">
+                                About
+                            </Link>
+                            <a
+                                href="https://github.com/DayuanJiang/next-ai-draw-io"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-gray-600 hover:text-gray-900 transition-colors"
+                                aria-label="View on GitHub"
+                            >
+                                <FaGithub className="w-5 h-5" />
+                            </a>
+                        </nav>
+                    </div>
+                </div>
+            </header>
+
+            {/* Main Content */}
+            <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+                <article>
+                    {/* Hero Section */}
+                    <header className="mb-12">
+                        <h1 className="text-4xl font-bold text-gray-900 mb-4">
+                            AI-Powered Diagram Generator | Create Professional Diagrams Instantly
+                        </h1>
+                        <p className="text-xl text-gray-600">
+                            Free, open-source diagram creation tool powered by AI. No login required, no installation needed.
+                        </p>
+                    </header>
+
+                    {/* Introduction */}
+                    <section className="mb-12">
+                        <h2 className="text-2xl font-semibold text-gray-900 mb-4">What is Next AI Draw.io?</h2>
+                        <div className="prose prose-lg max-w-none text-gray-700">
+                            <p className="mb-4">
+                                <strong>Next AI Draw.io</strong> is a free, AI-powered diagram creation tool that integrates seamlessly with draw.io.
+                                Generate AWS architecture diagrams, flowcharts, UML diagrams, and technical documentation diagrams using natural language
+                                prompts. No login required, no installation needed—start creating professional diagrams instantly in your browser.
+                            </p>
+                            <p className="mb-4">
+                                Our intelligent diagram generator uses advanced AI models including <strong>Claude Sonnet</strong> and <strong>GPT-4</strong> to
+                                understand your requirements and automatically create properly structured diagrams with appropriate symbols, layouts, and connections.
+                                Simply describe what you need, upload reference images, or ask the AI to modify existing diagrams with our targeted XML editing feature.
+                            </p>
+                            <p>
+                                Whether you're a software architect designing system infrastructure, a developer documenting APIs, a business analyst creating
+                                process flows, or a student working on technical assignments, Next AI Draw.io makes diagram creation fast, accurate, and effortless.
+                            </p>
+                        </div>
+                    </section>
+
+                    {/* Key Features */}
+                    <section className="mb-12">
+                        <h2 className="text-2xl font-semibold text-gray-900 mb-6">Key Features</h2>
+                        <div className="grid md:grid-cols-2 gap-6">
+                            <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
+                                    <span className="text-blue-600 mr-2">✓</span>
+                                    AI-Powered Diagram Creation
+                                </h3>
+                                <p className="text-gray-700">
+                                    Generate diagrams from natural language descriptions using Claude Sonnet or GPT-4.
+                                    Describe your diagram in plain English, and watch the AI create it with proper symbols,
+                                    layouts, and connections automatically.
+                                </p>
+                            </div>
+
+                            <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
+                                    <span className="text-blue-600 mr-2">✓</span>
+                                    AWS Architecture Diagrams
+                                </h3>
+                                <p className="text-gray-700">
+                                    Create professional cloud infrastructure diagrams with AWS-style icons and layouts.
+                                    Perfect for designing EC2 instances, Lambda functions, S3 buckets, RDS databases, VPCs,
+                                    and complete AWS solution architectures.
+                                </p>
+                            </div>
+
+                            <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
+                                    <span className="text-blue-600 mr-2">✓</span>
+                                    Image-Based Diagram Replication
+                                </h3>
+                                <p className="text-gray-700">
+                                    Upload existing diagrams or sketches, and the AI will automatically recreate them in draw.io format.
+                                    Modify uploaded images by describing the changes you want—the AI handles the rest.
+                                </p>
+                            </div>
+
+                            <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
+                                    <span className="text-blue-600 mr-2">✓</span>
+                                    Diagram History & Version Control
+                                </h3>
+                                <p className="text-gray-700">
+                                    Access previous versions of your diagrams and restore any version from your session history.
+                                    Never lose work—every AI modification is saved and can be undone with a single click.
+                                </p>
+                            </div>
+
+                            <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
+                                    <span className="text-blue-600 mr-2">✓</span>
+                                    Targeted XML Editing
+                                </h3>
+                                <p className="text-gray-700">
+                                    Precise diagram modifications using intelligent XML manipulation. Unlike full diagram regeneration,
+                                    targeted edits preserve your existing layout while making specific changes, ensuring consistent
+                                    and predictable results.
+                                </p>
+                            </div>
+
+                            <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
+                                    <span className="text-blue-600 mr-2">✓</span>
+                                    Multi-Provider AI Support
+                                </h3>
+                                <p className="text-gray-700">
+                                    Choose between Claude Sonnet, GPT-4, and other leading AI models for optimal results.
+                                    Each model has unique strengths—select the one that best fits your diagram complexity and style.
+                                </p>
+                            </div>
+                        </div>
+                    </section>
+
+                    {/* Use Cases */}
+                    <section className="mb-12">
+                        <h2 className="text-2xl font-semibold text-gray-900 mb-6">Popular Use Cases</h2>
+                        <div className="grid md:grid-cols-3 gap-6">
+                            <div className="bg-blue-50 p-6 rounded-lg border border-blue-200">
+                                <h3 className="text-xl font-semibold text-gray-900 mb-3">AWS Cloud Architecture</h3>
+                                <p className="text-gray-700 mb-4">
+                                    Design scalable cloud infrastructure with EC2 instances, Lambda functions, S3 storage,
+                                    RDS databases, and VPC networking. Perfect for solution architects, cloud engineers,
+                                    and DevOps teams planning AWS deployments.
+                                </p>
+                                <p className="text-sm text-gray-600 italic">
+                                    Example: "Create an AWS diagram with an Application Load Balancer, two EC2 instances
+                                    in different availability zones, an RDS database, and an S3 bucket for static assets."
+                                </p>
+                            </div>
+
+                            <div className="bg-green-50 p-6 rounded-lg border border-green-200">
+                                <h3 className="text-xl font-semibold text-gray-900 mb-3">Flowcharts & Process Diagrams</h3>
+                                <p className="text-gray-700 mb-4">
+                                    Create business process flows, decision trees, workflow diagrams, and algorithm flowcharts
+                                    for documentation, presentations, and process optimization. Ideal for business analysts,
+                                    project managers, and operations teams.
+                                </p>
+                                <p className="text-sm text-gray-600 italic">
+                                    Example: "Draw a flowchart for user authentication: check if user exists, verify password,
+                                    generate JWT token on success, show error message on failure."
+                                </p>
+                            </div>
+
+                            <div className="bg-purple-50 p-6 rounded-lg border border-purple-200">
+                                <h3 className="text-xl font-semibold text-gray-900 mb-3">System Design & UML Diagrams</h3>
+                                <p className="text-gray-700 mb-4">
+                                    Generate system architecture diagrams, class diagrams, sequence diagrams, and
+                                    entity-relationship diagrams for software projects. Essential for software engineers,
+                                    system designers, and technical documentation.
+                                </p>
+                                <p className="text-sm text-gray-600 italic">
+                                    Example: "Create a class diagram for an e-commerce system with User, Product, Order,
+                                    and Payment classes showing their relationships and key methods."
+                                </p>
+                            </div>
+                        </div>
+                    </section>
+
+                    {/* How It Works */}
+                    <section className="mb-12 bg-white p-8 rounded-lg border border-gray-200">
+                        <h2 className="text-2xl font-semibold text-gray-900 mb-6">How to Use Next AI Draw.io</h2>
+                        <div className="space-y-6">
+                            <div className="flex items-start">
+                                <div className="flex-shrink-0 w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold mr-4">
+                                    1
+                                </div>
+                                <div>
+                                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Open the Editor</h3>
+                                    <p className="text-gray-700">
+                                        Navigate to the main page and you'll see the draw.io editor with an AI chat panel on the right.
+                                        No account creation or login required—start immediately.
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div className="flex items-start">
+                                <div className="flex-shrink-0 w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold mr-4">
+                                    2
+                                </div>
+                                <div>
+                                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Describe Your Diagram</h3>
+                                    <p className="text-gray-700">
+                                        Type your diagram request in natural language. Be as detailed or as general as you like.
+                                        You can also upload reference images for the AI to analyze and replicate.
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div className="flex items-start">
+                                <div className="flex-shrink-0 w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold mr-4">
+                                    3
+                                </div>
+                                <div>
+                                    <h3 className="text-lg font-semibold text-gray-900 mb-2">AI Generates Your Diagram</h3>
+                                    <p className="text-gray-700">
+                                        The AI processes your request and automatically creates your diagram in seconds.
+                                        Watch as it appears in the editor with proper symbols, layouts, and connections.
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div className="flex items-start">
+                                <div className="flex-shrink-0 w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold mr-4">
+                                    4
+                                </div>
+                                <div>
+                                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Refine and Export</h3>
+                                    <p className="text-gray-700">
+                                        Request modifications using the chat, manually edit in draw.io, or export to PNG, SVG,
+                                        or XML format. Access diagram history to restore previous versions anytime.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+
+                    {/* Benefits */}
+                    <section className="mb-12">
+                        <h2 className="text-2xl font-semibold text-gray-900 mb-6">Why Choose Next AI Draw.io?</h2>
+                        <div className="grid md:grid-cols-2 gap-6">
+                            <div className="flex items-start">
+                                <div className="flex-shrink-0 text-blue-600 text-2xl mr-3">⚡</div>
+                                <div>
+                                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Save Time</h3>
+                                    <p className="text-gray-700">
+                                        Create complex diagrams in seconds instead of hours. No more dragging, aligning,
+                                        or searching for the right symbols—AI handles it all.
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div className="flex items-start">
+                                <div className="flex-shrink-0 text-blue-600 text-2xl mr-3">🎯</div>
+                                <div>
+                                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Precision Editing</h3>
+                                    <p className="text-gray-700">
+                                        Targeted XML editing ensures changes are precise and predictable, unlike tools
+                                        that regenerate entire diagrams and lose your layout.
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div className="flex items-start">
+                                <div className="flex-shrink-0 text-blue-600 text-2xl mr-3">🆓</div>
+                                <div>
+                                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Completely Free</h3>
+                                    <p className="text-gray-700">
+                                        No subscriptions, no usage limits, no hidden costs. Open-source and free forever.
+                                        Use it for personal projects, work, or education.
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div className="flex items-start">
+                                <div className="flex-shrink-0 text-blue-600 text-2xl mr-3">🔒</div>
+                                <div>
+                                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Privacy First</h3>
+                                    <p className="text-gray-700">
+                                        No account required means your diagrams stay private. Work on sensitive
+                                        architecture designs without worrying about data storage or privacy policies.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+
+                    {/* CTA Section */}
+                    <section className="bg-blue-600 text-white p-8 rounded-lg text-center">
+                        <h2 className="text-3xl font-bold mb-4">Ready to Create Your First AI Diagram?</h2>
+                        <p className="text-xl mb-6">
+                            Start generating professional diagrams in seconds. No signup required.
+                        </p>
+                        <Link
+                            href="/"
+                            className="inline-block bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors"
+                        >
+                            Open Editor
+                        </Link>
+                    </section>
+                </article>
+            </main>
+
+            {/* Footer */}
+            <footer className="bg-white border-t border-gray-200 mt-16">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                    <div className="text-center text-gray-600 text-sm">
+                        <p className="mb-2">
+                            Next AI Draw.io - Free AI-Powered Diagram Generator
+                        </p>
+                        <p>
+                            Perfect for developers, architects, students, and business analysts.
+                            Open source. No login required.
+                        </p>
+                    </div>
+                </div>
+            </footer>
+        </div>
+    );
+}

app/api/chat/route.ts

@@ -141,6 +141,7 @@ ${lastMessageText}
             </mxCell>
           </root>
           - Note that when you need to generate diagram about aws architecture, use **AWS 2025 icons**.
+          - If you are asked to generate animated connectors, make sure to include "flowAnimation=1" in the style of the connector elements.
           `,
           inputSchema: z.object({
             xml: z.string().describe("XML string to be displayed on draw.io")

app/layout.tsx

@@ -16,8 +16,49 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-    title: "Next-AI-Drawio",
-    description: "An AI-powered drawing tool that integrates with draw.io",
+    title: "Next AI Draw.io - AI-Powered Diagram Generator",
+    description: "Create AWS architecture diagrams, flowcharts, and technical diagrams using AI. Free online tool integrating draw.io with AI assistance for professional diagram creation.",
+    keywords: ["AI diagram generator", "AWS architecture", "flowchart creator", "draw.io", "AI drawing tool", "technical diagrams", "diagram automation", "free diagram generator", "online diagram maker"],
+    authors: [{ name: "Next AI Draw.io" }],
+    creator: "Next AI Draw.io",
+    publisher: "Next AI Draw.io",
+    metadataBase: new URL("https://next-ai-drawio.jiang.jp"),
+    openGraph: {
+        title: "Next AI Draw.io - AI Diagram Generator",
+        description: "Create professional diagrams with AI assistance. Supports AWS architecture, flowcharts, and more.",
+        type: "website",
+        url: "https://next-ai-drawio.jiang.jp",
+        siteName: "Next AI Draw.io",
+        locale: "en_US",
+        images: [
+            {
+                url: "/architecture.png",
+                width: 1200,
+                height: 630,
+                alt: "Next AI Draw.io - AI-powered diagram creation tool",
+            },
+        ],
+    },
+    twitter: {
+        card: "summary_large_image",
+        title: "Next AI Draw.io - AI Diagram Generator",
+        description: "Create professional diagrams with AI assistance. Free, no login required.",
+        images: ["/architecture.png"],
+    },
+    robots: {
+        index: true,
+        follow: true,
+        googleBot: {
+            index: true,
+            follow: true,
+            "max-video-preview": -1,
+            "max-image-preview": "large",
+            "max-snippet": -1,
+        },
+    },
+    icons: {
+        icon: "/favicon.ico",
+    },
 };
 
 export default function RootLayout({
@@ -25,8 +66,29 @@ export default function RootLayout({
 }: Readonly<{
     children: React.ReactNode;
 }>) {
+    const jsonLd = {
+        '@context': 'https://schema.org',
+        '@type': 'SoftwareApplication',
+        name: 'Next AI Draw.io',
+        applicationCategory: 'DesignApplication',
+        operatingSystem: 'Web Browser',
+        description: 'AI-powered diagram generator with targeted XML editing capabilities that integrates with draw.io for creating AWS architecture diagrams, flowcharts, and technical diagrams. Features diagram history, multi-provider AI support, and real-time collaboration.',
+        url: 'https://next-ai-drawio.jiang.jp',
+        offers: {
+            '@type': 'Offer',
+            price: '0',
+            priceCurrency: 'USD',
+        },
+    };
+
     return (
         <html lang="en">
+            <head>
+                <script
+                    type="application/ld+json"
+                    dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+                />
+            </head>
             <body
                 className={`${geistSans.variable} ${geistMono.variable} antialiased`}
             >

app/page.tsx

@@ -40,20 +40,19 @@ export default function Home() {
         };
     }, []);
 
-    if (isMobile) {
-        return (
-            <div className="flex items-center justify-center h-screen bg-gray-100">
-                <div className="text-center p-8">
-                    <h1 className="text-2xl font-semibold text-gray-800">
-                        Please open this application on a desktop or laptop
-                    </h1>
-                </div>
-            </div>
-        );
-    }
-
     return (
-        <div className="flex h-screen bg-gray-100">
+        <div className="flex h-screen bg-gray-100 relative">
+            {/* Mobile warning overlay - keeps components mounted */}
+            {isMobile && (
+                <div className="absolute inset-0 z-50 flex items-center justify-center bg-gray-100">
+                    <div className="text-center p-8">
+                        <h1 className="text-2xl font-semibold text-gray-800">
+                            Please open this application on a desktop or laptop
+                        </h1>
+                    </div>
+                </div>
+            )}
+
             <div className={`${isChatVisible ? 'w-2/3' : 'w-full'} p-1 h-full relative transition-all duration-300 ease-in-out`}>
                 <DrawIoEmbed
                     ref={drawioRef}

app/robots.ts

@@ -0,0 +1,12 @@
+import { MetadataRoute } from 'next'
+
+export default function robots(): MetadataRoute.Robots {
+    return {
+        rules: {
+            userAgent: '*',
+            allow: '/',
+            disallow: '/api/',
+        },
+        sitemap: 'https://next-ai-drawio.jiang.jp/sitemap.xml',
+    }
+}

app/sitemap.ts

@@ -0,0 +1,18 @@
+import { MetadataRoute } from 'next'
+
+export default function sitemap(): MetadataRoute.Sitemap {
+    return [
+        {
+            url: 'https://next-ai-drawio.jiang.jp',
+            lastModified: new Date(),
+            changeFrequency: 'weekly',
+            priority: 1,
+        },
+        {
+            url: 'https://next-ai-drawio.jiang.jp/about',
+            lastModified: new Date(),
+            changeFrequency: 'monthly',
+            priority: 0.8,
+        },
+    ]
+}

components/chat-example-panel.tsx

@@ -52,23 +52,29 @@ export default function ExamplePanel({
             </p>
             <p className="text-sm text-gray-500 mb-2">Try these examples:</p>
             <div className="flex flex-wrap gap-5">
+                <button
+                    className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
+                    onClick={() => setInput("Give me a **animated connector** diagram of transformer's architecture")}
+                >
+                    Draw diagram with Animated Connectors
+                </button>
                 <button
                     className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
                     onClick={handleReplicateArchitecture}
                 >
-                    Create this diagram in aws style
+                    Create AWS architecture
                 </button>
                 <button
                     className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
                     onClick={handleReplicateFlowchart}
                 >
-                    Replicate this flowchart
+                    Replicate flowchart
                 </button>
                 <button
                     className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
                     onClick={() => setInput("Draw a cat for me")}
                 >
-                    Draw a cat for me
+                    Draw a cat
                 </button>
             </div>
         </div>

components/chat-message-display.tsx

@@ -187,7 +187,7 @@ export function ChatMessageDisplay({
                                                     src={part.url}
                                                     width={200}
                                                     height={200}
-                                                    alt={`file-${index}`}
+                                                    alt={`Uploaded diagram or image for AI analysis`}
                                                     className="rounded-md border"
                                                     style={{
                                                         objectFit: "contain",

components/chat-panel.tsx

@@ -4,6 +4,7 @@ import type React from "react";
 import { useRef, useEffect, useState } from "react";
 import { FaGithub } from "react-icons/fa";
 import { PanelRightClose, PanelRightOpen } from "lucide-react";
+import Link from "next/link";
 
 import {
     Card,
@@ -226,7 +227,12 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
     return (
         <Card className="h-full flex flex-col rounded-none py-0 gap-0">
             <CardHeader className="p-4 flex flex-row justify-between items-center">
-                <CardTitle>Next-AI-Drawio</CardTitle>
+                <div className="flex items-center gap-3">
+                    <CardTitle>Next-AI-Drawio</CardTitle>
+                    <Link href="/about" className="text-sm text-gray-600 hover:text-gray-900 transition-colors">
+                        About
+                    </Link>
+                </div>
                 <div className="flex items-center gap-2">
                     <ButtonWithTooltip
                         tooltipContent="Hide chat panel (Ctrl+B)"

components/file-preview-list.tsx

@@ -79,7 +79,7 @@ export function FilePreviewList({ files, onRemoveFile }: FilePreviewListProps) {
                     <div className="relative w-auto h-auto max-w-[90vw] max-h-[90vh]">
                         <Image
                             src={selectedImage}
-                            alt="Preview"
+                            alt="Full size preview of uploaded diagram or image"
                             width={1200}
                             height={900}
                             className="object-contain max-w-full max-h-[90vh] w-auto h-auto"

env.example

@@ -14,6 +14,7 @@ AI_MODEL=global.anthropic.claude-sonnet-4-5-20250929-v1:0
 
 # OpenAI Configuration
 # OPENAI_API_KEY=sk-...
+# OPENAI_BASE_URL=https://api.openai.com/v1  # Optional: Custom OpenAI-compatible endpoint
 # OPENAI_ORGANIZATION=org-...  # Optional
 # OPENAI_PROJECT=proj_...      # Optional
 

lib/ai-providers.ts

@@ -1,5 +1,5 @@
 import { bedrock } from '@ai-sdk/amazon-bedrock';
-import { openai } from '@ai-sdk/openai';
+import { openai, createOpenAI } from '@ai-sdk/openai';
 import { anthropic } from '@ai-sdk/anthropic';
 import { google } from '@ai-sdk/google';
 import { azure } from '@ai-sdk/azure';
@@ -61,6 +61,7 @@ function validateProviderCredentials(provider: ProviderName): void {
  *
  * Provider-specific env vars:
  * - OPENAI_API_KEY: OpenAI API key
+ * - OPENAI_BASE_URL: Custom OpenAI-compatible endpoint (optional)
  * - ANTHROPIC_API_KEY: Anthropic API key
  * - GOOGLE_GENERATIVE_AI_API_KEY: Google API key
  * - AZURE_RESOURCE_NAME, AZURE_API_KEY: Azure OpenAI credentials
@@ -97,7 +98,15 @@ export function getAIModel(): ModelConfig {
       break;
 
     case 'openai':
-      model = openai(modelId);
+      if (process.env.OPENAI_BASE_URL) {
+        const customOpenAI = createOpenAI({
+          apiKey: process.env.OPENAI_API_KEY,
+          baseURL: process.env.OPENAI_BASE_URL,
+        });
+        model = customOpenAI.chat(modelId);
+      } else {
+        model = openai(modelId);
+      }
       break;
 
     case 'anthropic':