Mcp_usehooks

mcp-usehooks

一个用于访问 usehooks.io 中 React Hooks 的 Model Context Protocol（MCP）服务，提供增强的格式化选项和缓存功能。

功能

• 访问 usehooks.io 仓库中的所有 Hooks
• 按关键词或类别搜索 Hooks
• 获取特定 Hook 的详细信息，包括实现代码
• 查看包含代码片段的示例
• 将输出格式化为 JSON 或 Markdown
• 通过高效缓存提升性能
• 全面的错误处理

安装

快速安装（推荐）

使用我们的安装脚本自动完成设置：

Linux/macOS：

curl -fsSL https://raw.githubusercontent.com/small-lab-io/usehooks.io/main/packages/usehooks-mcp/scripts/install.sh | bash

Windows： 从仓库下载并运行 scripts/install.bat。

手动安装

npm install -g mcp-usehooks

或者在本地安装：

npm install mcp-usehooks

使用方法

启动服务

如果已全局安装：

mcp-usehooks

如果已在本地安装：

npx mcp-usehooks

或者直接从仓库运行：

node mcp_usehooks_server.js

开发模式

开发时，如需在文件更改后自动重启：

npm run dev

与 IDE 集成

Claude Desktop

要将此 MCP 服务与 Claude Desktop 配合使用：

1. 全局安装软件包：npm install -g mcp-usehooks
2. 在 Claude Desktop 中，前往 Settings > MCP Servers
3. 添加一个新的 MCP 服务，并使用以下配置：
   • 名称：UseHooks
   • 命令：mcp-usehooks

连接后，Claude 即可通过 MCP 工具访问这些 Hooks。

VSCode 和 Windsurf IDE

有关将其与 VSCode、Windsurf IDE 及其他开发环境集成的详细说明，请参阅 IDE 集成指南。

VSCode 快速设置：

1. 全局安装：npm install -g mcp-usehooks
2. 安装 Claude Desktop 或 Cline 扩展
3. 添加 MCP 服务配置：

   {
     "usehooks": {
       "command": "mcp-usehooks",
       "args": []
     }
   }
   

Windsurf IDE 快速设置：

1. 全局安装：npm install -g mcp-usehooks
2. 前往 Settings → Extensions → MCP Servers
3. 使用以下命令添加新服务：mcp-usehooks

可用工具

list_hooks

列出所有可用的 React Hooks，可按类别筛选。

参数：

• category（可选）：按类别筛选 Hooks（例如，“state”“browser”“utility”）
• format（可选）：输出格式，可选 "json" 或 "markdown"（默认："markdown"）

示例：

{
  "server_name": "usehooks",
  "tool_name": "list_hooks",
  "args": {
    "category": "state",
    "format": "markdown"
  }
}

get_categories

获取所有可用的 Hook 类别。

参数：

• with_counts（可选）：包含每个类别中的 Hook 数量（默认：false）

示例：

{
  "server_name": "usehooks",
  "tool_name": "get_categories",
  "args": {
    "with_counts": true
  }
}

search_hooks

按关键词搜索 Hook 的名称、标题或描述。

参数：

• keyword：用于搜索 Hook 名称、标题和描述的关键词
• category（可选）：按类别筛选搜索结果
• format（可选）：输出格式，可选 "json" 或 "markdown"（默认："markdown"）

示例：

{
  "server_name": "usehooks",
  "tool_name": "search_hooks",
  "args": {
    "keyword": "storage",
    "category": "browser",
    "format": "markdown"
  }
}

get_hook

获取特定 Hook 的详细信息，包括其实现代码和示例。

参数：

• name：要获取的 Hook 名称（例如，“use-counter”“use-local-storage”）
• format（可选）：输出格式，可选 "json" 或 "markdown"（默认："markdown"）
• include_examples（可选）：包含示例代码片段（默认：true）

示例：

{
  "server_name": "usehooks",
  "tool_name": "get_hook",
  "args": {
    "name": "use-counter",
    "format": "markdown",
    "include_examples": true
  }
}

功能详情

缓存

该服务实现了高效的缓存机制，TTL（生存时间）为 5 分钟，可提升性能并减少 API 调用。缓存内容包括：

• 所有 Hook 的列表
• 按类别整理的 Hooks
• 单个 Hook 的详细信息

Markdown 格式

所有工具都支持 Markdown 输出格式，以便与 AI 助手配合使用时更易阅读。Markdown 输出包括：

• 格式规范的标题
• 带语法高亮的代码块
• 列表和说明
• 包含代码片段的示例

贡献

欢迎贡献！请随时提交 Pull Request。

许可证

MIT