Trae + MCP 实战:一键生成 Obsidian 白板脑图 | AI 精英周刊 020
最近 AI 工具圈子里,字节跳动推出的免费 AI IDE —— Trae, 刚刚宣布支持 MCP,重点是 Trae 现在是免费的。
之前我在 「告别无聊 PPT,AI 一键生成 Obsidian 高颜值白板脑图!| AI 精英周刊 018」 这篇 Newsletter 中,和大家探讨了如何让 AI 帮助我们生成 Obsidian Canvas。今天,我们要玩点更酷的!借助 Trae 最近引入的 MCP 支持,特别是
filesystem
这个 MCP,我们可以实现更灵活的本地文件操作,直接在 Trae 中生成和控制我们 Obsidian Vault 中的 Canvas 文件。当然,做为对比,我们还会演示直接使用 Claude 的桌面版 APP 借助 MCP,一键完成 Obsidian Canvas 的生成和编辑,而不需要手工地拷贝和粘贴 AI 生成的 Canvas 代码。
这不仅仅是对上一期内容的升级,更是借助 Trae 和 MCP 这波热度,为大家展示 AI 工具的运用。
0 | 为什么要关心 MCP?
如果你经常关注 AI 应用的前沿动态,你一定听说过 MCP (Model Context Protocol)。简单来说,如果把强大的 AI 大语言模型比作一个”万能大脑”,那么 MCP 就像是那根能把大脑直接连接到现实世界各种工具和数据源的 USB-C 数据线:它提供了一个统一的接口标准,让 AI 不再仅仅是”聊天机器人”,而是能真正调用外部”配件”(比如文件系统、数据库、API 等)来完成复杂任务。
这个协议由 Anthropic(Claude 的母公司)在去年底开源,随后像 Cursor、Replit、包括 Claude Desktop App 等工具都纷纷加入了支持。而就在昨天,Trae,也正式加入了 MCP 的大家庭。这意味着,这款强大的免费 AI IDE,终于获得了”官方外挂”级别的上下文扩展能力。
如果你不太了解 MCP,可以先读一读「Claude MCP协议详解:AI与应用系统互操作的新标准」。
1 | Trae 小档案:你的免费全能 AI 工具箱
在我们深入实战前,先快速了解下 Trae 这款工具:
版本 | 预装模型 (部分列举) | 备注 |
---|---|---|
国内版 | Deepseek R1 / V3 / V3-0324,豆包 (Doubao) 1.5 Pro 等 | 支持自定义模型接入 |
海外版 | Claude 3.5 / 3.7 Sonnet,Gemini 2.5 Pro,GPT-4o / 4.1 等 | 同样支持自定义模型接入 |
核心亮点:
- ✅ 完全免费。
- ✅ 核心交互体验类似 Cursor,侧重于代码辅助和 AI 对话。
- ✅ 杀手锏: 可以通过
@智能体
指令,将配置好的 MCP 服务当作 AI 的”远程机械臂”,执行超越 IDE 本身的任务(比如操作任意本地文件)。
2 | 准备工作:给 Trae 装上”机械臂”
要让 Trae 能操作你的 Obsidian Vault,我们需要做两件事:安装 Trae 本体和配置 Filesystem MCP 服务。
安装 Trae: 前往 Trae 官网下载并安装
运行 TRAE
安装完成后,双击运行。第一次运行,需要创建账号,并登录。
之后,你就可以打开或者新建一个项目了。我在本次演示中,就打开我的一个 Obsidian 的 Vault 做为 Trae 的项目目录。
安装 MCP Server
- 点击右上角的设置按钮,在下拉菜单中,选择 MCP
- TRAE 会打开一个 MCP 市场,在搜索栏中输入”filesystem”
- 注意,选择第一个包含更多工具的”filesystem”,然后点击右侧的 + 号
- 在从弹出的窗口中,点击”介绍页面”,就会打开这个 MCP 的页面,我们可以从打开的页面中看到,这一个”filesystem”的 MCP 是来自 Claude 的官方 MCP 仓库的。
- 之后,拷贝 NPX 这部分的代码,粘贴到右边 TRAE 的「添加 MCP Server」对话框的代码框里。
- 这里的重点,是你需要把 MCP 配置当中的本地路径修改为你需要操作的本地路径。这次,我们首先把它更改为打开的 Obsidian Vault 的目录。「实际上把当前打开的项目目录再设置一个 filesystem 的 MCP 是没有太大必要的,后面演示会看到」
3 | 实战演练:Trae + MCP → Obsidian Canvas
准备就绪,让我们开始实战!我将选用 Deepseek R1 模型进行演示,并且已经将我的 Obsidian Vault 设置为了 Trae 的项目目录。
3.1 在 Vault 内创建 Canvas
使用 Trae 的智能体调用 MCP
Trae 有两个内置的智能体,其中一个叫做”Builder with MCP”,这个智能体,可以操作你配置的所有的 MCP Servers,我们就首先用这个智能体试一下。
我们可以看到,虽然在提示中要求了”请使用 filesystem”,但是由于给定的目录就是当前项目的目录下面的子目录,Trae 完全是有权限写入,因此它并没有调用 MCP,所以前面说「把当前打开的项目目录再设置一个 filesystem 的 MCP 是没有太大必要的”
而且很有意思的是,我让他创建一个关于 MCP 原理简介的文档,它居然会参考目录下面已经存在的一个文件名叫做 “mcp.canvas” 的文件的内容。
所以,当操作目标就在项目文件夹内时,你可以不使用智能体和 MCP 就能搞定。但别急,MCP 的真正价值在于下一步。
3.2 将 MCP 的工作范围扩展到项目之外
这次,我们随便打开一个新的项目,然后给同样的提示:
请使用 filesystem 在 '/Users/axton/My Drive/AI-Publish/DEMO' 目录下创建一个关于 MCP 原理简介的 test.canvas,使用 Obsidian 的 JSON Canvas 格式
这次,我们就看到了熟悉的 MCP 调用过程:弹出操作确认的窗口。运行完成之后,就在项目之外的目录中,创建了一个 test.canvas 文件。
这实际上就是一个简单的展示,MCP 服务器扩展了 MCP 客户端的能力,在这个例子里,MCP 客户端就是 Trae,Trae 作为一个 IDE,它本来是具有一个”沙箱”的限制,也就是说,它无法访问到项目文件夹之外的文件,但是通过调用 MCP 就扩展了 Trae 的能力,使得他能操作 MCP 设定的文件夹,即便这个文件夹在 Trae 的项目之外。
当然,下面还有更简单的使用 MCP 一键生成 Obsidian Canvas 的方法。
道理很简单,就是换一个比 Trae 简单的 MCP 客户端,也就是直接用 Claude 的桌面端 APP。
4 | 补充:Claude Desktop App + MCP 的对照体验
为了说明 MCP 的潜力是跨工具的,我们快速模拟一下在 Claude Desktop App中的体验,同样将 MCP 工作路径指向我们的 Obsidian Vault。
Claude 桌面 APP 的 MCP 配置文件是 claude_desktop_config.json,位置如下:
然后,打开客户端,直接给提示词:
请根据 Obsidian 的 JSON Canvas 的格式要求,在 DEMO 目录中创建一个 mcp.canvas ,对 MCP 的原理进行简要介绍。
接下来只需要在 Claude 弹出 MCP 的操作确认时,点击确定就可以了,不需要任何其他的操作,一切顺利完成:
这时候,我就说:”很好,这次再创建一个 agent.canvas,简介下 AI Agent,用中文输出”
最后,我们再试一下即时修改,让它”请在 agent.canvas 上加一个蓝色的卡片,里面写上: Axton 出品”。
很快,卡片就加上了,操作 Obsidian 的 Canvas 如此丝滑。