JitHub程序员

给 Flutter 组织做了点微小贡献💡

#每日一个idea

一夜无眠。脑袋里想法太多了，很难控制不去想。

今天想实现一个 mcp-server-collector，昨天写到半夜，还差一点没写完。

希望实现两个 tools👇

1. 第一个 tool，输入一个 URL，输出 URL 对应的页面包含的所有 mcp servers，返回一个数组，每个 item 是一个 mcp server，包括 name/title/description/url/author 等字段。

2. 第二个 tool，输入一个 mcp server 源码仓库 URL，自动提交到 mcp.so 导航站。

为什么要做这个 mcp-server-collector ？

我坚信 mcp 生态肯定会起来，所以要早点围绕 mcp 周边需求做功能。所以我在开发不同功能型 mcp server 的同时，也上线了一个 mcp 导航站，用于收录尽可能多的优质 mcp server。

其中一个需求是每天不断新增的 mcp servers 分布在不同地方，GitHub/Twitter/Reddit 这些平台，人工收录很费时间，需要有一个自动收集器，去找到这些 mcp servers，自动上架到 mcp.so 导航站。

写一个 mcp-server-collector 来实现这个需求最合适不过了，可以理解成一定程度上的自举。

我准备如何实现这个 mcp-server-collector?

1. 涉及到网页内容采集，所以优先选择 mcp 的 python sdk 来创建这个服务

2. 不想重复造轮子，所以获取指定 URL 内容我选择官方的 mcp-server-fetch，在 mcp-server-collector 内部通过一次 rpc call 拿到 mcp-server-fetch 返回的网页内容（Markdown 格式）

3. 把上一步返回的内容，请求大模型总结，提取出包含的 mcp servers 列表

4. 遍历上一步的 mcp servers 列表，请求 mcp.so 的 submit API，提交到导航站

用户如何使用这个 mcp-server-collector

1. 在 claude 桌面客户端使用案例

- 请帮我提取这个网页：xxx.xx 里面的所有 mcp servers，整理成一个 json 文件让我下载

- 请帮我把这个 mcp server：xxx.xx 提交到 mcp.so 导航站

2. 写一个脚本，实现 mcp client 逻辑，rpc call mcp-server-collector，定时执行，程序化采集互联网上的 mcp servers，存储到自己的数据库（比如你也做了个 mcp 导航站）

顺利的话，这个 mcp-server-collector 今天写完后开源。

看一下效果吧👇。欢迎交流探讨。

#每日一个idea

新的一周。准备开始写ChatMCP客户端，架子搭起来了，用的 tauri + react + shadcn/ui

MVP版本计划在一周内发布，实现几个最基本的功能：

1. 界面布局参考微信桌面版

2. 联系人列表展示可用的 MCP Servers

3. 点开 MCP Server 查看功能和对话示例

4. 可视化安装 MCP Server 到本地

5. 跟单个 MCP Server 对话，操作本地资源

欢迎留言提需求，一起创造一个高品质的 MCP 桌面客户端。🚀

上个月，因为第三方平台阅读体验不够好，我搭了一个全栈专栏的阅读网站（ship.weijunext.com ），本来只考虑让存量读者迁移过来，所以没做支付功能，但是最近陆续又有几位朋友购买专栏，所以决定接一下支付，这样方便点。

这次尝试了Stripe，用个人账号的API，集成得还算顺利。还顺便集成了GitHub API，用户购买后会自动邀请加入源码仓库，也让我更省事了。

现在专栏8折，欢迎购买，感谢支持～ ship.weijunext.com

程序员都很善良，你用他的工具解决了问题，他还会谢谢你使用他创造的工具。

使用 AI Cursor 编程实现一个小产品 Chrome 扩展插件 MVP 功能，提前编写小产品需求技术文档作为上下文，再使用 currsor 单个页面维度生成，能够有效的减少错误，提升开发效率，所以我做了一个[小产品需求技术文档] 提示词分享出来，如下：

编写一个 [主题] Chrome 扩展插件产品技术文档，产品核心功能包括[功能描述1]、[功能描述2]、[功能描述3]等，具体流程如下：
1：产品背景：[基于产品核心功能，拆解出产品背景和用户故事，并分析其主要特点和优势]
2：产品目标：[根据产品背景生成三个产品目标]
3：产品需求：[
请按照产品功能需求描述1、需求2、需求3拆解出子需求
]
4：SEO 关键词：[基于产品核心功能，拆解出产品SEO关键词、长尾关键词、相似关键词等]
5：技术架构：使用 plasmoJS + React + Typescript + Tailwindcss + ShadcnUI 开发
6：项目结构：[理解并分析产品需求 + 技术架构生成新的项目结构]
7：UI 设计：[
整体：使用 Tailwindcss 实现响应式设计, 并使用 ShadcnUI 提供现代化的 UI 组件
布局：根据内容自动选择卡片式 + 网格式的布局方式，选择合适的布局方式进行展示
配色：使用 三色渐变配色 + 动画配色，并使用 Tailwindcss 提供的 color 类实现颜色变化
字体：使用 Google Fonts 字体，基于当前系统字体和其他字体进行混合
]
8：代码规范：[
原则：使用 SOLID、DRY、KISS、YAGNI、SRP、OCP、LSP 原则，易扩展、易维护、易理解、易单元测试、易迭代
需求：深入分析并全理解产品需求和用户期望
拆分：将复杂逻辑拆分为可管理的子需求，使得开发过程更加高效，减少返工
结构：拆解出项目结构，并根据理解的需求拆解项目结构、页面、组件、数据和状态
页面：给出合理的页面布局，并根据理解的需求拆解页面结构、组件、数据和状态
组件：hooks和纯函数方式完成，组件划分为页面组件、公共组件、UI组件、功能组件，并且组合优于继承，减少副作用
数据：数据请求和处理，使用 useSWR 完成，并且尽量使用 TypeScript 类型定义数据结构
状态：保持状态最小必需状态，如多组件需要共享状态时，将状态提升至最近公共父组件，保持单一数据源，避免冲突问题；优先使用 Props 数据传递，保持单向数据流，严格遵循 React 生命周期最佳实践，尽量避免使用副作用 hooks 时，减少重复计算的依赖项，并保持简洁的依赖或无依赖。全局状态尽量使用 useContext 和 useReducer 方式管理，确保状态的可控性和可观测性。
]

