feat: add doubao provider and ByteDance sponsorship (#329)

* feat: add doubao provider and ByteDance sponsorship

- Add doubao provider using DeepSeek SDK with Volcengine base URL
- Add ByteDance Doubao sponsorship acknowledgment to about pages
- Update all README files (EN/CN/JA) with K2-thinking model info
- Update ai-providers.md with doubao configuration
- Keep both gateway and doubao providers after merge

* style: auto-format with Biome

* feat: add doubao and sglang to provider config panel

* fix: add doubao and sglang to validate-model API and logo maps

* docs: update ByteDance sponsorship note in all README versions

* docs: add Doubao logo to sponsorship note

* fix: use raw GitHub URL for Doubao logo in READMEs

* fix: separate link and image in sponsorship note

* fix: use PNG instead of SVG for Doubao logo

* fix: use current branch for PNG URL (will update to main after merge)

* docs: reorganize Deployment section and update image URLs to main

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

README.md

@@ -19,6 +19,7 @@ English | [中文](./docs/README_CN.md) | [日本語](./docs/README_JA.md)
 
 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.
 
+> Note: Thanks to <img src="https://raw.githubusercontent.com/DayuanJiang/next-ai-draw-io/main/public/doubao-color.png" alt="" height="20" /> [ByteDance Doubao](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project) sponsorship, the demo site now uses the powerful K2-thinking model!
 
 
 https://github.com/user-attachments/assets/9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1
@@ -26,17 +27,20 @@ https://github.com/user-attachments/assets/9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1
 
 
 ## Table of Contents
-- [Next AI Draw.io ](#next-ai-drawio-)
+- [Next AI Draw.io](#next-ai-drawio)
   - [Table of Contents](#table-of-contents)
   - [Examples](#examples)
   - [Features](#features)
   - [MCP Server (Preview)](#mcp-server-preview)
+    - [Claude Code CLI](#claude-code-cli)
   - [Getting Started](#getting-started)
     - [Try it Online](#try-it-online)
     - [Desktop Application](#desktop-application)
     - [Run with Docker (Recommended)](#run-with-docker-recommended)
     - [Installation](#installation)
   - [Deployment](#deployment)
+    - [Deploy on Vercel (Recommended)](#deploy-on-vercel-recommended)
+    - [Deploy on Cloudflare Workers](#deploy-on-cloudflare-workers)
   - [Multi-Provider Support](#multi-provider-support)
   - [How It Works](#how-it-works)
   - [Project Structure](#project-structure)
@@ -132,7 +136,7 @@ No installation needed! Try the app directly on our demo site:
 
 [![Live Demo](./public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/)
 
-> Note: Due to high traffic, the demo site currently uses minimax-m2. For best results, we recommend self-hosting with Claude Sonnet 4.5 or Claude Opus 4.5.
+
 
 > **Bring Your Own API Key**: You can use your own API key to bypass usage limits on the demo site. Click the Settings icon in the chat panel to configure your provider and API key. Your key is stored locally in your browser and is never stored on the server.
 
@@ -213,7 +217,7 @@ cp env.example .env.local
 
 Edit `.env.local` and configure your chosen provider:
 
--   Set `AI_PROVIDER` to your chosen provider (bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow)
+-   Set `AI_PROVIDER` to your chosen provider (doubao,bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow)
 -   Set `AI_MODEL` to the specific model you want to use
 -   Add the required API keys for your provider
 -   `TEMPERATURE`: Optional temperature setting (e.g., `0` for deterministic output). Leave unset for models that don't support it (e.g., reasoning models).
@@ -233,16 +237,15 @@ npm run dev
 
 ## Deployment
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new) from the creators of Next.js.
+### Deploy on Vercel (Recommended)
 
-Check out the [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
-
-Or you can deploy by this button.
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
 
-Be sure to **set the environment variables** in the Vercel dashboard as you did in your local `.env.local` file.
+The easiest way to deploy is using [Vercel](https://vercel.com/new), the creators of Next.js. Be sure to **set the environment variables** in the Vercel dashboard as you did in your local `.env.local` file.
 
-## Deploy on Cloudflare Workers
+See the [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+
+### Deploy on Cloudflare Workers
 
 [Go to Cloudflare Deploy Guide](./docs/Cloudflare_Deploy.md)
 
@@ -250,6 +253,7 @@ Be sure to **set the environment variables** in the Vercel dashboard as you did
 
 ## Multi-Provider Support
 
+-   [ByteDance Doubao](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project)
 -   AWS Bedrock (default)
 -   OpenAI
 -   Anthropic
@@ -260,6 +264,7 @@ Be sure to **set the environment variables** in the Vercel dashboard as you did
 -   DeepSeek
 -   SiliconFlow
 
+
 All providers except AWS Bedrock and OpenRouter support custom endpoints.
 
 📖 **[Detailed Provider Configuration Guide](./docs/ai-providers.md)** - See setup instructions for each provider.
@@ -300,6 +305,8 @@ public/               # Static assets including example images
 
 ## Support & Contact
 
+**Special thanks to [ByteDance Doubao](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project) for sponsoring the API token usage of the demo site!** Register on the ARK platform to get 500K free tokens for all models!
+
 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:

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

@@ -96,72 +96,68 @@ export default function AboutCN() {
                         </div>
                     </div>
 
-                    <div className="relative mb-8 rounded-2xl bg-gradient-to-br from-amber-50 via-orange-50 to-rose-50 p-[1px] shadow-lg">
+                    <div className="relative mb-8 rounded-2xl bg-gradient-to-br from-amber-50 via-orange-50 to-yellow-50 p-[1px] shadow-lg">
-                        <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-amber-400 via-orange-400 to-rose-400 opacity-20" />
+                        <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-amber-400 via-orange-400 to-yellow-400 opacity-20" />
                         <div className="relative rounded-2xl bg-white/80 backdrop-blur-sm p-6">
                             {/* Header */}
                             <div className="mb-4">
                                 <h3 className="text-lg font-bold text-gray-900 tracking-tight">
-                                    模型变更与用量限制{" "}
+                                    由字节跳动豆包提供支持
-                                    <span className="text-sm text-amber-600 font-medium italic font-normal">
-                                        (或者说：我的钱包顶不住了)
-                                    </span>
                                 </h3>
                             </div>
 
                             {/* Story */}
                             <div className="space-y-3 text-sm text-gray-700 leading-relaxed mb-5">
                                 <p>
-                                    大家对这个项目的热情太高了——看来大家都真的很喜欢画图！但这也带来了一个幸福的烦恼：我们经常触发出上游
+                                    好消息！感谢{" "}
-                                    AI 接口的频率限制
+                                    <a
-                                    (TPS/TPM)。一旦超限，系统就会暂停，导致请求失败。
+                                        href="https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project"
-                                </p>
+                                        target="_blank"
-                                <p>
+                                        rel="noopener noreferrer"
-                                    由于使用量过高，我已将模型从 Opus 4.5 更换为{" "}
+                                        className="font-semibold text-blue-600 hover:underline"
+                                    >
+                                        字节跳动豆包
+                                    </a>
+                                    的慷慨赞助，演示站点现已接入强大的{" "}
                                     <span className="font-semibold text-amber-700">
-                                        Haiku 4.5
+                                        K2-thinking
-                                    </span>
+                                    </span>{" "}
-                                    ，以降低成本。
+                                    模型，图表生成效果更佳！点击链接注册即可领取{" "}
-                                </p>
-                                <p>
-                                    作为一个
                                     <span className="font-semibold text-amber-700">
-                                        独立开发者
+                                        50万免费Token
                                     </span>
-                                    ，目前的 API
+                                    ，适用于所有模型！
-                                    费用全是我自己在掏腰包（纯属为爱发电）。为了保证服务能细水长流，同时也为了避免我个人陷入财务危机，我还设置了以下临时用量限制：
                                 </p>
                             </div>
 
-                            {/* Limits Cards */}
+                            {/* Usage Limits */}
-                            <div className="grid grid-cols-2 gap-3 mb-5">
+                            <p className="text-sm text-gray-600 mb-3">
-                                <div className="rounded-xl bg-gradient-to-br from-amber-100 to-orange-100 p-4 text-center">
+                                当前使用限制：
-                                    <div className="text-xs font-medium text-amber-700 uppercase tracking-wide mb-1">
+                            </p>
-                                        Token 用量
+                            <div className="grid grid-cols-3 gap-3 mb-5">
-                                    </div>
+                                <div className="text-center p-3 bg-white/60 rounded-lg">
-                                    <div className="text-lg font-bold text-gray-900">
+                                    <p className="text-lg font-bold text-amber-600">
-                                        {formatNumber(tpmLimit)}
+                                        {formatNumber(dailyRequestLimit)}
-                                        <span className="text-sm font-normal text-gray-600">
+                                    </p>
-                                            /分钟
+                                    <p className="text-xs text-gray-500">
-                                        </span>
+                                        请求/天
-                                    </div>
+                                    </p>
-                                    <div className="text-lg font-bold text-gray-900">
-                                        {formatNumber(dailyTokenLimit)}
-                                        <span className="text-sm font-normal text-gray-600">
-                                            /天
-                                        </span>
-                                    </div>
                                 </div>
-                                <div className="rounded-xl bg-gradient-to-br from-amber-100 to-orange-100 p-4 text-center">
+                                <div className="text-center p-3 bg-white/60 rounded-lg">
-                                    <div className="text-xs font-medium text-amber-700 uppercase tracking-wide mb-1">
+                                    <p className="text-lg font-bold text-amber-600">
-                                        每日请求数
+                                        {formatNumber(dailyTokenLimit)}
-                                    </div>
+                                    </p>
-                                    <div className="text-2xl font-bold text-gray-900">
+                                    <p className="text-xs text-gray-500">
-                                        {dailyRequestLimit}
+                                        Token/天
-                                    </div>
+                                    </p>
-                                    <div className="text-sm text-gray-600">
+                                </div>
-                                        次
+                                <div className="text-center p-3 bg-white/60 rounded-lg">
-                                    </div>
+                                    <p className="text-lg font-bold text-amber-600">
+                                        {formatNumber(tpmLimit)}
+                                    </p>
+                                    <p className="text-xs text-gray-500">
+                                        Token/分钟
+                                    </p>
                                 </div>
                             </div>
 
@@ -171,48 +167,19 @@ export default function AboutCN() {
                             </div>
 
                             {/* Bring Your Own Key */}
-                            <div className="text-center mb-5">
+                            <div className="text-center">
                                 <h4 className="text-base font-bold text-gray-900 mb-2">
                                     使用自己的 API Key
                                 </h4>
                                 <p className="text-sm text-gray-600 mb-2 max-w-md mx-auto">
-                                    您可以使用自己的 API Key
+                                    您也可以使用自己的 API
-                                    来绕过这些限制。点击聊天面板中的设置图标即可配置您的
+                                    Key，支持多种服务商。点击聊天面板中的设置图标即可配置。
-                                    Provider 和 API Key。
                                 </p>
                                 <p className="text-xs text-gray-500 max-w-md mx-auto">
                                     您的 Key
                                     仅保存在浏览器本地，不会被存储在服务器上。
                                 </p>
                             </div>
-
-                            {/* Divider */}
-                            <div className="flex items-center gap-3 mb-5">
-                                <div className="flex-1 h-px bg-gradient-to-r from-transparent via-amber-300 to-transparent" />
-                            </div>
-
-                            {/* Sponsorship CTA */}
-                            <div className="text-center">
-                                <h4 className="text-base font-bold text-gray-900 mb-2">
-                                    寻求赞助 (求大佬捞一把)
-                                </h4>
-                                <p className="text-sm text-gray-600 mb-4 max-w-md mx-auto">
-                                    要想彻底解除这些限制，扩容后端是唯一的办法。我正在积极寻求
-                                    AI API 提供商或云平台的赞助。
-                                </p>
-                                <p className="text-sm text-gray-600 mb-4 max-w-md mx-auto">
-                                    作为回报（无论是额度支持还是资金支持），我将在
-                                    GitHub 仓库和 Live Demo
-                                    网站的显眼位置展示贵公司的 Logo
-                                    作为平台赞助商。
-                                </p>
-                                <a
-                                    href="mailto:me@jiang.jp"
-                                    className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-gradient-to-r from-amber-500 to-orange-500 text-white font-medium text-sm shadow-md hover:shadow-lg hover:scale-105 transition-all duration-200"
-                                >
-                                    联系我
-                                </a>
-                            </div>
                         </div>
                     </div>
 
@@ -377,6 +344,16 @@ export default function AboutCN() {
                         多提供商支持
                     </h2>
                     <ul className="list-disc pl-6 text-gray-700 space-y-1">
+                        <li>
+                            <a
+                                href="https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-blue-600 hover:underline"
+                            >
+                                字节跳动豆包
+                            </a>
+                        </li>
                         <li>AWS Bedrock（默认）</li>
                         <li>
                             OpenAI / OpenAI兼容API（通过{" "}
@@ -388,6 +365,7 @@ export default function AboutCN() {
                         <li>Ollama</li>
                         <li>OpenRouter</li>
                         <li>DeepSeek</li>
+                        <li>SiliconFlow</li>
                     </ul>
                     <p className="text-gray-700 mt-4">
                         注意：<code>claude-sonnet-4-5</code>{" "}
@@ -395,18 +373,21 @@ export default function AboutCN() {
                     </p>
 
                     {/* Support */}
-                    <div className="flex items-center gap-4 mt-10 mb-4">
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
-                        <h2 className="text-2xl font-semibold text-gray-900">
+                        支持与联系
-                            支持与联系
+                    </h2>
-                        </h2>
+                    <p className="text-gray-700 mb-4 font-semibold">
-                        <iframe
+                        特别感谢{" "}
-                            src="https://github.com/sponsors/DayuanJiang/button"
+                        <a
-                            title="Sponsor DayuanJiang"
+                            href="https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project"
-                            height="32"
+                            target="_blank"
-                            width="114"
+                            rel="noopener noreferrer"
-                            style={{ border: 0, borderRadius: 6 }}
+                            className="text-blue-600 hover:underline"
-                        />
+                        >
-                    </div>
+                            字节跳动豆包
+                        </a>{" "}
+                        为本站提供 API Token 支持！
+                    </p>
                     <p className="text-gray-700">
                         如果您觉得这个项目有用，请考虑{" "}
                         <a

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

@@ -104,73 +104,68 @@ export default function AboutJA() {
                         </div>
                     </div>
 
-                    <div className="relative mb-8 rounded-2xl bg-gradient-to-br from-amber-50 via-orange-50 to-rose-50 p-[1px] shadow-lg">
+                    <div className="relative mb-8 rounded-2xl bg-gradient-to-br from-amber-50 via-orange-50 to-yellow-50 p-[1px] shadow-lg">
-                        <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-amber-400 via-orange-400 to-rose-400 opacity-20" />
+                        <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-amber-400 via-orange-400 to-yellow-400 opacity-20" />
                         <div className="relative rounded-2xl bg-white/80 backdrop-blur-sm p-6">
                             {/* Header */}
                             <div className="mb-4">
                                 <h3 className="text-lg font-bold text-gray-900 tracking-tight">
-                                    モデル変更と利用制限について{" "}
+                                    ByteDance Doubao提供
-                                    <span className="text-sm text-amber-600 font-medium italic font-normal">
-                                        （別名：お財布が悲鳴を上げています）
-                                    </span>
                                 </h3>
                             </div>
 
                             {/* Story */}
                             <div className="space-y-3 text-sm text-gray-700 leading-relaxed mb-5">
                                 <p>
-                                    予想以上の反響をいただき、ありがとうございます！皆様にダイアグラム作成を楽しんでいただいているのは嬉しい限りですが、その熱量により
+                                    朗報です！
-                                    AI API のレート制限 (TPS/TPM)
+                                    <a
-                                    に頻繁に引っかかってしまっています。制限に達するとシステムが一時停止し、エラーが発生してしまいます。
+                                        href="https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project"
-                                </p>
+                                        target="_blank"
-                                <p>
+                                        rel="noopener noreferrer"
-                                    利用量の増加に伴い、コスト削減のためモデルを
+                                        className="font-semibold text-blue-600 hover:underline"
-                                    Opus 4.5 から{" "}
+                                    >
+                                        ByteDance Doubao
+                                    </a>
+                                    様のご支援により、デモサイトでは強力な{" "}
                                     <span className="font-semibold text-amber-700">
-                                        Haiku 4.5
+                                        K2-thinking
                                     </span>{" "}
-                                    に変更しました。
+                                    モデルを利用できるようになり、より高品質なダイアグラム生成が可能になりました。リンクから登録すると、すべてのモデルで使える{" "}
-                                </p>
-                                <p>
-                                    私は現在、
                                     <span className="font-semibold text-amber-700">
-                                        個人開発者
+                                        50万トークン
                                     </span>
-                                    として API
+                                    が無料でもらえます！
-                                    費用を全額自腹で負担しています。サービスを継続し、かつ私自身が借金を背負わないようにするため（笑）、一時的に以下の利用制限も設けさせていただきました。
                                 </p>
                             </div>
 
-                            {/* Limits Cards */}
+                            {/* Usage Limits */}
-                            <div className="grid grid-cols-2 gap-3 mb-5">
+                            <p className="text-sm text-gray-600 mb-3">
-                                <div className="rounded-xl bg-gradient-to-br from-amber-100 to-orange-100 p-4 text-center">
+                                現在の使用制限：
-                                    <div className="text-xs font-medium text-amber-700 uppercase tracking-wide mb-1">
+                            </p>
-                                        トークン使用量
+                            <div className="grid grid-cols-3 gap-3 mb-5">
-                                    </div>
+                                <div className="text-center p-3 bg-white/60 rounded-lg">
-                                    <div className="text-lg font-bold text-gray-900">
+                                    <p className="text-lg font-bold text-amber-600">
-                                        {formatNumber(tpmLimit)}
+                                        {formatNumber(dailyRequestLimit)}
-                                        <span className="text-sm font-normal text-gray-600">
+                                    </p>
-                                            /分
+                                    <p className="text-xs text-gray-500">
-                                        </span>
+                                        リクエスト/日
-                                    </div>
+                                    </p>
-                                    <div className="text-lg font-bold text-gray-900">
-                                        {formatNumber(dailyTokenLimit)}
-                                        <span className="text-sm font-normal text-gray-600">
-                                            /日
-                                        </span>
-                                    </div>
                                 </div>
-                                <div className="rounded-xl bg-gradient-to-br from-amber-100 to-orange-100 p-4 text-center">
+                                <div className="text-center p-3 bg-white/60 rounded-lg">
-                                    <div className="text-xs font-medium text-amber-700 uppercase tracking-wide mb-1">
+                                    <p className="text-lg font-bold text-amber-600">
-                                        1日のリクエスト数
+                                        {formatNumber(dailyTokenLimit)}
-                                    </div>
+                                    </p>
-                                    <div className="text-2xl font-bold text-gray-900">
+                                    <p className="text-xs text-gray-500">
-                                        {dailyRequestLimit}
+                                        トークン/日
-                                    </div>
+                                    </p>
-                                    <div className="text-sm text-gray-600">
+                                </div>
-                                        回
+                                <div className="text-center p-3 bg-white/60 rounded-lg">
-                                    </div>
+                                    <p className="text-lg font-bold text-amber-600">
+                                        {formatNumber(tpmLimit)}
+                                    </p>
+                                    <p className="text-xs text-gray-500">
+                                        トークン/分
+                                    </p>
                                 </div>
                             </div>
 
@@ -180,44 +175,17 @@ export default function AboutJA() {
                             </div>
 
                             {/* Bring Your Own Key */}
-                            <div className="text-center mb-5">
+                            <div className="text-center">
                                 <h4 className="text-base font-bold text-gray-900 mb-2">
                                     自分のAPIキーを使用
                                 </h4>
                                 <p className="text-sm text-gray-600 mb-2 max-w-md mx-auto">
-                                    自分のAPIキーを使用することで、これらの制限を回避できます。チャットパネルの設定アイコンをクリックして、プロバイダーとAPIキーを設定してください。
+                                    お好みのプロバイダーで自分のAPIキーを使用することもできます。チャットパネルの設定アイコンをクリックして設定してください。
                                 </p>
                                 <p className="text-xs text-gray-500 max-w-md mx-auto">
                                     キーはブラウザのローカルに保存され、サーバーには保存されません。
                                 </p>
                             </div>
-
-                            {/* Divider */}
-                            <div className="flex items-center gap-3 mb-5">
-                                <div className="flex-1 h-px bg-gradient-to-r from-transparent via-amber-300 to-transparent" />
-                            </div>
-
-                            {/* Sponsorship CTA */}
-                            <div className="text-center">
-                                <h4 className="text-base font-bold text-gray-900 mb-2">
-                                    スポンサー募集
-                                </h4>
-                                <p className="text-sm text-gray-600 mb-4 max-w-md mx-auto">
-                                    これらの制限を取り払い、バックエンドをスケールさせるには皆様の支援が必要です。現在、AI
-                                    API
-                                    プロバイダー様やクラウドプラットフォーム様からのスポンサー支援を積極的に募集しています。
-                                </p>
-                                <p className="text-sm text-gray-600 mb-4 max-w-md mx-auto">
-                                    ご支援（クレジット提供や資金援助）をいただける場合、GitHub
-                                    リポジトリおよびデモサイトにて、プラットフォームスポンサーとして貴社を大々的にご紹介させていただきます。
-                                </p>
-                                <a
-                                    href="mailto:me@jiang.jp"
-                                    className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-gradient-to-r from-amber-500 to-orange-500 text-white font-medium text-sm shadow-md hover:shadow-lg hover:scale-105 transition-all duration-200"
-                                >
-                                    お問い合わせ
-                                </a>
-                            </div>
                         </div>
                     </div>
 
@@ -391,6 +359,16 @@ export default function AboutJA() {
                         マルチプロバイダーサポート
                     </h2>
                     <ul className="list-disc pl-6 text-gray-700 space-y-1">
+                        <li>
+                            <a
+                                href="https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-blue-600 hover:underline"
+                            >
+                                ByteDance Doubao
+                            </a>
+                        </li>
                         <li>AWS Bedrock（デフォルト）</li>
                         <li>
                             OpenAI / OpenAI互換API（<code>OPENAI_BASE_URL</code>
@@ -402,6 +380,7 @@ export default function AboutJA() {
                         <li>Ollama</li>
                         <li>OpenRouter</li>
                         <li>DeepSeek</li>
+                        <li>SiliconFlow</li>
                     </ul>
                     <p className="text-gray-700 mt-4">
                         注：<code>claude-sonnet-4-5</code>
@@ -409,18 +388,21 @@ export default function AboutJA() {
                     </p>
 
                     {/* Support */}
-                    <div className="flex items-center gap-4 mt-10 mb-4">
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
-                        <h2 className="text-2xl font-semibold text-gray-900">
+                        サポート＆お問い合わせ
-                            サポート＆お問い合わせ
+                    </h2>
-                        </h2>
+                    <p className="text-gray-700 mb-4 font-semibold">
-                        <iframe
+                        デモサイトのAPIトークン使用を支援してくださった{" "}
-                            src="https://github.com/sponsors/DayuanJiang/button"
+                        <a
-                            title="Sponsor DayuanJiang"
+                            href="https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project"
-                            height="32"
+                            target="_blank"
-                            width="114"
+                            rel="noopener noreferrer"
-                            style={{ border: 0, borderRadius: 6 }}
+                            className="text-blue-600 hover:underline"
-                        />
+                        >
-                    </div>
+                            ByteDance Doubao
+                        </a>{" "}
+                        様に、心より感謝申し上げます。
+                    </p>
                     <p className="text-gray-700">
                         このプロジェクトが役に立ったら、ライブデモサイトのホスティングを支援するために{" "}
                         <a

app/[lang]/about/page.tsx

@@ -104,79 +104,70 @@ export default function About() {
                         </div>
                     </div>
 
-                    <div className="relative mb-8 rounded-2xl bg-gradient-to-br from-amber-50 via-orange-50 to-rose-50 p-[1px] shadow-lg">
+                    <div className="relative mb-8 rounded-2xl bg-gradient-to-br from-amber-50 via-orange-50 to-yellow-50 p-[1px] shadow-lg">
-                        <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-amber-400 via-orange-400 to-rose-400 opacity-20" />
+                        <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-amber-400 via-orange-400 to-yellow-400 opacity-20" />
                         <div className="relative rounded-2xl bg-white/80 backdrop-blur-sm p-6">
                             {/* Header */}
                             <div className="mb-4">
                                 <h3 className="text-lg font-bold text-gray-900 tracking-tight">
-                                    Model Change & Usage Limits{" "}
+                                    Sponsored by ByteDance Doubao
-                                    <span className="text-sm text-amber-600 font-medium italic font-normal">
-                                        (Or: Why My Wallet is Crying)
-                                    </span>
                                 </h3>
                             </div>
 
                             {/* Story */}
                             <div className="space-y-3 text-sm text-gray-700 leading-relaxed mb-5">
                                 <p>
-                                    The response to this project has been
+                                    Great news! Thanks to the generous
-                                    incredible—you all love making diagrams!
+                                    sponsorship from{" "}
-                                    However, this enthusiasm means we are
+                                    <a
-                                    frequently hitting the AI API rate limits
+                                        href="https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project"
-                                    (TPS/TPM). When this happens, the system
+                                        target="_blank"
-                                    pauses, leading to failed requests.
+                                        rel="noopener noreferrer"
-                                </p>
+                                        className="font-semibold text-blue-600 hover:underline"
-                                <p>
+                                    >
-                                    Due to the high usage, I have changed the
+                                        ByteDance Doubao
-                                    model from Opus 4.5 to{" "}
+                                    </a>
+                                    , the demo site now uses the powerful{" "}
                                     <span className="font-semibold text-amber-700">
-                                        Haiku 4.5
+                                        K2-thinking
-                                    </span>
+                                    </span>{" "}
-                                    , which is more cost-effective.
+                                    model for better diagram generation! Sign up
-                                </p>
+                                    via the link to get{" "}
-                                <p>
-                                    As an{" "}
                                     <span className="font-semibold text-amber-700">
-                                        indie developer
+                                        500K free tokens
-                                    </span>
+                                    </span>{" "}
-                                    , I am currently footing the entire API
+                                    for all models!
-                                    bill. To keep the lights on and ensure the
-                                    service remains available to everyone
-                                    without sending me into debt, I have also
-                                    implemented the following temporary caps:
                                 </p>
                             </div>
 
-                            {/* Limits Cards */}
+                            {/* Usage Limits */}
-                            <div className="grid grid-cols-2 gap-3 mb-5">
+                            <p className="text-sm text-gray-600 mb-3">
-                                <div className="rounded-xl bg-gradient-to-br from-amber-100 to-orange-100 p-4 text-center">
+                                Please note the current usage limits:
-                                    <div className="text-xs font-medium text-amber-700 uppercase tracking-wide mb-1">
+                            </p>
-                                        Token Usage
+                            <div className="grid grid-cols-3 gap-3 mb-5">
-                                    </div>
+                                <div className="text-center p-3 bg-white/60 rounded-lg">
-                                    <div className="text-lg font-bold text-gray-900">
+                                    <p className="text-lg font-bold text-amber-600">
-                                        {formatNumber(tpmLimit)}
+                                        {formatNumber(dailyRequestLimit)}
-                                        <span className="text-sm font-normal text-gray-600">
+                                    </p>
-                                            /min
+                                    <p className="text-xs text-gray-500">
-                                        </span>
+                                        requests/day
-                                    </div>
+                                    </p>
-                                    <div className="text-lg font-bold text-gray-900">
-                                        {formatNumber(dailyTokenLimit)}
-                                        <span className="text-sm font-normal text-gray-600">
-                                            /day
-                                        </span>
-                                    </div>
                                 </div>
-                                <div className="rounded-xl bg-gradient-to-br from-amber-100 to-orange-100 p-4 text-center">
+                                <div className="text-center p-3 bg-white/60 rounded-lg">
-                                    <div className="text-xs font-medium text-amber-700 uppercase tracking-wide mb-1">
+                                    <p className="text-lg font-bold text-amber-600">
-                                        Daily Requests
+                                        {formatNumber(dailyTokenLimit)}
-                                    </div>
+                                    </p>
-                                    <div className="text-2xl font-bold text-gray-900">
+                                    <p className="text-xs text-gray-500">
-                                        {dailyRequestLimit}
+                                        tokens/day
-                                    </div>
+                                    </p>
-                                    <div className="text-sm text-gray-600">
+                                </div>
-                                        requests
+                                <div className="text-center p-3 bg-white/60 rounded-lg">
-                                    </div>
+                                    <p className="text-lg font-bold text-amber-600">
+                                        {formatNumber(tpmLimit)}
+                                    </p>
+                                    <p className="text-xs text-gray-500">
+                                        tokens/min
+                                    </p>
                                 </div>
                             </div>
 
@@ -186,51 +177,21 @@ export default function About() {
                             </div>
 
                             {/* Bring Your Own Key */}
-                            <div className="text-center mb-5">
+                            <div className="text-center">
                                 <h4 className="text-base font-bold text-gray-900 mb-2">
                                     Bring Your Own API Key
                                 </h4>
                                 <p className="text-sm text-gray-600 mb-2 max-w-md mx-auto">
-                                    You can use your own API key to bypass these
+                                    You can also use your own API key with any
-                                    limits. Click the Settings icon in the chat
+                                    supported provider. Click the Settings icon
-                                    panel to configure your provider and API
+                                    in the chat panel to configure your provider
-                                    key.
+                                    and API key.
                                 </p>
                                 <p className="text-xs text-gray-500 max-w-md mx-auto">
                                     Your key is stored locally in your browser
                                     and is never stored on the server.
                                 </p>
                             </div>
-
-                            {/* Divider */}
-                            <div className="flex items-center gap-3 mb-5">
-                                <div className="flex-1 h-px bg-gradient-to-r from-transparent via-amber-300 to-transparent" />
-                            </div>
-
-                            {/* Sponsorship CTA */}
-                            <div className="text-center">
-                                <h4 className="text-base font-bold text-gray-900 mb-2">
-                                    Call for Sponsorship
-                                </h4>
-                                <p className="text-sm text-gray-600 mb-4 max-w-md mx-auto">
-                                    Scaling the backend is the only way to
-                                    remove these limits. I am actively seeking
-                                    sponsorship from AI API providers or Cloud
-                                    Platforms.
-                                </p>
-                                <p className="text-sm text-gray-600 mb-4 max-w-md mx-auto">
-                                    In return for support (credits or funding),
-                                    I will prominently feature your company as a
-                                    platform sponsor on both the GitHub
-                                    repository and the live demo site.
-                                </p>
-                                <a
-                                    href="mailto:me@jiang.jp"
-                                    className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-gradient-to-r from-amber-500 to-orange-500 text-white font-medium text-sm shadow-md hover:shadow-lg hover:scale-105 transition-all duration-200"
-                                >
-                                    Contact Me
-                                </a>
-                            </div>
                         </div>
                     </div>
 
@@ -417,6 +378,16 @@ export default function About() {
                         Multi-Provider Support
                     </h2>
                     <ul className="list-disc pl-6 text-gray-700 space-y-1">
+                        <li>
+                            <a
+                                href="https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-blue-600 hover:underline"
+                            >
+                                ByteDance Doubao
+                            </a>
+                        </li>
                         <li>AWS Bedrock (default)</li>
                         <li>
                             OpenAI / OpenAI-compatible APIs (via{" "}
@@ -428,6 +399,7 @@ export default function About() {
                         <li>Ollama</li>
                         <li>OpenRouter</li>
                         <li>DeepSeek</li>
+                        <li>SiliconFlow</li>
                     </ul>
                     <p className="text-gray-700 mt-4">
                         Note that <code>claude-sonnet-4-5</code> has trained on
@@ -437,18 +409,21 @@ export default function About() {
                     </p>
 
                     {/* Support */}
-                    <div className="flex items-center gap-4 mt-10 mb-4">
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
-                        <h2 className="text-2xl font-semibold text-gray-900">
+                        Support &amp; Contact
-                            Support &amp; Contact
+                    </h2>
-                        </h2>
+                    <p className="text-gray-700 mb-4 font-semibold">
-                        <iframe
+                        Special thanks to{" "}
-                            src="https://github.com/sponsors/DayuanJiang/button"
+                        <a
-                            title="Sponsor DayuanJiang"
+                            href="https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project"
-                            height="32"
+                            target="_blank"
-                            width="114"
+                            rel="noopener noreferrer"
-                            style={{ border: 0, borderRadius: 6 }}
+                            className="text-blue-600 hover:underline"
-                        />
+                        >
-                    </div>
+                            ByteDance Doubao
+                        </a>{" "}
+                        for sponsoring the API token usage of the demo site!
+                    </p>
                     <p className="text-gray-700">
                         If you find this project useful, please consider{" "}
                         <a

app/api/validate-model/route.ts

@@ -225,6 +225,27 @@ export async function POST(req: Request) {
                 break
             }
 
+            case "sglang": {
+                // SGLang is OpenAI-compatible
+                const sglang = createOpenAI({
+                    apiKey: apiKey || "not-needed",
+                    baseURL: baseUrl || "http://127.0.0.1:8000/v1",
+                })
+                model = sglang.chat(modelId)
+                break
+            }
+
+            case "doubao": {
+                // ByteDance Doubao uses DeepSeek-compatible API
+                const doubao = createDeepSeek({
+                    apiKey,
+                    baseURL:
+                        baseUrl || "https://ark.cn-beijing.volces.com/api/v3",
+                })
+                model = doubao(modelId)
+                break
+            }
+
             default:
                 return NextResponse.json(
                     { valid: false, error: `Unknown provider: ${provider}` },

components/chat-panel.tsx

@@ -3,12 +3,14 @@
 import { useChat } from "@ai-sdk/react"
 import { DefaultChatTransport } from "ai"
 import {
+    AlertTriangle,
     MessageSquarePlus,
     PanelRightClose,
     PanelRightOpen,
     Settings,
 } from "lucide-react"
 import Image from "next/image"
+import Link from "next/link"
 import type React from "react"
 import { useCallback, useEffect, useRef, useState } from "react"
 import { flushSync } from "react-dom"
@@ -946,6 +948,32 @@ export default function ChatPanel({
                                 Next AI Drawio
                             </h1>
                         </div>
+                        {!isMobile && (
+                            <Link
+                                href="/about"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-sm text-muted-foreground hover:text-foreground transition-colors ml-2"
+                            >
+                                About
+                            </Link>
+                        )}
+                        {!isMobile && (
+                            <Link
+                                href="/about"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <ButtonWithTooltip
+                                    tooltipContent="Sponsored by ByteDance Doubao K2-thinking. See About page for details."
+                                    variant="ghost"
+                                    size="icon"
+                                    className="h-6 w-6 text-amber-500 hover:text-amber-600"
+                                >
+                                    <AlertTriangle className="h-4 w-4" />
+                                </ButtonWithTooltip>
+                            </Link>
+                        )}
                     </div>
                     <div className="flex items-center gap-1 justify-end overflow-visible">
                         <ButtonWithTooltip

components/model-config-dialog.tsx

@@ -76,7 +76,9 @@ const PROVIDER_LOGO_MAP: Record<string, string> = {
     openrouter: "openrouter",
     deepseek: "deepseek",
     siliconflow: "siliconflow",
+    sglang: "openai", // SGLang is OpenAI-compatible
     gateway: "vercel",
+    doubao: "bytedance",
 }
 
 // Provider logo component
@@ -87,10 +89,16 @@ function ProviderLogo({
     provider: ProviderName
     className?: string
 }) {
-    // Use Lucide icon for bedrock since models.dev doesn't have a good AWS icon
+    // Use Lucide icons for providers without models.dev logos
     if (provider === "bedrock") {
         return <Cloud className={cn("size-4", className)} />
     }
+    if (provider === "sglang") {
+        return <Server className={cn("size-4", className)} />
+    }
+    if (provider === "doubao") {
+        return <Sparkles className={cn("size-4", className)} />
+    }
 
     const logoName = PROVIDER_LOGO_MAP[provider] || provider
     return (

components/model-selector.tsx

@@ -46,7 +46,9 @@ const PROVIDER_LOGO_MAP: Record<string, string> = {
     openrouter: "openrouter",
     deepseek: "deepseek",
     siliconflow: "siliconflow",
+    sglang: "openai", // SGLang is OpenAI-compatible, use OpenAI logo
     gateway: "vercel",
+    doubao: "bytedance",
 }
 
 // Group models by providerLabel (handles duplicate providers)

docs/README_CN.md

@@ -19,6 +19,8 @@
 
 一个集成了AI功能的Next.js网页应用，与draw.io图表无缝结合。通过自然语言命令和AI辅助可视化来创建、修改和增强图表。
 
+> 注：感谢 <img src="https://raw.githubusercontent.com/DayuanJiang/next-ai-draw-io/main/public/doubao-color.png" alt="" height="20" /> [字节跳动豆包](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project) 的赞助支持，本项目的 Demo 现已接入强大的 K2-thinking 模型！
+
 https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
 
 ## 目录
@@ -127,8 +129,6 @@ claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
 
 [![Live Demo](../public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/)
 
-> 注意：由于访问量较大，演示站点目前使用 minimax-m2 模型。如需获得最佳效果，建议使用 Claude Sonnet 4.5 或 Claude Opus 4.5 自行部署。
-
 > **使用自己的 API Key**：您可以使用自己的 API Key 来绕过演示站点的用量限制。点击聊天面板中的设置图标即可配置您的 Provider 和 API Key。您的 Key 仅保存在浏览器本地，不会被存储在服务器上。
 
 ### 使用Docker运行（推荐）
@@ -186,7 +186,7 @@ cp env.example .env.local
 
 编辑 `.env.local` 并配置您选择的提供商：
 
--   将 `AI_PROVIDER` 设置为您选择的提供商（bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow）
+-   将 `AI_PROVIDER` 设置为您选择的提供商（bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow, doubao）
 -   将 `AI_MODEL` 设置为您要使用的特定模型
 -   添加您的提供商所需的API密钥
 -   `TEMPERATURE`：可选的温度设置（例如 `0` 表示确定性输出）。对于不支持此参数的模型（如推理模型），请不要设置。
@@ -218,6 +218,7 @@ npm run dev
 
 ## 多提供商支持
 
+-   [字节跳动豆包](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project)
 -   AWS Bedrock（默认）
 -   OpenAI
 -   Anthropic
@@ -268,6 +269,8 @@ public/               # 静态资源包括示例图片
 
 ## 支持与联系
 
+**特别感谢[字节跳动豆包](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project)赞助演示站点的 API Token 使用！** 注册火山引擎 ARK 平台即可获得50万免费Token！
+
 如果您觉得这个项目有用，请考虑[赞助](https://github.com/sponsors/DayuanJiang)来帮助我托管在线演示站点！
 
 如需支持或咨询，请在GitHub仓库上提交issue或联系维护者：

docs/README_JA.md

@@ -19,6 +19,8 @@
 
 AI機能とdraw.ioダイアグラムを統合したNext.jsウェブアプリケーションです。自然言語コマンドとAI支援の可視化により、ダイアグラムを作成、修正、強化できます。
 
+> 注：<img src="https://raw.githubusercontent.com/DayuanJiang/next-ai-draw-io/main/public/doubao-color.png" alt="" height="20" /> [ByteDance Doubao](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project) のご支援により、デモサイトに強力な K2-thinking モデルを導入しました！
+
 https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
 
 ## 目次
@@ -127,8 +129,6 @@ Claudeにダイアグラムの作成を依頼：
 
 [![Live Demo](../public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/)
 
-> 注意：アクセス数が多いため、デモサイトでは現在 minimax-m2 モデルを使用しています。最高の結果を得るには、Claude Sonnet 4.5 または Claude Opus 4.5 でのセルフホスティングをお勧めします。
-
 > **自分のAPIキーを使用**：自分のAPIキーを使用することで、デモサイトの利用制限を回避できます。チャットパネルの設定アイコンをクリックして、プロバイダーとAPIキーを設定してください。キーはブラウザのローカルに保存され、サーバーには保存されません。
 
 ### Dockerで実行（推奨）
@@ -186,7 +186,7 @@ cp env.example .env.local
 
 `.env.local`を編集して選択したプロバイダーを設定：
 
--   `AI_PROVIDER`を選択したプロバイダーに設定（bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow）
+-   `AI_PROVIDER`を選択したプロバイダーに設定（bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow, doubao）
 -   `AI_MODEL`を使用する特定のモデルに設定
 -   プロバイダーに必要なAPIキーを追加
 -   `TEMPERATURE`：オプションの温度設定（例：`0`で決定論的な出力）。温度をサポートしないモデル（推論モデルなど）では設定しないでください。
@@ -218,6 +218,7 @@ Next.jsアプリをデプロイする最も簡単な方法は、Next.jsの作成
 
 ## マルチプロバイダーサポート
 
+-   [ByteDance Doubao](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project)
 -   AWS Bedrock（デフォルト）
 -   OpenAI
 -   Anthropic
@@ -268,6 +269,8 @@ public/               # サンプル画像を含む静的アセット
 
 ## サポート＆お問い合わせ
 
+**デモサイトのAPIトークン使用を支援してくださった[ByteDance Doubao](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project)に特別な感謝を申し上げます！** ARKプラットフォームに登録すると、50万トークンが無料でもらえます！
+
 このプロジェクトが役に立ったら、ライブデモサイトのホスティングを支援するために[スポンサー](https://github.com/sponsors/DayuanJiang)をご検討ください！
 
 サポートやお問い合わせについては、GitHubリポジトリでissueを開くか、メンテナーにご連絡ください：

docs/ai-providers.md

@@ -11,6 +11,15 @@ This guide explains how to configure different AI model providers for next-ai-dr
 
 ## Supported Providers
 
+### Doubao (ByteDance Volcengine)
+
+> **Free tokens**: Register on the [Volcengine ARK platform](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project) to get 500K free tokens for all models!
+
+```bash
+DOUBAO_API_KEY=your_api_key
+AI_MODEL=doubao-seed-1-8-251215  # or other Doubao model
+```
+
 ### Google Gemini
 
 ```bash
@@ -76,6 +85,8 @@ Optional custom endpoint (defaults to the recommended domain):
 SILICONFLOW_BASE_URL=https://api.siliconflow.com/v1  # or https://api.siliconflow.cn/v1
 ```
 
+
+
 ### Azure OpenAI
 
 ```bash
@@ -179,7 +190,7 @@ If you only configure **one** provider's API key, the system will automatically
 If you configure **multiple** API keys, you must explicitly set `AI_PROVIDER`:
 
 ```bash
-AI_PROVIDER=google  # or: openai, anthropic, deepseek, siliconflow, azure, bedrock, openrouter, ollama, gateway
+AI_PROVIDER=google  # or: openai, anthropic, deepseek, siliconflow, doubao, azure, bedrock, openrouter, ollama, gateway
 ```
 
 ## Model Capability Requirements

env.example

@@ -72,6 +72,10 @@ AI_MODEL=global.anthropic.claude-sonnet-4-5-20250929-v1:0
 # SGLANG_API_KEY=your-sglang-api-key
 # SGLANG_BASE_URL=http://127.0.0.1:8000/v1  # Your SGLang endpoint
 
+# ByteDance Doubao Configuration (via Volcengine)
+# DOUBAO_API_KEY=your-doubao-api-key
+# DOUBAO_BASE_URL=https://ark.cn-beijing.volces.com/api/v3  # ByteDance Volcengine endpoint
+
 # Vercel AI Gateway Configuration
 # Get your API key from: https://vercel.com/ai-gateway
 # Model format: "provider/model" e.g., "openai/gpt-4o", "anthropic/claude-sonnet-4-5"

lib/ai-providers.ts

@@ -21,6 +21,7 @@ export type ProviderName =
     | "siliconflow"
     | "sglang"
     | "gateway"
+    | "doubao"
 
 interface ModelConfig {
     model: any
@@ -53,6 +54,7 @@ const ALLOWED_CLIENT_PROVIDERS: ProviderName[] = [
     "siliconflow",
     "sglang",
     "gateway",
+    "doubao",
 ]
 
 // Bedrock provider options for Anthropic beta features
@@ -346,7 +348,8 @@ function buildProviderOptions(
         case "openrouter":
         case "siliconflow":
         case "sglang":
-        case "gateway": {
+        case "gateway":
+        case "doubao": {
             // These providers don't have reasoning configs in AI SDK yet
             // Gateway passes through to underlying providers which handle their own configs
             break
@@ -372,6 +375,7 @@ const PROVIDER_ENV_VARS: Record<ProviderName, string | null> = {
     siliconflow: "SILICONFLOW_API_KEY",
     sglang: "SGLANG_API_KEY",
     gateway: "AI_GATEWAY_API_KEY",
+    doubao: "DOUBAO_API_KEY",
 }
 
 /**
@@ -836,9 +840,23 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
             break
         }
 
+        case "doubao": {
+            const apiKey = overrides?.apiKey || process.env.DOUBAO_API_KEY
+            const baseURL =
+                overrides?.baseUrl ||
+                process.env.DOUBAO_BASE_URL ||
+                "https://ark.cn-beijing.volces.com/api/v3"
+            const doubaoProvider = createDeepSeek({
+                apiKey,
+                baseURL,
+            })
+            model = doubaoProvider(modelId)
+            break
+        }
+
         default:
             throw new Error(
-                `Unknown AI provider: ${provider}. Supported providers: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow, sglang, gateway`,
+                `Unknown AI provider: ${provider}. Supported providers: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow, sglang, gateway, doubao`,
             )
     }
 

lib/types/model-config.ts

@@ -9,7 +9,9 @@ export type ProviderName =
     | "openrouter"
     | "deepseek"
     | "siliconflow"
+    | "sglang"
     | "gateway"
+    | "doubao"
 
 // Individual model configuration
 export interface ModelConfig {
@@ -78,7 +80,15 @@ export const PROVIDER_INFO: Record<
         label: "SiliconFlow",
         defaultBaseUrl: "https://api.siliconflow.com/v1",
     },
+    sglang: {
+        label: "SGLang",
+        defaultBaseUrl: "http://127.0.0.1:8000/v1",
+    },
     gateway: { label: "AI Gateway" },
+    doubao: {
+        label: "Doubao (ByteDance)",
+        defaultBaseUrl: "https://ark.cn-beijing.volces.com/api/v3",
+    },
 }
 
 // Suggested models per provider for quick add
@@ -198,6 +208,10 @@ export const SUGGESTED_MODELS: Record<ProviderName, string[]> = {
         "Qwen/Qwen2.5-7B-Instruct",
         "Qwen/Qwen2-VL-72B-Instruct",
     ],
+    sglang: [
+        // SGLang is OpenAI-compatible, models depend on deployment
+        "default",
+    ],
     gateway: [
         "openai/gpt-4o",
         "openai/gpt-4o-mini",
@@ -205,6 +219,15 @@ export const SUGGESTED_MODELS: Record<ProviderName, string[]> = {
         "anthropic/claude-3-5-sonnet",
         "google/gemini-2.0-flash",
     ],
+    doubao: [
+        // ByteDance Doubao models
+        "doubao-1.5-thinking-pro-250415",
+        "doubao-1.5-thinking-pro-m-250428",
+        "doubao-1.5-pro-32k-250115",
+        "doubao-1.5-pro-256k-250115",
+        "doubao-pro-32k-241215",
+        "doubao-pro-256k-241215",
+    ],
 }
 
 // Helper to generate UUID

public/doubao-color.svg

@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Doubao</title><path d="M5.31 15.756c.172-3.75 1.883-5.999 2.549-6.739-3.26 2.058-5.425 5.658-6.358 8.308v1.12C1.501 21.513 4.226 24 7.59 24a6.59 6.59 0 002.2-.375c.353-.12.7-.248 1.039-.378.913-.899 1.65-1.91 2.243-2.992-4.877 2.431-7.974.072-7.763-4.5l.002.001z" fill="#1E37FC"></path><path d="M22.57 10.283c-1.212-.901-4.109-2.404-7.397-2.8.295 3.792.093 8.766-2.1 12.773a12.782 12.782 0 01-2.244 2.992c3.764-1.448 6.746-3.457 8.596-5.219 2.82-2.683 3.353-5.178 3.361-6.66a2.737 2.737 0 00-.216-1.084v-.002z" fill="#37E1BE"></path><path d="M14.303 1.867C12.955.7 11.248 0 9.39 0 7.532 0 5.883.677 4.545 1.807 2.791 3.29 1.627 5.557 1.5 8.125v9.201c.932-2.65 3.097-6.25 6.357-8.307.5-.318 1.025-.595 1.569-.829 1.883-.801 3.878-.932 5.746-.706-.222-2.83-.718-5.002-.87-5.617h.001z" fill="#A569FF"></path><path d="M17.305 4.961a199.47 199.47 0 01-1.08-1.094c-.202-.213-.398-.419-.586-.622l-1.333-1.378c.151.615.648 2.786.869 5.617 3.288.395 6.185 1.898 7.396 2.8-1.306-1.275-3.475-3.487-5.266-5.323z" fill="#1E37FC"></path></svg>