@lobehub/chat 1.115.0 → 1.116.0

package/.cursor/rules/add-provider-doc.mdc

@@ -0,0 +1,183 @@
+---
+description: Complete guide for adding a new AI provider documentation to LobeChat
+alwaysApply: false
+---
+
+# Adding New AI Provider Documentation
+
+This document provides a step-by-step guide for adding documentation for a new AI provider to LobeChat, based on the complete workflow used for adding providers like BFL (Black Forest Labs) and FAL.
+
+## Overview
+
+Adding a new provider requires creating both user-facing documentation and technical configuration files. The process involves:
+
+1. Creating usage documentation (EN + CN)
+2. Adding environment variable documentation (EN + CN)
+3. Updating Docker configuration files
+4. Updating .env.example file
+5. Preparing image resources
+
+## Step 1: Create Provider Usage Documentation
+
+Create user-facing documentation that explains how to use the new provider.
+
+### Required Files
+
+Create both English and Chinese versions:
+- `docs/usage/providers/{provider-name}.mdx` (English)
+- `docs/usage/providers/{provider-name}.zh-CN.mdx` (Chinese)
+
+### Documentation Structure
+
+Follow the structure and format used in existing provider documentation. For reference, see:
+- `docs/usage/providers/fal.mdx` (English template)
+- `docs/usage/providers/fal.zh-CN.mdx` (Chinese template)
+
+### Key Requirements
+
+- **Images**: Prepare 5-6 screenshots showing the process
+- **Cover Image**: Create or obtain a cover image for the provider
+- **Accurate URLs**: Use real registration and dashboard URLs
+- **Service Type**: Specify whether it's for image generation, text generation, etc.
+- **Pricing Warning**: Include pricing information callout
+
+### Important Notes
+
+- **🔒 API Key Security**: Never include real API keys in documentation. Always use placeholder format (e.g., `bfl-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx`)
+- **🖼️ Image Hosting**: Use LobeHub's CDN for all images: `hub-apac-1.lobeobjects.space`
+
+## Step 2: Update Environment Variables Documentation
+
+Add the new provider's environment variables to the self-hosting documentation.
+
+### Files to Update
+
+- `docs/self-hosting/environment-variables/model-provider.mdx` (English)
+- `docs/self-hosting/environment-variables/model-provider.zh-CN.mdx` (Chinese)
+
+### Content to Add
+
+Add two sections for each provider:
+
+```markdown
+### `{PROVIDER}_API_KEY`
+
+- Type: Required
+- Description: This is the API key you applied for in the {Provider Name} service.
+- Default: -
+- Example: `{api-key-format-example}`
+
+### `{PROVIDER}_MODEL_LIST`
+
+- Type: Optional
+- Description: Used to control the {Provider Name} model list. Use `+` to add a model, `-` to hide a model, and `model_name=display_name` to customize the display name of a model. Separate multiple entries with commas. The definition syntax follows the same rules as other providers' model lists.
+- Default: `-`
+- Example: `-all,+{model-id-1},+{model-id-2}={display-name}`
+
+The above example disables all models first, then enables `{model-id-1}` and `{model-id-2}` (displayed as `{display-name}`).
+
+[model-list]: /docs/self-hosting/advanced/model-list
+```
+
+### Important Notes
+
+- **API Key Format**: Use proper UUID format for examples (e.g., `12345678-1234-1234-1234-123456789abc`)
+- **Real Model IDs**: Use actual model IDs from the codebase, not placeholders
+- **Consistent Naming**: Follow the pattern `{PROVIDER}_API_KEY` and `{PROVIDER}_MODEL_LIST`
+
+## Step 3: Update Docker Configuration Files
+
+Add environment variables to all Docker configuration files to ensure the provider works in containerized deployments.
+
+### Files to Update
+
+All Dockerfile variants must be updated:
+- `Dockerfile`
+- `Dockerfile.database`
+- `Dockerfile.pglite`
+
+### Changes Required
+
+Add the new provider's environment variables at the **end** of the ENV section, just before the final line:
+
+```dockerfile
+# Previous providers...
+    # 302.AI
+    AI302_API_KEY="" AI302_MODEL_LIST="" \
+    # {New Provider 1}
+    {PROVIDER1}_API_KEY="" {PROVIDER1}_MODEL_LIST="" \
+    # {New Provider 2}
+    {PROVIDER2}_API_KEY="" {PROVIDER2}_MODEL_LIST=""
+```
+
+### Important Rules
+
+- **Position**: Add new providers at the **end** of the list
+- **Ordering**: When adding multiple providers, use alphabetical order (e.g., FAL before BFL)
+- **Consistency**: Maintain identical ordering across all Dockerfile variants
+- **Format**: Follow the pattern `{PROVIDER}_API_KEY="" {PROVIDER}_MODEL_LIST="" \`
+
+## Step 4: Update .env.example File
+
+Add example configuration entries to help users understand how to configure the provider locally.
+
+### File to Update
+
+- `.env.example`
+
+### Content to Add
+
+Add new sections before the "Market Service" section:
+
+```bash
+### {Provider Name} ###
+
+# {PROVIDER}_API_KEY={provider-prefix}-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+```
+
+### Format Guidelines
+
+- **Section Header**: Use `### {Provider Name} ###` format
+- **Commented Example**: Use `#` to comment out the example
+- **Key Format**: Use appropriate prefix for the provider (e.g., `bfl-`, `fal-`, `sk-`)
+- **Position**: Add before the Market Service section
+- **Spacing**: Maintain consistent spacing with existing entries
+
+## Step 5: Image Resources
+
+Prepare all necessary image resources for the documentation.
+
+### Required Images
+
+1. **Cover Image**: Provider logo or branded image
+2. **API Dashboard Screenshots**: 3-4 screenshots showing API key creation process
+3. **LobeChat Configuration Screenshots**: 2-3 screenshots showing provider setup in LobeChat
+
+### Image Guidelines
+
+- **Quality**: Use high-resolution screenshots
+- **Consistency**: Maintain consistent styling across all screenshots
+- **Privacy**: Remove or blur any sensitive information
+- **Format**: Use PNG format for screenshots
+- **Hosting**: Use LobeHub's CDN (`hub-apac-1.lobeobjects.space`) for all images
+
+## Checklist
+
+Before submitting your provider documentation:
+
+- [ ] Created both English and Chinese usage documentation
+- [ ] Added environment variable documentation (EN + CN)
+- [ ] Updated all 3 Dockerfile variants with consistent ordering
+- [ ] Updated .env.example with proper key format
+- [ ] Prepared all required screenshots and images
+- [ ] Used actual model IDs from the codebase
+- [ ] Verified no real API keys are included in documentation
+- [ ] Used LobeHub CDN for all image hosting
+- [ ] Tested the documentation for clarity and accuracy
+
+## Reference
+
+This guide was created based on the implementation of BFL (Black Forest Labs) provider documentation. For a complete example, refer to:
+- Commits: `d2da03e1a` (documentation) and `6a2e95868` (environment variables)
+- Files: `docs/usage/providers/bfl.mdx`, `docs/usage/providers/bfl.zh-CN.mdx`
+- PR: Current branch `tj/feat/bfl-docs`

