以 Crawl4AI + BrowserOS + Obsidian + Supermemory + OpenClaw 为基础打造自己的高效 Agent

📅 2026/7/13 4:13:00
以 Crawl4AI + BrowserOS + Obsidian + Supermemory + OpenClaw 为基础打造自己的高效 Agent
为什么又搭一套市面上的 Agent 产品Cursor、Windsurf、Manus、Devin……确实厉害但有几个问题让我这个重度的日常使用者始终不踏实痛点 表现记不住 每次开新对话都从零开始不知道你昨晚写过一篇知乎会失忆 隔了一个月回来连你自己的账号、签名、目标受众都忘了会被平台反爬 SaaS Agent 跑在你看不见的集群里IP/UA/cookie 都是公共的登录态根本拿不到不能存草稿 Agent 给你写了一篇很好的稿子结果它只放在它自己的对话历史里不容易沉淀 你想让 Agent 学到的东西明天再教它一次我需要的其实是一个本地的、能长期记忆的、能驱动真实浏览器、还能让我自己用 Markdown 维护配置的 Agent 栈。下面这套就是我在 2026 年跑通了的一版。二、整体架构┌──────────────────────────────────────────────┐│ Obsidian Vault ││ (~/workroom/ai_knowledge/…/agents/skills/) ││ ├─ skills/publish-zhihu.md ││ ├─ skills/publish-cnblogs.md ││ ├─ skills/publish-xiaohongshu.md ││ └─ drafts/2026-XX-XX-*/… │└────────▲─────────────────────┬────────────────┘│ 读写 Markdown │ 读取 skill┌──────────────────┐ ┌──┴──────────────────────────┐ ┌──────────────────────┐│ Supermemory │◀─┤ OpenClaw Agent ├─▶│ Cron / Heartbeat ││ (云端长期记忆) │ │ (本地 LLM tool runtime) │ │ 定时任务 心跳 │└──────────────────┘ └─┬───────────────────────────┘ └──────────────────────┘│ Playwright CDP▼┌────────────────────────────┐│ BrowserOS ││ 本地持久化 Chrome 9100 │└────────────┬───────────────┘│ 110 个 MCP 工具▼┌────────────────────────────┐│ Crawl4AI MCP │└────────────────────────────┘五个组件各管一摊OpenClawAgent runtime跑在你自己的 Mac 上Supermemory把对话、决策、踩过的坑、重要事实写进云端长期记忆Obsidian你的永久仓库所有草稿、skill、profile、模板都用 Markdown 写在这里BrowserOS本地常驻 ChromeCDP 端口 9100Crawl4AI作为 MCP server 集成进 OpenClaw提供 110 个工具三、最关键的几个工程实践强制协议执行任何浏览器自动化前先 supermemory recall每次写脚本前第一句话supermemory recall比如今天要发知乎第一件事supermemory recall zhihu publishsupermemory recall browser automation react fiber平台的 DOM 选择器、按钮位置、React Fiber 树深度都会漂移。这一条帮我在过去一周避免了至少 3 次发到一半失败。知乎Draft.js / Slate 编辑器只能走 React Fiber知乎专栏用的是 Draft.js早期是 Slate。直接 execCommand(‘insertHTML’) 一定失败——内容看起来写进去了发布后是空白因为它没触发 React 状态。唯一可靠的方法是顺着 React Fiber tree 找到 onChange 回调调用 EditorState.push() 或 resetWithValue()const editor document.querySelector(‘.DraftEditor-root’)|| document.querySelector(‘[data-slate-editor]’);// 找到 React Fiber 上的 propsconst key Object.keys(editor).find(k k.startsWith(‘__reactProps$’));const props editor[key];// 深度 3-4 找到 onChangeconst onChange props.onChange ?? walkFiber(editor, 4).memoizedProps.onChange;// 推荐用法Slate 路径onChange(editorState);如果是 HTML 来源从 markdown 转的用 html-to-draftjs 或 draft-convert 转 ContentState再构造 EditorState 推送。博客园Angular 注入协议——三件事缺一不可博客园后台是 Angularnz-tree-select 这类组件。React 那套 setter 在这里会失效必须三步走function injectAngularValue(el, value) {const proto el.tagName ‘TEXTAREA’? HTMLTextAreaElement.prototype: HTMLInputElement.prototype;// 1. 原生 setter (绕过 Angular 的 value tracking)const setter Object.getOwnPropertyDescriptor(proto, ‘value’).set;setter.call(el, value);// 2. 双事件派发el.dispatchEvent(new Event(‘input’, { bubbles: true }));el.dispatchEvent(new Event(‘change’, { bubbles: true }));// 3. blur 触发 Angular 提交el.blur();}少了第三步blur你点发布后会发现标题正文全为空。少了第二步的 change 事件Angular 会以为你没改过。小红书发布按钮必须用硬编码坐标小红书的发布按钮走 icon z-index没法用 selector 稳定定位。视口必须设成 1440x900按钮在 (1280, 850) 附近await page.setViewportSize({ width: 1440, height: 900 })await page.mouse.click(1280, 850)而且不能直接打开 /publish 或 /creator/note-editor早被废弃必须走 xiaohongshu.com/new/home → 头部 “发布笔记” 下拉箭头 ▾ → 选 “上传图文”。Skill Workshop让所有反复做的事变成可复用的 skillOpenClaw 的 skill_workshop 是这套栈的灵魂。每个我跑通的发布协议都打成 skill proposal 写进 vaultskill_workshop actioncreate namepublish-zhihudescription“发布文章到知乎专栏 (zhuanlan.zhihu.com)”proposal_content“$(cat ~/…/publish-zhihu.md)”关键约定actioncreate 创提案actionupdate 改已上线 skillactionrevise 改 pending 提案不能直接用 write / edit / shell 改 skill 文件——所有变更走 skill_workshopdescription 控制在 160 字节内提案正文控制在 40000 字节内效果跨 session 复用。今天让 Agent 发小红书明天新 session 它也能发因为 skill 在 vault 里是结构化文档不是对话历史里的临时脚本。四、一个完整的三平台同步发布长什么样假设今天我写完一篇 blog想同步到知乎 博客园 小红书[User] 帮我把这篇文章发到知乎、小红书、博客园[Agent]supermemory recall zhihu publish # 拉最新选择器supermemory recall cnblogs publishsupermemory recall xiaohongshu publishread vault/drafts/2026-07-01-*/main.md # 读 Markdown 草稿convert md - html (可选)connect BrowserOS ws://localhost:9100 # 通过 Playwrightfor platform in [zhihu, cnblogs, xhs]:a. navigate to editor URLb. inject title (Angular setter / native setter)c. inject body (React Fiber onChange / Angular dual-event / ProseMirror execCommand)d. inject tags / topicse. upload cover imagef. click publish (selector / hardcoded coords)g. wait for navigation / save URLh. for zhihu: 手动补一次话题 ⚠️整套约 80-120 秒三平台都是真实账号登录态。五、Crawl4AI 在 Agent 栈里的真实用法Crawl4AI 通过 mcporter 注册成 MCP server由 OpenClaw 暴露成 110 个工具{“mcpServers”: {“crawl4ai”: {“command”: “crawl4ai-mcp”,“env”: {“CRAWL4AI_API_URL”: “http://localhost:11235”,“BROWSER_CDP_URL”: “ws://localhost:9100”}}}}重点是复用 BrowserOS 的 9100 端口——这样 Crawl4AI 启动的浏览器就是你日常登录的 Chrome。高频工具crawl(url, extraction_schema)单页抓取 LLM 结构化抽取deep_crawl(url, max_depth, filters)整站爬extract(url, css_selector)CSS 选择器精确抽取markdownify(url)干净 Markdown 输出browser.screenshot(url)截图绕过反爬时备选六、Supermemory 的真实用法别把它当搜索框新手最容易把 Supermemory 当成高级 grep它的核心其实是结构化召回写supermemory_store text“公众号排版优先用 1.6 倍行距、配图主色 #0EA5E9” categorypreferencesupermemory_store text“知乎发文后必须补至少 3 个话题否则推荐归零” categorydecision读强制协议步骤supermemory_search query“知乎发布流程” limit5supermemory_profile # 看看系统对你了解多少三条实战军规每个新 session 第一件事supermemory_profile supermemory_search 关键词每条以后还会用到的结论立刻 supermemory_store不要等MEMORY.md / SOUL.md 写硬约束supermemory 写偏好/事实/决策——两者职责分明七、可执行清单如果你也想搭这套按这个顺序来装 BrowserOSChrome 持久化容器跑在后台监听 9100装 OpenClaw确认 tools, cron, agents capabilities注册 Supermemory写进 ~/.openclaw/config.yaml搭 Obsidian vaultagents/skills/ drafts/YYYY-MM-DD-*/ templates/装 crawl4ai-mcp mcporter配置 mcporter.json 指向 BrowserOS 9100建第一批 skill proposal知乎/博客园/小红书约定强制协议每次发布前必须 supermemory recall publish把 BrowserOS 的 cookie 登满跑通前三个平台大约一周每个平台踩 2-3 次坑后就稳定了。八、一些真实的坑和惊喜坑BrowserOS 的 CDP 端口是 9100不是 92019201 是 RPC知乎发文不带话题不推荐——必须补小红书的发布按钮坐标会随版本漂移博客园的标签输入需要模拟 Enter 形成 chipCrawl4AI BrowserOS 共用 9100 端口时批量抓取会抢占登录态惊喜当 Agent 开始记得你上周说过什么那种感觉真的像养了一只电子猫vault skill_workshop 的组合让个人知识库和Agent runtime是同一个文件系统跑通后每周省下来的键盘时间约 6-8 小时心跳 cron 把周报生成“股票提醒”RSS 总结自动化得干净利落