438 lines
18 KiB
Markdown
438 lines
18 KiB
Markdown
# 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 <owner/repo@skill>：安装技能。
|
||
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：标准化文档布局，品牌输出整洁专业。 #样式师
|
||
|