请严格按照流程一步一步和用户互动进行完成，文档内容应当充分补充，以便后续的版本升级和扩展。并且，当用户确认完成以后，再进行下一步，直到整体流程完成。

编写了一个 React 组件开发和设计原则，用于提升 AI 生成清晰简洁的代码和结构，保存为 “react_rule.md"，让 AI 基于它来编写需求，感觉代码质量看得很清晰简洁

React 组件开发和设计原则：

### 需求分析与拆分

1. **优先理解需求**：在开始编码前，深入分析并全理解业务需求和用户期望。
2. **拆分子需求**：将复杂需求拆分为可管理的子需求，使得开发过程更加高效，减少返工。
3. **拆解出项目结构**：根据理解的需求拆解项目结构和文件

### 基于设计原则

1. **SOLID 原则**：确保组件设计符合单一职责原则和其他 SOLID 原则。
2. **DRY 原则（Don't Repeat Yourself）**：通过提取和重用代码，避免重复。
3. **可复用性**：设计组件时考虑其在不同上下文中的重用性。
4. **可测试性**：组件设计应支持单元和集成测试。
5. **可扩展性**：保证组件的结构能够轻松应对未来功能的扩展。

### 组件封装方式

1. **Hooks 和纯函数组件**：使用函数组件和 React Hooks 简化逻辑，避免不必要复杂性。
2. **组合优于继承**：通过组合而非继承来实现组件的复用和扩展。

### 状态管理

1. **状态提升**：在多个组件需要共享状态时，将状态提升至最近公共父组件。
2. **状态最小化**：保持状态简单不可变，确定最小必需状态。
3. **单一数据源**：确保有一个权威的数据源，减少冲突问题。
4. **Prop 数据传递**：通过 Props 传递数据，保持单向数据流。
5. **Hooks 使用**：多使用 Hooks（如 useState, useReducer）进行状态和副作用管理。
6. **状态生命周期理解**：严格遵循 React 生命周期最佳实践。
7. **副作用管理**：使用 useEffect 和 useLayoutEffect 管理副作用。

### 全局状态管理

使用 useContext 和 useReducer 是一种管理全局状态的高效方法，尤其适合需要在应用内跨页面或组件层级共享状态的场景。

### 错误处理

1. **异常捕获**
- **Error Boundary**：使用 Error Boundary 捕获并处理渲染异常。
- **异步操作错误**：为异步请求设置适当的错误处理机制。

### 类型安全

1. **TypeScript 强类型**：推广使用 TypeScript，启用严格模式保证类型安全。
2. **避免使用 any**：减少或避免使用 any 类型，使用更具体的类型定义。
3. **处理空值**：在代码中妥善处理可能的空值或未定义情况。

### 样式管理

1. **使用 Tailwind CSS 满足 DRY 原则**：复用 Tailwind 的样式类，避免独立样式重复定义。
2. **最小粒度的组件化**：将样式应用到最小可用组件，提高重用性。

### 渲染优化

- 通过 React.memo、useMemo、useCallback 等技术优化性能，避免不必要的重新渲染。

### 文档规范

1. **注释规范**
- **复杂逻辑注释**：解释复杂逻辑，帮助其他开发者理解。
- **JSDoc 标注**：为函数和组件添加详细的 JSDoc 文档。
2. **文档撰写**
- **组件说明书**：编写组件功能、依赖、输入和输出文档。
- **版本变更说明**：记录重要更新和 API 变更。

### 测试用例编写

1. **编写测试用例**：为每个组件编写详细的测试用例，确保测试覆盖和功能验证。
2. **使用工具**：使用 Jest 或 React Testing Library 编写和维护测试。

最近一周没有订单，但是为了收到Stripe订单推送，用了半小时把飞书群机器人和Stripe的Webhook连接起来了。流程挺简单的，在飞书建个Webhook触发的机器人，到Stripe填一下飞书机器人的Webhook地址，然后在飞书配置推送消息的格式就好了。期待这个机器人的第一条正式订单推送。

不知道用户是怎么流失的？👀

如果你是做浏览器插件，可以在 background 中加入如下代码：

chrome.runtime.setUninstallURL("tally.so")

当用户卸载插件后，会触发该事件，并打开你填写的链接，这个链接可以是你专门设计过的卸载引导页面，或者是一个简单的反馈表单。

上了一个 MCP Servers 应用商店，欢迎来查找和提交好玩的 MCP Servers👇

mcp.so