# Custom Frames + Open Webui # 教程：在 Obsidian 中集成 Open WebUI 作为 AI 聊天中心 ## 目标 如何通过 Docker 在本地运行 **Open WebUI**，并使用 **Custom Frames** 插件将其无缝嵌入到 Obsidian 的侧边栏中。最终目标是在 Obsidian 内部创建一个功能强大、可连接多种 AI 模型（云端 API 或本地 LLM）的统一聊天界面，从而极大地提升工作效率，减少应用切换。 ## 前提条件 1. **[Obsidian](https://obsidian.md/)**：已安装并正常运行。 2. **[Docker Desktop](https://www.docker.com/products/docker-desktop/)**：已在您的电脑上安装并成功启动。这是运行 Open WebUI 最简单、最可靠的方式。 --- ## 流程步骤 ### 第一步：安装并运行 Open WebUI 首先，我们需要让 Open WebUI 服务在您的电脑后台运行起来。 1. **打开终端**： * **Windows**: 打开 `PowerShell` 或 `CMD`。 * **macOS/Linux**: 打开 `Terminal`。 2. **运行 Docker 命令**： 复制以下整段命令，粘贴到终端中并按回车。此命令会自动下载 Open WebUI 镜像并以最佳配置启动它。 ```bash docker run -d -p 3000:8080 --add-host=host.docker.internal:host-gateway -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-webui:main ``` > [!NOTE] 命令参数解释 > - `-d`: 在后台运行容器。 > - `-p 3000:8080`: 将你电脑的 `3000` 端口映射到容器的 `8080` 端口。 > - `-v open-webui:/app/backend/data`: 将容器的数据（设置、聊天记录等）持久化保存在本地，防止丢失。 > - `--name open-webui`: 为容器命名，方便管理。 > - `--restart always`: 电脑重启后，Docker 会自动启动此容器。 3. **验证运行状态**： * 等待 2-5 分钟，让容器完成首次初始化。 * 在浏览器中访问 `http://localhost:3000`。 * 如果看到 Open WebUI 的欢迎界面，请根据提示创建您的第一个管理员账户。 ### 第二步：在 Obsidian 中配置 Custom Frames 插件 接下来，我们将把 Open WebUI 的界面“搬”进 Obsidian。 1. **安装插件**： * 在 Obsidian 中，进入 `设置` > `社区插件`。 * 关闭 `安全模式`，然后点击 `浏览`。 * 搜索 `Custom Frames`，点击 `安装` 并 `启用`。 2. **创建 WebUI 框架**： * 进入 `设置` > `Custom Frames`。 * 点击 `Add Frame` 并填写以下信息： * **Frame Name**: `AI Chat` (或任何你喜欢的名字) * **Icon**: 选择一个易于识别的图标（如对话气泡）。 * **URL**: `http://localhost:3000` * **Open in**: 推荐选择 `Sidebar`，这会将其固定在右侧边栏。 3. **打开窗格**： * 按下 `Ctrl+P` (或 `Cmd+P`) 打开命令面板。 * 输入 `AI Chat`，选择 `Custom Frames: Open AI Chat`。 * 现在，您的 Open WebUI 界面应该已经出现在 Obsidian 的侧边栏了。 ### 第三步：在 Open WebUI 中连接 AI 模型 最后一步是让你的 Open WebUI 真正拥有一个“大脑”。 1. **进入 Open WebUI 设置**： * 在 Obsidian 内的 Open WebUI 窗格中，点击左下角的设置图标，进入 `设置`。 2. **连接模型**： * 点击左侧的 `外部连接` 菜单。 * **连接云端 API** (如 OpenAI, Gemini, Claude): * 找到对应的服务商（如 `OpenAI API`）。 * 打开开关，将您的 **API 密钥** 粘贴进去。 * 在 `模型` 区域添加您想用的模型名称 (如 `gpt-4o`)。 * 点击 `保存`。 * **连接本地模型** (如 LM Studio, Ollama): * 找到对应的服务商（如 `Ollama API`）。 * 打开开关，确保 **API 地址** 指向您的本地服务器 (默认的 `http://host.docker.internal:11434` 通常适用于 Ollama)。 * 点击 `保存`。 3. **开始使用**： * 回到 Open WebUI 聊天主界面，从模型下拉列表中选择您刚刚配置好的模型，即可开始对话。 > [!SUCCESS] 完成！ > 您现在拥有一个完全集成在 Obsidian 内部的、功能强大的 AI 聊天工作站。您可以随时在不同的云端和本地模型之间切换，享受无缝的工作体验。 --- ## 常见问题与故障排除 > [!bug] 问题：访问 `localhost:3000` 时浏览器报错 `ERR_EMPTY_RESPONSE` 或显示空白页面。 > **原因**: 这是最常见的问题。通常是因为 Open WebUI 容器在**首次启动时需要几分钟时间进行初始化**，而此时 Web 服务尚未就绪。 > **解决方案**: > 1. **耐心等待**：在第一次运行 Docker 命令后，请耐心等待 3-5 分钟。 > 2. **强制刷新**：在浏览器中按下 `Ctrl+F5` (或 `Cmd+Shift+R`) 来清除缓存并强制重新加载页面。 > 3. **重启容器**：如果等待后仍无效，请在 Docker Desktop 中找到 `open-webui` 容器，点击 `Stop` 按钮，然后再点击 `Start` 按钮。 --- # Obsidian主流AI插件以及与AI的链接方式 ## 一、主流的 Obsidian AI 插件概览 | 插件名称 | 主要特点 | 支持的连接方式 | | :--- | :--- | :--- | | **Copilot for Obsidian** | 开源，功能强大，支持聊天、命令、与整个知识库对话。 | API Key / 本地大模型 (Ollama, LM Studio) | | **Smart Connections** | 与笔记聊天，智能显示相关笔记链接。 | API Key / 本地大模型 | | **AI Assistant** | 集中管理多个 AI 提供商的设置，方便切换。 | API Key / 本地大模型 | | **Vault Chat** | 专注于 OpenAI，让 AI 学习整个库并进行问答。 | API Key | | **Tars** | 支持多种国内外模型，如 Kimi, 豆包, Qwen, Claude 等。 | API Key | | **Quiz Generator** | 从笔记中自动生成互动式抽认卡（问题卡片）。 | API Key / 本地大模型 | ## 二、AI 的两种核心连接方式 所有 AI 插件都离不开底层的 AI 模型，而连接这些模型的方式主要有两种： 1. **API Key (云端大模型)**：通过插件，将您的数据发送给 OpenAI、Google、Anthropic 等云服务商进行处理。 2. **本地大模型 (Local LLM)**：通过 Ollama 或 LM Studio 等工具，在您自己的电脑上运行 AI 模型，数据完全不离开本地。 ## 三、API Key 与本地大模型的深度对比 这两种方式各有优劣，适用于不同的场景和任务。核心是在 **`性能`** 与 **`隐私`** 之间做权衡。 | 特性维度 | API Key (云端模型) | 本地大模型 | | :--- | :--- | :--- | | **模型性能** | **极高**：可使用 GPT-4o, Claude 3 Opus 等世界顶级模型。 | **中到高**：性能受限于本地硬件和所选模型的大小。 | | **隐私安全** | **有风险**：数据需要通过网络发送给第三方服务商处理。 | **极高**：数据和计算完全在本地完成，无任何隐私泄露风险。 | | **成本构成** | **持续性成本**：按使用的 Token 数量计费，长期使用成本高。 | **一次性硬件成本**：购买硬件后，模型运行本身几乎零成本。 | | **硬件要求** | **极低**：几乎任何能流畅上网的电脑都可以。 | **极高**：需要强大的 GPU（尤其是显存 VRAM）和足够的内存。 | | **网络依赖** | **强依赖**：必须有稳定的网络连接才能使用。 | **完全独立**：支持完全离线使用。 | | **设置维护** | **简单**：通常只需在插件中填入一串密钥。 | **复杂**：需要自行安装、配置和管理模型，有一定技术门槛。 | | **适用任务** | - **高质量创意写作**
- **复杂逻辑推理与分析**
- **专业级代码生成**
- **需最新知识的问答** | - **个人笔记总结与整理**
- **私密知识库问答 (RAG)**
- **文本格式化与重写**
- **离线环境写作辅助** | ## 四、结论：何时更适合使用本地大模型？ 当您符合以下一个或多个情况时，应优先考虑使用本地大模型： - **`隐私至上`**：处理的内容包含个人日记、财务信息、商业机密等高度敏感数据。 - **`需要离线`**：经常在网络不稳定或无网络的环境下工作。 - **`高频使用`**：每天大量调用 AI 功能，希望控制长期成本。 - **`任务明确`**：主要需求是笔记整理、总结、简单问答等，无需顶级模型的复杂推理能力。 --- # Open WebUI vs Obsidian Copilot ### Obsidian AI 工作流对比：Custom Frames + Open WebUI vs. Obsidian Copilot | 特性维度 | Custom Frames + Open WebUI | Obsidian Copilot | | :--- | :--- | :--- | | **核心定位** | **通用 AI 聊天中心 (Chat Hub)** | **原生知识库助手 (Knowledge Assistant)** | | **与 Vault 的集成** | **浅层嵌入/无集成**
运行在 `iframe` 安全沙盒中，**无法**直接读取或索引您的本地笔记文件。 | **深度原生集成**
作为一个 Obsidian 插件，**可以**直接读取、分析和索引您整个 Vault 的内容。 | | **主要工作流** | **向外 (Outward-Facing)**：提供一个统一界面去访问和实验**外部**的各种 AI 模型（云端 API 或本地 LLM）。 | **向内 (Inward-Facing)**：核心是利用 AI 来理解、总结和查询**您已有的**知识库内容。 | | **核心优势** | 1. **统一且强大的聊天界面**：体验类似 ChatGPT 官网，支持多对话管理、多模态（图片上传）。
2. **极致的模型灵活性**：轻松在一个界面中集中管理和对比来自数十个供应商（OpenAI, Anthropic, Google, 本地等）的模型。
3. **可扩展性强**：一次设置，未来可无缝接入任何新的云端或本地模型。 | 1. **实现真正的 Vault QA**：通过本地 RAG（检索增强生成），能对整个知识库进行上下文理解和精准问答。
2. **无缝的笔记操作**：可以直接对选中文本执行命令（如总结、润色、翻译），并将结果插入笔记。
3. **发现知识关联**：能根据当前笔记内容，智能推荐 Vault 中的其他相关笔记。 | | **核心劣势** | 1. **无法实现 Vault QA**：不能自动索引您的知识库，无法进行全库问答。
2. **数据隔离**：聊天记录与 Obsidian 笔记是分开存储的，无法直接联动。
3. **需要额外设置**：需要先通过 Docker 运行 Open WebUI 服务。 | 1. **聊天界面相对基础**：UI 功能不如 Open WebUI 丰富，不支持多模态输入。
2. **模型管理分散**：添加和切换不同供应商的模型需要在设置中单独配置，不如 Open WebUI 直观。
3. **索引成本**：初次索引大型 Vault 可能需要较长时间和一定的计算资源。 | | **适用场景** | • **需要频繁对比不同 AI 模型性能的用户**。
• **进行复杂内容创作、头脑风暴和多轮对话的用户**。
• **希望在 Obsidian 中拥有一个功能完备的“外部大脑”接口**。
• **需要处理图片等多模态输入的用户**。 | • **希望将 Obsidian 真正打造成“第二大脑”并进行智能检索的用户**。
• **需要 AI 辅助日常笔记撰写、总结和润色的用户**。
• **希望发现个人知识库中隐藏关联和模式的用户**。
• **高度重视隐私，希望通过本地模型实现全流程私密 AI 问答的用户**。 | | **工作流比喻** | 在您的书房里安装了一个可以连接全世界所有信息中心的**超级控制台**。 | 您的书房拥有了一位**私人图书管理员**，他读完了您的所有藏书，并能随时为您解答和整理。 | --- # 通过LM Studio在Obsidian中使用本地大模型 **核心流程**：LM Studio 负责在本地运行模型并创建一个API 服务器，Obsidian Copilot 插件向本地大模型API发送请求。 --- ## 步骤一：配置本地服务器 (LM Studio) 首先，我们需要在 LM Studio 中下载并运行模型。 1. **下载并安装**：前往 [LM Studio 官网](https://lmstudio.ai/) 下载并安装对应您操作系统的软件。 2. **搜索并下载模型**： * 打开 LM Studio，点击左侧的放大镜图标 `(Search)`。 * 在搜索框中输入推荐的模型，例如 `qwen3-8b-instruct-gguf`。 * 在右侧的结果列表中，选择一个 `GGUF` 格式的文件下载。推荐选择带有 `Q4_K_M` 或 `Q5_K_M` 标识的版本，这是性能和文件大小的良好平衡点。 3. **加载模型并启动服务**： * 点击左侧的开发者图标 。 * 在顶部选择您刚刚下载的模型。 * 模型加载完成后，点击 `Start Server` 按钮。 * 启动成功后，您会看到服务器日志，底部会显示服务正在 `http://localhost:1234/v1` 地址上运行。 * 在Settings里，打开`启用CORS`开关 > **注意**：在进行下一步之前，请**务必保持 LM Studio 运行**且服务器已启动。 --- ## 步骤二：配置 Obsidian Copilot 插件 现在，我们设置 Obsidian 的 Copilot 插件，使其连接到 LM Studio 提供的本地服务。 1. **安装插件**：在 Obsidian 的第三方插件市场中搜索并安装 `Copilot`。 2. **配置插件设置**： * 进入 `设置` -> `第三方插件` -> `Copilot`。 * 点击Model，在列表下方点击`Add Custom Model` * 随后会出现新的配置项，请按下表进行填写： | 设置项 | 填写内容 | 说明 | | :--- | :--- | :--- | | **API Endpoint** | `http://localhost:1234/v1/chat/completions` | **必须完全一致**，指向 LM Studio 服务的具体路径。 | | **API Key** | (留空) | 本地服务不需要密钥，可留空。 | | **Model Name** | 与模型名一致，Qwen-3-8b-instruct | 可留空，插件会自动使用 LM Studio 加载的模型。 | 3. **保存并测试**： * 点击Verify，成功后点击Add Model。 * 回到Basic界面，把Default chat model更换为刚才添加的model。 * 打开 Obsidian 的 Copilot 聊天窗口。 * 发送一条消息，如“你好”。 * 如果一切正常，您会收到来自本地模型的回复。同时，您可以在 LM Studio 的服务器日志中看到请求和处理过程。 --- ## 故障排查 (Troubleshooting) 如果无法收到回复，请检查： - **LM Studio 服务器是否已启动？** - **模型是否已在 LM Studio 中成功加载？** - **Obsidian Copilot 中的 `API Endpoint` 地址是否填写完全正确？** (这是最常见的错误) - 您的电脑性能是否足够支持运行该模型？ 至此，您已成功搭建起一套完全私有的个人知识库 AI 助理。 > **专注 AI 与个人知识管理** > 本文属于 [杰森的效率工坊](https://jasonai.me)原创。未经允许禁止商用。 > > **订阅杰森的频道：** > [YouTube](https://www.youtube.com/@JasonEfficiencyLab) · [Twitter(X)](https://x.com/JasonEffiLab) · [小红书](https://www.xiaohongshu.com/user/profile/60935957000000000101fbf7) · [B站](https://space.bilibili.com/3546884870244925)