package/.env.example

@@ -153,6 +153,14 @@ OPENAI_API_KEY=sk-xxxxxxxxx
 
 # AIHUBMIX_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
 
+### BFL ###
+
+# BFL_API_KEY=bfl-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
+### FAL ###
+
+# FAL_API_KEY=fal-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+
 
 ########################################
 ############ Market Service ############

package/.github/workflows/release.yml

@@ -16,6 +16,8 @@ jobs:
           POSTGRES_PASSWORD: postgres
         options: >-
           --health-cmd pg_isready --health-interval 10s --health-timeout 5s  --health-retries 5
+
+
         ports:
           - 5432:5432
 
@@ -38,10 +40,8 @@ jobs:
       - name: Lint
         run: bun run lint
 
-      - uses: pnpm/action-setup@v4
-
       - name: Test Database Coverage
-        run: pnpm --filter @lobechat/database test
+        run: bun run --filter @lobechat/database test
         env:
           DATABASE_TEST_URL: postgresql://postgres:postgres@localhost:5432/postgres
           DATABASE_DRIVER: node

package/.github/workflows/test.yml

@@ -23,8 +23,6 @@ jobs:
         with:
           node-version: 22
 
-      - uses: pnpm/action-setup@v4
-
       - name: Install bun
         uses: oven-sh/setup-bun@v1
         with:
