chore: Update README for demo site link and simplify multi-provider support section

Feature/seo improvements

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
 
@@ -14,7 +14,6 @@ Demo site: [https://next-ai-draw-io.vercel.app/](https://next-ai-draw-io.vercel.
 -   **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
--   **Improved XML Handling**: Automatic formatting of single-line XML for better compatibility and reliability
 
 ## How It Works
 
@@ -28,83 +27,14 @@ 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:
+-   AWS Bedrock (default)
+-   OpenAI
+-   Anthropic
+-   Google AI
+-   Azure OpenAI
+-   Ollama
 
-### 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 |
-
-### Quick Setup by Provider
-
-#### AWS Bedrock (Default)
-```bash
-AI_PROVIDER=bedrock
-AI_MODEL=global.anthropic.claude-sonnet-4-5-20250929-v1:0
-AWS_REGION=us-east-1
-AWS_ACCESS_KEY_ID=your-access-key
-AWS_SECRET_ACCESS_KEY=your-secret-key
-```
-
-#### OpenAI
-```bash
-AI_PROVIDER=openai
-AI_MODEL=gpt-4o
-OPENAI_API_KEY=sk-...
-```
-
-#### Anthropic
-```bash
-AI_PROVIDER=anthropic
-AI_MODEL=claude-sonnet-4-5
-ANTHROPIC_API_KEY=sk-ant-...
-```
-
-#### Google Generative AI
-```bash
-AI_PROVIDER=google
-AI_MODEL=gemini-2.5-flash
-GOOGLE_GENERATIVE_AI_API_KEY=...
-```
-
-#### Azure OpenAI
-```bash
-AI_PROVIDER=azure
-AI_MODEL=your-deployment-name
-AZURE_RESOURCE_NAME=your-resource
-AZURE_API_KEY=...
-```
-
-#### Ollama (Local)
-```bash
-AI_PROVIDER=ollama
-AI_MODEL=phi3
-OLLAMA_BASE_URL=http://localhost:11434/api  # Optional
-```
-Note: Install models locally first with `ollama pull <model-name>`
-
-### Recommended Models
-
-**Best Quality:**
-- AWS Bedrock: `global.anthropic.claude-sonnet-4-5-20250929-v1:0`
-- Anthropic: `claude-sonnet-4-5`
-- OpenAI: `gpt-4o` or `gpt-5`
-
-**Best Speed:**
-- Google: `gemini-2.5-flash`
-- OpenAI: `gpt-4o`
-- Anthropic: `claude-haiku-4-5`
-
-**Best Cost:**
-- Ollama: Free (local models)
-- Google: `gemini-1.5-flash-8b`
-- OpenAI: `gpt-4o-mini`
+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.
 
 ## Getting Started
 
@@ -130,13 +60,14 @@ yarn install
 Create a `.env.local` file in the root directory:
 
 ```bash
-cp .env.example .env.local
+cp env.example .env.local
 ```
 
 Edit `.env.local` and configure your chosen provider:
-- Set `AI_PROVIDER` to your chosen provider (bedrock, openai, anthropic, google, azure, ollama)
-- Set `AI_MODEL` to the specific model you want to use
-- Add the required API keys for your provider
+
+-   Set `AI_PROVIDER` to your chosen provider (bedrock, openai, anthropic, google, azure, ollama)
+-   Set `AI_MODEL` to the specific model you want to use
+-   Add the required API keys for your provider
 
 See the [Multi-Provider Support](#multi-provider-support) section above for provider-specific configuration examples.
 
@@ -157,6 +88,8 @@ Check out the [Next.js deployment documentation](https://nextjs.org/docs/app/bui
 Or you can deploy by this button.
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
 
+Be sure to **set the environment variables** in the Vercel dashboard as you did in your local `.env.local` file.
+
 ## Project Structure
 
 ```
@@ -176,6 +109,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/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/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-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"