From 378bef435ed2b8be8aec870dcdcf8f4edfd6754f Mon Sep 17 00:00:00 2001
From: Biki Kalita <86558912+Biki-dev@users.noreply.github.com>
Date: Sat, 20 Dec 2025 20:18:54 +0530
Subject: [PATCH] Add i18n support, language toggle UI, and translate Settings
 dialog (#334)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* i18n support added

* fix: align i18n implementation with Next.js 16 guide

- Rename middleware.ts to proxy.ts (Next.js 16 convention)
- Fix params type to Promise<{lang: string}> for layout/metadata
- Add 'server-only' directive and dynamic imports to dictionaries.ts
- Add hasLocale type guard and notFound() for invalid locales
- Wrap LanguageToggle in Suspense for useSearchParams
- Fix dictionary key mismatch (learnmore -> learnMore)
- Improve Chinese translations per Gemini review:
  - loading ellipsis, new -> 新建, styledMode -> 精致
  - goodResponse/badResponse -> 有帮助/无帮助
  - closeProtection -> 关闭确认, fileExceeds phrasing
- Improve Japanese translations per Gemini review:
  - closeProtection -> ページ離脱確認
  - invalidAccessCode phrasing, appendDiagram -> に追加
  - styledMode -> スタイル付き

---------

Co-authored-by: dayuan.jiang <jdy.toh@gmail.com>
---
 app/{ => [lang]}/about/cn/page.tsx |   0
 app/{ => [lang]}/about/ja/page.tsx |   0
 app/{ => [lang]}/about/page.tsx    |   0
 app/[lang]/layout.tsx              | 172 +++++++++++++++++++++++++++
 app/{ => [lang]}/page.tsx          |   8 +-
 app/layout.tsx                     | 125 --------------------
 components/chat-example-panel.tsx  |  48 ++++----
 components/chat-input.tsx          |  77 +++++++-----
 components/chat-panel.tsx          |  35 +++---
 components/file-preview-list.tsx   |  15 +--
 components/history-dialog.tsx      |  26 ++--
 components/language-toggle.tsx     | 108 +++++++++++++++++
 components/quota-limit-toast.tsx   |  47 +++-----
 components/reset-warning-modal.tsx |  12 +-
 components/save-dialog.tsx         |  48 +++++---
 components/settings-dialog.tsx     | 100 ++++++++++------
 hooks/use-dictionary.ts            |  29 +++++
 lib/i18n/config.ts                 |   6 +
 lib/i18n/dictionaries.ts           |  18 +++
 lib/i18n/dictionaries/en.json      | 184 +++++++++++++++++++++++++++++
 lib/i18n/dictionaries/ja.json      | 184 +++++++++++++++++++++++++++++
 lib/i18n/dictionaries/zh.json      | 184 +++++++++++++++++++++++++++++
 lib/i18n/utils.ts                  |  14 +++
 package-lock.json                  |  35 ++++++
 package.json                       |   4 +
 proxy.ts                           |  63 ++++++++++
 26 files changed, 1235 insertions(+), 307 deletions(-)
 rename app/{ => [lang]}/about/cn/page.tsx (100%)
 rename app/{ => [lang]}/about/ja/page.tsx (100%)
 rename app/{ => [lang]}/about/page.tsx (100%)
 create mode 100644 app/[lang]/layout.tsx
 rename app/{ => [lang]}/page.tsx (95%)
 delete mode 100644 app/layout.tsx
 create mode 100644 components/language-toggle.tsx
 create mode 100644 hooks/use-dictionary.ts
 create mode 100644 lib/i18n/config.ts
 create mode 100644 lib/i18n/dictionaries.ts
 create mode 100644 lib/i18n/dictionaries/en.json
 create mode 100644 lib/i18n/dictionaries/ja.json
 create mode 100644 lib/i18n/dictionaries/zh.json
 create mode 100644 lib/i18n/utils.ts
 create mode 100644 proxy.ts

diff --git a/app/about/cn/page.tsx b/app/[lang]/about/cn/page.tsx
similarity index 100%
rename from app/about/cn/page.tsx
rename to app/[lang]/about/cn/page.tsx
diff --git a/app/about/ja/page.tsx b/app/[lang]/about/ja/page.tsx
similarity index 100%
rename from app/about/ja/page.tsx
rename to app/[lang]/about/ja/page.tsx
diff --git a/app/about/page.tsx b/app/[lang]/about/page.tsx
similarity index 100%
rename from app/about/page.tsx
rename to app/[lang]/about/page.tsx
diff --git a/app/[lang]/layout.tsx b/app/[lang]/layout.tsx
new file mode 100644
index 0000000..5ab56c9
--- /dev/null
+++ b/app/[lang]/layout.tsx
@@ -0,0 +1,172 @@
+import { GoogleAnalytics } from "@next/third-parties/google"
+import type { Metadata, Viewport } from "next"
+import { JetBrains_Mono, Plus_Jakarta_Sans } from "next/font/google"
+import { notFound } from "next/navigation"
+import { DiagramProvider } from "@/contexts/diagram-context"
+import { DictionaryProvider } from "@/hooks/use-dictionary"
+import type { Locale } from "@/lib/i18n/config"
+import { i18n } from "@/lib/i18n/config"
+import { getDictionary, hasLocale } from "@/lib/i18n/dictionaries"
+
+import "../globals.css"
+
+const plusJakarta = Plus_Jakarta_Sans({
+    variable: "--font-sans",
+    subsets: ["latin"],
+    weight: ["400", "500", "600", "700"],
+})
+
+const jetbrainsMono = JetBrains_Mono({
+    variable: "--font-mono",
+    subsets: ["latin"],
+    weight: ["400", "500"],
+})
+
+export const viewport: Viewport = {
+    width: "device-width",
+    initialScale: 1,
+    maximumScale: 1,
+    userScalable: false,
+}
+
+// Generate static params for all locales
+export async function generateStaticParams() {
+    return i18n.locales.map((locale) => ({ lang: locale }))
+}
+
+// Generate metadata per locale
+export async function generateMetadata({
+    params,
+}: {
+    params: Promise<{ lang: string }>
+}): Promise<Metadata> {
+    const { lang: rawLang } = await params
+    const lang = (rawLang in { en: 1, zh: 1, ja: 1 } ? rawLang : "en") as Locale
+
+    // Default to English metadata
+    const titles: Record<Locale, string> = {
+        en: "Next AI Draw.io - AI-Powered Diagram Generator",
+        zh: "Next AI Draw.io - AI powered diagram generator",
+        ja: "Next AI Draw.io - AI-powered diagram generator",
+    }
+
+    const descriptions: Record<Locale, string> = {
+        en: "Create AWS architecture diagrams, flowcharts, and technical diagrams using AI. Free online tool integrating draw.io with AI assistance for professional diagram creation.",
+        zh: "Use AI to create AWS architecture diagrams, flowcharts, and technical diagrams. Free online tool integrated with draw.io and AI assistance for professional diagram creation.",
+        ja: "Create AWS architecture diagrams, flowcharts, and technical diagrams using AI. Create professional diagrams with a free online tool that integrates draw.io with an AI assistant.",
+    }
+
+    return {
+        title: titles[lang],
+        description: descriptions[lang],
+        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: titles[lang],
+            description: descriptions[lang],
+            type: "website",
+            url: "https://next-ai-drawio.jiang.jp",
+            siteName: "Next AI Draw.io",
+            locale: lang === "zh" ? "zh_CN" : lang === "ja" ? "ja_JP" : "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: titles[lang],
+            description: descriptions[lang],
+            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",
+        },
+        alternates: {
+            languages: {
+                en: "/en",
+                zh: "/zh",
+                ja: "/ja",
+            },
+        },
+    }
+}
+
+export default async function RootLayout({
+    children,
+    params,
+}: Readonly<{
+    children: React.ReactNode
+    params: Promise<{ lang: string }>
+}>) {
+    const { lang } = await params
+    if (!hasLocale(lang)) notFound()
+    const validLang = lang as Locale
+    const dictionary = await getDictionary(validLang)
+
+    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",
+        inLanguage: validLang,
+        offers: {
+            "@type": "Offer",
+            price: "0",
+            priceCurrency: "USD",
+        },
+    }
+
+    return (
+        <html lang={validLang} suppressHydrationWarning>
+            <head>
+                <script
+                    type="application/ld+json"
+                    dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+                />
+            </head>
+            <body
+                className={`${plusJakarta.variable} ${jetbrainsMono.variable} antialiased`}
+            >
+                <DictionaryProvider dictionary={dictionary}>
+                    <DiagramProvider>{children}</DiagramProvider>
+                </DictionaryProvider>
+            </body>
+            {process.env.NEXT_PUBLIC_GA_ID && (
+                <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID} />
+            )}
+        </html>
+    )
+}
diff --git a/app/page.tsx b/app/[lang]/page.tsx
similarity index 95%
rename from app/page.tsx
rename to app/[lang]/page.tsx
index f936fc5..0a1f924 100644
--- a/app/page.tsx
+++ b/app/[lang]/page.tsx
@@ -108,16 +108,11 @@ export default function Home() {
     useEffect(() => {
         const checkMobile = () => {
             const newIsMobile = window.innerWidth < 768
-            // If crossing the breakpoint (not initial render), save diagram and reset draw.io
             if (
                 !isInitialRenderRef.current &&
                 newIsMobile !== isMobileRef.current
             ) {
-                // Save diagram before remounting (fire and forget)
-                saveDiagramToStorage().catch(() => {
-                    // Ignore timeout errors during resize
-                })
-                // Reset draw.io ready state so onLoad triggers again after remount
+                saveDiagramToStorage().catch(() => {})
                 resetDrawioReady()
             }
             isMobileRef.current = newIsMobile
@@ -177,7 +172,6 @@ export default function Home() {
                 direction={isMobile ? "vertical" : "horizontal"}
                 className="h-full"
             >
-                {/* Draw.io Canvas */}
                 <ResizablePanel
                     id="drawio-panel"
                     defaultSize={isMobile ? 50 : 67}
diff --git a/app/layout.tsx b/app/layout.tsx
deleted file mode 100644
index 5abd5ba..0000000
--- a/app/layout.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { GoogleAnalytics } from "@next/third-parties/google"
-import type { Metadata, Viewport } from "next"
-import { JetBrains_Mono, Plus_Jakarta_Sans } from "next/font/google"
-import { DiagramProvider } from "@/contexts/diagram-context"
-
-import "./globals.css"
-
-const plusJakarta = Plus_Jakarta_Sans({
-    variable: "--font-sans",
-    subsets: ["latin"],
-    weight: ["400", "500", "600", "700"],
-})
-
-const jetbrainsMono = JetBrains_Mono({
-    variable: "--font-mono",
-    subsets: ["latin"],
-    weight: ["400", "500"],
-})
-
-export const viewport: Viewport = {
-    width: "device-width",
-    initialScale: 1,
-    maximumScale: 1,
-    userScalable: false,
-}
-
-export const metadata: Metadata = {
-    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({
-    children,
-}: 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" suppressHydrationWarning>
-            <head>
-                <script
-                    type="application/ld+json"
-                    dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
-                />
-            </head>
-            <body
-                className={`${plusJakarta.variable} ${jetbrainsMono.variable} antialiased`}
-            >
-                <DiagramProvider>{children}</DiagramProvider>
-            </body>
-            {process.env.NEXT_PUBLIC_GA_ID && (
-                <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID} />
-            )}
-        </html>
-    )
-}
diff --git a/components/chat-example-panel.tsx b/components/chat-example-panel.tsx
index 1b547cf..f350825 100644
--- a/components/chat-example-panel.tsx
+++ b/components/chat-example-panel.tsx
@@ -8,6 +8,7 @@ import {
     Terminal,
     Zap,
 } from "lucide-react"
+import { useDictionary } from "@/hooks/use-dictionary"
 
 interface ExampleCardProps {
     icon: React.ReactNode
@@ -24,6 +25,8 @@ function ExampleCard({
     onClick,
     isNew,
 }: ExampleCardProps) {
+    const dict = useDictionary()
+
     return (
         <button
             onClick={onClick}
@@ -50,7 +53,7 @@ function ExampleCard({
                         </h3>
                         {isNew && (
                             <span className="px-1.5 py-0.5 text-[10px] font-semibold bg-primary text-primary-foreground rounded">
-                                NEW
+                                {dict.common.new}
                             </span>
                         )}
                     </div>
@@ -70,6 +73,8 @@ export default function ExamplePanel({
     setInput: (input: string) => void
     setFiles: (files: File[]) => void
 }) {
+    const dict = useDictionary()
+
     const handleReplicateFlowchart = async () => {
         setInput("Replicate this flowchart.")
 
@@ -79,7 +84,7 @@ export default function ExamplePanel({
             const file = new File([blob], "example.png", { type: "image/png" })
             setFiles([file])
         } catch (error) {
-            console.error("Error loading example image:", error)
+            console.error(dict.errors.failedToLoadExample, error)
         }
     }
 
@@ -94,7 +99,7 @@ export default function ExamplePanel({
             })
             setFiles([file])
         } catch (error) {
-            console.error("Error loading architecture image:", error)
+            console.error(dict.errors.failedToLoadExample, error)
         }
     }
 
@@ -109,7 +114,7 @@ export default function ExamplePanel({
             })
             setFiles([file])
         } catch (error) {
-            console.error("Error loading text file:", error)
+            console.error(dict.errors.failedToLoadExample, error)
         }
     }
 
@@ -129,14 +134,14 @@ export default function ExamplePanel({
                     <div className="min-w-0">
                         <div className="flex items-center gap-2">
                             <span className="text-sm font-medium text-foreground group-hover:text-purple-500 transition-colors">
-                                MCP Server
+                                {dict.examples.mcpServer}
                             </span>
                             <span className="px-1.5 py-0.5 text-[10px] font-semibold bg-purple-500 text-white rounded">
-                                PREVIEW
+                                {dict.examples.preview}
                             </span>
                         </div>
                         <p className="text-xs text-muted-foreground">
-                            Use in Claude Desktop, VS Code & Cursor
+                            {dict.examples.mcpDescription}
                         </p>
                     </div>
                 </div>
@@ -145,33 +150,32 @@ export default function ExamplePanel({
             {/* Welcome section */}
             <div className="text-center mb-6">
                 <h2 className="text-lg font-semibold text-foreground mb-2">
-                    Create diagrams with AI
+                    {dict.examples.title}
                 </h2>
                 <p className="text-sm text-muted-foreground max-w-xs mx-auto">
-                    Describe what you want to create or upload an image to
-                    replicate
+                    {dict.examples.subtitle}
                 </p>
             </div>
 
             {/* Examples grid */}
             <div className="space-y-3">
                 <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider px-1">
-                    Quick Examples
+                    {dict.examples.quickExamples}
                 </p>
 
                 <div className="grid gap-2">
                     <ExampleCard
                         icon={<FileText className="w-4 h-4 text-primary" />}
-                        title="Paper to Diagram"
-                        description="Upload .pdf, .txt, .md, .json, .csv, .py, .js, .ts and more"
+                        title={dict.examples.paperToDiagram}
+                        description={dict.examples.paperDescription}
                         onClick={handlePdfExample}
                         isNew
                     />
 
                     <ExampleCard
                         icon={<Zap className="w-4 h-4 text-primary" />}
-                        title="Animated Diagram"
-                        description="Draw a transformer architecture with animated connectors"
+                        title={dict.examples.animatedDiagram}
+                        description={dict.examples.animatedDescription}
                         onClick={() => {
                             setInput(
                                 "Give me a **animated connector** diagram of transformer's architecture",
@@ -182,22 +186,22 @@ export default function ExamplePanel({
 
                     <ExampleCard
                         icon={<Cloud className="w-4 h-4 text-primary" />}
-                        title="AWS Architecture"
-                        description="Create a cloud architecture diagram with AWS icons"
+                        title={dict.examples.awsArchitecture}
+                        description={dict.examples.awsDescription}
                         onClick={handleReplicateArchitecture}
                     />
 
                     <ExampleCard
                         icon={<GitBranch className="w-4 h-4 text-primary" />}
-                        title="Replicate Flowchart"
-                        description="Upload and replicate an existing flowchart"
+                        title={dict.examples.replicateFlowchart}
+                        description={dict.examples.replicateDescription}
                         onClick={handleReplicateFlowchart}
                     />
 
                     <ExampleCard
                         icon={<Palette className="w-4 h-4 text-primary" />}
-                        title="Creative Drawing"
-                        description="Draw something fun and creative"
+                        title={dict.examples.creativeDrawing}
+                        description={dict.examples.creativeDescription}
                         onClick={() => {
                             setInput("Draw a cat for me")
                             setFiles([])
@@ -206,7 +210,7 @@ export default function ExamplePanel({
                 </div>
 
                 <p className="text-[11px] text-muted-foreground/60 text-center mt-4">
-                    Examples are cached for instant response
+                    {dict.examples.cachedNote}
                 </p>
             </div>
         </div>
diff --git a/components/chat-input.tsx b/components/chat-input.tsx
index 8fe9d31..684d94d 100644
--- a/components/chat-input.tsx
+++ b/components/chat-input.tsx
@@ -25,6 +25,8 @@ import {
     TooltipTrigger,
 } from "@/components/ui/tooltip"
 import { useDiagram } from "@/contexts/diagram-context"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { formatMessage } from "@/lib/i18n/utils"
 import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
 import { FilePreviewList } from "./file-preview-list"
 
@@ -58,6 +60,7 @@ interface ValidationResult {
 function validateFiles(
     newFiles: File[],
     existingCount: number,
+    dict: any,
 ): ValidationResult {
     const errors: string[] = []
     const validFiles: File[] = []
@@ -65,17 +68,23 @@ function validateFiles(
     const availableSlots = MAX_FILES - existingCount
 
     if (availableSlots <= 0) {
-        errors.push(`Maximum ${MAX_FILES} files allowed`)
+        errors.push(formatMessage(dict.errors.maxFiles, { max: MAX_FILES }))
         return { validFiles, errors }
     }
 
     for (const file of newFiles) {
         if (validFiles.length >= availableSlots) {
-            errors.push(`Only ${availableSlots} more file(s) allowed`)
+            errors.push(
+                formatMessage(dict.errors.onlyMoreAllowed, {
+                    slots: availableSlots,
+                }),
+            )
             break
         }
         if (!isValidFileType(file)) {
-            errors.push(`"${file.name}" is not a supported file type`)
+            errors.push(
+                formatMessage(dict.errors.unsupportedType, { name: file.name }),
+            )
             continue
         }
         // Only check size for images (PDFs/text files are extracted client-side, so file size doesn't matter)
@@ -83,7 +92,11 @@ function validateFiles(
         if (!isExtractedFile && file.size > MAX_IMAGE_SIZE) {
             const maxSizeMB = MAX_IMAGE_SIZE / 1024 / 1024
             errors.push(
-                `"${file.name}" is ${formatFileSize(file.size)} (exceeds ${maxSizeMB}MB)`,
+                formatMessage(dict.errors.fileExceeds, {
+                    name: file.name,
+                    size: formatFileSize(file.size),
+                    max: maxSizeMB,
+                }),
             )
         } else {
             validFiles.push(file)
@@ -93,7 +106,7 @@ function validateFiles(
     return { validFiles, errors }
 }
 
-function showValidationErrors(errors: string[]) {
+function showValidationErrors(errors: string[], dict: any) {
     if (errors.length === 0) return
 
     if (errors.length === 1) {
@@ -104,14 +117,20 @@ function showValidationErrors(errors: string[]) {
         showErrorToast(
             <div className="flex flex-col gap-1">
                 <span className="font-medium">
-                    {errors.length} files rejected:
+                    {formatMessage(dict.errors.filesRejected, {
+                        count: errors.length,
+                    })}
                 </span>
                 <ul className="text-muted-foreground text-xs list-disc list-inside">
                     {errors.slice(0, 3).map((err) => (
                         <li key={err}>{err}</li>
                     ))}
                     {errors.length > 3 && (
-                        <li>...and {errors.length - 3} more</li>
+                        <li>
+                            {formatMessage(dict.errors.andMore, {
+                                count: errors.length - 3,
+                            })}
+                        </li>
                     )}
                 </ul>
             </div>,
@@ -155,6 +174,7 @@ export function ChatInput({
     minimalStyle = false,
     onMinimalStyleChange = () => {},
 }: ChatInputProps) {
+    const dict = useDictionary()
     const {
         diagramHistory,
         saveDiagramToFile,
@@ -165,7 +185,6 @@ export function ChatInput({
     const fileInputRef = useRef<HTMLInputElement>(null)
     const [isDragging, setIsDragging] = useState(false)
     const [showClearDialog, setShowClearDialog] = useState(false)
-
     // Allow retry when there's an error (even if status is still "streaming" or "submitted")
     const isDisabled =
         (status === "streaming" || status === "submitted") && !error
@@ -177,7 +196,6 @@ export function ChatInput({
             textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`
         }
     }, [])
-
     // Handle programmatic input changes (e.g., setInput("") after form submission)
     useEffect(() => {
         adjustTextareaHeight()
@@ -224,8 +242,9 @@ export function ChatInput({
             const { validFiles, errors } = validateFiles(
                 imageFiles,
                 files.length,
+                dict,
             )
-            showValidationErrors(errors)
+            showValidationErrors(errors, dict)
             if (validFiles.length > 0) {
                 onFileChange([...files, ...validFiles])
             }
@@ -234,12 +253,16 @@ export function ChatInput({
 
     const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const newFiles = Array.from(e.target.files || [])
-        const { validFiles, errors } = validateFiles(newFiles, files.length)
-        showValidationErrors(errors)
+        const { validFiles, errors } = validateFiles(
+            newFiles,
+            files.length,
+            dict,
+        )
+        showValidationErrors(errors, dict)
         if (validFiles.length > 0) {
             onFileChange([...files, ...validFiles])
         }
-        // Reset input so same file can be selected again
+
         if (fileInputRef.current) {
             fileInputRef.current.value = ""
         }
@@ -283,8 +306,9 @@ export function ChatInput({
         const { validFiles, errors } = validateFiles(
             supportedFiles,
             files.length,
+            dict,
         )
-        showValidationErrors(errors)
+        showValidationErrors(errors, dict)
         if (validFiles.length > 0) {
             onFileChange([...files, ...validFiles])
         }
@@ -317,8 +341,6 @@ export function ChatInput({
                     />
                 </div>
             )}
-
-            {/* Input container */}
             <div className="relative rounded-2xl border border-border bg-background shadow-sm focus-within:ring-2 focus-within:ring-primary/20 focus-within:border-primary/50 transition-all duration-200">
                 <Textarea
                     ref={textareaRef}
@@ -326,22 +348,20 @@ export function ChatInput({
                     onChange={handleChange}
                     onKeyDown={handleKeyDown}
                     onPaste={handlePaste}
-                    placeholder="Describe your diagram or upload a file..."
+                    placeholder={dict.chat.placeholder}
                     disabled={isDisabled}
                     aria-label="Chat input"
                     className="min-h-[60px] max-h-[200px] resize-none border-0 bg-transparent px-4 py-3 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-muted-foreground/60"
                 />
 
-                {/* Action bar */}
                 <div className="flex items-center justify-between px-3 py-2 border-t border-border/50">
-                    {/* Left actions */}
                     <div className="flex items-center gap-1 overflow-x-hidden">
                         <ButtonWithTooltip
                             type="button"
                             variant="ghost"
                             size="sm"
                             onClick={() => setShowClearDialog(true)}
-                            tooltipContent="Clear conversation"
+                            tooltipContent={dict.chat.clearConversation}
                             className="h-8 w-8 p-0 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
                         >
                             <Trash2 className="h-4 w-4" />
@@ -375,17 +395,18 @@ export function ChatInput({
                                                 : "text-muted-foreground"
                                         }`}
                                     >
-                                        {minimalStyle ? "Minimal" : "Styled"}
+                                        {minimalStyle
+                                            ? dict.chat.minimalStyle
+                                            : dict.chat.styledMode}
                                     </label>
                                 </div>
                             </TooltipTrigger>
                             <TooltipContent side="top">
-                                Use minimal for faster generation (no colors)
+                                {dict.chat.minimalTooltip}
                             </TooltipContent>
                         </Tooltip>
                     </div>
 
-                    {/* Right actions */}
                     <div className="flex items-center gap-1 overflow-hidden justify-end">
                         <ButtonWithTooltip
                             type="button"
@@ -393,7 +414,7 @@ export function ChatInput({
                             size="sm"
                             onClick={() => onToggleHistory(true)}
                             disabled={isDisabled || diagramHistory.length === 0}
-                            tooltipContent="Diagram history"
+                            tooltipContent={dict.chat.diagramHistory}
                             className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
                         >
                             <History className="h-4 w-4" />
@@ -405,7 +426,7 @@ export function ChatInput({
                             size="sm"
                             onClick={() => setShowSaveDialog(true)}
                             disabled={isDisabled}
-                            tooltipContent="Save diagram"
+                            tooltipContent={dict.chat.saveDiagram}
                             className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
                         >
                             <Download className="h-4 w-4" />
@@ -428,7 +449,7 @@ export function ChatInput({
                             size="sm"
                             onClick={triggerFileInput}
                             disabled={isDisabled}
-                            tooltipContent="Upload file (image, PDF, text)"
+                            tooltipContent={dict.chat.uploadFile}
                             className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
                         >
                             <ImageIcon className="h-4 w-4" />
@@ -452,7 +473,7 @@ export function ChatInput({
                             size="sm"
                             className="h-8 px-4 rounded-xl font-medium shadow-sm"
                             aria-label={
-                                isDisabled ? "Sending..." : "Send message"
+                                isDisabled ? dict.chat.sending : dict.chat.send
                             }
                         >
                             {isDisabled ? (
@@ -460,7 +481,7 @@ export function ChatInput({
                             ) : (
                                 <>
                                     <Send className="h-4 w-4 mr-1.5" />
-                                    Send
+                                    {dict.chat.send}
                                 </>
                             )}
                         </Button>
diff --git a/components/chat-panel.tsx b/components/chat-panel.tsx
index ea38392..70b3030 100644
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -21,6 +21,7 @@ import { ChatInput } from "@/components/chat-input"
 import { ResetWarningModal } from "@/components/reset-warning-modal"
 import { SettingsDialog } from "@/components/settings-dialog"
 import { useDiagram } from "@/contexts/diagram-context"
+import { useDictionary } from "@/hooks/use-dictionary"
 import { getAIConfig } from "@/lib/ai-config"
 import { findCachedResponse } from "@/lib/cached-responses"
 import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
@@ -28,6 +29,7 @@ import { type FileData, useFileProcessor } from "@/lib/use-file-processor"
 import { useQuotaManager } from "@/lib/use-quota-manager"
 import { formatXML, isMxCellXmlComplete, wrapWithMxFile } from "@/lib/utils"
 import { ChatMessageDisplay } from "./chat-message-display"
+import LanguageToggle from "./language-toggle"
 
 // localStorage keys for persistence
 const STORAGE_MESSAGES_KEY = "next-ai-draw-io-messages"
@@ -111,6 +113,8 @@ export default function ChatPanel({
         clearDiagram,
     } = useDiagram()
 
+    const dict = useDictionary()
+
     const onFetchChart = (saveToHistory = true) => {
         return Promise.race([
             new Promise<string>((resolve) => {
@@ -1271,9 +1275,9 @@ Continue from EXACTLY where you stopped.`,
                             </Link>
                         )}
                     </div>
-                    <div className="flex items-center gap-1 justify-end overflow-x-hidden">
+                    <div className="flex items-center gap-1 justify-end overflow-visible">
                         <ButtonWithTooltip
-                            tooltipContent="Start fresh chat"
+                            tooltipContent={dict.nav.newChat}
                             variant="ghost"
                             size="icon"
                             onClick={() => setShowNewChatDialog(true)}
@@ -1295,7 +1299,7 @@ Continue from EXACTLY where you stopped.`,
                             />
                         </a>
                         <ButtonWithTooltip
-                            tooltipContent="Settings"
+                            tooltipContent={dict.nav.settings}
                             variant="ghost"
                             size="icon"
                             onClick={() => setShowSettingsDialog(true)}
@@ -1305,17 +1309,20 @@ Continue from EXACTLY where you stopped.`,
                                 className={`${isMobile ? "h-4 w-4" : "h-5 w-5"} text-muted-foreground`}
                             />
                         </ButtonWithTooltip>
-                        {!isMobile && (
-                            <ButtonWithTooltip
-                                tooltipContent="Hide chat panel (Ctrl+B)"
-                                variant="ghost"
-                                size="icon"
-                                onClick={onToggleVisibility}
-                                className="hover:bg-accent"
-                            >
-                                <PanelRightClose className="h-5 w-5 text-muted-foreground" />
-                            </ButtonWithTooltip>
-                        )}
+                        <div className="hidden sm:flex items-center gap-2">
+                            <LanguageToggle />
+                            {!isMobile && (
+                                <ButtonWithTooltip
+                                    tooltipContent={dict.nav.hidePanel}
+                                    variant="ghost"
+                                    size="icon"
+                                    className="hover:bg-accent"
+                                    onClick={onToggleVisibility}
+                                >
+                                    <PanelRightClose className="h-5 w-5 text-muted-foreground" />
+                                </ButtonWithTooltip>
+                            )}
+                        </div>
                     </div>
                 </div>
             </header>
diff --git a/components/file-preview-list.tsx b/components/file-preview-list.tsx
index 0cc07f1..509873e 100644
--- a/components/file-preview-list.tsx
+++ b/components/file-preview-list.tsx
@@ -3,6 +3,7 @@
 import { FileCode, FileText, Loader2, X } from "lucide-react"
 import Image from "next/image"
 import { useEffect, useRef, useState } from "react"
+import { useDictionary } from "@/hooks/use-dictionary"
 import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
 
 function formatCharCount(count: number): string {
@@ -26,10 +27,10 @@ export function FilePreviewList({
     onRemoveFile,
     pdfData = new Map(),
 }: FilePreviewListProps) {
+    const dict = useDictionary()
     const [selectedImage, setSelectedImage] = useState<string | null>(null)
     const [imageUrls, setImageUrls] = useState<Map<File, string>>(new Map())
     const imageUrlsRef = useRef<Map<File, string>>(new Map())
-
     // Create and cleanup object URLs when files change
     useEffect(() => {
         const currentUrls = imageUrlsRef.current
@@ -46,7 +47,6 @@ export function FilePreviewList({
                 }
             }
         })
-
         // Revoke URLs for files that are no longer in the list
         currentUrls.forEach((url, file) => {
             if (!newUrls.has(file)) {
@@ -57,7 +57,6 @@ export function FilePreviewList({
         imageUrlsRef.current = newUrls
         setImageUrls(newUrls)
     }, [files])
-
     // Cleanup all URLs on unmount only
     useEffect(() => {
         return () => {
@@ -68,7 +67,6 @@ export function FilePreviewList({
             imageUrlsRef.current = new Map()
         }
     }, [])
-
     // Clear selected image if its URL was revoked
     useEffect(() => {
         if (
@@ -126,14 +124,14 @@ export function FilePreviewList({
                                         </span>
                                         {pdfInfo?.isExtracting ? (
                                             <span className="text-[10px] text-muted-foreground">
-                                                Reading...
+                                                {dict.file.reading}
                                             </span>
                                         ) : pdfInfo?.charCount ? (
                                             <span className="text-[10px] text-green-600 font-medium">
                                                 {formatCharCount(
                                                     pdfInfo.charCount,
                                                 )}{" "}
-                                                chars
+                                                {dict.file.chars}
                                             </span>
                                         ) : null}
                                     </div>
@@ -147,7 +145,7 @@ export function FilePreviewList({
                                 type="button"
                                 onClick={() => onRemoveFile(file)}
                                 className="absolute -top-2 -right-2 bg-destructive rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
-                                aria-label="Remove file"
+                                aria-label={dict.file.removeFile}
                             >
                                 <X className="h-3 w-3" />
                             </button>
@@ -155,7 +153,6 @@ export function FilePreviewList({
                     )
                 })}
             </div>
-
             {/* Image Modal/Lightbox */}
             {selectedImage && (
                 <div
@@ -165,7 +162,7 @@ export function FilePreviewList({
                     <button
                         className="absolute top-4 right-4 z-10 bg-white rounded-full p-2 hover:bg-gray-200 transition-colors"
                         onClick={() => setSelectedImage(null)}
-                        aria-label="Close"
+                        aria-label={dict.common.close}
                     >
                         <X className="h-6 w-6" />
                     </button>
diff --git a/components/history-dialog.tsx b/components/history-dialog.tsx
index 6db5f59..3ba6068 100644
--- a/components/history-dialog.tsx
+++ b/components/history-dialog.tsx
@@ -12,6 +12,8 @@ import {
     DialogTitle,
 } from "@/components/ui/dialog"
 import { useDiagram } from "@/contexts/diagram-context"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { formatMessage } from "@/lib/i18n/utils"
 
 interface HistoryDialogProps {
     showHistory: boolean
@@ -22,6 +24,7 @@ export function HistoryDialog({
     showHistory,
     onToggleHistory,
 }: HistoryDialogProps) {
+    const dict = useDictionary()
     const { loadDiagram: onDisplayChart, diagramHistory } = useDiagram()
     const [selectedIndex, setSelectedIndex] = useState<number | null>(null)
 
@@ -42,18 +45,15 @@ export function HistoryDialog({
         <Dialog open={showHistory} onOpenChange={onToggleHistory}>
             <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
                 <DialogHeader>
-                    <DialogTitle>Diagram History</DialogTitle>
+                    <DialogTitle>{dict.history.title}</DialogTitle>
                     <DialogDescription>
-                        Here saved each diagram before AI modification.
-                        <br />
-                        Click on a diagram to restore it
+                        {dict.history.description}
                     </DialogDescription>
                 </DialogHeader>
 
                 {diagramHistory.length === 0 ? (
                     <div className="text-center p-4 text-gray-500">
-                        No history available yet. Send messages to create
-                        diagram history.
+                        {dict.history.noHistory}
                     </div>
                 ) : (
                     <div className="grid grid-cols-2 md:grid-cols-3 gap-4 py-4">
@@ -70,14 +70,14 @@ export function HistoryDialog({
                                 <div className="aspect-video bg-white rounded overflow-hidden flex items-center justify-center">
                                     <Image
                                         src={item.svg}
-                                        alt={`Diagram version ${index + 1}`}
+                                        alt={`${dict.history.version} ${index + 1}`}
                                         width={200}
                                         height={100}
                                         className="object-contain w-full h-full p-1"
                                     />
                                 </div>
                                 <div className="text-xs text-center mt-1 text-gray-500">
-                                    Version {index + 1}
+                                    {dict.history.version} {index + 1}
                                 </div>
                             </div>
                         ))}
@@ -88,21 +88,23 @@ export function HistoryDialog({
                     {selectedIndex !== null ? (
                         <>
                             <div className="flex-1 text-sm text-muted-foreground">
-                                Restore to Version {selectedIndex + 1}?
+                                {formatMessage(dict.history.restoreTo, {
+                                    version: selectedIndex + 1,
+                                })}
                             </div>
                             <Button
                                 variant="outline"
                                 onClick={() => setSelectedIndex(null)}
                             >
-                                Cancel
+                                {dict.common.cancel}
                             </Button>
                             <Button onClick={handleConfirmRestore}>
-                                Confirm
+                                {dict.common.confirm}
                             </Button>
                         </>
                     ) : (
                         <Button variant="outline" onClick={handleClose}>
-                            Close
+                            {dict.common.close}
                         </Button>
                     )}
                 </DialogFooter>
diff --git a/components/language-toggle.tsx b/components/language-toggle.tsx
new file mode 100644
index 0000000..5ef6c93
--- /dev/null
+++ b/components/language-toggle.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import { Globe } from "lucide-react"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { Suspense, useEffect, useRef, useState } from "react"
+import { i18n, type Locale } from "@/lib/i18n/config"
+
+const LABELS: Record<string, string> = {
+    en: "EN",
+    zh: "中文",
+    ja: "日本語",
+}
+
+function LanguageToggleInner({ className = "" }: { className?: string }) {
+    const router = useRouter()
+    const pathname = usePathname() || "/"
+    const search = useSearchParams()
+    const [open, setOpen] = useState(false)
+    const [value, setValue] = useState<Locale>(i18n.defaultLocale)
+    const ref = useRef<HTMLDivElement | null>(null)
+
+    useEffect(() => {
+        const seg = pathname.split("/").filter(Boolean)
+        const first = seg[0]
+        if (first && i18n.locales.includes(first as Locale))
+            setValue(first as Locale)
+        else setValue(i18n.defaultLocale)
+    }, [pathname])
+
+    useEffect(() => {
+        function onDoc(e: MouseEvent) {
+            if (!ref.current) return
+            if (!ref.current.contains(e.target as Node)) setOpen(false)
+        }
+        if (open) document.addEventListener("mousedown", onDoc)
+        return () => document.removeEventListener("mousedown", onDoc)
+    }, [open])
+
+    const changeLocale = (lang: string) => {
+        const parts = pathname.split("/")
+        if (parts.length > 1 && i18n.locales.includes(parts[1] as Locale)) {
+            parts[1] = lang
+        } else {
+            parts.splice(1, 0, lang)
+        }
+        const newPath = parts.join("/") || "/"
+        const searchStr = search?.toString() ? `?${search.toString()}` : ""
+        setOpen(false)
+        router.push(newPath + searchStr)
+    }
+
+    return (
+        <div className={`relative inline-flex ${className}`} ref={ref}>
+            <button
+                aria-haspopup="menu"
+                aria-expanded={open}
+                onClick={() => setOpen((s) => !s)}
+                className="p-2 rounded-full hover:bg-accent/20 transition-colors text-muted-foreground"
+                aria-label="Change language"
+            >
+                <Globe className="w-5 h-5" />
+            </button>
+            {open && (
+                <div className="absolute right-0 top-full mt-2 w-40 bg-popover dark:bg-popover text-popover-foreground rounded-xl shadow-md border border-border/30 overflow-hidden z-50">
+                    <div className="grid gap-0 divide-y divide-border/30">
+                        {i18n.locales.map((loc) => (
+                            <button
+                                key={loc}
+                                onClick={() => changeLocale(loc)}
+                                className={`flex items-center gap-2 px-4 py-2 text-sm w-full text-left hover:bg-accent/10 transition-colors ${value === loc ? "bg-accent/10 font-semibold" : ""}`}
+                            >
+                                <span className="flex-1">
+                                    {LABELS[loc] ?? loc}
+                                </span>
+                                {value === loc && (
+                                    <span className="text-xs opacity-70">
+                                        ✓
+                                    </span>
+                                )}
+                            </button>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default function LanguageToggle({
+    className = "",
+}: {
+    className?: string
+}) {
+    return (
+        <Suspense
+            fallback={
+                <button
+                    className="p-2 rounded-full text-muted-foreground opacity-50"
+                    disabled
+                >
+                    <Globe className="w-5 h-5" />
+                </button>
+            }
+        >
+            <LanguageToggleInner className={className} />
+        </Suspense>
+    )
+}
diff --git a/components/quota-limit-toast.tsx b/components/quota-limit-toast.tsx
index 812583b..566a666 100644
--- a/components/quota-limit-toast.tsx
+++ b/components/quota-limit-toast.tsx
@@ -4,6 +4,8 @@ import { Coffee, X } from "lucide-react"
 import Link from "next/link"
 import type React from "react"
 import { FaGithub } from "react-icons/fa"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { formatMessage } from "@/lib/i18n/utils"
 
 interface QuotaLimitToastProps {
     type?: "request" | "token"
@@ -18,9 +20,11 @@ export function QuotaLimitToast({
     limit,
     onDismiss,
 }: QuotaLimitToastProps) {
+    const dict = useDictionary()
     const isTokenLimit = type === "token"
     const formatNumber = (n: number) =>
         n >= 1000 ? `${(n / 1000).toFixed(1)}k` : n.toString()
+
     const handleKeyDown = (e: React.KeyboardEvent) => {
         if (e.key === "Escape") {
             e.preventDefault()
@@ -44,7 +48,6 @@ export function QuotaLimitToast({
             >
                 <X className="w-4 h-4" />
             </button>
-
             {/* Title row with icon */}
             <div className="flex items-center gap-2.5 mb-3 pr-6">
                 <div className="flex-shrink-0 w-8 h-8 rounded-lg bg-accent flex items-center justify-center">
@@ -55,40 +58,26 @@ export function QuotaLimitToast({
                 </div>
                 <h3 className="font-semibold text-foreground text-sm">
                     {isTokenLimit
-                        ? "Daily Token Limit Reached"
-                        : "Daily Quota Reached"}
+                        ? dict.quota.tokenLimit
+                        : dict.quota.dailyLimit}
                 </h3>
                 <span className="px-2 py-0.5 text-xs font-medium rounded-md bg-muted text-muted-foreground">
-                    {isTokenLimit
-                        ? `${formatNumber(used)}/${formatNumber(limit)} tokens`
-                        : `${used}/${limit}`}
+                    {formatMessage(dict.quota.usedOf, {
+                        used: formatNumber(used),
+                        limit: formatNumber(limit),
+                    })}
                 </span>
             </div>
-
             {/* Message */}
             <div className="text-sm text-muted-foreground leading-relaxed mb-4 space-y-2">
                 <p>
-                    Oops — you've reached the daily{" "}
-                    {isTokenLimit ? "token" : "API"} limit for this demo! As an
-                    indie developer covering all the API costs myself, I have to
-                    set these limits to keep things sustainable.{" "}
-                    <Link
-                        href="/about"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="inline-flex items-center gap-1 text-amber-600 font-medium hover:text-amber-700 hover:underline"
-                    >
-                        Learn more →
-                    </Link>
+                    {isTokenLimit
+                        ? dict.quota.messageToken
+                        : dict.quota.messageApi}
                 </p>
-                <p>
-                    <strong>Tip:</strong> You can use your own API key (click
-                    the Settings icon) or self-host the project to bypass these
-                    limits.
-                </p>
-                <p>Your limit resets tomorrow. Thanks for understanding!</p>
-            </div>
-
+                <p dangerouslySetInnerHTML={{ __html: dict.quota.tip }} />
+                <p>{dict.quota.reset}</p>
+            </div>{" "}
             {/* Action buttons */}
             <div className="flex items-center gap-2">
                 <a
@@ -98,7 +87,7 @@ export function QuotaLimitToast({
                     className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
                 >
                     <FaGithub className="w-3.5 h-3.5" />
-                    Self-host
+                    {dict.quota.selfHost}
                 </a>
                 <a
                     href="https://github.com/sponsors/DayuanJiang"
@@ -107,7 +96,7 @@ export function QuotaLimitToast({
                     className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-border text-foreground hover:bg-muted transition-colors"
                 >
                     <Coffee className="w-3.5 h-3.5" />
-                    Sponsor
+                    {dict.quota.sponsor}
                 </a>
             </div>
         </div>
diff --git a/components/reset-warning-modal.tsx b/components/reset-warning-modal.tsx
index 62c4ad1..84cef0e 100644
--- a/components/reset-warning-modal.tsx
+++ b/components/reset-warning-modal.tsx
@@ -9,6 +9,7 @@ import {
     DialogHeader,
     DialogTitle,
 } from "@/components/ui/dialog"
+import { useDictionary } from "@/hooks/use-dictionary"
 
 interface ResetWarningModalProps {
     open: boolean
@@ -21,14 +22,15 @@ export function ResetWarningModal({
     onOpenChange,
     onClear,
 }: ResetWarningModalProps) {
+    const dict = useDictionary()
+
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent>
                 <DialogHeader>
-                    <DialogTitle>Clear Everything?</DialogTitle>
+                    <DialogTitle>{dict.dialogs.clearTitle}</DialogTitle>
                     <DialogDescription>
-                        This will clear the current conversation and reset the
-                        diagram. This action cannot be undone.
+                        {dict.dialogs.clearDescription}
                     </DialogDescription>
                 </DialogHeader>
                 <DialogFooter>
@@ -36,10 +38,10 @@ export function ResetWarningModal({
                         variant="outline"
                         onClick={() => onOpenChange(false)}
                     >
-                        Cancel
+                        {dict.common.cancel}
                     </Button>
                     <Button variant="destructive" onClick={onClear}>
-                        Clear Everything
+                        {dict.dialogs.clearEverything}
                     </Button>
                 </DialogFooter>
             </DialogContent>
diff --git a/components/save-dialog.tsx b/components/save-dialog.tsx
index 8204e20..205aa82 100644
--- a/components/save-dialog.tsx
+++ b/components/save-dialog.tsx
@@ -18,19 +18,10 @@ import {
     SelectTrigger,
     SelectValue,
 } from "@/components/ui/select"
+import { useDictionary } from "@/hooks/use-dictionary"
 
 export type ExportFormat = "drawio" | "png" | "svg"
 
-const FORMAT_OPTIONS: {
-    value: ExportFormat
-    label: string
-    extension: string
-}[] = [
-    { value: "drawio", label: "Draw.io XML", extension: ".drawio" },
-    { value: "png", label: "PNG Image", extension: ".png" },
-    { value: "svg", label: "SVG Image", extension: ".svg" },
-]
-
 interface SaveDialogProps {
     open: boolean
     onOpenChange: (open: boolean) => void
@@ -44,6 +35,7 @@ export function SaveDialog({
     onSave,
     defaultFilename,
 }: SaveDialogProps) {
+    const dict = useDictionary()
     const [filename, setFilename] = useState(defaultFilename)
     const [format, setFormat] = useState<ExportFormat>("drawio")
 
@@ -66,20 +58,40 @@ export function SaveDialog({
         }
     }
 
+    const FORMAT_OPTIONS = [
+        {
+            value: "drawio" as const,
+            label: dict.save.formats.drawio,
+            extension: ".drawio",
+        },
+        {
+            value: "png" as const,
+            label: dict.save.formats.png,
+            extension: ".png",
+        },
+        {
+            value: "svg" as const,
+            label: dict.save.formats.svg,
+            extension: ".svg",
+        },
+    ]
+
     const currentFormat = FORMAT_OPTIONS.find((f) => f.value === format)
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent className="sm:max-w-md">
                 <DialogHeader>
-                    <DialogTitle>Save Diagram</DialogTitle>
+                    <DialogTitle>{dict.save.title}</DialogTitle>
                     <DialogDescription>
-                        Choose a format and filename to save your diagram.
+                        {dict.save.description}
                     </DialogDescription>
                 </DialogHeader>
                 <div className="space-y-4">
                     <div className="space-y-2">
-                        <label className="text-sm font-medium">Format</label>
+                        <label className="text-sm font-medium">
+                            {dict.save.format}
+                        </label>
                         <Select
                             value={format}
                             onValueChange={(v) => setFormat(v as ExportFormat)}
@@ -100,13 +112,15 @@ export function SaveDialog({
                         </Select>
                     </div>
                     <div className="space-y-2">
-                        <label className="text-sm font-medium">Filename</label>
+                        <label className="text-sm font-medium">
+                            {dict.save.filename}
+                        </label>
                         <div className="flex items-stretch">
                             <Input
                                 value={filename}
                                 onChange={(e) => setFilename(e.target.value)}
                                 onKeyDown={handleKeyDown}
-                                placeholder="Enter filename"
+                                placeholder={dict.save.filenamePlaceholder}
                                 autoFocus
                                 onFocus={(e) => e.target.select()}
                                 className="rounded-r-none border-r-0 focus-visible:z-10"
@@ -122,9 +136,9 @@ export function SaveDialog({
                         variant="outline"
                         onClick={() => onOpenChange(false)}
                     >
-                        Cancel
+                        {dict.common.cancel}
                     </Button>
-                    <Button onClick={handleSave}>Save</Button>
+                    <Button onClick={handleSave}>{dict.common.save}</Button>
                 </DialogFooter>
             </DialogContent>
         </Dialog>
diff --git a/components/settings-dialog.tsx b/components/settings-dialog.tsx
index 30381f5..17bcde5 100644
--- a/components/settings-dialog.tsx
+++ b/components/settings-dialog.tsx
@@ -20,6 +20,7 @@ import {
     SelectValue,
 } from "@/components/ui/select"
 import { Switch } from "@/components/ui/switch"
+import { useDictionary } from "@/hooks/use-dictionary"
 
 interface SettingsDialogProps {
     open: boolean
@@ -55,6 +56,7 @@ export function SettingsDialog({
     darkMode,
     onToggleDarkMode,
 }: SettingsDialogProps) {
+    const dict = useDictionary()
     const [accessCode, setAccessCode] = useState("")
     const [closeProtection, setCloseProtection] = useState(true)
     const [isVerifying, setIsVerifying] = useState(false)
@@ -129,14 +131,14 @@ export function SettingsDialog({
             const data = await response.json()
 
             if (!data.valid) {
-                setError(data.message || "Invalid access code")
+                setError(data.message || dict.errors.invalidAccessCode)
                 return
             }
 
             localStorage.setItem(STORAGE_ACCESS_CODE_KEY, accessCode.trim())
             onOpenChange(false)
         } catch {
-            setError("Failed to verify access code")
+            setError(dict.errors.networkError)
         } finally {
             setIsVerifying(false)
         }
@@ -153,15 +155,17 @@ export function SettingsDialog({
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent className="sm:max-w-md">
                 <DialogHeader>
-                    <DialogTitle>Settings</DialogTitle>
+                    <DialogTitle>{dict.settings.title}</DialogTitle>
                     <DialogDescription>
-                        Configure your application settings.
+                        {dict.settings.description}
                     </DialogDescription>
                 </DialogHeader>
                 <div className="space-y-4 py-2">
                     {accessCodeRequired && (
                         <div className="space-y-2">
-                            <Label htmlFor="access-code">Access Code</Label>
+                            <Label htmlFor="access-code">
+                                {dict.settings.accessCode}
+                            </Label>
                             <div className="flex gap-2">
                                 <Input
                                     id="access-code"
@@ -171,18 +175,20 @@ export function SettingsDialog({
                                         setAccessCode(e.target.value)
                                     }
                                     onKeyDown={handleKeyDown}
-                                    placeholder="Enter access code"
+                                    placeholder={
+                                        dict.settings.accessCodePlaceholder
+                                    }
                                     autoComplete="off"
                                 />
                                 <Button
                                     onClick={handleSave}
                                     disabled={isVerifying || !accessCode.trim()}
                                 >
-                                    {isVerifying ? "..." : "Save"}
+                                    {isVerifying ? "..." : dict.common.save}
                                 </Button>
                             </div>
                             <p className="text-[0.8rem] text-muted-foreground">
-                                Required to use this application.
+                                {dict.settings.accessCodeDescription}
                             </p>
                             {error && (
                                 <p className="text-[0.8rem] text-destructive">
@@ -192,15 +198,15 @@ export function SettingsDialog({
                         </div>
                     )}
                     <div className="space-y-2">
-                        <Label>AI Provider Settings</Label>
+                        <Label>{dict.settings.aiProvider}</Label>
                         <p className="text-[0.8rem] text-muted-foreground">
-                            Use your own API key to bypass usage limits. Your
-                            key is stored locally in your browser and is never
-                            stored on the server.
+                            {dict.settings.aiProviderDescription}
                         </p>
                         <div className="space-y-3 pt-2">
                             <div className="space-y-2">
-                                <Label htmlFor="ai-provider">Provider</Label>
+                                <Label htmlFor="ai-provider">
+                                    {dict.settings.provider}
+                                </Label>
                                 <Select
                                     value={provider || "default"}
                                     onValueChange={(value) => {
@@ -214,32 +220,36 @@ export function SettingsDialog({
                                     }}
                                 >
                                     <SelectTrigger id="ai-provider">
-                                        <SelectValue placeholder="Use Server Default" />
+                                        <SelectValue
+                                            placeholder={
+                                                dict.settings.useServerDefault
+                                            }
+                                        />
                                     </SelectTrigger>
                                     <SelectContent>
                                         <SelectItem value="default">
-                                            Use Server Default
+                                            {dict.settings.useServerDefault}
                                         </SelectItem>
                                         <SelectItem value="openai">
-                                            OpenAI
+                                            {dict.providers.openai}
                                         </SelectItem>
                                         <SelectItem value="anthropic">
-                                            Anthropic
+                                            {dict.providers.anthropic}
                                         </SelectItem>
                                         <SelectItem value="google">
-                                            Google
+                                            {dict.providers.google}
                                         </SelectItem>
                                         <SelectItem value="azure">
-                                            Azure OpenAI
+                                            {dict.providers.azure}
                                         </SelectItem>
                                         <SelectItem value="openrouter">
-                                            OpenRouter
+                                            {dict.providers.openrouter}
                                         </SelectItem>
                                         <SelectItem value="deepseek">
-                                            DeepSeek
+                                            {dict.providers.deepseek}
                                         </SelectItem>
                                         <SelectItem value="siliconflow">
-                                            SiliconFlow
+                                            {dict.providers.siliconflow}
                                         </SelectItem>
                                     </SelectContent>
                                 </Select>
@@ -248,7 +258,7 @@ export function SettingsDialog({
                                 <>
                                     <div className="space-y-2">
                                         <Label htmlFor="ai-model">
-                                            Model ID
+                                            {dict.settings.modelId}
                                         </Label>
                                         <Input
                                             id="ai-model"
@@ -270,13 +280,14 @@ export function SettingsDialog({
                                                         : provider ===
                                                             "deepseek"
                                                           ? "e.g., deepseek-chat"
-                                                          : "Model ID"
+                                                          : dict.settings
+                                                                .modelId
                                             }
                                         />
                                     </div>
                                     <div className="space-y-2">
                                         <Label htmlFor="ai-api-key">
-                                            API Key
+                                            {dict.settings.apiKey}
                                         </Label>
                                         <Input
                                             id="ai-api-key"
@@ -289,11 +300,13 @@ export function SettingsDialog({
                                                     e.target.value,
                                                 )
                                             }}
-                                            placeholder="Your API key"
+                                            placeholder={
+                                                dict.settings.apiKeyPlaceholder
+                                            }
                                             autoComplete="off"
                                         />
                                         <p className="text-[0.8rem] text-muted-foreground">
-                                            Overrides{" "}
+                                            {dict.settings.overrides}{" "}
                                             {provider === "openai"
                                                 ? "OPENAI_API_KEY"
                                                 : provider === "anthropic"
@@ -316,7 +329,7 @@ export function SettingsDialog({
                                     </div>
                                     <div className="space-y-2">
                                         <Label htmlFor="ai-base-url">
-                                            Base URL (optional)
+                                            {dict.settings.baseUrl}
                                         </Label>
                                         <Input
                                             id="ai-base-url"
@@ -333,7 +346,8 @@ export function SettingsDialog({
                                                     ? "https://api.anthropic.com/v1"
                                                     : provider === "siliconflow"
                                                       ? "https://api.siliconflow.com/v1"
-                                                      : "Custom endpoint URL"
+                                                      : dict.settings
+                                                            .customEndpoint
                                             }
                                         />
                                     </div>
@@ -360,7 +374,7 @@ export function SettingsDialog({
                                             setModelId("")
                                         }}
                                     >
-                                        Clear Settings
+                                        {dict.settings.clearSettings}
                                     </Button>
                                 </>
                             )}
@@ -369,9 +383,11 @@ export function SettingsDialog({
 
                     <div className="flex items-center justify-between">
                         <div className="space-y-0.5">
-                            <Label htmlFor="theme-toggle">Theme</Label>
+                            <Label htmlFor="theme-toggle">
+                                {dict.settings.theme}
+                            </Label>
                             <p className="text-[0.8rem] text-muted-foreground">
-                                Dark/Light mode for interface and DrawIO canvas.
+                                {dict.settings.themeDescription}
                             </p>
                         </div>
                         <Button
@@ -390,10 +406,14 @@ export function SettingsDialog({
 
                     <div className="flex items-center justify-between">
                         <div className="space-y-0.5">
-                            <Label htmlFor="drawio-ui">DrawIO Style</Label>
+                            <Label htmlFor="drawio-ui">
+                                {dict.settings.drawioStyle}
+                            </Label>
                             <p className="text-[0.8rem] text-muted-foreground">
-                                Canvas style:{" "}
-                                {drawioUi === "min" ? "Minimal" : "Sketch"}
+                                {dict.settings.drawioStyleDescription}{" "}
+                                {drawioUi === "min"
+                                    ? dict.settings.minimal
+                                    : dict.settings.sketch}
                             </p>
                         </div>
                         <Button
@@ -402,18 +422,20 @@ export function SettingsDialog({
                             size="sm"
                             onClick={onToggleDrawioUi}
                         >
-                            Switch to{" "}
-                            {drawioUi === "min" ? "Sketch" : "Minimal"}
+                            {dict.settings.switchTo}{" "}
+                            {drawioUi === "min"
+                                ? dict.settings.sketch
+                                : dict.settings.minimal}
                         </Button>
                     </div>
 
                     <div className="flex items-center justify-between">
                         <div className="space-y-0.5">
                             <Label htmlFor="close-protection">
-                                Close Protection
+                                {dict.settings.closeProtection}
                             </Label>
                             <p className="text-[0.8rem] text-muted-foreground">
-                                Show confirmation when leaving the page.
+                                {dict.settings.closeProtectionDescription}
                             </p>
                         </div>
                         <Switch
diff --git a/hooks/use-dictionary.ts b/hooks/use-dictionary.ts
new file mode 100644
index 0000000..42a3db8
--- /dev/null
+++ b/hooks/use-dictionary.ts
@@ -0,0 +1,29 @@
+"use client"
+
+import React, { createContext, useContext } from "react"
+import type { Dictionary } from "@/lib/i18n/dictionaries"
+
+const DictionaryContext = createContext<Dictionary | null>(null)
+
+export function DictionaryProvider({
+    children,
+    dictionary,
+}: React.PropsWithChildren<{ dictionary: Dictionary }>) {
+    return React.createElement(
+        DictionaryContext.Provider,
+        { value: dictionary },
+        children,
+    )
+}
+
+export function useDictionary() {
+    const dict = useContext(DictionaryContext)
+    if (!dict) {
+        throw new Error(
+            "useDictionary must be used within a DictionaryProvider",
+        )
+    }
+    return dict
+}
+
+export default useDictionary
diff --git a/lib/i18n/config.ts b/lib/i18n/config.ts
new file mode 100644
index 0000000..623e13a
--- /dev/null
+++ b/lib/i18n/config.ts
@@ -0,0 +1,6 @@
+export const i18n = {
+    defaultLocale: "en",
+    locales: ["en", "zh", "ja"],
+} as const
+
+export type Locale = (typeof i18n)["locales"][number]
diff --git a/lib/i18n/dictionaries.ts b/lib/i18n/dictionaries.ts
new file mode 100644
index 0000000..4c6d03b
--- /dev/null
+++ b/lib/i18n/dictionaries.ts
@@ -0,0 +1,18 @@
+import "server-only"
+
+import type { Locale } from "./config"
+
+const dictionaries = {
+    en: () => import("./dictionaries/en.json").then((m) => m.default),
+    zh: () => import("./dictionaries/zh.json").then((m) => m.default),
+    ja: () => import("./dictionaries/ja.json").then((m) => m.default),
+}
+
+export type Dictionary = Awaited<ReturnType<(typeof dictionaries)["en"]>>
+
+export const hasLocale = (locale: string): locale is Locale =>
+    locale in dictionaries
+
+export async function getDictionary(locale: Locale): Promise<Dictionary> {
+    return dictionaries[locale]()
+}
diff --git a/lib/i18n/dictionaries/en.json b/lib/i18n/dictionaries/en.json
new file mode 100644
index 0000000..636abf5
--- /dev/null
+++ b/lib/i18n/dictionaries/en.json
@@ -0,0 +1,184 @@
+{
+    "common": {
+        "save": "Save",
+        "cancel": "Cancel",
+        "close": "Close",
+        "confirm": "Confirm",
+        "clear": "Clear",
+        "edit": "Edit",
+        "delete": "Delete",
+        "loading": "Loading..",
+        "new": "NEW"
+    },
+    "nav": {
+        "about": "About",
+        "editor": "Editor",
+        "newChat": "Start fresh chat",
+        "settings": "Settings",
+        "hidePanel": "Hide chat panel (Ctrl+B)",
+        "showPanel": "Show chat panel (Ctrl+B)",
+        "aiChat": "AI Chat"
+    },
+    "providers": {
+        "useServerDefault": "Use Server Default",
+        "openai": "OpenAI",
+        "anthropic": "Anthropic",
+        "google": "Google",
+        "azure": "Azure OpenAI",
+        "openrouter": "OpenRouter",
+        "deepseek": "DeepSeek",
+        "siliconflow": "SiliconFlow"
+    },
+    "chat": {
+        "placeholder": "Describe your diagram or upload a file...",
+        "send": "Send",
+        "sending": "Sending...",
+        "sendMessage": "Send message",
+        "clearConversation": "Clear conversation",
+        "diagramHistory": "Diagram history",
+        "saveDiagram": "Save diagram",
+        "uploadFile": "Upload file (image, PDF, text)",
+        "minimalStyle": "Minimal",
+        "styledMode": "Styled",
+        "minimalTooltip": "Use minimal for faster generation (no colors)",
+        "regenerate": "Regenerate response",
+        "copyResponse": "Copy response",
+        "copied": "Copied!",
+        "failedToCopy": "Failed to copy",
+        "goodResponse": "Good response",
+        "badResponse": "Bad response",
+        "clickToEdit": "Click to edit",
+        "editMessage": "Edit message",
+        "saveAndSubmit": "Save & Submit"
+    },
+    "examples": {
+        "title": "Create diagrams with AI",
+        "subtitle": "Describe what you want to create or upload an image to replicate",
+        "quickExamples": "Quick Examples",
+        "paperToDiagram": "Paper to Diagram",
+        "paperDescription": "Upload .pdf, .txt, .md, .json, .csv, .py, .js, .ts and more",
+        "animatedDiagram": "Animated Diagram",
+        "animatedDescription": "Draw a transformer architecture with animated connectors",
+        "awsArchitecture": "AWS Architecture",
+        "awsDescription": "Create a cloud architecture diagram with AWS icons",
+        "replicateFlowchart": "Replicate Flowchart",
+        "replicateDescription": "Upload and replicate an existing flowchart",
+        "creativeDrawing": "Creative Drawing",
+        "creativeDescription": "Draw something fun and creative",
+        "cachedNote": "Examples are cached for instant response",
+        "mcpServer": "MCP Server",
+        "mcpDescription": "Use in Claude Desktop, VS Code & Cursor",
+        "preview": "PREVIEW"
+    },
+    "settings": {
+        "title": "Settings",
+        "description": "Configure your application settings.",
+        "accessCode": "Access Code",
+        "accessCodePlaceholder": "Enter access code",
+        "accessCodeDescription": "Required to use this application.",
+        "aiProvider": "AI Provider Settings",
+        "aiProviderDescription": "Use your own API key to bypass usage limits. Your key is stored locally in your browser and is never stored on the server.",
+        "provider": "Provider",
+        "modelId": "Model ID",
+        "apiKey": "API Key",
+        "apiKeyPlaceholder": "Your API key",
+        "baseUrl": "Base URL (optional)",
+        "customEndpoint": "Custom endpoint URL",
+        "overrides": "Overrides",
+        "clearSettings": "Clear Settings",
+        "useServerDefault": "Use Server Default",
+        "theme": "Theme",
+        "themeDescription": "Dark/Light mode for interface and DrawIO canvas.",
+        "drawioStyle": "DrawIO Style",
+        "drawioStyleDescription": "Canvas style:",
+        "switchTo": "Switch to",
+        "minimal": "Minimal",
+        "sketch": "Sketch",
+        "closeProtection": "Close Protection",
+        "closeProtectionDescription": "Show confirmation when leaving the page."
+    },
+    "save": {
+        "title": "Save Diagram",
+        "description": "Choose a format and filename to save your diagram.",
+        "format": "Format",
+        "filename": "Filename",
+        "filenamePlaceholder": "Enter filename",
+        "formats": {
+            "drawio": "Draw.io XML",
+            "png": "PNG Image",
+            "svg": "SVG Image"
+        }
+    },
+    "history": {
+        "title": "Diagram History",
+        "description": "Here saved each diagram before AI modification.\nClick on a diagram to restore it",
+        "noHistory": "No history available yet. Send messages to create diagram history.",
+        "version": "Version",
+        "restoreTo": "Restore to Version {version}?"
+    },
+    "dialogs": {
+        "clearTitle": "Clear Everything?",
+        "clearDescription": "This will clear the current conversation and reset the diagram. This action cannot be undone.",
+        "clearEverything": "Clear Everything",
+        "clearSuccess": "Started a fresh chat"
+    },
+    "errors": {
+        "maxFiles": "Too many files. Maximum {max} allowed.",
+        "onlyMoreAllowed": "Only {slots} more file(s) allowed",
+        "fileExceeds": "\"{name}\" is {size} (exceeds {max}MB)",
+        "unsupportedType": "\"{name}\" is not a supported file type",
+        "filesRejected": "{count} files rejected:",
+        "andMore": "...and {count} more",
+        "invalidAccessCode": "Invalid or missing access code. Please configure it in Settings.",
+        "networkError": "Network error. Please check your connection.",
+        "retryLimit": "Auto-retry limit reached ({max}). Please try again manually.",
+        "validationFailed": "Diagram validation failed. Please try regenerating.",
+        "malformedXml": "AI generated invalid diagram XML. Please try regenerating.",
+        "failedToProcess": "Failed to process diagram. Please try regenerating.",
+        "sessionCorrupted": "Session data was corrupted. Starting fresh.",
+        "failedToSave": "Failed to save messages to localStorage",
+        "failedToRestore": "Failed to restore from localStorage",
+        "failedToPersist": "Failed to persist state before unload",
+        "failedToExport": "Error fetching chart data",
+        "failedToLoadExample": "Error loading example image"
+    },
+    "quota": {
+        "dailyLimit": "Daily Quota Reached",
+        "tokenLimit": "Daily Token Limit Reached",
+        "tpmLimit": "Rate Limit",
+        "tpmMessage": "Too many requests. Please wait a moment.",
+        "messageApi": "Oops — you've reached the daily API limit for this demo! As an indie developer covering all the API costs myself, I have to set these limits to keep things sustainable.",
+        "messageToken": "Oops — you've reached the daily token limit for this demo! As an indie developer covering all the API costs myself, I have to set these limits to keep things sustainable.",
+        "tip": "<strong>Tip:</strong> You can use your own API key (click the Settings icon) or self-host the project to bypass these limits.",
+        "reset": "Your limit resets tomorrow. Thanks for understanding!",
+        "selfHost": "Self-host",
+        "sponsor": "Sponsor",
+        "learnMore": "Learn more →",
+        "usedOf": "{used}/{limit}"
+    },
+    "tools": {
+        "generateDiagram": "Generate Diagram",
+        "editDiagram": "Edit Diagram",
+        "appendDiagram": "Continue Diagram",
+        "complete": "Complete",
+        "error": "Error",
+        "truncated": "Truncated"
+    },
+    "file": {
+        "reading": "Reading...",
+        "chars": "chars",
+        "removeFile": "Remove file"
+    },
+    "reasoning": {
+        "thinking": "Thinking...",
+        "thoughtFor": "Thought for {duration} seconds",
+        "thoughtBrief": "Thought for a few seconds"
+    },
+    "about": {
+        "modelChange": "Model Change & Usage Limits",
+        "walletCrying": "(Or: Why My Wallet is Crying)",
+        "seekingSponsorship": "Call for Sponsorship",
+        "contactMe": "Contact Me",
+        "usageNotice": "Due to high usage, I have changed the model from Claude to minimax-m2 and added some usage limits. See About page for details."
+    }
+}
diff --git a/lib/i18n/dictionaries/ja.json b/lib/i18n/dictionaries/ja.json
new file mode 100644
index 0000000..0e9f806
--- /dev/null
+++ b/lib/i18n/dictionaries/ja.json
@@ -0,0 +1,184 @@
+{
+    "common": {
+        "save": "保存",
+        "cancel": "キャンセル",
+        "close": "閉じる",
+        "confirm": "確認",
+        "clear": "クリア",
+        "edit": "編集",
+        "delete": "削除",
+        "loading": "読み込み中..",
+        "new": "新規"
+    },
+    "nav": {
+        "about": "概要",
+        "editor": "エディタ",
+        "newChat": "新しいチャットを開始",
+        "settings": "設定",
+        "hidePanel": "チャットパネルを非表示 (Ctrl+B)",
+        "showPanel": "チャットパネルを表示 (Ctrl+B)",
+        "aiChat": "AI チャット"
+    },
+    "providers": {
+        "useServerDefault": "サーバーデフォルトを使用",
+        "openai": "OpenAI",
+        "anthropic": "Anthropic",
+        "google": "Google",
+        "azure": "Azure OpenAI",
+        "openrouter": "OpenRouter",
+        "deepseek": "DeepSeek",
+        "siliconflow": "SiliconFlow"
+    },
+    "chat": {
+        "placeholder": "ダイアグラムを説明するか、ファイルをアップロード...",
+        "send": "送信",
+        "sending": "送信中...",
+        "sendMessage": "メッセージを送信",
+        "clearConversation": "会話をクリア",
+        "diagramHistory": "ダイアグラム履歴",
+        "saveDiagram": "ダイアグラムを保存",
+        "uploadFile": "ファイルをアップロード（画像、PDF、テキスト）",
+        "minimalStyle": "ミニマル",
+        "styledMode": "スタイル付き",
+        "minimalTooltip": "高速生成のためミニマルを使用（色なし）",
+        "regenerate": "応答を再生成",
+        "copyResponse": "応答をコピー",
+        "copied": "コピーしました！",
+        "failedToCopy": "コピーに失敗しました",
+        "goodResponse": "良い応答",
+        "badResponse": "悪い応答",
+        "clickToEdit": "クリックして編集",
+        "editMessage": "メッセージを編集",
+        "saveAndSubmit": "保存して送信"
+    },
+    "examples": {
+        "title": "AI でダイアグラムを作成",
+        "subtitle": "作成したいものを説明するか、画像をアップロードして複製",
+        "quickExamples": "クイック例",
+        "paperToDiagram": "論文からダイアグラムへ",
+        "paperDescription": ".pdf, .txt, .md, .json, .csv, .py, .js, .ts などをアップロード",
+        "animatedDiagram": "アニメーション図",
+        "animatedDescription": "アニメーションコネクタ付きの Transformer アーキテクチャを描画",
+        "awsArchitecture": "AWS アーキテクチャ",
+        "awsDescription": "AWS アイコンでクラウドアーキテクチャ図を作成",
+        "replicateFlowchart": "フローチャートを複製",
+        "replicateDescription": "既存のフローチャートをアップロードして複製",
+        "creativeDrawing": "クリエイティブな描画",
+        "creativeDescription": "楽しくてクリエイティブなものを描く",
+        "cachedNote": "例はキャッシュされ、即座に応答します",
+        "mcpServer": "MCP サーバー",
+        "mcpDescription": "Claude Desktop、VS Code、Cursor で使用",
+        "preview": "プレビュー"
+    },
+    "settings": {
+        "title": "設定",
+        "description": "アプリケーション設定を構成します。",
+        "accessCode": "アクセスコード",
+        "accessCodePlaceholder": "アクセスコードを入力",
+        "accessCodeDescription": "このアプリケーションを使用するために必要です。",
+        "aiProvider": "AI プロバイダー設定",
+        "aiProviderDescription": "独自の API キーを使用して使用制限を回避できます。キーはブラウザのローカルに保存され、サーバーには保存されません。",
+        "provider": "プロバイダー",
+        "modelId": "モデル ID",
+        "apiKey": "API キー",
+        "apiKeyPlaceholder": "あなたの API キー",
+        "baseUrl": "ベース URL（オプション）",
+        "customEndpoint": "カスタムエンドポイント URL",
+        "overrides": "上書き",
+        "clearSettings": "設定をクリア",
+        "useServerDefault": "サーバーデフォルトを使用",
+        "theme": "テーマ",
+        "themeDescription": "インターフェースと DrawIO キャンバスのダーク/ライトモード。",
+        "drawioStyle": "DrawIO スタイル",
+        "drawioStyleDescription": "キャンバススタイル：",
+        "switchTo": "切り替え",
+        "minimal": "ミニマル",
+        "sketch": "スケッチ",
+        "closeProtection": "ページ離脱確認",
+        "closeProtectionDescription": "ページを離れる際に確認を表示します。"
+    },
+    "save": {
+        "title": "ダイアグラムを保存",
+        "description": "形式とファイル名を選択してダイアグラムを保存します。",
+        "format": "形式",
+        "filename": "ファイル名",
+        "filenamePlaceholder": "ファイル名を入力",
+        "formats": {
+            "drawio": "Draw.io XML",
+            "png": "PNG 画像",
+            "svg": "SVG 画像"
+        }
+    },
+    "history": {
+        "title": "ダイアグラム履歴",
+        "description": "AI 修正前に保存された各ダイアグラム。\nダイアグラムをクリックして復元",
+        "noHistory": "まだ履歴がありません。メッセージを送信してダイアグラム履歴を作成してください。",
+        "version": "バージョン",
+        "restoreTo": "バージョン {version} に復元しますか？"
+    },
+    "dialogs": {
+        "clearTitle": "すべてクリアしますか？",
+        "clearDescription": "現在の会話をクリアし、ダイアグラムをリセットします。この操作は元に戻せません。",
+        "clearEverything": "すべてクリア",
+        "clearSuccess": "新しいチャットを開始しました"
+    },
+    "errors": {
+        "maxFiles": "ファイルが多すぎます。最大 {max} 個まで許可されています。",
+        "onlyMoreAllowed": "あと {slots} 個のファイルのみ許可されています",
+        "fileExceeds": "「{name}」は {size} です（{max}MB を超えています）",
+        "unsupportedType": "「{name}」はサポートされていないファイルタイプです",
+        "filesRejected": "{count} 個のファイルが拒否されました：",
+        "andMore": "...およびさらに {count} 個",
+        "invalidAccessCode": "無効または欠落したアクセスコード。設定で入力してください。",
+        "networkError": "ネットワークエラー。接続を確認してください。",
+        "retryLimit": "自動再試行制限に達しました（{max}）。手動で再試行してください。",
+        "validationFailed": "ダイアグラムの検証に失敗しました。再生成してみてください。",
+        "malformedXml": "AI が無効なダイアグラム XML を生成しました。再生成してみてください。",
+        "failedToProcess": "ダイアグラムの処理に失敗しました。再生成してみてください。",
+        "sessionCorrupted": "セッションデータが破損しました。最初からやり直します。",
+        "failedToSave": "localStorage へのメッセージの保存に失敗しました",
+        "failedToRestore": "localStorage からの復元に失敗しました",
+        "failedToPersist": "アンロード前の状態の永続化に失敗しました",
+        "failedToExport": "チャートデータの取得エラー",
+        "failedToLoadExample": "例の画像の読み込みエラー"
+    },
+    "quota": {
+        "dailyLimit": "1日の割当量に達しました",
+        "tokenLimit": "1日のトークン制限に達しました",
+        "tpmLimit": "レート制限",
+        "tpmMessage": "リクエストが多すぎます。しばらくお待ちください。",
+        "messageApi": "おっと — このデモの1日の API 制限に達しました！個人開発者として API コストをすべて負担しているため、持続可能性を保つためにこれらの制限を設定する必要があります。",
+        "messageToken": "おっと — このデモの1日のトークン制限に達しました！個人開発者として API コストをすべて負担しているため、持続可能性を保つためにこれらの制限を設定する必要があります。",
+        "tip": "<strong>ヒント：</strong>独自の API キーを使用する（設定アイコンをクリック）か、プロジェクトをセルフホストしてこれらの制限を回避できます。",
+        "reset": "制限は明日リセットされます。ご理解ありがとうございます！",
+        "selfHost": "セルフホスト",
+        "sponsor": "スポンサー",
+        "learnMore": "詳細 →",
+        "usedOf": "{used}/{limit}"
+    },
+    "tools": {
+        "generateDiagram": "ダイアグラムを生成",
+        "editDiagram": "ダイアグラムを編集",
+        "appendDiagram": "ダイアグラムに追加",
+        "complete": "完了",
+        "error": "エラー",
+        "truncated": "切り捨て"
+    },
+    "file": {
+        "reading": "読み込み中...",
+        "chars": "文字",
+        "removeFile": "ファイルを削除"
+    },
+    "reasoning": {
+        "thinking": "考え中...",
+        "thoughtFor": "{duration} 秒考えました",
+        "thoughtBrief": "数秒考えました"
+    },
+    "about": {
+        "modelChange": "モデル変更と利用制限について",
+        "walletCrying": "（別名：お財布が悲鳴を上げています）",
+        "seekingSponsorship": "スポンサー募集",
+        "contactMe": "お問い合わせ",
+        "usageNotice": "利用量の増加に伴い、コスト削減のためモデルを Claude から minimax-m2 に変更し、いくつかの利用制限を設けました。詳細は概要ページをご覧ください。"
+    }
+}
diff --git a/lib/i18n/dictionaries/zh.json b/lib/i18n/dictionaries/zh.json
new file mode 100644
index 0000000..3b86c2c
--- /dev/null
+++ b/lib/i18n/dictionaries/zh.json
@@ -0,0 +1,184 @@
+{
+    "common": {
+        "save": "保存",
+        "cancel": "取消",
+        "close": "关闭",
+        "confirm": "确认",
+        "clear": "清除",
+        "edit": "编辑",
+        "delete": "删除",
+        "loading": "加载中...",
+        "new": "新建"
+    },
+    "nav": {
+        "about": "关于",
+        "editor": "编辑器",
+        "newChat": "开始新对话",
+        "settings": "设置",
+        "hidePanel": "隐藏聊天面板 (Ctrl+B)",
+        "showPanel": "显示聊天面板 (Ctrl+B)",
+        "aiChat": "AI 聊天"
+    },
+    "providers": {
+        "useServerDefault": "使用服务器默认值",
+        "openai": "OpenAI",
+        "anthropic": "Anthropic",
+        "google": "Google",
+        "azure": "Azure OpenAI",
+        "openrouter": "OpenRouter",
+        "deepseek": "DeepSeek",
+        "siliconflow": "SiliconFlow"
+    },
+    "chat": {
+        "placeholder": "描述您的图表或上传文件...",
+        "send": "发送",
+        "sending": "发送中...",
+        "sendMessage": "发送消息",
+        "clearConversation": "清除对话",
+        "diagramHistory": "图表历史",
+        "saveDiagram": "保存图表",
+        "uploadFile": "上传文件（图片、PDF、文本）",
+        "minimalStyle": "简约",
+        "styledMode": "精致",
+        "minimalTooltip": "使用简约模式以加快生成速度（无颜色）",
+        "regenerate": "重新生成响应",
+        "copyResponse": "复制响应",
+        "copied": "已复制！",
+        "failedToCopy": "复制失败",
+        "goodResponse": "有帮助",
+        "badResponse": "无帮助",
+        "clickToEdit": "点击编辑",
+        "editMessage": "编辑消息",
+        "saveAndSubmit": "保存并提交"
+    },
+    "examples": {
+        "title": "用 AI 创建图表",
+        "subtitle": "描述您想要创建的内容或上传图片进行复制",
+        "quickExamples": "快速示例",
+        "paperToDiagram": "文档转图表",
+        "paperDescription": "上传 .pdf, .txt, .md, .json, .csv, .py, .js, .ts 等文件",
+        "animatedDiagram": "动画图表",
+        "animatedDescription": "绘制带有动画连接器的 Transformer 架构",
+        "awsArchitecture": "AWS 架构",
+        "awsDescription": "使用 AWS 图标创建云架构图",
+        "replicateFlowchart": "复制流程图",
+        "replicateDescription": "上传并复制现有流程图",
+        "creativeDrawing": "创意绘图",
+        "creativeDescription": "绘制有趣且富有创意的内容",
+        "cachedNote": "示例已缓存，可即时响应",
+        "mcpServer": "MCP 服务器",
+        "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用",
+        "preview": "预览"
+    },
+    "settings": {
+        "title": "设置",
+        "description": "配置您的应用程序设置。",
+        "accessCode": "访问码",
+        "accessCodePlaceholder": "输入访问码",
+        "accessCodeDescription": "使用此应用程序需要访问码。",
+        "aiProvider": "AI 提供商设置",
+        "aiProviderDescription": "使用您自己的 API 密钥来绕过使用限制。您的密钥仅存储在浏览器本地，不会存储在服务器上。",
+        "provider": "提供商",
+        "modelId": "模型 ID",
+        "apiKey": "API 密钥",
+        "apiKeyPlaceholder": "您的 API 密钥",
+        "baseUrl": "基础 URL（可选）",
+        "customEndpoint": "自定义端点 URL",
+        "overrides": "覆盖",
+        "clearSettings": "清除设置",
+        "useServerDefault": "使用服务器默认值",
+        "theme": "主题",
+        "themeDescription": "界面和 DrawIO 画布的深色/浅色模式。",
+        "drawioStyle": "DrawIO 样式",
+        "drawioStyleDescription": "画布样式：",
+        "switchTo": "切换到",
+        "minimal": "简约",
+        "sketch": "草图",
+        "closeProtection": "关闭确认",
+        "closeProtectionDescription": "离开页面时显示确认。"
+    },
+    "save": {
+        "title": "保存图表",
+        "description": "选择格式和文件名以保存您的图表。",
+        "format": "格式",
+        "filename": "文件名",
+        "filenamePlaceholder": "输入文件名",
+        "formats": {
+            "drawio": "Draw.io XML",
+            "png": "PNG 图片",
+            "svg": "SVG 图片"
+        }
+    },
+    "history": {
+        "title": "图表历史",
+        "description": "在 AI 修改之前保存的每个图表。\n点击图表以恢复它",
+        "noHistory": "尚无历史记录。发送消息以创建图表历史。",
+        "version": "版本",
+        "restoreTo": "恢复到版本 {version}？"
+    },
+    "dialogs": {
+        "clearTitle": "清除所有内容？",
+        "clearDescription": "这将清除当前对话并重置图表。此操作无法撤消。",
+        "clearEverything": "清除所有内容",
+        "clearSuccess": "已开始新对话"
+    },
+    "errors": {
+        "maxFiles": "文件太多。最多允许 {max} 个。",
+        "onlyMoreAllowed": "只能再添加 {slots} 个文件",
+        "fileExceeds": "\"{name}\" 大小为 {size}（超过 {max}MB）",
+        "unsupportedType": "\"{name}\" 不是支持的文件类型",
+        "filesRejected": "{count} 个文件被拒绝：",
+        "andMore": "...还有 {count} 个",
+        "invalidAccessCode": "无效或缺少访问码。请在设置中配置。",
+        "networkError": "网络错误。请检查您的连接。",
+        "retryLimit": "已达到自动重试限制（{max}）。请手动重试。",
+        "validationFailed": "图表验证失败。请尝试重新生成。",
+        "malformedXml": "AI 生成的图表 XML 无效。请尝试重新生成。",
+        "failedToProcess": "无法处理图表。请尝试重新生成。",
+        "sessionCorrupted": "会话数据已损坏。重新开始。",
+        "failedToSave": "无法保存消息到 localStorage",
+        "failedToRestore": "无法从 localStorage 恢复",
+        "failedToPersist": "卸载前无法持久化状态",
+        "failedToExport": "获取图表数据时出错",
+        "failedToLoadExample": "加载示例图片时出错"
+    },
+    "quota": {
+        "dailyLimit": "已达每日配额",
+        "tokenLimit": "已达每日令牌限制",
+        "tpmLimit": "速率限制",
+        "tpmMessage": "请求过多。请稍等片刻。",
+        "messageApi": "糟糕 — 您已达到此演示的每日 API 限制！作为一名独立开发者，我自己承担所有 API 费用，因此必须设置这些限制以保持可持续性。",
+        "messageToken": "糟糕 — 您已达到此演示的每日令牌限制！作为一名独立开发者，我自己承担所有 API 费用，因此必须设置这些限制以保持可持续性。",
+        "tip": "<strong>提示：</strong>您可以使用自己的 API 密钥（点击设置图标）或自托管项目来绕过这些限制。",
+        "reset": "您的限制将在明天重置。感谢您的理解！",
+        "selfHost": "自托管",
+        "sponsor": "赞助",
+        "learnMore": "了解更多 →",
+        "usedOf": "{used}/{limit}"
+    },
+    "tools": {
+        "generateDiagram": "生成图表",
+        "editDiagram": "编辑图表",
+        "appendDiagram": "继续图表",
+        "complete": "完成",
+        "error": "错误",
+        "truncated": "已截断"
+    },
+    "file": {
+        "reading": "读取中...",
+        "chars": "字符",
+        "removeFile": "移除文件"
+    },
+    "reasoning": {
+        "thinking": "思考中...",
+        "thoughtFor": "思考了 {duration} 秒",
+        "thoughtBrief": "思考了几秒钟"
+    },
+    "about": {
+        "modelChange": "模型变更与用量限制",
+        "walletCrying": "（别名：我的钱包顶不住了）",
+        "seekingSponsorship": "寻求赞助（求大佬捞一把）",
+        "contactMe": "联系我",
+        "usageNotice": "由于使用量过高，我已将模型从 Claude 更换为 minimax-m2，并设置了一些用量限制。详情请查看关于页面。"
+    }
+}
diff --git a/lib/i18n/utils.ts b/lib/i18n/utils.ts
new file mode 100644
index 0000000..122dd72
--- /dev/null
+++ b/lib/i18n/utils.ts
@@ -0,0 +1,14 @@
+export function formatMessage(
+    template: string | undefined,
+    vars?: Record<string, string | number | undefined>,
+): string {
+    if (!template) return ""
+    if (!vars) return template
+
+    return template.replace(/\{(\w+)\}/g, (match, name) => {
+        const val = vars[name]
+        return val === undefined ? match : String(val)
+    })
+}
+
+export default formatMessage
diff --git a/package-lock.json b/package-lock.json
index 43420f1..e5aed1c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
                 "@ai-sdk/openai": "^2.0.19",
                 "@ai-sdk/react": "^2.0.107",
                 "@aws-sdk/credential-providers": "^3.943.0",
+                "@formatjs/intl-localematcher": "^0.7.2",
                 "@langfuse/client": "^4.4.9",
                 "@langfuse/otel": "^4.4.4",
                 "@langfuse/tracing": "^4.4.9",
@@ -44,6 +45,7 @@
                 "jsonrepair": "^3.13.1",
                 "lucide-react": "^0.483.0",
                 "motion": "^12.23.25",
+                "negotiator": "^1.0.0",
                 "next": "^16.0.7",
                 "ollama-ai-provider-v2": "^1.5.4",
                 "pako": "^2.1.0",
@@ -55,6 +57,7 @@
                 "react-markdown": "^10.1.0",
                 "react-resizable-panels": "^3.0.6",
                 "remark-gfm": "^4.0.1",
+                "server-only": "^0.0.1",
                 "sonner": "^2.0.7",
                 "tailwind-merge": "^3.0.2",
                 "tailwindcss-animate": "^1.0.7",
@@ -66,6 +69,7 @@
                 "@biomejs/biome": "^2.3.8",
                 "@tailwindcss/postcss": "^4",
                 "@tailwindcss/typography": "^0.5.19",
+                "@types/negotiator": "^0.6.4",
                 "@types/node": "^20",
                 "@types/pako": "^2.0.3",
                 "@types/react": "^19",
@@ -1903,6 +1907,15 @@
             "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
             "license": "MIT"
         },
+        "node_modules/@formatjs/intl-localematcher": {
+            "version": "0.7.2",
+            "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.7.2.tgz",
+            "integrity": "sha512-1cpFlw1omNn2/Uz/vAdAyovlh7qS/po7MWipH3JrShT/lVUh2+lbEAWquyh9yRa84fqlLulTt7oysGtjATujZQ==",
+            "license": "MIT",
+            "dependencies": {
+                "tslib": "^2.8.0"
+            }
+        },
         "node_modules/@humanfs/core": {
             "version": "0.19.1",
             "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -5501,6 +5514,13 @@
             "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
             "license": "MIT"
         },
+        "node_modules/@types/negotiator": {
+            "version": "0.6.4",
+            "resolved": "https://registry.npmjs.org/@types/negotiator/-/negotiator-0.6.4.tgz",
+            "integrity": "sha512-elf6BsTq+AkyNsb2h5cGNst2Mc7dPliVoAPm1fXglC/BM3f2pFA40BaSSv3E5lyHteEawVKLP+8TwiY1DMNb3A==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/@types/node": {
             "version": "20.17.30",
             "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.30.tgz",
@@ -10716,6 +10736,15 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/negotiator": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
+            "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
         "node_modules/next": {
             "version": "16.0.10",
             "resolved": "https://registry.npmjs.org/next/-/next-16.0.10.tgz",
@@ -11759,6 +11788,12 @@
                 "node": ">=10"
             }
         },
+        "node_modules/server-only": {
+            "version": "0.0.1",
+            "resolved": "https://registry.npmjs.org/server-only/-/server-only-0.0.1.tgz",
+            "integrity": "sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==",
+            "license": "MIT"
+        },
         "node_modules/set-function-length": {
             "version": "1.2.2",
             "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
diff --git a/package.json b/package.json
index 967a970..b01db66 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
         "@ai-sdk/openai": "^2.0.19",
         "@ai-sdk/react": "^2.0.107",
         "@aws-sdk/credential-providers": "^3.943.0",
+        "@formatjs/intl-localematcher": "^0.7.2",
         "@langfuse/client": "^4.4.9",
         "@langfuse/otel": "^4.4.4",
         "@langfuse/tracing": "^4.4.9",
@@ -48,6 +49,7 @@
         "jsonrepair": "^3.13.1",
         "lucide-react": "^0.483.0",
         "motion": "^12.23.25",
+        "negotiator": "^1.0.0",
         "next": "^16.0.7",
         "ollama-ai-provider-v2": "^1.5.4",
         "pako": "^2.1.0",
@@ -59,6 +61,7 @@
         "react-markdown": "^10.1.0",
         "react-resizable-panels": "^3.0.6",
         "remark-gfm": "^4.0.1",
+        "server-only": "^0.0.1",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.0.2",
         "tailwindcss-animate": "^1.0.7",
@@ -76,6 +79,7 @@
         "@biomejs/biome": "^2.3.8",
         "@tailwindcss/postcss": "^4",
         "@tailwindcss/typography": "^0.5.19",
+        "@types/negotiator": "^0.6.4",
         "@types/node": "^20",
         "@types/pako": "^2.0.3",
         "@types/react": "^19",
diff --git a/proxy.ts b/proxy.ts
new file mode 100644
index 0000000..1db77c6
--- /dev/null
+++ b/proxy.ts
@@ -0,0 +1,63 @@
+import { match as matchLocale } from "@formatjs/intl-localematcher"
+import Negotiator from "negotiator"
+import type { NextRequest } from "next/server"
+import { NextResponse } from "next/server"
+import { i18n } from "./lib/i18n/config"
+
+function getLocale(request: NextRequest): string | undefined {
+    // Negotiator expects plain object so we need to transform headers
+    const negotiatorHeaders: Record<string, string> = {}
+    request.headers.forEach((value, key) => {
+        negotiatorHeaders[key] = value
+    })
+
+    // @ts-expect-error locales are readonly
+    const locales: string[] = i18n.locales
+
+    // Use negotiator and intl-localematcher to get best locale
+    const languages = new Negotiator({ headers: negotiatorHeaders }).languages(
+        locales,
+    )
+
+    const locale = matchLocale(languages, locales, i18n.defaultLocale)
+
+    return locale
+}
+
+export function proxy(request: NextRequest) {
+    const pathname = request.nextUrl.pathname
+
+    // Skip API routes, static files, and Next.js internals
+    if (
+        pathname.startsWith("/api/") ||
+        pathname.startsWith("/_next/") ||
+        pathname.includes("/favicon") ||
+        /\.(.*)$/.test(pathname)
+    ) {
+        return
+    }
+
+    // Check if there is any supported locale in the pathname
+    const pathnameIsMissingLocale = i18n.locales.every(
+        (locale) =>
+            !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`,
+    )
+
+    // Redirect if there is no locale
+    if (pathnameIsMissingLocale) {
+        const locale = getLocale(request)
+
+        // Redirect to localized path
+        return NextResponse.redirect(
+            new URL(
+                `/${locale}${pathname.startsWith("/") ? "" : "/"}${pathname}`,
+                request.url,
+            ),
+        )
+    }
+}
+
+export const config = {
+    // Matcher ignoring `/_next/` and `/api/`
+    matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
+}