@lobehub/chat 1.44.2 → 1.45.0

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

@@ -11,151 +11,130 @@ tags:
 
 # 在 LobeChat 中使用 Ollama
 
-<Image
-  alt={'在 LobeChat 中使用 Ollama'}
-  borderless
-  cover
-  src={'https://github.com/lobehub/lobe-chat/assets/17870709/f579b39b-e771-402c-a1d1-620e57a10c75'}
-/>
+<Image alt={'在 LobeChat 中使用 Ollama'} borderless cover src={'https://github.com/lobehub/lobe-chat/assets/17870709/f579b39b-e771-402c-a1d1-620e57a10c75'} />
 
 Ollama 是一款强大的本地运行大型语言模型（LLM）的框架，支持多种语言模型，包括 Llama 2, Mistral 等。现在，LobeChat 已经支持与 Ollama 的集成，这意味着你可以在 LobeChat 中轻松使用 Ollama 提供的语言模型来增强你的应用。
 
 本文档将指导你如何在 LobeChat 中使用 Ollama：
 
-<Video
-  alt={'在 LobeChat 中使用 Ollama的完整演示'}
-  height={580}
-  src="https://github.com/lobehub/lobe-chat/assets/28616219/c32b56db-c6a1-4876-9bc3-acbd37ec0c0c"
-/>
+<Video alt={'在 LobeChat 中使用 Ollama的完整演示'} height={580} src="https://github.com/lobehub/lobe-chat/assets/28616219/c32b56db-c6a1-4876-9bc3-acbd37ec0c0c" />
 
 ## 在 macOS 下使用 Ollama
 
 <Steps>
+  ### 本地安装 Ollama
 