@@ -34,7 +32,7 @@ jobs:
         run: bun i
 
       - name: Test ${{ matrix.package }} package with coverage
-        run: pnpm --filter @lobechat/${{ matrix.package }} test:coverage
+        run: bun run --filter @lobechat/${{ matrix.package }} test:coverage
 
       - name: Upload ${{ matrix.package }} coverage to Codecov
         uses: codecov/codecov-action@v4
@@ -111,17 +109,15 @@ jobs:
       - name: Lint
         run: bun run lint
 
-      - uses: pnpm/action-setup@v4
-
       - name: Test Client DB
-        run: pnpm --filter @lobechat/database test:client-db
+        run: bun run --filter @lobechat/database test:client-db
         env:
           KEY_VAULTS_SECRET: LA7n9k3JdEcbSgml2sxfw+4TV1AzaaFU5+R176aQz4s=
           S3_PUBLIC_DOMAIN: https://example.com
           APP_URL: https://home.com
 
       - name: Test Coverage
-        run: pnpm --filter @lobechat/database test:coverage
+        run: bun run --filter @lobechat/database test:coverage
         env:
           DATABASE_TEST_URL: postgresql://postgres:postgres@localhost:5432/postgres
           DATABASE_DRIVER: node

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+## [Version 1.116.0](https://github.com/lobehub/lobe-chat/compare/v1.115.0...v1.116.0)
+
+<sup>Released on **2025-08-27**</sup>
+
+#### ✨ Features
+
+- **misc**: Add gemini 2.5 flash image for vertex ai.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Add gemini 2.5 flash image for vertex ai, closes [#8943](https://github.com/lobehub/lobe-chat/issues/8943) ([74d9bb5](https://github.com/lobehub/lobe-chat/commit/74d9bb5))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 1.115.0](https://github.com/lobehub/lobe-chat/compare/v1.114.6...v1.115.0)
 
 <sup>Released on **2025-08-26**</sup>

package/CLAUDE.md

@@ -21,7 +21,11 @@ read @.cursor/rules/project-structure.mdc
 
 ### Package Management
 
-this is a monorepo project and we use `pnpm` as package manager
+This repository adopts a monorepo structure.
+
+- Use `pnpm` as the primary package manager for dependency management
+- Use `bun` to run npm scripts at the root level
+- Use `bunx` to run executable npm packages
 
 ### TypeScript Code Style Guide
 
@@ -75,6 +79,7 @@ Some useful rules of this project. Read them when needed.
 - `react-component.mdc` - antd-style, Lobe UI usage
 - `drizzle-schema-style-guide.mdc` - Schema naming, patterns
 - `define-database-model.mdc` - Model templates, CRUD patterns
+- `i18n.mdc` - Internationalization workflow
 
 **State & UI**
 
@@ -94,8 +99,3 @@ Some useful rules of this project. Read them when needed.
 - `desktop-menu-configuration.mdc` - App menu, context menu, tray menu
 - `desktop-window-management.mdc` - Window creation, state management, multi-window
 - `desktop-controller-tests.mdc` - Controller unit testing guide
-
-**Development Tools**
-
-- `i18n.mdc` - Internationalization workflow
-- `debug.mdc` - Debugging strategies

package/Dockerfile

@@ -249,7 +249,11 @@ ENV \
     # Infini-AI
     INFINIAI_API_KEY="" INFINIAI_MODEL_LIST="" \
     # 302.AI
-    AI302_API_KEY="" AI302_MODEL_LIST=""
+    AI302_API_KEY="" AI302_MODEL_LIST="" \
+    # FAL
+    FAL_API_KEY="" FAL_MODEL_LIST="" \
+    # BFL
+    BFL_API_KEY="" BFL_MODEL_LIST=""
 
 USER nextjs
 

package/Dockerfile.database

@@ -291,7 +291,11 @@ ENV \
     # Infini-AI
     INFINIAI_API_KEY="" INFINIAI_MODEL_LIST="" \
     # 302.AI
-    AI302_API_KEY="" AI302_MODEL_LIST=""
+    AI302_API_KEY="" AI302_MODEL_LIST="" \
+    # FAL
+    FAL_API_KEY="" FAL_MODEL_LIST="" \
+    # BFL
+    BFL_API_KEY="" BFL_MODEL_LIST=""
 
 USER nextjs
 

package/Dockerfile.pglite

@@ -247,7 +247,11 @@ ENV \
     # Infini-AI
     INFINIAI_API_KEY="" INFINIAI_MODEL_LIST="" \
     # 302.AI
-    AI302_API_KEY="" AI302_MODEL_LIST=""
+    AI302_API_KEY="" AI302_MODEL_LIST="" \
+    # FAL
+    FAL_API_KEY="" FAL_MODEL_LIST="" \
+    # BFL
+    BFL_API_KEY="" BFL_MODEL_LIST=""
 
 USER nextjs
 

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "features": [
+        "Add gemini 2.5 flash image for vertex ai."
+      ]
+    },
+    "date": "2025-08-27",
+    "version": "1.116.0"
+  },
   {
     "children": {},
     "date": "2025-08-26",

package/docs/development/basic/setup-development.mdx

@@ -17,10 +17,14 @@ Before starting development on LobeChat, you need to install and configure some
 First, you need to install the following software:
 
 - Node.js: LobeChat is built on Node.js, so you need to install Node.js. We recommend installing the latest stable version.
-- Yarn: We use Yarn as the preferred package manager. You can download and install it from the Yarn official website.
-- PNPM: We use PNPM as an auxiliary package manager. You can download and install it from the PNPM official website.
+- PNPM: We use PNPM as the preferred package manager. You can download and install it from the [PNPM official website](https://pnpm.io/installation).
+- Bun: We use Bun as the npm scripts runner. You can download and install it from the [Bun official website](https://bun.com/docs/installation).
 - Git: We use Git for version control. You can download and install it from the Git official website.
-- IDE: You can choose your preferred integrated development environment (IDE). We recommend using WebStorm, a powerful IDE particularly suitable for TypeScript development.
+- IDE: You can choose your preferred integrated development environment (IDE). We recommend using WebStorm/VSCode.
+
+### VSCode Users
+
+We recommend installing the extensions listed in [.vscode/extensions.json](https://github.com/lobehub/lobe-chat/blob/main/.vscode/extensions.json) for the best development experience.
 
 ### Project Setup
 
@@ -32,24 +36,17 @@ After installing the above software, you can start setting up the LobeChat proje
 git clone https://github.com/lobehub/lobe-chat.git
 ```
 
-2. **Install dependencies**: Then, navigate to the project directory and use Yarn to install the project's dependencies:
-
-```bash
-cd lobe-chat
-yarn install
-```
-
-If you are using PNPM, you can execute:
+2. **Install dependencies**: Then, navigate to the project directory and use PNPM to install the project's dependencies:
 
 ```bash
 cd lobe-chat
-pnpm install
+pnpm i
 ```
 
 3. **Start the development server**: After installing the dependencies, you can start the development server:
 
 ```bash
-yarn run dev
+bun run dev
 ```
 
 Now, you can open `http://localhost:3010` in your browser, and you should see the welcome page of LobeChat. This indicates that you have successfully set up the development environment.

package/docs/development/basic/setup-development.zh-CN.mdx

@@ -17,10 +17,14 @@
 首先，你需要安装以下软件：
 
 - Node.js：LobeChat 是基于 Node.js 构建的，因此你需要安装 Node.js。我们建议安装最新的稳定版。
-- Bun：我们使用 Bun 作为首选包管理器。你可以从 Bun 的官方网站上下载并安装。
-- PNPM：我们使用 PNPM 作为辅助包管理器。你可以从 pnpm 的官方网站上下载并安装。
+- PNPM：我们使用 PNPM 作为管理器。你可以从 [pnpm 的官方网站](https://pnpm.io/installation) 上下载并安装。
+- Bun：我们使用 Bun 作为 npm scripts runner, 你可以从 [Bun 的官方网站](https://bun.com/docs/installation) 上下载并安装。
 - Git：我们使用 Git 进行版本控制。你可以从 Git 的官方网站上下载并安装。
-- IDE：你可以选择你喜欢的集成开发环境（IDE）。我们推荐使用 WebStorm，它是一款功能强大的 IDE，特别适合 TypeScript 开发。
+- IDE：你可以选择你喜欢的集成开发环境（IDE），我们推荐使用 WebStorm/VSCode。
+
+### VSCode 用户
+
+推荐安装 [.vscode/extensions.json](https://github.com/lobehub/lobe-chat/blob/main/.vscode/extensions.json) 中推荐安装的扩展获得最佳开发体验。
 
 ### 项目设置
 
@@ -32,14 +36,7 @@
 git clone https://github.com/lobehub/lobe-chat.git
 ```
 
-2. **安装依赖**：然后，进入项目目录，并使用 bun 安装项目的依赖包：
-
-```bash
-cd lobe-chat
-bun i
-```
-
-如果你使用 pnpm ，可以执行:
+2. **安装依赖**：然后，进入项目目录，并使用 `pnpm` 安装项目的依赖包：
 
 ```bash
 cd lobe-chat
@@ -54,7 +51,7 @@ bun run dev
 
 现在，你可以在浏览器中打开 `http://localhost:3010`，你应该能看到 LobeChat 的欢迎页面。这表明你已经成功地设置了开发环境。
 
-![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/274655364-414bc31e-8511-47a3-af17-209b530effc7.png)
+![Chat Page](https://hub-apac-1.lobeobjects.space/docs/fc7b157a3bc016bc97719065f80c555c.png)
 
 在开发过程中，如果你在环境设置上遇到任何问题，或者有任何关于 LobeChat 开发的问题，欢迎随时向我们提问。我们期待看到你的贡献！
 

package/docs/self-hosting/environment-variables/model-provider.mdx

@@ -646,8 +646,33 @@ If you need to use Azure OpenAI to provide model services, you can refer to the
 - Type: Optional
 - Description: Used to control the FAL model list. Use `+` to add a model, `-` to hide a model, and `model_name=display_name` to customize the display name of a model. Separate multiple entries with commas. The definition syntax follows the same rules as other providers' model lists.
 - Default: `-`
-- Example: `-all,+fal-model-1,+fal-model-2=fal-special`
+- Example: `-all,+flux/schnell,+flux-pro/kontext=FLUX.1 Kontext [pro]`
 
-The above example disables all models first, then enables `fal-model-1` and `fal-model-2` (displayed as `fal-special`).
+The above example disables all models first, then enables `flux/schnell` and `flux-pro/kontext` (displayed as `FLUX.1 Kontext [pro]`).
+
+## BFL
+
+### `ENABLED_BFL`
+
+- Type: Optional
+- Description: Enables BFL as a model provider by default. Set to `0` to disable the BFL service.
+- Default: `1`
+- Example: `0`
+
+### `BFL_API_KEY`
+
+- Type: Required
+- Description: This is the API key you applied for in the BFL service.
+- Default: -
+- Example: `12345678-1234-1234-1234-123456789abc`
+
+### `BFL_MODEL_LIST`
+
+- Type: Optional
+- Description: Used to control the BFL model list. Use `+` to add a model, `-` to hide a model, and `model_name=display_name` to customize the display name of a model. Separate multiple entries with commas. The definition syntax follows the same rules as other providers' model lists.
+- Default: `-`
+- Example: `-all,+flux-pro-1.1,+flux-kontext-pro=FLUX.1 Kontext [pro]`
+
+The above example disables all models first, then enables `flux-pro-1.1` and `flux-kontext-pro` (displayed as `FLUX.1 Kontext [pro]`).
 
 [model-list]: /docs/self-hosting/advanced/model-list

package/docs/self-hosting/environment-variables/model-provider.zh-CN.mdx

@@ -645,8 +645,33 @@ LobeChat 在部署时提供了丰富的模型服务商相关的环境变量，
 - 类型：可选
 - 描述：用来控制 FAL 模型列表，使用 `+` 增加一个模型，使用 `-` 来隐藏一个模型，使用 `模型名=展示名` 来自定义模型的展示名，用英文逗号隔开。模型定义语法规则与其他 provider 保持一致。
 - 默认值：`-`
-- 示例：`-all,+fal-model-1,+fal-model-2=fal-special`
+- 示例：`-all,+flux/schnell,+flux-pro/kontext=FLUX.1 Kontext [pro]`
 
-上述示例表示先禁用所有模型，再启用 `fal-model-1` 和 `fal-model-2`（显示名为 `fal-special`）。
+上述示例表示先禁用所有模型，再启用 `flux/schnell` 和 `flux-pro/kontext`（显示名为 `FLUX.1 Kontext [pro]`）。
+
+## BFL
+
+### `ENABLED_BFL`
+
+- 类型：可选
+- 描述：默认启用 BFL 作为模型供应商，当设为 0 时关闭 BFL 服务
+- 默认值：`1`
+- 示例：`0`
+
+### `BFL_API_KEY`
+
+- 类型：必选
+- 描述：这是你在 BFL 服务中申请的 API 密钥
+- 默认值：-
+- 示例：`12345678-1234-1234-1234-123456789abc`
+
+### `BFL_MODEL_LIST`
+
+- 类型：可选
+- 描述：用来控制 BFL 模型列表，使用 `+` 增加一个模型，使用 `-` 来隐藏一个模型，使用 `模型名=展示名` 来自定义模型的展示名，用英文逗号隔开。模型定义语法规则与其他 provider 保持一致。
+- 默认值：`-`
+- 示例：`-all,+flux-pro-1.1,+flux-kontext-pro=FLUX.1 Kontext [pro]`
+
+上述示例表示先禁用所有模型，再启用 `flux-pro-1.1` 和 `flux-kontext-pro`（显示名为 `FLUX.1 Kontext [pro]`）。
 
 [model-list]: /zh/docs/self-hosting/advanced/model-list

package/docs/usage/providers/bfl.mdx

@@ -0,0 +1,68 @@
+---
+title: Using Black Forest Labs API Key in LobeChat
+description: >-
+  Learn how to integrate Black Forest Labs API Key in LobeChat for AI image generation using advanced models and high-quality output.
+
+tags:
+  - Black Forest Labs
+  - Image Generation
+  - API Key
+  - Web UI
+---
+
+# Using Black Forest Labs in LobeChat
+
+<Image alt={'Using Black Forest Labs in LobeChat'} cover src={'https://hub-apac-1.lobeobjects.space/docs/bfl-cover-image.png'} />
+
+[Black Forest Labs](https://bfl.ai/) is currently the world's top-tier AI image generation research lab, having developed the FLUX series of high-quality image generation models and the FLUX Kontext series of image editing models. This document will guide you on how to use Black Forest Labs in LobeChat:
+
+<Steps>
+  ### Step 1: Obtain Black Forest Labs API Key
+
+  - Register for a [Black Forest Labs account](https://auth.bfl.ai/).
+  - Navigate to the [API Keys dashboard](https://dashboard.bfl.ai/api/keys) and click **Add Key** to generate a new API key.
+  - Copy the generated API key and keep it secure; it will only be shown once.
+
+  <Image
+    alt={'Open the API dashboard'}
+    inStep
+    src={
+'https://hub-apac-1.lobeobjects.space/docs/36331f581e36a72ba91fb6c1dacbedd4.png'
+}
+  />
+
+  <Image
+    alt={'Create API Key'}
+    inStep
+    src={
+'https://hub-apac-1.lobeobjects.space/docs/3049ad79746bf913d1b2736cfe1d38fa.png'
+}
+  />
+
+  <Image
+    alt={'Retrieve API Key'}
+    inStep
+    src={
+'https://hub-apac-1.lobeobjects.space/docs/33143deb04f2a0cdb2fd543ff8161633.png'
+}
+  />
+
+  ### Step 2: Configure Black Forest Labs in LobeChat
+
+  - Visit the `Settings` page in LobeChat.
+  - Under **AI Service Provider**, locate the **Black Forest Labs** configuration section.
+
+  <Image alt={'Enter API Key'} inStep src={'https://hub-apac-1.lobeobjects.space/docs/4fe1993d94fad72829612d22527a2ecd.png'} />
+
+  - Paste the API key you obtained.
+  - Choose a Black Forest Labs model for image generation.
+
+  <Image alt={'Select Black Forest Labs model for image generation'} inStep src={'https://hub-apac-1.lobeobjects.space/docs/7a6dfdb1a1bdd5443104a6d2cb3a8bf4.png'} />
+
+  <Callout type={'warning'}>
+    During usage, you may incur charges according to Black Forest Labs's pricing policy. Please review Black Forest Labs's
+    official pricing before heavy usage.
+  </Callout>
+</Steps>
+
+You can now use Black Forest Labs's advanced image generation models directly within LobeChat to create stunning visual content.

package/docs/usage/providers/bfl.zh-CN.mdx

@@ -0,0 +1,67 @@
+---
+title: 在 LobeChat 中使用 Black Forest Labs API Key
+description: >-
+  学习如何在 LobeChat 中配置和使用 Black Forest Labs API Key，使用先进模型进行高质量 AI 图像生成。
+
+tags:
+  - Black Forest Labs
+  - 图像生成
+  - API Key
+  - Web UI
+---
+
+# 在 LobeChat 中使用 Black Forest Labs
+
+<Image alt={'在 LobeChat 中使用 Black Forest Labs'} cover src={'https://hub-apac-1.lobeobjects.space/docs/bfl-cover-image.png'} />
+
+[Black Forest Labs](https://bfl.ai/) 是当前世界最顶级的 AI 图像生成实验室团队，研发了 FLUX 系列高质量图像生成模型，FLUX Kontext 系列图像编辑模型。本文将指导你如何在 LobeChat 中使用 Black Forest Labs：
+
+<Steps>
+  ### 步骤一：获取 Black Forest Labs API Key
+
+  - 注册 [Black Forest Labs](https://auth.bfl.ai/) 账户；
+  - 前往 [API Keys 控制台](https://dashboard.bfl.ai/api/keys)，点击 **Add Key** 创建新的 API 密钥；
+  - 复制生成的 API Key 并妥善保存，它只会显示一次。
+
+  <Image
+    alt={'打开 API 控制台'}
+    inStep
+    src={
+'https://hub-apac-1.lobeobjects.space/docs/36331f581e36a72ba91fb6c1dacbedd4.png'
+}
+  />
+
+  <Image
+    alt={'创建 API Key'}
+    inStep
+    src={
+'https://hub-apac-1.lobeobjects.space/docs/3049ad79746bf913d1b2736cfe1d38fa.png'
+}
+  />
+
+  <Image
+    alt={'获取 API Key'}
+    inStep
+    src={
+'https://hub-apac-1.lobeobjects.space/docs/33143deb04f2a0cdb2fd543ff8161633.png'
+}
+  />
+
+  ### 步骤二：在 LobeChat 中配置 Black Forest Labs
+
+  - 访问 LobeChat 的 `设置` 页面；
+  - 在 `AI服务商` 下找到 `Black Forest Labs` 的设置项；
+
+  <Image alt={'填入 API 密钥'} inStep src={'https://hub-apac-1.lobeobjects.space/docs/4fe1993d94fad72829612d22527a2ecd.png'} />
+
+  - 粘贴获取到的 API Key；
+  - 选择一个 Black Forest Labs 模型用于图像生成。
+
+  <Image alt={'选择 Black Forest Labs 模型进行图像生成'} inStep src={'https://hub-apac-1.lobeobjects.space/docs/7a6dfdb1a1bdd5443104a6d2cb3a8bf4.png'} />
+
+  <Callout type={'warning'}>
+    在使用过程中，你可能需要向 Black Forest Labs 支付相应费用，请在大量调用前查阅 Black Forest Labs 的官方计费政策。
+  </Callout>
+</Steps>
+
+至此，你已经可以在 LobeChat 中使用 Black Forest Labs 提供的先进图像生成模型来创作精美的视觉内容了。