feat: add GitHub Sponsors button and i18n READMEs (#43)

- Add GitHub Sponsors iframe button to chat panel header
- Update README with badges and language switcher
- Add Chinese README (README_CN.md)
- Add Japanese README (README_JA.md)
- Reorganize examples section in README

README.md

@@ -1,11 +1,24 @@
 # Next AI Draw.io
 
-A next.js web application that integrates AI capabilities with draw.io diagrams. This app allows you to create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.
+<div align="center">
+
+**AI-Powered Diagram Creation Tool - Chat, Draw, Visualize**
+
+English | [中文](./README_CN.md) | [日本語](./README_JA.md)
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Next.js](https://img.shields.io/badge/Next.js-15.x-black)](https://nextjs.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue)](https://www.typescriptlang.org/)
+[![Sponsor](https://img.shields.io/badge/Sponsor-❤-ea4aaa)](https://github.com/sponsors/DayuanJiang)
+
+[🚀 Live Demo](https://next-ai-drawio.jiang.jp/)
+
+</div>
+
+A Next.js web application that integrates AI capabilities with draw.io diagrams. Create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.
 
 https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
 
-Demo site: [https://next-ai-draw-io.vercel.app](https://next-ai-draw-io.vercel.app)
-
 ## Features
 
 -   **LLM-Powered Diagram Creation**: Leverage Large Language Models to create and manipulate draw.io diagrams directly through natural language commands
@@ -21,6 +34,13 @@ Here are some example prompts and their generated diagrams:
 
 <div align="center">
 <table width="100%">
+  <tr>
+    <td colspan="2" valign="top" align="center">
+      <strong>Animated transformer connectors</strong><br />
+      <p><strong>Prompt:</strong> Give me a **animated connector** diagram of transformer's architecture.</p>
+      <img src="./public/animated_connectors.svg" alt="Transformer Architecture with Animated Connectors" width="480" />
+    </td>
+  </tr>
   <tr>
     <td width="50%" valign="top">
       <strong>GCP architecture diagram</strong><br />
@@ -40,16 +60,9 @@ Here are some example prompts and their generated diagrams:
       <img src="./public/azure_demo.svg" alt="Azure Architecture Diagram" width="480" />
     </td>
     <td width="50%" valign="top">
-      <strong>Animated transformer connectors</strong><br />
-      <p><strong>Prompt:</strong> Give me a **animated connector** diagram of transformer's architecture.</p>
-      <img src="./public/animated_connectors.svg" alt="Transformer Architecture with Animated Connectors" width="480" />
-    </td>
-  </tr>
-  <tr>
-    <td colspan="2" valign="top" align="center">
       <strong>Cat sketch prompt</strong><br />
       <p><strong>Prompt:</strong> Draw a cute cat for me.</p>
-      <img src="./public/cat_demo.svg" alt="Cat Drawing" width="260" />
+      <img src="./public/cat_demo.svg" alt="Cat Drawing" width="240" />
     </td>
   </tr>
 </table>
@@ -60,7 +73,7 @@ Here are some example prompts and their generated diagrams:
 The application uses the following technologies:
 
 -   **Next.js**: For the frontend framework and routing
--   **@ai-sdk/react**: For the chat interface and AI interactions
+-   **Vercel AI SDK** (`ai` + `@ai-sdk/*`): For streaming AI responses and multi-provider support
 -   **react-drawio**: For diagram representation and manipulation
 
 Diagrams are represented as XML that can be rendered in draw.io. The AI processes your commands and generates or modifies this XML accordingly.
@@ -135,14 +148,19 @@ Be sure to **set the environment variables** in the Vercel dashboard as you did
 ## Project Structure
 
 ```
-app/                  # Next.js application routes and pages
+app/                  # Next.js App Router
-  extract_xml.ts      # Utilities for XML processing
+  api/chat/           # Chat API endpoint with AI tools
+  page.tsx            # Main page with DrawIO embed
 components/           # React components
-  chat-input.tsx      # User input component for AI interaction
+  chat-panel.tsx      # Chat interface with diagram control
-  chatPanel.tsx       # Chat interface with diagram control
+  chat-input.tsx      # User input component with file upload
+  history-dialog.tsx  # Diagram version history viewer
   ui/                 # UI components (buttons, cards, etc.)
+contexts/             # React context providers
+  diagram-context.tsx # Global diagram state management
 lib/                  # Utility functions and helpers
-  utils.ts            # General utilities including XML conversion
+  ai-providers.ts     # Multi-provider AI configuration
+  utils.ts            # XML processing and conversion utilities
 public/               # Static assets including example images
 ```
 
@@ -154,12 +172,10 @@ public/               # Static assets including example images
 -   [x] Solve the bug that generation will fail for session that longer than 60s.
 -   [ ] Add API config on the UI.
 
-## License
-
-This project is licensed under the MIT License.
-
 ## Support & Contact
 
+If you find this project useful, please consider [sponsoring](https://github.com/sponsors/DayuanJiang) to help me host the live demo site!
+
 For support or inquiries, please open an issue on the GitHub repository or contact the maintainer at:
 
 -   Email: me[at]jiang.jp

README_CN.md

@@ -0,0 +1,187 @@
+# Next AI Draw.io
+
+<div align="center">
+
+**AI驱动的图表创建工具 - 对话、绘制、可视化**
+
+[English](./README.md) | 中文 | [日本語](./README_JA.md)
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Next.js](https://img.shields.io/badge/Next.js-15.x-black)](https://nextjs.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue)](https://www.typescriptlang.org/)
+[![Sponsor](https://img.shields.io/badge/Sponsor-❤-ea4aaa)](https://github.com/sponsors/DayuanJiang)
+
+[🚀 在线演示](https://next-ai-drawio.jiang.jp/)
+
+</div>
+
+一个集成了AI功能的Next.js网页应用，与draw.io图表无缝结合。通过自然语言命令和AI辅助可视化来创建、修改和增强图表。
+
+https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
+
+## 功能特性
+
+-   **LLM驱动的图表创建**：利用大语言模型通过自然语言命令直接创建和操作draw.io图表
+-   **基于图像的图表复制**：上传现有图表或图像，让AI自动复制和增强
+-   **图表历史记录**：全面的版本控制，跟踪所有更改，允许您查看和恢复AI编辑前的图表版本
+-   **交互式聊天界面**：与AI实时对话来完善您的图表
+-   **AWS架构图支持**：专门支持生成AWS架构图
+-   **动画连接器**：在图表元素之间创建动态动画连接器，实现更好的可视化效果
+
+## **示例**
+
+以下是一些示例提示词及其生成的图表：
+
+<div align="center">
+<table width="100%">
+  <tr>
+    <td colspan="2" valign="top" align="center">
+      <strong>动画Transformer连接器</strong><br />
+      <p><strong>提示词：</strong> 给我一个带有**动画连接器**的Transformer架构图。</p>
+      <img src="./public/animated_connectors.svg" alt="带动画连接器的Transformer架构" width="480" />
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <strong>GCP架构图</strong><br />
+      <p><strong>提示词：</strong> 使用**GCP图标**生成一个GCP架构图。在这个图中，用户连接到托管在实例上的前端。</p>
+      <img src="./public/gcp_demo.svg" alt="GCP架构图" width="480" />
+    </td>
+    <td width="50%" valign="top">
+      <strong>AWS架构图</strong><br />
+      <p><strong>提示词：</strong> 使用**AWS图标**生成一个AWS架构图。在这个图中，用户连接到托管在实例上的前端。</p>
+      <img src="./public/aws_demo.svg" alt="AWS架构图" width="480" />
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <strong>Azure架构图</strong><br />
+      <p><strong>提示词：</strong> 使用**Azure图标**生成一个Azure架构图。在这个图中，用户连接到托管在实例上的前端。</p>
+      <img src="./public/azure_demo.svg" alt="Azure架构图" width="480" />
+    </td>
+    <td width="50%" valign="top">
+      <strong>猫咪素描</strong><br />
+      <p><strong>提示词：</strong> 给我画一只可爱的猫。</p>
+      <img src="./public/cat_demo.svg" alt="猫咪绘图" width="240" />
+    </td>
+  </tr>
+</table>
+</div>
+
+## 工作原理
+
+本应用使用以下技术：
+
+-   **Next.js**：用于前端框架和路由
+-   **Vercel AI SDK**（`ai` + `@ai-sdk/*`）：用于流式AI响应和多提供商支持
+-   **react-drawio**：用于图表表示和操作
+
+图表以XML格式表示，可在draw.io中渲染。AI处理您的命令并相应地生成或修改此XML。
+
+## 多提供商支持
+
+-   AWS Bedrock（默认）
+-   OpenAI / OpenAI兼容API（通过 `OPENAI_BASE_URL`）
+-   Anthropic
+-   Google AI
+-   Azure OpenAI
+-   Ollama
+-   OpenRouter
+-   DeepSeek
+
+注意：`claude-sonnet-4-5` 已在带有AWS标志的draw.io图表上进行训练，因此如果您想创建AWS架构图，这是最佳选择。
+
+## 快速开始
+
+### 安装
+
+1. 克隆仓库：
+
+```bash
+git clone https://github.com/DayuanJiang/next-ai-draw-io
+cd next-ai-draw-io
+```
+
+2. 安装依赖：
+
+```bash
+npm install
+# 或
+yarn install
+```
+
+3. 配置您的AI提供商：
+
+在根目录创建 `.env.local` 文件：
+
+```bash
+cp env.example .env.local
+```
+
+编辑 `.env.local` 并配置您选择的提供商：
+
+-   将 `AI_PROVIDER` 设置为您选择的提供商（bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek）
+-   将 `AI_MODEL` 设置为您要使用的特定模型
+-   添加您的提供商所需的API密钥
+
+请参阅上面的[多提供商支持](#多提供商支持)部分了解特定提供商的配置示例。
+
+4. 运行开发服务器：
+
+```bash
+npm run dev
+```
+
+5. 在浏览器中打开 [http://localhost:3000](http://localhost:3000) 查看应用。
+
+## 部署
+
+部署Next.js应用最简单的方式是使用Next.js创建者提供的[Vercel平台](https://vercel.com/new)。
+
+查看[Next.js部署文档](https://nextjs.org/docs/app/building-your-application/deploying)了解更多详情。
+
+或者您可以通过此按钮部署：
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
+
+请确保在Vercel控制台中**设置环境变量**，就像您在本地 `.env.local` 文件中所做的那样。
+
+## 项目结构
+
+```
+app/                  # Next.js App Router
+  api/chat/           # 带AI工具的聊天API端点
+  page.tsx            # 带DrawIO嵌入的主页面
+components/           # React组件
+  chat-panel.tsx      # 带图表控制的聊天界面
+  chat-input.tsx      # 带文件上传的用户输入组件
+  history-dialog.tsx  # 图表版本历史查看器
+  ui/                 # UI组件（按钮、卡片等）
+contexts/             # React上下文提供者
+  diagram-context.tsx # 全局图表状态管理
+lib/                  # 工具函数和辅助程序
+  ai-providers.ts     # 多提供商AI配置
+  utils.ts            # XML处理和转换工具
+public/               # 静态资源包括示例图片
+```
+
+## 待办事项
+
+-   [x] 允许LLM修改XML而不是每次从头生成
+-   [x] 提高形状流式更新的流畅度
+-   [x] 添加多AI提供商支持（OpenAI, Anthropic, Google, Azure, Ollama）
+-   [x] 解决超过60秒的会话生成失败的bug
+-   [ ] 在UI上添加API配置
+
+## 支持与联系
+
+如果您觉得这个项目有用，请考虑[赞助](https://github.com/sponsors/DayuanJiang)来帮助我托管在线演示站点！
+
+如需支持或咨询，请在GitHub仓库上提交issue或联系维护者：
+
+-   邮箱：me[at]jiang.jp
+
+## Star历史
+
+[![Star History Chart](https://api.star-history.com/svg?repos=DayuanJiang/next-ai-draw-io&type=date&legend=top-left)](https://www.star-history.com/#DayuanJiang/next-ai-draw-io&type=date&legend=top-left)
+
+---

README_JA.md

@@ -0,0 +1,187 @@
+# Next AI Draw.io
+
+<div align="center">
+
+**AI搭載のダイアグラム作成ツール - チャット、描画、可視化**
+
+[English](./README.md) | [中文](./README_CN.md) | 日本語
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Next.js](https://img.shields.io/badge/Next.js-15.x-black)](https://nextjs.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue)](https://www.typescriptlang.org/)
+[![Sponsor](https://img.shields.io/badge/Sponsor-❤-ea4aaa)](https://github.com/sponsors/DayuanJiang)
+
+[🚀 ライブデモ](https://next-ai-drawio.jiang.jp/)
+
+</div>
+
+AI機能とdraw.ioダイアグラムを統合したNext.jsウェブアプリケーションです。自然言語コマンドとAI支援の可視化により、ダイアグラムを作成、修正、強化できます。
+
+https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
+
+## 機能
+
+-   **LLM搭載のダイアグラム作成**：大規模言語モデルを活用して、自然言語コマンドで直接draw.ioダイアグラムを作成・操作
+-   **画像ベースのダイアグラム複製**：既存のダイアグラムや画像をアップロードし、AIが自動的に複製・強化
+-   **ダイアグラム履歴**：すべての変更を追跡する包括的なバージョン管理。AI編集前のダイアグラムの以前のバージョンを表示・復元可能
+-   **インタラクティブなチャットインターフェース**：AIとリアルタイムでコミュニケーションしてダイアグラムを改善
+-   **AWSアーキテクチャダイアグラムサポート**：AWSアーキテクチャダイアグラムの生成を専門的にサポート
+-   **アニメーションコネクタ**：より良い可視化のためにダイアグラム要素間に動的でアニメーション化されたコネクタを作成
+
+## **例**
+
+以下はいくつかのプロンプト例と生成されたダイアグラムです：
+
+<div align="center">
+<table width="100%">
+  <tr>
+    <td colspan="2" valign="top" align="center">
+      <strong>アニメーションTransformerコネクタ</strong><br />
+      <p><strong>プロンプト：</strong> **アニメーションコネクタ**付きのTransformerアーキテクチャ図を作成してください。</p>
+      <img src="./public/animated_connectors.svg" alt="アニメーションコネクタ付きTransformerアーキテクチャ" width="480" />
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <strong>GCPアーキテクチャ図</strong><br />
+      <p><strong>プロンプト：</strong> **GCPアイコン**を使用してGCPアーキテクチャ図を生成してください。この図では、ユーザーがインスタンス上でホストされているフロントエンドに接続します。</p>
+      <img src="./public/gcp_demo.svg" alt="GCPアーキテクチャ図" width="480" />
+    </td>
+    <td width="50%" valign="top">
+      <strong>AWSアーキテクチャ図</strong><br />
+      <p><strong>プロンプト：</strong> **AWSアイコン**を使用してAWSアーキテクチャ図を生成してください。この図では、ユーザーがインスタンス上でホストされているフロントエンドに接続します。</p>
+      <img src="./public/aws_demo.svg" alt="AWSアーキテクチャ図" width="480" />
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <strong>Azureアーキテクチャ図</strong><br />
+      <p><strong>プロンプト：</strong> **Azureアイコン**を使用してAzureアーキテクチャ図を生成してください。この図では、ユーザーがインスタンス上でホストされているフロントエンドに接続します。</p>
+      <img src="./public/azure_demo.svg" alt="Azureアーキテクチャ図" width="480" />
+    </td>
+    <td width="50%" valign="top">
+      <strong>猫のスケッチ</strong><br />
+      <p><strong>プロンプト：</strong> かわいい猫を描いてください。</p>
+      <img src="./public/cat_demo.svg" alt="猫の絵" width="240" />
+    </td>
+  </tr>
+</table>
+</div>
+
+## 仕組み
+
+本アプリケーションは以下の技術を使用しています：
+
+-   **Next.js**：フロントエンドフレームワークとルーティング
+-   **Vercel AI SDK**（`ai` + `@ai-sdk/*`）：ストリーミングAIレスポンスとマルチプロバイダーサポート
+-   **react-drawio**：ダイアグラムの表現と操作
+
+ダイアグラムはdraw.ioでレンダリングできるXMLとして表現されます。AIがコマンドを処理し、それに応じてこのXMLを生成または変更します。
+
+## マルチプロバイダーサポート
+
+-   AWS Bedrock（デフォルト）
+-   OpenAI / OpenAI互換API（`OPENAI_BASE_URL`経由）
+-   Anthropic
+-   Google AI
+-   Azure OpenAI
+-   Ollama
+-   OpenRouter
+-   DeepSeek
+
+注：`claude-sonnet-4-5`はAWSロゴ付きのdraw.ioダイアグラムで学習されているため、AWSアーキテクチャダイアグラムを作成したい場合は最適な選択です。
+
+## はじめに
+
+### インストール
+
+1. リポジトリをクローン：
+
+```bash
+git clone https://github.com/DayuanJiang/next-ai-draw-io
+cd next-ai-draw-io
+```
+
+2. 依存関係をインストール：
+
+```bash
+npm install
+# または
+yarn install
+```
+
+3. AIプロバイダーを設定：
+
+ルートディレクトリに`.env.local`ファイルを作成：
+
+```bash
+cp env.example .env.local
+```
+
+`.env.local`を編集して選択したプロバイダーを設定：
+
+-   `AI_PROVIDER`を選択したプロバイダーに設定（bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek）
+-   `AI_MODEL`を使用する特定のモデルに設定
+-   プロバイダーに必要なAPIキーを追加
+
+プロバイダー固有の設定例については、上記の[マルチプロバイダーサポート](#マルチプロバイダーサポート)セクションを参照してください。
+
+4. 開発サーバーを起動：
+
+```bash
+npm run dev
+```
+
+5. ブラウザで[http://localhost:3000](http://localhost:3000)を開いてアプリケーションを確認。
+
+## デプロイ
+
+Next.jsアプリをデプロイする最も簡単な方法は、Next.jsの作成者による[Vercelプラットフォーム](https://vercel.com/new)を使用することです。
+
+詳細は[Next.jsデプロイメントドキュメント](https://nextjs.org/docs/app/building-your-application/deploying)をご覧ください。
+
+または、このボタンでデプロイできます：
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
+
+ローカルの`.env.local`ファイルと同様に、Vercelダッシュボードで**環境変数を設定**してください。
+
+## プロジェクト構造
+
+```
+app/                  # Next.js App Router
+  api/chat/           # AIツール付きチャットAPIエンドポイント
+  page.tsx            # DrawIO埋め込み付きメインページ
+components/           # Reactコンポーネント
+  chat-panel.tsx      # ダイアグラム制御付きチャットインターフェース
+  chat-input.tsx      # ファイルアップロード付きユーザー入力コンポーネント
+  history-dialog.tsx  # ダイアグラムバージョン履歴ビューア
+  ui/                 # UIコンポーネント（ボタン、カードなど）
+contexts/             # Reactコンテキストプロバイダー
+  diagram-context.tsx # グローバルダイアグラム状態管理
+lib/                  # ユーティリティ関数とヘルパー
+  ai-providers.ts     # マルチプロバイダーAI設定
+  utils.ts            # XML処理と変換ユーティリティ
+public/               # サンプル画像を含む静的アセット
+```
+
+## TODO
+
+-   [x] LLMが毎回ゼロから生成する代わりにXMLを修正できるようにする
+-   [x] シェイプストリーミング更新の滑らかさを改善
+-   [x] 複数のAIプロバイダーサポートを追加（OpenAI, Anthropic, Google, Azure, Ollama）
+-   [x] 60秒以上のセッションで生成が失敗するバグを解決
+-   [ ] UIにAPI設定を追加
+
+## サポート＆お問い合わせ
+
+このプロジェクトが役に立ったら、ライブデモサイトのホスティングを支援するために[スポンサー](https://github.com/sponsors/DayuanJiang)をご検討ください！
+
+サポートやお問い合わせについては、GitHubリポジトリでissueを開くか、メンテナーにご連絡ください：
+
+-   メール：me[at]jiang.jp
+
+## スター履歴
+
+[![Star History Chart](https://api.star-history.com/svg?repos=DayuanJiang/next-ai-draw-io&type=date&legend=top-left)](https://www.star-history.com/#DayuanJiang/next-ai-draw-io&type=date&legend=top-left)
+
+---

components/chat-panel.tsx

@@ -234,14 +234,13 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                     </Link>
                 </div>
                 <div className="flex items-center gap-2">
-                    <ButtonWithTooltip
+                    <iframe
-                        tooltipContent="Hide chat panel (Ctrl+B)"
+                        src="https://github.com/sponsors/DayuanJiang/button"
-                        variant="ghost"
+                        title="Sponsor DayuanJiang"
-                        size="icon"
+                        height="32"
-                        onClick={onToggleVisibility}
+                        width="114"
-                    >
+                        style={{ border: 0, borderRadius: 6 }}
-                        <PanelRightClose className="h-5 w-5" />
+                    />
-                    </ButtonWithTooltip>
                     <a
                         href="https://github.com/DayuanJiang/next-ai-draw-io"
                         target="_blank"
@@ -250,6 +249,14 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                     >
                         <FaGithub className="w-6 h-6" />
                     </a>
+                    <ButtonWithTooltip
+                        tooltipContent="Hide chat panel (Ctrl+B)"
+                        variant="ghost"
+                        size="icon"
+                        onClick={onToggleVisibility}
+                    >
+                        <PanelRightClose className="h-5 w-5" />
+                    </ButtonWithTooltip>
                 </div>
             </CardHeader>
             <CardContent className="flex-grow overflow-hidden px-2">