-### 本地安装 Ollama
+  [下载 Ollama for macOS](https://ollama.com/download?utm_source=lobehub\&utm_medium=docs\&utm_campaign=download-macos) 并解压、安装。
 
-[下载 Ollama for macOS](https://ollama.com/download?utm_source=lobehub&utm_medium=docs&utm_campaign=download-macos) 并解压、安装。
+  ### 配置 Ollama 允许跨域访问
 
-### 配置 Ollama 允许跨域访问
+  由于 Ollama 的默认参数配置，启动时设置了仅本地访问，所以跨域访问以及端口监听需要进行额外的环境变量设置 `OLLAMA_ORIGINS`。使用 `launchctl` 设置环境变量：
 
-由于 Ollama 的默认参数配置，启动时设置了仅本地访问，所以跨域访问以及端口监听需要进行额外的环境变量设置 `OLLAMA_ORIGINS`。使用 `launchctl` 设置环境变量：
+  ```bash
+  launchctl setenv OLLAMA_ORIGINS "*"
+  ```
 
-```bash
-launchctl setenv OLLAMA_ORIGINS "*"
-```
-
-完成设置后，需要重启 Ollama 应用程序。
+  完成设置后，需要重启 Ollama 应用程序。
 
-### 在 LobeChat 中与本地大模型对话
+  ### 在 LobeChat 中与本地大模型对话
 
-接下来，你就可以使用 LobeChat 与本地 LLM 对话了。
-
-<Image
-  alt="在 LobeChat 中与 llama3 对话"
-  height="573"
-  src="https://github.com/lobehub/lobe-chat/assets/28616219/7f9a9a9f-fd91-4f59-aac9-3f26c6d49a1e"
-/>
+  接下来，你就可以使用 LobeChat 与本地 LLM 对话了。
 
+  <Image alt="在 LobeChat 中与 llama3 对话" height="573" src="https://github.com/lobehub/lobe-chat/assets/28616219/7f9a9a9f-fd91-4f59-aac9-3f26c6d49a1e" />
 </Steps>
 
 ## 在 windows 下使用 Ollama
 
 <Steps>
+  ### 本地安装 Ollama
 
-### 本地安装 Ollama
-
-[下载 Ollama for Windows](https://ollama.com/download?utm_source=lobehub&utm_medium=docs&utm_campaign=download-windows) 并安装。
-
-### 配置 Ollama 允许跨域访问
+  [下载 Ollama for Windows](https://ollama.com/download?utm_source=lobehub\&utm_medium=docs\&utm_campaign=download-windows) 并安装。
 
-由于 Ollama 的默认参数配置，启动时设置了仅本地访问，所以跨域访问以及端口监听需要进行额外的环境变量设置 `OLLAMA_ORIGINS`。
+  ### 配置 Ollama 允许跨域访问
 
-在 Windows 上，Ollama 继承了您的用户和系统环境变量。
+  由于 Ollama 的默认参数配置，启动时设置了仅本地访问，所以跨域访问以及端口监听需要进行额外的环境变量设置 `OLLAMA_ORIGINS`。
 
-1. 首先通过 Windows 任务栏点击 Ollama 退出程序。
-2. 从控制面板编辑系统环境变量。
-3. 为您的用户账户编辑或新建 Ollama 的环境变量 `OLLAMA_ORIGINS`，值设为 `*` 。
-4. 点击`OK/应用`保存后重启系统。
-5. 重新运行`Ollama`。
+  在 Windows 上，Ollama 继承了您的用户和系统环境变量。
 
-### 在 LobeChat 中与本地大模型对话
+  1. 首先通过 Windows 任务栏点击 Ollama 退出程序。
+  2. 从控制面板编辑系统环境变量。
+  3. 为您的用户账户编辑或新建 Ollama 的环境变量 `OLLAMA_ORIGINS`，值设为 `*` 。
+  4. 点击`OK/应用`保存后重启系统。
+  5. 重新运行`Ollama`。
 
-接下来，你就可以使用 LobeChat 与本地 LLM 对话了。
+  ### 在 LobeChat 中与本地大模型对话
 
+  接下来，你就可以使用 LobeChat 与本地 LLM 对话了。
 </Steps>
 
 ## 在 linux 下使用 Ollama
 
 <Steps>
+  ### 本地安装 Ollama
 
-### 本地安装 Ollama
+  通过以下命令安装：
 
-通过以下命令安装：
+  ```bash
+  curl -fsSL https://ollama.com/install.sh | sh
+  ```
 
-```bash
-curl -fsSL https://ollama.com/install.sh | sh
-```
-
-或者，你也可以参考 [Linux 手动安装指南](https://github.com/ollama/ollama/blob/main/docs/linux.md)。
+  或者，你也可以参考 [Linux 手动安装指南](https://github.com/ollama/ollama/blob/main/docs/linux.md)。
 
-### 配置 Ollama 允许跨域访问
+  ### 配置 Ollama 允许跨域访问
 
-由于 Ollama 的默认参数配置，启动时设置了仅本地访问，所以跨域访问以及端口监听需要进行额外的环境变量设置 `OLLAMA_ORIGINS`。如果 Ollama 作为 systemd 服务运行，应该使用`systemctl`设置环境变量：
+  由于 Ollama 的默认参数配置，启动时设置了仅本地访问，所以跨域访问以及端口监听需要进行额外的环境变量设置 `OLLAMA_ORIGINS`。如果 Ollama 作为 systemd 服务运行，应该使用`systemctl`设置环境变量：
 
-1. 通过调用`sudo systemctl edit ollama.service`编辑 systemd 服务。
-
-```bash
-sudo systemctl edit ollama.service
-```
+  1. 通过调用`sudo systemctl edit ollama.service`编辑 systemd 服务。
 
-2. 对于每个环境变量，在`[Service]`部分下添加`Environment`：
+  ```bash
+  sudo systemctl edit ollama.service
+  ```
 
-```bash
-[Service]
-Environment="OLLAMA_HOST=0.0.0.0"
-Environment="OLLAMA_ORIGINS=*"
-```
+  2. 对于每个环境变量，在`[Service]`部分下添加`Environment`：
 
-3. 保存并退出。
-4. 重载 `systemd` 并重启 Ollama：
+  ```bash
+  [Service]
+  Environment="OLLAMA_HOST=0.0.0.0"
+  Environment="OLLAMA_ORIGINS=*"
+  ```
 
-```bash
-sudo systemctl daemon-reload
-sudo systemctl restart ollama
-```
+  3. 保存并退出。
+  4. 重载 `systemd` 并重启 Ollama：
 
-### 在 LobeChat 中与本地大模型对话
+  ```bash
+  sudo systemctl daemon-reload
+  sudo systemctl restart ollama
+  ```
 
-接下来，你就可以使用 LobeChat 与本地 LLM 对话了。
+  ### 在 LobeChat 中与本地大模型对话
 
+  接下来，你就可以使用 LobeChat 与本地 LLM 对话了。
 </Steps>
 
 ## 使用 docker 部署使用 Ollama
 
 <Steps>
+  ### 拉取 Ollama 镜像
 
-### 拉取 Ollama 镜像
+  如果你更倾向于使用 Docker，Ollama 也提供了官方 Docker 镜像，你可以通过以下命令拉取：
 
-如果你更倾向于使用 Docker，Ollama 也提供了官方 Docker 镜像，你可以通过以下命令拉取：
+  ```bash
+  docker pull ollama/ollama
+  ```
 
-```bash
-docker pull ollama/ollama
-```
-
-### 配置 Ollama 允许跨域访问
-
-由于 Ollama 的默认参数配置，启动时设置了仅本地访问，所以跨域访问以及端口监听需要进行额外的环境变量设置 `OLLAMA_ORIGINS`。
+  ### 配置 Ollama 允许跨域访问
 
-如果 Ollama 作为 Docker 容器运行，你可以将环境变量添加到 `docker run` 命令中。
+  由于 Ollama 的默认参数配置，启动时设置了仅本地访问，所以跨域访问以及端口监听需要进行额外的环境变量设置 `OLLAMA_ORIGINS`。
 
-```bash
-docker run -d --gpus=all -v ollama:/root/.ollama -e OLLAMA_ORIGINS="*" -p 11434:11434 --name ollama ollama/ollama
-```
+  如果 Ollama 作为 Docker 容器运行，你可以将环境变量添加到 `docker run` 命令中。
 
-### 在 LobeChat 中与本地大模型对话
+  ```bash
+  docker run -d --gpus=all -v ollama:/root/.ollama -e OLLAMA_ORIGINS="*" -p 11434:11434 --name ollama ollama/ollama
+  ```
 
-接下来，你就可以使用 LobeChat 与本地 LLM 对话了。
+  ### 在 LobeChat 中与本地大模型对话
 
+  接下来，你就可以使用 LobeChat 与本地 LLM 对话了。
 </Steps>
 
 ## 安装 Ollama 模型
@@ -166,11 +145,7 @@ Ollama 支持多种模型，你可以在 [Ollama Library](https://ollama.com/lib
 
 在 LobeChat 中，我们默认开启了一些常用的大语言模型，例如 llama3、 Gemma 、 Mistral 等。当你选中模型进行对话时，我们会提示你需要下载该模型。
 
-<Image
-  alt="LobeChat 提示安装 Ollama 模型"
-  height="460"
-  src="https://github.com/lobehub/lobe-chat/assets/28616219/4e81decc-776c-43b8-9a54-dfb43e9f601a"
-/>
+<Image alt="LobeChat 提示安装 Ollama 模型" height="460" src="https://github.com/lobehub/lobe-chat/assets/28616219/4e81decc-776c-43b8-9a54-dfb43e9f601a" />
 
 下载完成后即可开始对话。
 
@@ -182,20 +157,13 @@ Ollama 支持多种模型，你可以在 [Ollama Library](https://ollama.com/lib
 ollama pull llama3
 ```
 
-<Video
-  height={524}
-  src="https://github.com/lobehub/lobe-chat/assets/28616219/95828c11-0ae5-4dfa-84ed-854124e927a6"
-/>
+<Video height={524} src="https://github.com/lobehub/lobe-chat/assets/28616219/95828c11-0ae5-4dfa-84ed-854124e927a6" />
 
 ## 自定义配置
 
 你可以在 `设置` -> `语言模型` 中找到 Ollama 的配置选项，你可以在这里配置 Ollama 的代理、模型名称等。
 
-<Image
-  alt={'Ollama 服务商设置'}
-  height={274}
-  src={'https://github.com/lobehub/lobe-chat/assets/28616219/54b3696b-5b13-4761-8c1b-1e664867b2dd'}
-/>
+<Image alt={'Ollama 服务商设置'} height={274} src={'https://github.com/lobehub/lobe-chat/assets/28616219/54b3696b-5b13-4761-8c1b-1e664867b2dd'} />
 
 <Callout type={'info'}>
   你可以前往 [与 Ollama 集成](/zh/docs/self-hosting/examples/ollama) 了解如何部署 LobeChat

package/docs/usage/providers/openai.mdx

@@ -14,81 +14,67 @@ tags:
 
 # Using OpenAI in LobeChat
 
-<Image
-  alt={'Using OpenAI in LobeChat'}
-  cover
-  src={'https://github.com/lobehub/lobe-chat/assets/17870709/c9e5eafc-ca22-496b-a88d-cc0ae53bf720'}
-/>
+<Image alt={'Using OpenAI in LobeChat'} cover src={'https://github.com/lobehub/lobe-chat/assets/17870709/c9e5eafc-ca22-496b-a88d-cc0ae53bf720'} />
 
 This document will guide you on how to use [OpenAI](https://openai.com/) in LobeChat:
 
 <Steps>
+  ### Step 1: Obtain OpenAI API Key
 
-### Step 1: Obtain OpenAI API Key
+  - Register for an [OpenAI account](https://platform.openai.com/signup). You will need to register using an international phone number and a non-mainland email address.
 
-- Register for an [OpenAI account](https://platform.openai.com/signup). You will need to register using an international phone number and a non-mainland email address.
+  - After registration, go to the [API Keys](https://platform.openai.com/api-keys) page and click on `Create new secret key` to generate a new API Key.
 
-- After registration, go to the [API Keys](https://platform.openai.com/api-keys) page and click on `Create new secret key` to generate a new API Key.
+  - Open the creation window
 
-- Open the creation window
+  <Image
+    alt={'Open the creation window'}
+    inStep
+    src={
+'https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/296253192-ff2193dd-f125-4e58-82e8-91bc376c0d68.png'
+}
+  />
 
-<Image
-  alt={'Open the creation window'}
-  inStep
-  src={
-    'https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/296253192-ff2193dd-f125-4e58-82e8-91bc376c0d68.png'
-  }
-/>
+  - Create API Key
 
-- Create API Key
+  <Image
+    alt={'Create API Key'}
+    inStep
+    src={
+'https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/296254170-803bacf0-4471-4171-ae79-0eab08d621d1.png'
+}
+  />
 
-<Image
-  alt={'Create API Key'}
-  inStep
-  src={
-    'https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/296254170-803bacf0-4471-4171-ae79-0eab08d621d1.png'
-  }
-/>
+  - Retrieve API Key
 
-- Retrieve API Key
+  <Image
+    alt={'Retrieve API Key'}
+    inStep
+    src={
+'https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/296255167-f2745f2b-f083-4ba8-bc78-9b558e0002de.png'
+}
+  />
 
-<Image
-  alt={'Retrieve API Key'}
-  inStep
-  src={
-    'https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/296255167-f2745f2b-f083-4ba8-bc78-9b558e0002de.png'
-  }
-/>
+  <Callout type={'warning'}>
+    After registering, you generally have a free credit of $5, but it is only valid for three months.
+  </Callout>
 
-<Callout type={'warning'}>
-  After registering, you generally have a free credit of $5, but it is only valid for three months.
-</Callout>
+  ### Step 2: Configure OpenAI in LobeChat
 
-### Step 2: Configure OpenAI in LobeChat
+  - Visit the `Settings` page in LobeChat
+  - Find the setting for `OpenAI` under `Language Model`
 
-- Visit the `Settings` page in LobeChat
-- Find the setting for `OpenAI` under `Language Model`
+  <Image alt={'Enter API Key'} inStep src={'https://github.com/lobehub/lobe-chat/assets/17870709/3f31bc33-509f-4ad2-ba81-280c2a6ec5fa'} />
 
-<Image
-  alt={'Enter API Key'}
-  inStep
-  src={'https://github.com/lobehub/lobe-chat/assets/17870709/3f31bc33-509f-4ad2-ba81-280c2a6ec5fa'}
-/>
+  - Enter the obtained API Key
+  - Choose an OpenAI model for your AI assistant to start the conversation
 
-- Enter the obtained API Key
-- Choose an OpenAI model for your AI assistant to start the conversation
-
-<Image
-  alt={'Select OpenAI model and start conversation'}
-  inStep
-  src={'https://github.com/lobehub/lobe-chat/assets/17870709/ff7ebacf-27f0-42d7-810b-00314499a084'}
-/>
-
-<Callout type={'warning'}>
-  During usage, you may need to pay the API service provider. Please refer to OpenAI's relevant
-  pricing policies.
-</Callout>
+  <Image alt={'Select OpenAI model and start conversation'} inStep src={'https://github.com/lobehub/lobe-chat/assets/17870709/ff7ebacf-27f0-42d7-810b-00314499a084'} />
 
+  <Callout type={'warning'}>
+    During usage, you may need to pay the API service provider. Please refer to OpenAI's relevant
+    pricing policies.
+  </Callout>
 </Steps>
 
 You can now engage in conversations using the models provided by OpenAI in LobeChat.

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

@@ -11,77 +11,64 @@ tags:
 
 # 在 LobeChat 中使用 OpenAI
 
-<Image
-  alt={'在 LobeChat 中使用 OpenAI'}
-  cover
-  src={'https://github.com/lobehub/lobe-chat/assets/17870709/c9e5eafc-ca22-496b-a88d-cc0ae53bf720'}
-/>
+<Image alt={'在 LobeChat 中使用 OpenAI'} cover src={'https://github.com/lobehub/lobe-chat/assets/17870709/c9e5eafc-ca22-496b-a88d-cc0ae53bf720'} />
 
 本文档将指导你如何在 LobeChat 中使用 [OpenAI](https://openai.com/):
 
 <Steps>
+  ### 步骤一：获取 OpenAI API 密钥
 
-### 步骤一：获取 OpenAI API 密钥
+  - 注册一个 [OpenAI 账户](https://platform.openai.com/signup)，你需要使用国际手机号、非大陆邮箱进行注册；
 
-- 注册一个 [OpenAI 账户](https://platform.openai.com/signup)，你需要使用国际手机号、非大陆邮箱进行注册；
-- 注册完毕后，前往 [API Keys](https://platform.openai.com/api-keys) 页面，点击 `Create new secret key` 创建新的 API Key:
+  - 注册完毕后，前往 [API Keys](https://platform.openai.com/api-keys) 页面，点击 `Create new secret key` 创建新的 API Key:
 
-- 打开创建窗口
+  - 打开创建窗口
 
-<Image
-  alt={'打开创建窗口'}
-  inStep
-  src={
-    'https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/296253192-ff2193dd-f125-4e58-82e8-91bc376c0d68.png'
-  }
-/>
+  <Image
+    alt={'打开创建窗口'}
+    inStep
+    src={
+'https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/296253192-ff2193dd-f125-4e58-82e8-91bc376c0d68.png'
+}
+  />
 
-- 创建 API Key
+  - 创建 API Key
 
-<Image
-  alt={'创建 API Key'}
-  inStep
-  src={
-    'https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/296254170-803bacf0-4471-4171-ae79-0eab08d621d1.png'
-  }
-/>
+  <Image
+    alt={'创建 API Key'}
+    inStep
+    src={
+'https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/296254170-803bacf0-4471-4171-ae79-0eab08d621d1.png'
+}
+  />
 
-- 获取 API Key
+  - 获取 API Key
 
-<Image
-  alt={'获取 API Key'}
-  inStep
-  src={
-    'https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/296255167-f2745f2b-f083-4ba8-bc78-9b558e0002de.png'
-  }
-/>
+  <Image
+    alt={'获取 API Key'}
+    inStep
+    src={
+'https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/296255167-f2745f2b-f083-4ba8-bc78-9b558e0002de.png'
+}
+  />
 
-<Callout type={'warning'}>账户注册后，一般有 5 美元的免费额度，但有效期只有三个月。</Callout>
+  <Callout type={'warning'}>账户注册后，一般有 5 美元的免费额度，但有效期只有三个月。</Callout>
 
-### 步骤二：在 LobeChat 中配置 OpenAI
+  ### 步骤二：在 LobeChat 中配置 OpenAI
 
-- 访问 LobeChat 的`设置`界面
-- 在`语言模型`下找到`OpenAI`的设置项
+  - 访问 LobeChat 的`设置`界面
+  - 在`语言模型`下找到`OpenAI`的设置项
 
-<Image
-  alt={'填入 API 密钥'}
-  inStep
-  src={'https://github.com/lobehub/lobe-chat/assets/17870709/3f31bc33-509f-4ad2-ba81-280c2a6ec5fa'}
-/>
+  <Image alt={'填入 API 密钥'} inStep src={'https://github.com/lobehub/lobe-chat/assets/17870709/3f31bc33-509f-4ad2-ba81-280c2a6ec5fa'} />
 
-- 填入获得的 API 密钥
-- 为你的 AI 助手选择一个 OpenAI 的模型即可开始对话
+  - 填入获得的 API 密钥
+  - 为你的 AI 助手选择一个 OpenAI 的模型即可开始对话
 
-<Image
-  alt={'选择 OpenAI 模型并开始对话'}
-  inStep
-  src={'https://github.com/lobehub/lobe-chat/assets/17870709/ff7ebacf-27f0-42d7-810b-00314499a084'}
-/>
-
-<Callout type={'warning'}>
-  在使用过程中你可能需要向 API 服务提供商付费，请参考 OpenAI 的相关费用政策。
-</Callout>
+  <Image alt={'选择 OpenAI 模型并开始对话'} inStep src={'https://github.com/lobehub/lobe-chat/assets/17870709/ff7ebacf-27f0-42d7-810b-00314499a084'} />
 
+  <Callout type={'warning'}>
+    在使用过程中你可能需要向 API 服务提供商付费，请参考 OpenAI 的相关费用政策。
+  </Callout>
 </Steps>
 
 至此你已经可以在 LobeChat 中使用 OpenAI 提供的模型进行对话了。

package/docs/usage/providers/openrouter.mdx

@@ -13,98 +13,62 @@ tags:
 
 # Using OpenRouter in LobeChat
 
-<Image
-  alt={'Using OpenRouter in LobeChat'}
-  cover
-  src={'https://github.com/lobehub/lobe-chat/assets/34400653/40520a43-ac03-4954-8a4d-282fbb946066'}
-/>
+<Image alt={'Using OpenRouter in LobeChat'} cover src={'https://github.com/lobehub/lobe-chat/assets/34400653/40520a43-ac03-4954-8a4d-282fbb946066'} />
 
 [OpenRouter](https://openrouter.ai/) is a service that provides a variety of excellent large language model APIs, supporting models such as OpenAI (including GPT-3.5/4), Anthropic (Claude2, Instant), LLaMA 2, and PaLM Bison.
 
 This document will guide you on how to use OpenRouter in LobeChat:
 
 <Steps>
+  ### Step 1: Register and Log in to OpenRouter
 
-### Step 1: Register and Log in to OpenRouter
-
-- Visit [OpenRouter.ai](https://openrouter.ai/) and create an account
-- You can log in using your Google account or MetaMask wallet
-
-<Image
-  alt={'Register OpenRouter'}
-  height={457}
-  inStep
-  src={'https://github.com/lobehub/lobe-chat/assets/34400653/a024af40-e1d9-4df0-b998-0e6e87cebe5b'}
-/>
-
-### Step 2: Create an API Key
-
-- Go to the `Keys` menu or visit [OpenRouter Keys](https://openrouter.ai/keys) directly
-- Click on `Create Key` to start the creation process
-- Name your API key in the pop-up dialog, for example, "LobeChat Key"
-- Leave the `Credit limit` blank to indicate no amount limit
-
-<Image
-  alt={'Create OpenRouter Key'}
-  height={460}
-  inStep
-  src={'https://github.com/lobehub/lobe-chat/assets/34400653/094d701f-ce80-464a-bbbc-0a5ecc8d08e3'}
-/>
-
-- Copy the API key from the pop-up dialog and save it securely
-
-<Image
-  alt={'Get OpenRouter Key'}
-  height={519}
-  inStep
-  src={'https://github.com/lobehub/lobe-chat/assets/34400653/7a012a11-87bd-4366-a567-0ebf6d12ae10'}
-/>
-
-<Callout type={'warning'}>
-  Please store the key securely as it will only appear once. If you lose it accidentally, you will
-  need to create a new key.
-</Callout>
-
-### Step 3: Recharge Credit
-
-- Go to the `Credit` menu or visit [OpenRouter Credit](https://openrouter.ai/credits) directly
-- Click on `Manage Credits` to recharge your credit, you can check model prices at [https://openrouter.ai/models](https://openrouter.ai/models)
-- OpenRouter provides some free models that can be used without recharging
-
-<Image
-  alt={'Recharge OpenRouter Credit'}
-  height={385}
-  inStep
-  src={'https://github.com/lobehub/lobe-chat/assets/34400653/50b73232-01fc-4ef0-939a-3e06354d1b5a'}
-/>
-
-### Step 4: Configure OpenRouter in LobeChat
-
-- Visit the `Settings` interface in LobeChat
-- Find the setting for `OpenRouter` under `Language Models`
-- Enable OpenRouter and enter the API key you obtained
-
-<Image
-  alt={'Configure OpenRouter in LobeChat'}
-  height={518}
-  inStep
-  src={'https://github.com/lobehub/lobe-chat/assets/34400653/5c3898ab-23d7-44c2-bbd9-b255e25e400c'}
-/>
-
-- Choose an OpenRouter model for your assistant to start the conversation
-
-<Image
-  alt={'Use OpenRouter model'}
-  height={518}
-  inStep
-  src={'https://github.com/lobehub/lobe-chat/assets/34400653/77b5feee-3f46-486d-9a36-31ff60efa5e9'}
-/>
-
-<Callout type={'warning'}>
-  You may need to pay the API service provider during usage, please refer to OpenRouter's relevant
-  fee policies.
-</Callout>
+  - Visit [OpenRouter.ai](https://openrouter.ai/) and create an account
+  - You can log in using your Google account or MetaMask wallet
 
+  <Image alt={'Register OpenRouter'} height={457} inStep src={'https://github.com/lobehub/lobe-chat/assets/34400653/a024af40-e1d9-4df0-b998-0e6e87cebe5b'} />
+
+  ### Step 2: Create an API Key
+
+  - Go to the `Keys` menu or visit [OpenRouter Keys](https://openrouter.ai/keys) directly
+  - Click on `Create Key` to start the creation process
+  - Name your API key in the pop-up dialog, for example, "LobeChat Key"
+  - Leave the `Credit limit` blank to indicate no amount limit
+
+  <Image alt={'Create OpenRouter Key'} height={460} inStep src={'https://github.com/lobehub/lobe-chat/assets/34400653/094d701f-ce80-464a-bbbc-0a5ecc8d08e3'} />
+
+  - Copy the API key from the pop-up dialog and save it securely
+
+  <Image alt={'Get OpenRouter Key'} height={519} inStep src={'https://github.com/lobehub/lobe-chat/assets/34400653/7a012a11-87bd-4366-a567-0ebf6d12ae10'} />
+
+  <Callout type={'warning'}>
+    Please store the key securely as it will only appear once. If you lose it accidentally, you will
+    need to create a new key.
+  </Callout>
+
+  ### Step 3: Recharge Credit
+
+  - Go to the `Credit` menu or visit [OpenRouter Credit](https://openrouter.ai/credits) directly
+  - Click on `Manage Credits` to recharge your credit, you can check model prices at [https://openrouter.ai/models](https://openrouter.ai/models)
+  - OpenRouter provides some free models that can be used without recharging
+
+  <Image alt={'Recharge OpenRouter Credit'} height={385} inStep src={'https://github.com/lobehub/lobe-chat/assets/34400653/50b73232-01fc-4ef0-939a-3e06354d1b5a'} />
+
+  ### Step 4: Configure OpenRouter in LobeChat
+
+  - Visit the `Settings` interface in LobeChat
+  - Find the setting for `OpenRouter` under `Language Models`
+  - Enable OpenRouter and enter the API key you obtained
+
+  <Image alt={'Configure OpenRouter in LobeChat'} height={518} inStep src={'https://github.com/lobehub/lobe-chat/assets/34400653/5c3898ab-23d7-44c2-bbd9-b255e25e400c'} />
+
+  - Choose an OpenRouter model for your assistant to start the conversation
+
+  <Image alt={'Use OpenRouter model'} height={518} inStep src={'https://github.com/lobehub/lobe-chat/assets/34400653/77b5feee-3f46-486d-9a36-31ff60efa5e9'} />
+
+  <Callout type={'warning'}>
+    You may need to pay the API service provider during usage, please refer to OpenRouter's relevant
+    fee policies.
+  </Callout>
 </Steps>
 
 You can now engage in conversations using the models provided by OpenRouter in LobeChat.