从混乱的HTML到AI就绪的新闻应用，使用Firecrawl + Lovable

Source: Dev.to

引言

在“Agentic”工作流的时代，最大的瓶颈不是大语言模型（LLM），而是数据。大多数网站都是混乱的 HTML、广告和弹窗，导致标准爬虫难以工作。

Firecrawl 为 Lovable 引入了原生集成。思路简单却强大：Firecrawl 负责将网页转化为干净、可供 LLM 使用的数据，而 Lovable 负责其余所有工作——UI、应用逻辑和部署。

通过此集成，Lovable 用户可以直接连接 Firecrawl 的 API，构建基于网页数据的应用，而无需编写传统的爬取代码。

我通过构建 Pulse Reader——一个现代 AI 新闻聚合器，将任何混乱的新闻链接转换为干净、结构化、AI‑ready 的摘要——来实际探索了这种方式的潜力。

技术栈

• 数据获取: Firecrawl（具体使用 /scrape 和 /extract 功能）。
• 前端 / 应用逻辑: Lovable（一款 AI 全栈工程师工具）。
• 样式: 使用玻璃拟态美学的 Tailwind CSS。

配置 Firecrawl “引擎”

数据获取层从 Firecrawl 开始。API 密钥提供对受管提取管道的访问，完全取代自定义爬虫。

Firecrawl 的强大之处在于它的简洁。无需编写复杂的选择器，只需告诉 API 你想要 Markdown 格式的输出。这确保了无论源站多么混乱，应用都能收到干净、标准化的字符串。

用 Lovable “即兴编码” UI

在网页数据标准化后，Lovable 负责生成应用。通过自然语言指令，Lovable 能生成：

• 应用界面
• 数据流 wiring
• Firecrawl API 集成
• 可直接部署的输出

数据流

当用户在 Pulse Reader 中粘贴一个 URL（例如 TechCrunch）时，会发生以下步骤：

1. 请求: 前端将 URL 发送给 Firecrawl。
2. 提取: Firecrawl 绕过反爬虫头部，渲染 JavaScript，并去除“噪声”（广告/侧边栏）。
3. 转换: 干净的 Markdown 返回给应用。
4. UI 渲染: Pulse Reader 将 Markdown 以美观、易读的卡片形式展示。

通过 “复制 Markdown” 超额交付

为了支持下游 AI 工作流，Pulse Reader 提供 复制 Markdown 和 下载 Feed 操作。这使得提取的内容可以直接在 ChatGPT、Claude 等工具中使用，无需额外清洗或转换。

结论

构建 Pulse Reader 证明了构建复杂数据工具的门槛已经消失。

• Firecrawl 是网页数据的“清洁管道”，为实时网页内容提供稳定、生产级的数据获取层。
• Lovable 是构建界面的高速引擎，将应用开发压缩为基于提示的工作流。

仍在持续完善 → 点击此处查看实时演示