docs: add console screenshots to the MCP guide and move the console section first

Co-authored-by: cowagent <cow@cowagent.ai>

docs/ja/tools/mcp.mdx

@@ -5,6 +5,21 @@ description: Model Context Protocol を介して外部Toolエコシステムを
 
 CowAgent は [Model Context Protocol (MCP)](https://modelcontextprotocol.io) をサポートしており、コミュニティで提供されている数万種類の MCP Tool を Agent から直接呼び出せます。`mcp.json` を一度設定すれば、組み込みToolとまったく同じ形で LLM に公開され、自動的に選択・呼び出されます。
 
+## Web / デスクトップコンソール
+
+**Web コンソール**と**デスクトップクライアント**の「機能」ページにある **MCP Tool** セクションから、`mcp.json` を手動で編集せずに MCP サーバーを追加・編集・無効化・削除できます。
+
+- **フォームまたは JSON**：フォーム入力のほか、JSON モードで標準の `mcpServers` 設定を貼り付けられます（複数サーバーを一括指定可）。例：`{"mcpServers":{"fetch":{"command":"uvx","args":["mcp-server-fetch"]}}}`。
+- **接続テスト**：サーバーが利用可能かを確認し、その Tool を一覧表示します。保存前にも自動で確認し、失敗した場合は設定を修正するか「このまま保存」を選択できます（保存後に認可が必要なサーバー向け）。
+- **設定の保存先**：現在の Agent の `mcp.json` に、Claude Desktop / Cursor と同じ形式で書き込まれます。
+- **即時反映**：変更は次のメッセージから反映され、再起動は不要です。
+
+stdio、SSE、Streamable HTTP のいずれにも対応しています。無効化したサーバーはファイルに残りますが、起動されません。
+
+<Frame>
+  <img src="https://cdn.jsdelivr.net/gh/zhayujie/cowagent-assets@main/screenshots/en/mcp-config.png" alt="MCP Tool の追加" width="800" />
+</Frame>
+
 ## 設定ファイル
 
 CowAgent は `~/cow/mcp.json` を読み込みます。ファイルが存在しない場合は MCP Tool は読み込まれず、エラーにもなりません。

docs/tools/mcp.mdx

@@ -5,6 +5,21 @@ description: Integrate external tool ecosystems via the Model Context Protocol
 
 CowAgent supports the [Model Context Protocol (MCP)](https://modelcontextprotocol.io), allowing the Agent to directly invoke tens of thousands of community MCP tools. Configure `mcp.json` once and the tools are exposed to the LLM in exactly the same way as built-in tools — automatically selected and invoked.
 
+## Web and Desktop Console
+
+The **MCP Tools** section of the Capabilities page in the **web console** and **desktop app** can add, edit, disable, and remove MCP servers without editing `mcp.json` by hand.
+
+- **Form or JSON**: fill in the form, or paste a standard `mcpServers` config in JSON mode (several servers at once), for example `{"mcpServers":{"fetch":{"command":"uvx","args":["mcp-server-fetch"]}}}`.
+- **Connection test**: checks that each server is reachable and lists its tools. Saving runs the same check first; if it fails, fix the config or choose **Save anyway** (for servers that require authorization after saving).
+- **Storage**: written to the current Agent's `mcp.json`, in the same format as Claude Desktop / Cursor.
+- **Immediate effect**: changes apply from the next message, with no restart.
+
+stdio, SSE, and streamable HTTP transports are all supported. A disabled server stays in the file but is not booted.
+
+<Frame>
+  <img src="https://cdn.jsdelivr.net/gh/zhayujie/cowagent-assets@main/screenshots/en/mcp-config.png" alt="Add an MCP tool" width="800" />
+</Frame>
+
 ## Configuration File
 
 CowAgent reads `~/cow/mcp.json`. If the file does not exist, no MCP tools are loaded — and no error is raised.
@@ -86,17 +101,6 @@ For a remote server that authenticates with a static API key, set `type` explici
 - The key is stored as plain text, so keep `mcp.json` out of version control.
 - An `Authorization` header selects static authentication and skips the OAuth flow below, even when the value is wrong.
 
-## Web and Desktop Console
-
-The **MCP Tools** section of the Capabilities page in the **web console** and **desktop app** can add, edit, disable, and remove MCP servers without editing `mcp.json` by hand.
-
-- **Form or JSON**: fill in the form, or switch to the JSON tab and paste the config an MCP directory gives you, for example `{"mcpServers":{"fetch":{"command":"uvx","args":["mcp-server-fetch"]}}}`. A pasted config can hold several servers at once.
-- **Test connection** handshakes with each server and lists its tools. **Save** runs the same check first; if it fails, fix the config or choose **Save anyway** (useful for servers that need authorization after saving).
-- Saving writes the Agent's `mcp.json` in the standard `mcpServers` format.
-- CowAgent hot-reloads the file; the new tools are available on the **next message**. No process restart is required.
-
-stdio, SSE, and streamable HTTP transports are all supported. A disabled server stays in the file but is not booted.
-
 ## Let the Agent Configure It for You
 
 CowAgent ships with `read` / `write` / `edit` tools, so **you can simply send the MCP config to the Agent and ask it to write the file**:

docs/zh/tools/mcp.mdx

@@ -5,6 +5,21 @@ description: 通过 Model Context Protocol 接入外部工具生态
 
 CowAgent 支持 [Model Context Protocol (MCP)](https://modelcontextprotocol.io)，让 Agent 能够直接调用社区中数以万计的 MCP 工具。配置一次 `mcp.json`，工具就会以与内置工具完全相同的方式呈现给 LLM，可被自动选择和调用。
 
+## Web / 桌面控制台
+
+Web 控制台和桌面客户端「能力」页面的 **MCP 工具** 区域可以直接添加、编辑、停用和删除 MCP 服务，不必再手工改 `mcp.json`。
+
+- **表单或 JSON**：支持表单填写，或在 JSON 模式下粘贴标准 `mcpServers` 配置（可同时包含多个服务），例如 `{"mcpServers":{"fetch":{"command":"uvx","args":["mcp-server-fetch"]}}}`。
+- **连接测试**：检测服务是否可用并列出其工具。保存前会自动检测，未通过时可修改配置或选择「仍然保存」（适用于保存后才能授权的服务）。
+- **配置存储**：写入当前 Agent 的 `mcp.json`，格式与 Claude Desktop / Cursor 一致。
+- **即时生效**：修改在下一条消息生效，无需重启。
+
+stdio、SSE、streamable HTTP 都支持。停用的服务器会留在文件里，但不会被拉起。
+
+<Frame>
+  <img src="https://cdn.link-ai.tech/doc/20260930184045.png" alt="添加 MCP 工具" width="800" />
+</Frame>
+
 ## 配置文件
 
 CowAgent 读取 `~/cow/mcp.json`。文件不存在时不会启用任何 MCP 工具，也不会报错。
@@ -85,17 +100,6 @@ Docker 部署时，官方 `docker-compose.yml` 已经把宿主机 `./cow` 挂载
 - 密钥在 `mcp.json` 中是明文存储，注意不要提交到版本库
 - 配置了 `Authorization` 即视为静态认证，不会触发下方的 OAuth 流程，即使密钥是错的
 
-## Web / 桌面控制台
-
-Web 控制台和桌面客户端「能力」页面的 **MCP 工具** 区域可以直接添加、编辑、停用和删除 MCP 服务，不必再手工改 `mcp.json`。
-
-- **表单或 JSON**：可以逐项填写表单，也可以切换到 JSON 标签，直接粘贴 MCP 市场提供的配置，例如 `{"mcpServers":{"fetch":{"command":"uvx","args":["mcp-server-fetch"]}}}`，一次可以粘贴多个。
-- **测试连接** 会握手并列出每个服务提供的工具。点击 **保存** 时也会先做同样的校验；校验未通过时，可以修改配置，或选择 **仍然保存**（适用于保存后才能授权的服务）。
-- 保存会写入该 Agent 的 `mcp.json`，格式与 Claude / Cursor 的 `mcpServers` 一致。
-- CowAgent 会热加载该文件，**下一条消息**即可使用新工具，无需重启进程。
-
-stdio、SSE、streamable HTTP 都支持。停用的服务器会留在文件里，但不会被拉起。
-
 ## 让 Agent 帮你配置
 
 CowAgent 自带 `read` / `write` / `edit` 工具，**直接把要装的 MCP 配置发给 Agent，让它写到配置文件中：