让大模型“联网”的第一步？手把手教你调用搜索API！

大家使用现有的大模型工具的时候

大家使用现有的大模型工具的时候，肯定有用到他们提供的联网功能。这是因为模型的训练用的数据是有时效性的，想要大模型能处理近期的信息来进行回答，就需要实时联网查询。你是否也会很好奇：这种联网的功能，如果我们自己做的话，要怎么实现呢？

第一种：我们自己从网上找新的信息，提炼后作为prompt丢给大模型。
第二种：通过RAG构建定时更新的知识库，然后挂载到大模型上。

一、为什么需要搜索API？

我最先想到的是传统的爬虫，比如去百度或者Google爬回搜索的结果，再一个一个的爬结果里面的内容。我尝试自己用org.jsoup直接访问百度拉取搜索结果，但是失败了：因为百度是动态页面，并且有反爬虫机制，导致获取不到真正的页面内容。传统的爬虫在这里确实有点难搞：反爬机制复杂、维护成本高、而且还有法律风险……

然后我就想到了Restful API调用：有标准的定义、方便处理的结构化数据返回。稍微正规一点的搜索引擎可能都有Restful API ，吧？找了一下，可惜百度没有提供Restful API……

二、如何找到合适的API？

可能是我自己的技术知识有限，不过没关系，我可以问问AI，我试了下秘塔AI搜索：

请问有没有免费又好用，提供RestfulApi的搜索平台？

然后我就得到下面的结果，还不错，内容比较长，请点开链接 https://metaso.cn/s/gArGuEk来看具体的回答。

开始排除：

电商API，我只是想拿点有用的信息，又不是想看广告，否掉Google custom Seach, Google平台不能直接访问，否掉Bing Search API，需要visa信用卡注册，太麻烦了，否掉algolia？这是一个搜索功能提供商，是帮你的网站、应用建立自己的搜索功能用的，不是用来获取网络上的搜索结果的，否掉

于是可选的就是SearchAPI 和SerpAPI了。

三、实战对比

方案A：Search API

网站：https://www.searchapi.io 图标是个章鱼图案，记得不要走错路了。
注册注册很简单，直接用邮箱注册，然后通过邮件激活即可获得API KEY。

调用示例直接使用GET方法调用，可以指定时间和语言。

Postman示例：

优缺点

👍 简单明了，特别是我尝试的Googl搜索，完成和在网页上使用效果一样的，可以用各种关键字精准搜索。

👎 需自建爬虫进行下一步的信息拉取。

方案B：SerpAPI

网站：https://serpapi.com/
注册也是通过邮箱注册，但是他竟然要验证手机才能使用，而且老是跳出那个认证图片给我点，感觉好烦人……不过注册完后也是获取到可以直接使用的key了。

调用示例和SearchAPI类似，调用而格式也基本相同，可惜不能指定时间进行过滤，直接使用Postman试试。

优缺点

👍 有Cache，一小时内重复同样的搜索是免费的！

👎 不支持前端跨域访问，后续使用也需要自建爬虫进行下一步的信息拉取。

五、意外的小工具：Google搜索工具？

找到可以用的API，本来是要研究怎么继续获取目标网站的数据，然后转换成AI能用的格式。但是我忽然想到这些个聚合搜索API让我可以直接在Google上进行搜索诶！那我是不是可以构建一个小工具，让我可以免梯子用上Google？我把自己的需求告诉DeepSeek V3，于是这个简单的搜索工具就出来了！

生成html的prompt

你是一个前端工程师，熟练使用HTML、css、JavaScript，对网页设计很有经验。
我要写一个Html网页，可以在script中调用搜索平台的RestfulAPI。
可以用的搜索平台，有两个：
1. SearchAPI， 他的的链接是https://www.searchapi.io/api/v1/search?engine={engine}&q={keywords}&time_period={time_from}&gl={location}&api_key={apiKey}
2. Serp API, 他的链接是https://serpapi.com/search?engine={engine}&q={keywords}&time_period={time_from}&gl={location}&api_key={apiKey}
需要提供一个选择框，让用户选择用哪个搜索平台。
其中访问的参数{值}都是需要从用户的输入框中获取，并且要进行URLEncode。
搜索平台返回的结果是个Json，如下：

{
……
"organic_results": [
{
"position": 1,
"title": "AI Agent • Supercharge Your Workflows with AI",
"link": "https://aiagent.app/",
"redirect_link": "https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://aiagent.app/&ved=2ahUKEwjTx5OzoLyMAxWmKFkFHVXTKp4QFnoECAoQAQ",
"displayed_link": "https://aiagent.app",
"favicon": "https://serpapi.com/searches/67eeb33a83f4f2f0c3f945b0/images/0a0890c32fc0287ffe76424f2d2012e88c5db842d3020b5c35e53b983fc87c75.png",
"snippet": "Workflow automation with AI Agents for everyone. Use cutting-edge technology to free up your time and focus. Try today.",
"snippet_highlighted_words": [
"Workflow automation with AI Agents for everyone"
],
"source": "AiAgent.app"
}
……
}

我想要将organic_results 中的结果抽取出来，作为列表展示到页面上，要求和google的风格类似：有标题（title）、有摘要（snippet）、小字体显示时间（date），点击标题可以跳转到对应的link。

请你帮我设计一个好看的，可以交互的页面，符合现代简约设计风格的html，用一个HTML文件返回。

### Review用的prompt



我本来想让DeepSeek R1帮忙做review和改进的，但是似乎R1的代码能力有点问题。给出的结果总是错的…… 所以我只好把review的指令继续丢给DeepSeek V3 自己做了。



```typescript

# 你现在是：HTML源码深度审查与重构专家

## 定位

资深前端开发顾问，专注视觉设计与代码质量的双重审查，具备自主修正能力的代码优化专家

## 核心能力

1. 设计美学分析能力

2. 代码质量诊断能力

3. 自主重构优化能力

4. 完整文件构建能力

## 知识储备

- 现代网页设计原则（Figma/Ant Design/Material Design）

- W3C HTML5/CSS3 最新规范

- 浏览器兼容性处理方案

- 响应式布局实现模式

- JavaScrip的专业知识和用法

## 处理流程

### 第一阶段：设计审查



1. 视觉层次分析：布局结构/留白比例/视觉动线

2. 风格一致性核查：配色方案/字体系统/组件样式

3. 响应式评估：视口适配方案/断点设置合理性

4. 交互体验检测：元素状态/加载逻辑/错误处理

### 第二阶段：代码审查



1. 语义化标记检查：标签误用/ARIA属性缺失

2. 代码健康度检测：未闭合标签/属性错误/控制台报错

3. 资源完整性验证：外部依赖加载/相对路径正确性

4. 性能优化点识别：渲染阻塞资源/未压缩素材

### 第三阶段：自主重构



1. 设计缺陷修复：注入CSS变量系统/补充缺失状态样式

2. 代码规范化处理：DOCTYPE声明/字符编码标准化

3. 结构完整性补全：补充缺失的内容/优化DOM层级

4. 验证性增强：添加视口meta标签/完善alt描述文本

## 输出要求

输出可以copy即可用的完整html源码。

现在开始帮我审查下面的html：

```html





……