# TODO ![[工作计划]] # MCP - WY MCP市场:https://modelspace.netease.com/mcphub - DeepWiki MCP - ~~POPO MCP~~ - ~~易协作 MCP Server~~ - 开发类 - [ ] **Chrome DevTools MCP**。 - BrowerMCP:Chrome浏览器专用前端视觉MCP。需要在Chrome安装对应插件。 - 搜索类 - **DuckDuckGo Search**:无需 API Key 的隐私保护搜索,支持网页和新闻检索。`claude mcp add duckduckgo-search -- npx -y duckduckgo-mcp-server` - Sacred Scriptures:宗教典籍(如大藏经)精准检索。 `claude mcp add sacred-scriptures -- npx -y @traves-theberge/sacred-scriptures-mcp` - **Open Library**:全球书籍元数据与原著检索。 `claude mcp add open-library -- npx -y @8ensmith/mcp-open-library` - **Paper Search**:现代哲学与认知科学论文检索。 `claude mcp add paper-search -- npx -y @openags/paper-search-mcp` - OpenEnded Philosophy:非公理化逻辑推演与哲学思辨增强。 `claude mcp add openended-philosophy -- npx -y @openended/philosophy-mcp` - 笔记类 - Obsidian MCP:本地哲学笔记库同步与知识图谱构建。 `claude mcp add obsidian -- npx -y @obsidian-mcp/server` ## MCP案例代码 根据 MCP 官方文档(2025-2026 版)和 GitHub 上的最新进展,**SSE (Server-Sent Events)** 正在逐渐被更现代的 **Streamable HTTP** 协议所取代。 以下是两者的核心区别及代码案例: ### 1. Python 案例 (使用 FastMCP) 在 Python 中,`FastMCP` 库极大地简化了切换过程,你只需要更改一个参数。 ```python from fastmcp import FastMCP mcp = FastMCP("MyRemoteServer") @mcp.tool() async def fetch_bilibili_hot(limit: int = 10): """获取B站热门视频""" return f"Retrieved {limit} hot videos" # --- 运行方式 --- # 方案 A: 传统的 SSE 模式 (已不推荐) # mcp.run(transport="sse", host="0.0.0.0", port=8000) # 方案 B: 现代的 Streamable HTTP 模式 (推荐) if __name__ == "__main__": mcp.run(transport="streamable-http", host="0.0.0.0", port=8000) ``` --- ### 2. TypeScript 案例 (使用 SDK) 在 TypeScript 中,你通常会配合 Express 或 Hono 框架使用。 这份参考代码将使用 **TypeScript** 和 **Hono** 框架。选择 Hono 是因为它是目前实现 **Streamable HTTP**(基于 Web 标准的 `ReadableStream`)最轻量且跨平台的方案,可以直接在 Node.js、Bun、Deno 或 Cloudflare Workers 上运行。 --- ### 1. 项目初始化 首先,你需要安装核心依赖: ```bash npm install @modelcontextprotocol/sdk hono ``` ### 2. Streamable HTTP 服务端完整代码 这份代码展示了如何创建一个支持现代流式传输的 MCP 服务端,并集成一个 Bilibili 视频查询工具。 ```typescript import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"; import { HttpServerTransport } from "@modelcontextprotocol/sdk/server/http.js"; import { Hono } from "hono"; import { cors } from "hono/cors"; /** * 1. 初始化 MCP 核心逻辑 */ const server = new McpServer({ name: "Bilibili-Stream-Server", version: "1.0.0", }); // 注册一个示例工具:获取视频简讯 server.tool( "get_bili_info", { bvid: "string" }, async ({ bvid }) => { // 模拟异步数据获取 await new Promise(resolve => setTimeout(resolve, 500)); return { content: [{ type: "text", text: `视频 ${bvid} 的实时数据:点赞 1.2w, 投币 5000 (来自 Streamable HTTP 接口)` }] }; } ); /** * 2. 创建 Hono Web 服务 */ const app = new Hono(); // 允许跨域(如果 Claude Desktop 或 Web 客户端需要从不同域名访问) app.use("/*", cors()); /** * 3. 实现 Streamable HTTP 传输层 * 现代规范中,我们需要处理: * - GET: 用于建立 SSE/流式连接 * - POST: 用于接收客户端指令 */ let transport: HttpServerTransport; // 统一入口点 /mcp app.all("/mcp", async (c) => { // 懒加载传输层实例,绑定到当前请求上下文 if (!transport) { transport = new HttpServerTransport("/mcp", c.res); await server.connect(transport); } if (c.req.method === "GET") { // 建立流式响应 (Event Stream) return transport.handleGetRequest(c.req.raw, c.res.raw); } else if (c.req.method === "POST") { // 处理客户端发来的 JSON-RPC 消息 return transport.handlePostRequest(c.req.raw, c.res.raw); } }); export default { port: 3000, fetch: app.fetch, }; console.log("🚀 Bilibili MCP Streamable Server running on http://localhost:3000/mcp"); ``` --- ### 3. 关键实现细节解析 * **`HttpServerTransport`**: 这是 SDK 提供的现代封装。它不再像旧版 `SSEServerTransport` 那样需要强制区分两个 URL(如 `/sse` 和 `/message`),你可以通过逻辑判断将它们合并在同一个路由 `/mcp` 下。 * **会话管理 (Session)**:当你发起 `GET` 请求时,服务端会创建一个 `Mcp-Session-Id`。随后的所有 `POST` 请求都必须携带这个 ID,以便服务端知道该把结果“推”回哪个流。 * **流式本质**:在 `handleGetRequest` 中,服务器保持连接开启(`Connection: keep-alive`),并以 `text/event-stream` 格式持续输出数据块。 ### 4. 如何在 Claude 中测试? 如果你想在 **Claude Desktop** 中连接这个本地流式服务器,修改你的 `claude_desktop_config.json`: ```json { "mcpServers": { "bili-remote": { "command": "curl", "args": ["-N", "http://localhost:3000/mcp"] } } } ``` *注意:对于远程服务器,通常直接在支持 MCP 的 IDE(如 Cursor 或 Zed)中输入 URL 即可。* --- ### 5. 进阶:如何处理身份验证? 由于是 HTTP 协议,你可以轻松添加中间件来保护你的 Bilibili 接口: ```typescript app.use("/mcp", async (c, next) => { const token = c.req.header("Authorization"); if (token !== "Bearer your-secret-key") { return c.text("Unauthorized", 401); } await next(); }); ``` **这份模板对你构建远程 MCP 有帮助吗?如果你需要将其部署到 Vercel 或 Cloudflare Workers,我可以为你提供特定的环境适配代码。** #### SSE 模式 (传统) 需要定义两个路由:一个用于保持 SSE 连接,一个用于接收客户端消息。 ```TypeScript import { Server } from "@modelcontextprotocol/sdk/server/index.js"; import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js"; import express from "express"; const server = new Server({ name: "my-server", version: "1.0.0" }, { capabilities: {} }); const app = express(); let transport: SSEServerTransport; // 1. 建立 SSE 连接通道 app.get("/sse", async (req, res) => { transport = new SSEServerTransport("/messages", res); await server.connect(transport); }); // 2. 接收客户端发来的消息 app.post("/messages", async (req, res) => { if (transport) { await transport.handlePostMessage(req, res); } }); app.listen(3000); ``` #### Streamable HTTP 模式 (现代) 使用 SDK 提供的 `StreamableHTTPServer` 高层封装(常见于 2025 年后的企业级模版)。 ```TypeScript import { Server } from "@modelcontextprotocol/sdk/server/index.js"; import { StreamableHTTPServer } from "@modelcontextprotocol/sdk/server/http.js"; const mcpServer = new Server({ name: "modern-server", version: "2.0.0" }, { capabilities: { tools: {} } }); // 高层封装会自动处理路由和 Session ID const server = new StreamableHTTPServer(mcpServer); app.post("/mcp", async (req, res) => { await server.handlePostRequest(req, res); }); app.get("/mcp", async (req, res) => { // 处理初始化流 await server.handleGetRequest(req, res); }); ``` --- ### 💡 部署建议 - **本地开发**:坚持使用 `stdio`。 - **远程 Web 服务**:请务必选择 **`streamable-http`**。 - **Cline/Claude 桌面端配置**:在配置远程服务器时,如果对方支持新协议,配置项应为: ```JSON "my-remote-tool": { "type": "streamableHttp", "url": "https://api.yourserver.com/mcp" } ``` ### 详细案例 #### 1. 项目初始化 首先,你需要安装核心依赖: ```bash npm install @modelcontextprotocol/sdk hono ``` #### 2. Streamable HTTP 服务端完整代码 这份代码展示了如何创建一个支持现代流式传输的 MCP 服务端,并集成一个 Bilibili 视频查询工具。 ```Typescript import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"; import { HttpServerTransport } from "@modelcontextprotocol/sdk/server/http.js"; import { Hono } from "hono"; import { cors } from "hono/cors"; /** * 1. 初始化 MCP 核心逻辑 */ const server = new McpServer({ name: "Bilibili-Stream-Server", version: "1.0.0", }); // 注册一个示例工具:获取视频简讯 server.tool( "get_bili_info", { bvid: "string" }, async ({ bvid }) => { // 模拟异步数据获取 await new Promise(resolve => setTimeout(resolve, 500)); return { content: [{ type: "text", text: `视频 ${bvid} 的实时数据:点赞 1.2w, 投币 5000 (来自 Streamable HTTP 接口)` }] }; } ); /** * 2. 创建 Hono Web 服务 */ const app = new Hono(); // 允许跨域(如果 Claude Desktop 或 Web 客户端需要从不同域名访问) app.use("/*", cors()); /** * 3. 实现 Streamable HTTP 传输层 * 现代规范中,我们需要处理: * - GET: 用于建立 SSE/流式连接 * - POST: 用于接收客户端指令 */ let transport: HttpServerTransport; // 统一入口点 /mcp app.all("/mcp", async (c) => { // 懒加载传输层实例,绑定到当前请求上下文 if (!transport) { transport = new HttpServerTransport("/mcp", c.res); await server.connect(transport); } if (c.req.method === "GET") { // 建立流式响应 (Event Stream) return transport.handleGetRequest(c.req.raw, c.res.raw); } else if (c.req.method === "POST") { // 处理客户端发来的 JSON-RPC 消息 return transport.handlePostRequest(c.req.raw, c.res.raw); } }); export default { port: 3000, fetch: app.fetch, }; console.log("🚀 Bilibili MCP Streamable Server running on http://localhost:3000/mcp"); ``` --- ### 3. 关键实现细节解析 - **`HttpServerTransport`**: 这是 SDK 提供的现代封装。它不再像旧版 `SSEServerTransport` 那样需要强制区分两个 URL(如 `/sse` 和 `/message`),你可以通过逻辑判断将它们合并在同一个路由 `/mcp` 下。 - **会话管理 (Session)**:当你发起 `GET` 请求时,服务端会创建一个 `Mcp-Session-Id`。随后的所有 `POST` 请求都必须携带这个 ID,以便服务端知道该把结果“推”回哪个流。 - **流式本质**:在 `handleGetRequest` 中,服务器保持连接开启(`Connection: keep-alive`),并以 `text/event-stream` 格式持续输出数据块。 ### 4. 如何在 Claude 中测试? 如果你想在 **Claude Desktop** 中连接这个本地流式服务器,修改你的 `claude_desktop_config.json`: ```JSON { "mcpServers": { "bili-remote": { "command": "curl", "args": ["-N", "http://localhost:3000/mcp"] } } } ``` --- ### 5. 进阶:如何处理身份验证? 由于是 HTTP 协议,你可以轻松添加中间件来保护你的 Bilibili 接口: ```TypeScript app.use("/mcp", async (c, next) => { const token = c.req.header("Authorization"); if (token !== "Bearer your-secret-key") { return c.text("Unauthorized", 401); } await next(); }); ``` # Skill ## Npx Skill 1. npx skills find [query]:寻找Skill。 2. npx skills add :安装技能。 1. npx skills add ./my-local-skill:本地安装技能。 当你使用 `-g` 安装一个包时,该工具会被添加到你的系统环境变量中。这意味着你可以在电脑的**任何路径**下直接调用它,而不仅仅是在某个特定的项目文件夹里。 - **不带 `-g`**:包被安装在当前目录的 `node_modules` 中。 - **带有 `-g`**:包被安装在系统盘的特定全局文件夹(如 `/usr/local/bin` 或 `AppData\Roaming\npm`)。 ## Skill推荐 1. 官方Skill:https://github.com/anthropics/skills 2. 第三方ClaudeCode精选Skill包 1. ClaudeCode:https://github.com/ComposioHQ/awesome-claude-skills 2. Agent:https://github.com/VoltAgent/awesome-agent-skills 3. ClaudeCode:https://github.com/VoltAgent/awesome-claude-code-subagents 4. OpenClaw:https://github.com/VoltAgent/awesome-openclaw-skills 3. https://skills.sh/ 1. https://skills.sh/hairyf/skills/create-skill-from-repo - MCP - [x] **Chrome DevTools MCP**。 - 基础Skill - [x] ***find-skills***:在20万+Skills里自动找到所需工具。 #导航员 - [x] skill-creator:把你的工作流打包成可复用能力。 #工厂 - [ ] mcp-builder:搭建服务器,连接私人数据和外部工具。 #桥梁 - [ ] ~~agent-tools~~:数字瑞士军刀,处理日常事务。 #工具箱 - 搜索相关 - [x] GitHub 官方 MCP:claude mcp add github -- npx -y @modelcontextprotocol/server-github - [x] 搜索引擎类:输出的结果质量以及Token消耗量都不理想。 - jina-reader: - https://clawhub.ai/ericsantos/jina-reader - https://skills.sh/sundial-org/awesome-openclaw-skills/jina-reader - Tavily - https://skills.sh/tavily-ai/skills/search: `npx skills add https://github.com/tavily-ai/skills --skill search` - https://skills.sh/tavily-ai/skills/research: `npx skills add https://github.com/tavily-ai/skills --skill research` - https://skills.sh/tavily-ai/skills/extract: `npx skills add https://github.com/tavily-ai/skills --skill extract` - https://skills.sh/veithly/tavily-search/tavily-search: `npx skills add https://github.com/veithly/tavily-search --skill tavily-search` - 编程类 - [x] ***using-superpowers***:强制Agent真正发挥高级能力。 #优化器 - [x] acpx:外部工具桥接器,可以用来控制ClaudeCode等编程工具,还需要额外配置。 #编程 - OpenClaw特化类 - [ ] [openclaw-workspace](https://github.com/win4r/openclaw-workspace):优化OpenClaw工作区。提示词:帮我用 openclaw-workspace 这个 skill 做一次 workspace审计/精简 AGENTS.md/ 优化 TOOLS.md"等。可以创建定时任务让他每周执行。 - 进阶工具 - [ ] brainstorming:一个关键词生成几十个独特角度和多种假设场景。 #创意生成器 - [ ] copywriting:优化表达、打磨语调,不依赖老掉牙的一键生成模板。 #文字工匠 - [ ] reflection:增加自我纠正循环,让Agent审核并在过程中修复错误。 #秘密武器 - [ ] ~~writing-plans~~:先构建结构大纲,确保长文不跑偏。 #架构师 - [ ] social-content:为X、TikTok、小红书专属优化,止住下滑的手指。 #运营经理 - [ ] marketing-ideas:生成病毒式噱头和活动概念,远超简单广告水平。 #创意总监 - [ ] copy-editing:打磨语调、收紧流程,保留你独特的人性声音。 #高级编辑 - [ ] content-strategy:制定内容日历,真正符合你的品牌调性。 #规划师 - 程序相关 - [ ] vercel-react-best-practices:前端开发黄金标准,高性能可扩展。 #前端负责人 - [ ] browser-use:让AI实时看见并操作网页,自主网络Agent必备。 #操作员 - [ ] test-driven-development:强制先写测试再写代码,保证每个功能经久耐用。 #质量保证 - [ ] requesting-code-review:发布前自我审核,发现安全漏洞和潜在Bug。 #审计员 - [ ] next-best-practices:最新Next.js架构模式,服务端组件到优化路由。 #全栈专家 - [ ] supabase-postgres:架构设计和PostgreSQL优化,确保数据层磐石。 #数据库管理员 - [ ] remotion-best-practices:程序化视频必备,代码驱动动画自动化营销素材。 #视频工程师 - [ ] webapp-testing:自动运行测试套件、发现边缘情况。 #Bug猎手 - UI设计 - [ ] web-design-guidelines:8px网格+中性色板,界面现代一致。 #设计架构师 - [ ] frontend-design:大胆审美,避免千篇一律的通用AI外观。 #设计工匠 - [ ] tailwind-design-system:可扩展生产就绪的UI组件库。 #系统构建者 - [ ] ai-image-generation:自动选DALL-E/Imagen/Gemini最佳模型。 #创意中心 - [ ] ui-ux-pro-max:跨9大技术栈,秒出无障碍设计系统。 #逻辑设计师 - [ ] canvas-design:生成复杂视觉艺术和海报为精心制作的PNG/PDF。 #插画师 - [ ] infographic-pro:将复杂数据转化为专业信息图。 #数据可视化 - [ ] content-visualizer:分析文章推荐封面图,匹配品牌氛围。 #品牌经理 - 运营 - [ ] Larry:自动化TikTok照片模式! OpenAI Image 3.5 + 病毒钩子。 #病毒传播专家 - [ ] programmatic-seo:规模化生成数千个高质量SEO优化页面。 #放大器 - [ ] marketing-psychology:社会认同+稀缺性植入产品钩子,科学不是瞎猜。 #策略师 - [ ] seo-audit:扫描内容找SEO缺口,击败竞争对手。 #排名专家 - [ ] audit-website:全面健康检查,识别技术摩擦点。 #顾问 - [ ] page-cro:调整落地页,把访客变成付费客户。 #转化优化师 - [ ] pricing-strategy:设计最大化收入又不吓跑用户的定价模型。 #变现专家 - [ ] product-marketing-context:梳理独特卖点,识别客户确切痛点。 #定位专家 - 文档助理。 - [ ] pdf-pro:合并、拆分、提取复杂PDF,无手动头疼。 #文档专家 - [x] pptx:生成完整专业幻灯片,再也不用移动文本框。 #演示专家 - [x] docx:创建结构化Word文档,直接用于官方用途。 #文书 - [x] xlsx:带复杂公式和图表的Excel文件。 #数据分析师 - [ ] url-to-markdown:把网页清理转换为干净Markdown,构建知识库。 #研究员 - [ ] markdown-to-html:把草稿转换为适合博客的网页就绪HTML。 #发布者 - [ ] format-pro:标准化文档布局,品牌输出整洁专业。 #样式师