[LangChain] 12. Web Loader

CheerioWebBaseLoader 作用是抓取指定网页并解析 HTML 内容，提取需要的纯文本数据。

这个 Loader 底层依赖 cheerio，语法类似 jQuery，可以方便地选择 HTML 元素并提取内容，适用于解析静态 HTML 网页。

pnpm add @langchain/community cheerio

快速上手示例

import { CheerioWebBaseLoader } from "@langchain/community/document_loaders/web/cheerio";

const loader = new CheerioWebBaseLoader("https://tech.meituan.com/");

const result = await loader.load();

console.log(result);

可以通过配置 selector，提取特定 HTML 标签内容。

例如只提取所有二级标题：

const loader = new CheerioWebBaseLoader("https://tech.meituan.com/", {
  selector: "h2", // 只提取网页中的 <h2> 元素
});

Github loader

经常有这样的需求，希望大模型理解某个项目的结构和实现细节，例如：

• 根据提问回答组件如何使用
• 根据错误信息定位源码位置
• 辅助理解项目代码逻辑

这种场景下，直接将整个 GitHub 仓库的代码作为数据源加载进来，是一种非常实用的做法。

GithubRepoLoader 来一键抓取 GitHub 项目的内容，并自动转换成 Document 对象。

该 Loader 依赖 ignore 包，所以需要先安装这个包。

pnpm add ignore

快速上手示例

import { GithubRepoLoader } from "@langchain/community/document_loaders/web/github";

const loader = new GithubRepoLoader("https://github.com/vuejs/vue", {
  branch: "main", // 指定分支（注意有的项目是 main）
  recursive: false, // 是否递归子目录（建议测试时设为 false）
  unknown: "warn", // 遇到未知类型文件是否告警
  ignorePaths: ["*.md", "*.json", "yarn.lock"], // 忽略部分文件
});

const result = await loader.load();

console.log(result);

SearchAPI

在很多场景中，希望 AI 应用回答一些最新的问题，比如：

• 今天有什么科技新闻？
• 某个 API 的用法有什么变动？

这类问题往往无法依赖本地知识库解决，需要实时从网络搜索并提取信息。

LangChain 中提供了多个工具：

1. SearchApiLoader：背后用到的服务商为 https://www.searchapi.io/
2. SerpAPILoader：背后用到的服务商为 https://serpapi.com/

这两个都是第三方的 SERP 抓取/解析 API 提供商，无论哪一个，注册后每月都有免费额度。

快速上手案例

import { SerpAPILoader } from "@langchain/community/document_loaders/web/serpapi";

const apiKey =
  "3a816e810e17b00076d3741542bfdcbe0b655abc820b79164eaf2397e5712641";

const q = "什么是Copilot？";

const loader = new SerpAPILoader({
  q,
  apiKey,
});

const result = await loader.load();

console.log(result);

结果示例：

Document {
    pageContent: '{"position":3,"title":"Microsoft Copilot - 维基百科，自由的百科全书","link":"https://zh.wikipedia.org/zh-hans/Microsoft_Copilot","redirect_link":"https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://zh.wikipedia.org/zh-hans/Microsoft_Copilot&ved=2ahUKEwj119iQoYyPAxUbQkEAHfXxGHQQFnoECB0QAQ","displayed_link":"https://zh.wikipedia.org › zh-hans","favicon":"https://serpapi.com/searches/689edd28e396eb9df8d729b3/images/5b60cc0865d240ae4182a4285f2cc79bf636de7c82bdc214e8ff7938fe4e383a.png","snippet":"Microsoft Copilot是由微软开发的基于大型语言模型的聊天机器人，于2023年2月7日推出。 它被视为Cortana的后继产品。 Microsoft Copilot在Microsoft Bing和Microsoft Edge ...","source":"维基百科"}',
    metadata: { source: 'SerpAPI', responseType: 'organic_results' },
    id: undefined
 },

metadata.responseType 常见的类型如下表：

responseType	含义	适合用途
knowledge_graph	权威定义、结构化知识	实体解释、百科内容
organic_results	正常网页搜索结果	拓展背景、内容召回
people_also_ask	相关问题列表	多轮对话生成、问题推荐
related_questions	延伸相关问题	拓展性回答、导航引导
top_stories	新闻报道	实时事件聚合、更新动态
videos	视频资源	多模态输出、学习材料推荐

SerpAPI 会返回各种类型的信息，无法直接在 SerpAPILoader 初始化时指定返回哪几种 responseType。

因为 SerpAPILoader 的行为是调用 SerpAPI 的搜索接口，该接口的行为就是返回一个包含多类型搜索结果的完整 JSON，然后由 LangChain 封装为多个 Document 实例，每个带有不同的 metadata.responseType。

拿到结果后简单过滤一下：

const loader = new SerpAPILoader({ q: "github copilot 是什么", apiKey });
const allDocs = await loader.load();

// 只保留 knowledge_graph 类型
const kgDocs = allDocs.filter(doc => doc.metadata.responseType === "knowledge_graph");

// 只取网页正文类型（普通搜索结果）
const organicDocs = allDocs.filter(doc => doc.metadata.responseType === "organic_results");

现在获取到的仅仅是搜索结果，需要进一步去拿到搜索结果对应链接的正文。

import { SerpAPILoader } from "@langchain/community/document_loaders/web/serpapi";
import { CheerioWebBaseLoader } from "@langchain/community/document_loaders/web/cheerio";

const apiKey =
  "3a816e810e17b00076d3741542bfdcbe0b655abc820b79164eaf2397e5712641";

const q = "什么是Copilot？";

const loader = new SerpAPILoader({
  q,
  apiKey,
});

const result = await loader.load();

const jsonResult = JSON.parse(result[1].pageContent);

const link = jsonResult.link;

// console.log(link)

const webLoader = new CheerioWebBaseLoader(link);

const webContent = await webLoader.load();

console.log(webContent);

---

-EOF-