MCP Probe Kit

Instructions

Implementation Reference

• src/tools/explain.ts:2-371 (handler)

  The core handler function for the 'explain' tool. It takes code and context arguments, constructs an elaborate Chinese-language prompt with explanation guidelines and examples (including debounce hook, longest palindrome, singleton), and returns it as MCP-formatted text content for an LLM to generate the explanation.

  export async function explain(args: any) {
    try {
      const code = args?.code || "";
      const context = args?.context || "";
  
      const message = `请详细解释以下代码：
  
  📝 **代码内容**：
  ${code || "请提供需要解释的代码"}
  
  📋 **上下文**：
  ${context || "无"}
  
  ---
  
  ## 代码解释指南
  
  ### 第一步：整体概览
  
  **快速总结**：
  - 这段代码的主要功能是什么？
  - 解决了什么问题？
  - 在项目中的作用？
  
  ### 第二步：逐行解释
  
  **详细分析**：
  - 每一行代码做了什么
  - 为什么这样写
  - 有什么注意事项
  
  ### 第三步：深入理解
  
  **核心概念**：
  - 使用的设计模式
  - 关键技术原理
  - 性能考虑
  - 潜在问题
  
  ---
  
  ## 解释示例
  
  ### 示例 1：React Hooks
  
  \`\`\`typescript
  function useDebounce<T>(value: T, delay: number): T {
    const [debouncedValue, setDebouncedValue] = useState<T>(value);
  
    useEffect(() => {
      const handler = setTimeout(() => {
        setDebouncedValue(value);
      }, delay);
  
      return () => {
        clearTimeout(handler);
      };
    }, [value, delay]);
  
    return debouncedValue;
  }
  \`\`\`
  
  **🎯 整体功能**：
  这是一个防抖 Hook，用于延迟更新值。常用于搜索输入，避免频繁触发 API 请求。
  
  **📖 逐行解释**：
  
  1. **函数签名**
  \`\`\`typescript
  function useDebounce<T>(value: T, delay: number): T
  \`\`\`
  - 泛型 \`<T>\` 表示可以处理任意类型的值
  - 接收两个参数：\`value\`（要防抖的值）和 \`delay\`（延迟毫秒数）
  - 返回类型也是 \`T\`，确保类型一致
  
  2. **状态管理**
  \`\`\`typescript
  const [debouncedValue, setDebouncedValue] = useState<T>(value);
  \`\`\`
  - 使用 \`useState\` 创建一个内部状态
  - 初始值设为传入的 \`value\`
  - 这个状态会在延迟后更新
  
  3. **副作用处理**
  \`\`\`typescript
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
  
    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);
  \`\`\`
  - 当 \`value\` 或 \`delay\` 改变时，触发 effect
  - 创建一个定时器，\`delay\` 毫秒后更新 \`debouncedValue\`
  - **清理函数**：组件卸载或依赖变化时，清除旧的定时器（关键！）
  - 这样可以避免内存泄漏和意外的状态更新
  
  4. **返回值**
  \`\`\`typescript
  return debouncedValue;
  \`\`\`
  - 返回延迟后的值
  
  **💡 工作原理**：
  
  \`\`\`
  用户输入 h  → 创建定时器（500ms 后更新）
  用户输入 he → 清除旧定时器，创建新定时器
  用户输入 hel → 清除旧定时器，创建新定时器
  用户停止输入 → 500ms 后，debouncedValue 更新为 hel
  \`\`\`
  
  **🎨 设计模式**：
  - **装饰器模式**：为普通值添加防抖功能
  - **闭包**：定时器 ID 保存在 effect 作用域中
  
  **⚠️ 注意事项**：
  1. 每次 \`value\` 改变都会重置定时器
  2. 组件卸载时会清理定时器，防止内存泄漏
  3. \`delay\` 变化也会触发重新计时
  
  **💻 使用场景**：
  \`\`\`typescript
  function SearchComponent() {
    const [searchTerm, setSearchTerm] = useState('');
    const debouncedSearchTerm = useDebounce(searchTerm, 500);
  
    useEffect(() => {
      if (debouncedSearchTerm) {
        // 只有在用户停止输入 500ms 后才发起请求
        fetchSearchResults(debouncedSearchTerm);
      }
    }, [debouncedSearchTerm]);
  
    return (
      <input
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="搜索..."
      />
    );
  }
  \`\`\`
  
  ---
  
  ### 示例 2：复杂算法
  
  \`\`\`typescript
  function longestPalindrome(s: string): string {
    if (s.length < 2) return s;
    
    let start = 0;
    let maxLen = 1;
    
    function expandAroundCenter(left: number, right: number): void {
      while (left >= 0 && right < s.length && s[left] === s[right]) {
        const len = right - left + 1;
        if (len > maxLen) {
          start = left;
          maxLen = len;
        }
        left--;
        right++;
      }
    }
    
    for (let i = 0; i < s.length; i++) {
      expandAroundCenter(i, i);     // 奇数长度回文
      expandAroundCenter(i, i + 1); // 偶数长度回文
    }
    
    return s.substring(start, start + maxLen);
  }
  \`\`\`
  
  **🎯 整体功能**：
  找出字符串中最长的回文子串（如 "babad" → "bab" 或 "aba"）。
  
  **📖 核心思想**：
  
  **中心扩展法**：
  1. 遍历每个字符作为潜在的回文中心
  2. 从中心向两边扩展，检查是否对称
  3. 记录最长的回文串
  
  **📊 时间复杂度**：O(n²)
  **📊 空间复杂度**：O(1)
  
  **🔍 详细分析**：
  
  1. **边界处理**
  \`\`\`typescript
  if (s.length < 2) return s;
  \`\`\`
  - 长度 0 或 1 的字符串本身就是回文
  
  2. **状态变量**
  \`\`\`typescript
  let start = 0;   // 最长回文的起始位置
  let maxLen = 1;  // 最长回文的长度
  \`\`\`
  
  3. **扩展函数**
  \`\`\`typescript
  function expandAroundCenter(left: number, right: number): void {
    while (left >= 0 && right < s.length && s[left] === s[right]) {
      // 条件：不越界 && 两边字符相同
      const len = right - left + 1;
      if (len > maxLen) {
        start = left;
        maxLen = len;
      }
      left--;
      right++;
    }
  }
  \`\`\`
  - 从中心向两边扩展
  - 遇到不匹配或越界时停止
  - 更新全局最长记录
  
  4. **遍历所有中心**
  \`\`\`typescript
  for (let i = 0; i < s.length; i++) {
    expandAroundCenter(i, i);     // 奇数：中心是一个字符
    expandAroundCenter(i, i + 1); // 偶数：中心是两个字符之间
  }
  \`\`\`
  
  **💡 为什么要检查两次？**
  
  \`\`\`
  奇数长度：aba   中心是 b     (i, i)
  偶数长度：abba  中心是 bb    (i, i+1)
  \`\`\`
  
  **🎨 其他解法对比**：
  
  | 方法 | 时间复杂度 | 空间复杂度 | 说明 |
  |------|------------|------------|------|
  | 暴力枚举 | O(n³) | O(1) | 太慢 |
  | 中心扩展 | O(n²) | O(1) | 本方法 |
  | 动态规划 | O(n²) | O(n²) | 需要额外空间 |
  | Manacher | O(n) | O(n) | 最优，但复杂 |
  
  ---
  
  ### 示例 3：设计模式
  
  \`\`\`typescript
  class Singleton {
    private static instance: Singleton;
    private constructor() {}
    
    public static getInstance(): Singleton {
      if (!Singleton.instance) {
        Singleton.instance = new Singleton();
      }
      return Singleton.instance;
    }
  }
  \`\`\`
  
  **🎯 设计模式**：单例模式（Singleton）
  
  **📖 核心思想**：
  确保一个类只有一个实例，并提供全局访问点。
  
  **🔍 实现细节**：
  
  1. **私有构造函数**
  \`\`\`typescript
  private constructor() {}
  \`\`\`
  - 阻止外部直接 \`new Singleton()\`
  
  2. **静态实例变量**
  \`\`\`typescript
  private static instance: Singleton;
  \`\`\`
  - 保存唯一实例
  
  3. **懒加载**
  \`\`\`typescript
  public static getInstance(): Singleton {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }
  \`\`\`
  - 第一次调用时才创建实例
  - 后续调用返回同一个实例
  
  **💻 使用场景**：
  - 数据库连接池
  - 配置管理器
  - 日志记录器
  
  **⚠️ TypeScript 现代替代**：
  \`\`\`typescript
  // 使用模块单例（更简单）
  export const config = {
    apiUrl: 'https://api.example.com',
    timeout: 5000,
  };
  \`\`\`
  
  ---
  
  ## 解释框架
  
  对于任何代码，按以下结构解释：
  
  ### 1. 概述（30 秒理解）
  - 一句话总结功能
  - 主要用途
  
  ### 2. 工作原理（5 分钟理解）
  - 核心逻辑
  - 数据流向
  - 关键步骤
  
  ### 3. 技术细节（深入理解）
  - 设计模式
  - 算法原理
  - 性能分析
  - 边界情况
  
  ### 4. 实际应用
  - 使用示例
  - 最佳实践
  - 常见陷阱
  
  ---
  
  现在请为提供的代码生成详细解释，包括：
  1. 整体功能概述
  2. 逐行代码说明
  3. 核心原理分析
  4. 设计模式识别
  5. 使用场景和注意事项`;
  
      return {
        content: [
          {
            type: "text",
            text: message,
          },
        ],
      };
    } catch (error) {
      const errorMessage =
        error instanceof Error ? error.message : String(error);
      return {
        content: [
          {
            type: "text",
            text: `❌ 代码解释失败: ${errorMessage}`,
          },
        ],
        isError: true,
      };
    }
  }

• src/index.ts:351-368 (schema)

  The input schema definition for the 'explain' tool, specifying parameters 'code' (string) and 'context' (string), both optional.

  {
    name: "explain",
    description: "【代码解释器】详细解释代码逻辑和原理",
    inputSchema: {
      type: "object",
      properties: {
        code: {
          type: "string",
          description: "需要解释的代码",
        },
        context: {
          type: "string",
          description: "上下文信息",
        },
      },
      required: [],
    },
  },

• src/index.ts:513-515 (registration)

  The registration/dispatch handler in the main switch statement that calls the explain function when the tool 'explain' is invoked.

  case "explain":
    return await explain(args);

• src/tools/index.ts:19-19 (registration)

  Re-export of the explain handler from its implementation file for use in the main index.

  export { explain } from "./explain.js";

• src/index.ts:13-15 (registration)

  Import of the explain function from tools/index.js into the main server file.

    codeReview, gentest, genpr, checkDeps, gendoc, genchangelog, refactor, perf,
    fix, gensql, resolveConflict, genui, explain, convert, genreadme, split, analyzeProject
  } from "./tools/index.js";