Showing Posts From
MCP
OpenCode Browser 扩展能做什么：与 Chrome DevTools MCP 的差异
两种方案的架构对比 OpenCode Browser（扩展方式） Chrome DevTools MCP（CDP 方式）OpenCode OpenCode ↓ ↓ Native Messaging MCP Server ↓ ↓ Chrome Extension Chrome DevTools Protocol (CDP) ↓ ↓ DOM / Tab 操作 完整 DevTools 能力OpenCode Browser 扩展连接方式更轻量，不需要打开 --remote-debugging-port，官方说明"No DevTools Protocol, no security prompts"。 OpenCode Browser 能做什么能力 支持导航（跳转 URL） ✅点击元素 ✅输入文本 ✅获取页面 DOM / 文本 ✅截图 ✅读取 <script> 标签内容 ✅读取 window.localStorage / sessionStorage 取决于扩展实现监听 Network 请求（XHR/fetch/WebSocket） ❌设置 JS 断点 ❌查看 Webpack/闭包内变量 ❌Memory Snapshot / Performance Profile ❌拦截/修改请求 ❌Chrome 扩展标准 API（chrome.scripting.executeScript）可以在页面上下文执行脚本，所以凡是挂在 window 上的对象（window.__NEXT_DATA__、window.__INITIAL_STATE__ 等）都可以读取。 但 webpack 闭包内的局部变量： ;(() => { const token = "abc123"; // ← 扩展拿不到这个 })();无论是 OpenCode Browser 还是普通扩展都无法直接访问，必须通过 DevTools Protocol 的 Runtime.evaluate 或断点能力才能拿到。 什么时候用 Chrome DevTools MCP 如果目标是：分析混淆 JS、逆向加密参数 Hook XHR / fetch / WebSocket 请求 查看 React/Vue 组件状态树 抓取动态签名、Token 设置断点、单步执行应该改用支持 CDP 的 MCP 方案，例如通过 --remote-debugging-port=9222 启动 Chrome，再连接 CDP： google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/debug-profile然后 MCP Server 通过 WebSocket 连接 ws://localhost:9222 调用 CDP 接口。 CDP 可以做到： Sources → 设置断点 Network → 查看所有请求/响应 Console → 执行任意 JS Memory → Heap Snapshot如果目标是指纹浏览器（Adspower 等） OpenCode Browser 扩展控制 Chrome 不能隐藏浏览器指纹（Canvas、WebGL、TLS、WebRTC 等），这些由浏览器本身决定。 需要多账号防关联的场景通常走另一条路： OpenCode / Playwright ↓ Adspower / MultiLogin 本地 API ↓ 指纹浏览器实例通过 Adspower 提供的 REST API 创建/启动指纹浏览器，再用 Playwright 连接其 CDP 端口操作页面。 小结 OpenCode Browser 扩展的定位是自动化操作真实浏览器（点击、填表、截图、爬内容），适合不需要深层 JS 调试的 RPA 和 AI Agent 场景。需要分析 JS 执行过程或拦截网络请求时，应切换到 CDP 方案。
OpenCode MCP 服务器配置：type 和 enabled 字段必填
错误信息 在 ~/.config/opencode/opencode.jsonc 里配置 MCP server 时，如果只写了 command 和 args，启动 OpenCode 会报： Configuration is invalid at ...opencode.jsonc ↳ Expected { readonly "type": "local", ... } | { readonly "type": "remote", ... }, got {"my-server":{"command":"node","args":["dist/index.js"]}} mcp.servers ↳ Missing key mcp.servers.enabled旧写法 vs 新写法 旧版本格式（现在会报错）： { "mcp": { "servers": { "my-server": { "command": "node", "args": ["dist/index.js"] } } } }新版本要求每个 server 必须包含 type 和 enabled： { "mcp": { "servers": { "my-server": { "type": "local", "enabled": true, "command": "node", "args": ["dist/index.js"] } } } }type 的两个合法值type 用途 必填字段"local" 本机可执行文件，由 OpenCode 直接 fork 进程 command、args"remote" 远程 HTTP/HTTPS MCP 端点 urllocal 示例（Node.js 脚本）： { "mcp": { "servers": { "my-mcp": { "type": "local", "enabled": true, "command": "node", "args": ["D:\\project\\my-mcp\\dist\\index.js"] } } } }remote 示例（HTTP 端点）： { "mcp": { "servers": { "remote-mcp": { "type": "remote", "enabled": true, "url": "http://localhost:3001/mcp" } } } }多个 server 示例 { "mcp": { "servers": { "database-tools": { "type": "local", "enabled": true, "command": "node", "args": ["dist/db-mcp.js"] }, "file-tools": { "type": "local", "enabled": false, "command": "python", "args": ["-m", "file_mcp"] } } } }enabled: false 可以临时禁用某个 server 而不删除配置。 Windows 路径注意 Windows 路径中反斜杠在 JSON 里需要转义： "args": ["D:\\project\\dist\\index.js"]或者用正斜杠（Node.js 和大多数 CLI 工具都支持）： "args": ["D:/project/dist/index.js"]
Context7 是什么：给 AI 编程助手补最新文档的动态知识库
用 AI 编程助手（Cursor、Claude Code、OpenCode、Cline 等）时，经常遇到一个尴尬：模型知识截止到某个日期，生成的代码用的是旧版 API——Next.js 14 的 middleware 写法在 15 里改了、OpenAI SDK v4 和 v5 API 完全不同、Playwright 每个小版本都在换东西。 Context7 就是解决这个问题的——给模型动态注入最新的官方文档。 它做什么 流程大致： 用户提问："Next.js 15 middleware 怎么写" ↓ AI 判断需要文档 ↓ Context7 拉取 Next.js 最新文档 ↓ 把相关片段塞进 prompt ↓ 模型基于真实文档生成代码不用它的差别：无 Context7：模型可能给出 Next.js 13/14 的老写法，甚至凭空造 API 有 Context7：读到 Next.js 15 最新文档，给现在正确的写法用户侧的触发方式通常是在 prompt 里加 use context7，或者在 MCP 层自动挂上。 覆盖范围 Context7 主要针对开源库和框架：前端：React、Next.js、Vue、Svelte、TanStack Router / Query 后端：Node.js、FastAPI、NestJS、Rails、Spring 语言 SDK：OpenAI、Anthropic、Google GenAI 工具链：Docker、K8s、Terraform、Cloudflare Workers 数据库 ORM：Prisma、Drizzle、SQLAlchemy AI Agent 相关：LangChain、LangGraph、Vercel AI SDK不覆盖：企业内部私有文档、闭源产品文档（那要走 RAG）。 和 RAG 的区别 看着都是"检索 + 生成"，实际定位不同：维度 Context7 通用 RAG目标数据源 公开的开源库官方文档 任意语料（企业文档、书、票据）更新频率 跟随上游 release 自动同步 需要自己维护索引检索粒度 按库版本和 API 检索 通用 embedding 相似度主要面向 AI 编程助手 各种问答场景部署方式 云服务 + MCP 客户端 自建向量库 + 应用集成企业内私有代码库还是要自己搭 RAG。Context7 专注公共库这个细分场景，做得比通用 RAG 更精准。 MCP 是怎么接的 Context7 走 MCP（Model Context Protocol）——Anthropic 提出的、给 LLM 用的工具协议。客户端配置例： { "mcpServers": { "context7": { "command": "npx", "args": ["-y", "@upstash/context7-mcp"] } } }放到 Claude Desktop / Cursor / OpenCode 的 MCP 配置里，模型就能调用两个工具：resolve-library-id — 把"Next.js" 之类的名字解析成内部 ID get-library-docs — 按 ID 拿具体文档MCP 客户端会把工具 schema 注入到模型的系统提示里，模型自主决定什么时候调用。 用 OpenCode / Claude Code 集成 ~/.claude.json 里加： { "mcpServers": { "context7": { "command": "npx", "args": ["-y", "@upstash/context7-mcp"] } } }重启客户端，让 Claude Code 认到工具，之后你可以：直接问："帮我按 Next.js 15 官方文档写一个 middleware" 或明确指令："use context7 查一下 Cloudflare Workers 最新的 D1 API"模型会自己调用工具、拿到文档片段、然后写代码。 局限只能查 Context7 收录的库，长尾库覆盖不到 文档质量取决于上游 README / docs 站的质量 有请求配额（免费额度足够个人用） 对版本切换很敏感——比如你项目锁死用 Next.js 14，模型可能拉了 15 的文档给你混淆一句话总结 Context7 = AI 编程助手的动态文档知识库。核心用途是修复"模型不知道最新 API"这个通病。走 MCP 一键接入，Claude Code / Cursor / OpenCode 都能用。
Context7：给 AI 编程助手注入实时文档的 MCP 工具
Context7 是一个给 AI 编程助手补充实时官方文档上下文的工具，核心解决的问题是：大模型的训练数据有截止日期，新框架 API 或频繁变动的库往往使用旧版写法，导致生成的代码无法运行。 工作流程 用户提问 ↓ AI 判断需要文档 ↓ Context7 拉取对应库的最新文档 ↓ 把文档片段注入 Prompt ↓ 模型基于真实文档生成代码例如询问"Next.js 15 middleware 怎么写"，普通模型可能给出 Next.js 12 的旧 API，Context7 会先拉取最新 Next.js 文档再生成答案。 与 RAG 的区别维度 RAG Context7数据来源 用户自定义文档库 官方文档仓库更新频率 手动维护 跟随上游自动同步适合场景 内部知识库 公开库文档集成方式 自建 pipeline MCP 协议MCP 接入配置 Context7 提供 MCP server，支持 Cursor、Claude Code、OpenCode 等工具： { "mcpServers": { "context7": { "command": "npx", "args": ["-y", "@upstash/context7-mcp@latest"] } } }配置后在对话中使用 use context7 指令触发文档检索： Next.js 15 的 middleware 怎么配置重定向？use context7支持的文档范围 常见库均有覆盖：React / Next.js / Remix Node.js / Bun LangChain / LangGraph OpenAI SDK / Anthropic SDK Prisma / Drizzle / TypeORM Docker / Kubernetes 各大主流 npm 包在 AI Agent 架构中的位置 OpenCode / Claude Code ├── LLM ├── Browser ├── Terminal ├── Skills ├── Context7 / RAG ← 文档检索层 └── MCP ToolsContext7 填补了"文档检索层"——让 Agent 在生成代码时能查到当前正确的 API，而不是凭训练数据猜测。 替代方案工具 定位Context7 公开库官方文档Mintlify Scraper 自定义文档爬取Crawl4AI 通用网页抓取自建 pgvector RAG 私有文档库对于内部项目文档，更适合自建 RAG（pgvector + embedding）；对于开源库，直接用 Context7 省去维护成本。