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

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

- 第一种：我们自己从网上找新的信息，提炼后作为 [prompt](https://prompts.explinks.com/) 丢给大模型。
- 第二种：通过 RAG 构建定时更新的知识库，然后挂载到大模型上。

## 一、为什么需要搜索 API？

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

然后我就想到了 Restful [Restful API](https://www.explinks.com/blog/why-has-restful-api-become-the-top-stream-api-architecture-style/)，对吧？找了一下，可惜百度没有提供 Restful [API](https://www.explinks.com/wiki/api/)……

*💡 小提示：如果你也遇到动态页面反爬难题，可先用 [JavaScript 代码反混淆专家](https://prompts.explinks.com/javascript_code_deobfuscator?from=explinks&sulg=wx-sq-the-first-step-to-let-large-models-connect-to-the-internet-a-step-by-step-guide-to-calling-the-search-api) 还原前端加密参数，再用 [代码安全审查](https://prompts.explinks.com/code_security_review?from=explinks&sulg=wx-sq-the-first-step-to-let-large-models-connect-to-the-internet-a-step-by-step-guide-to-calling-the-search-api) 扫描一遍，避免触碰法律红线。*

## 二、如何找到合适的 API？

可能是我自己的技术知识有限，不过没关系，我可以问问 AI，我试了下秘塔 [AI 搜索](https://www.explinks.com/blog/ai-search-and-big-language-and-other-microsoft-series-apis)：

```typescript
请问有没有免费又好用，提供 RestfulApi 的搜索平台？</code></pre>
<p>然后我就得到下面的结果，还不错，内容比较长，请点开链接 <a href="https://metaso.cn/s/gArGuEk">https://metaso.cn/s/gArGuEk 来看具体的回答</a>。</p>
<p><img src="https://explinks-blog.oss-cn-beijing.aliyuncs.com/output/2025041012/让大模型_联网_的第一步_手把手教你调用搜索API_/image_1.jpg" alt="image" /></p>
<p>开始排除：</p>
<ul>
<li><a href="https://www.explinks.com/blog/e-commerce-api-a-tool-to-achieve-seamless-access-and-improve-the-efficiency-of-e-commerce-operations">电商 API</a>，我只是想拿点有用的信息，又不是想看广告，否掉  </li>
<li>Google custom Search，Google 平台不能直接访问，否掉  </li>
<li>Bing Search API，需要 visa 信用卡注册，太麻烦了，否掉  </li>
<li>algolia？这是一个搜索功能提供商，是帮你的网站、应用建立自己的搜索功能用的，不是用来获取网络上的搜索结果的，否掉</li>
</ul>
<p>于是可选的就是 <strong>SearchAPI</strong> 和 <strong>SerpAPI</strong> 了。</p>
<p><em>如果还在纠结选哪家，把接口返回的 JSON 丢进 <a href="https://prompts.explinks.com/code_issue_diagnosis?from=explinks&amp;sulg=wx-sq-the-first-step-to-let-large-models-connect-to-the-internet-a-step-by-step-guide-to-calling-the-search-api">代码问题诊断</a> 可一键对比字段完备度与速率限制，快速决策。</em></p>
<h2>三、实战对比</h2>
<h3>方案 A：Search API</h3>
<ul>
<li>网站：图标是个章鱼图案，记得不要走错路了。</li>
<li>注册很简单，直接用邮箱注册，然后通过邮件激活即可获得 <a href="https://www.explinks.com/blog/api-key-what-is-an-api-key/">API KEY</a>。</li>
</ul>
<p><img src="https://explinks-blog.oss-cn-beijing.aliyuncs.com/output/2025041012/让大模型_联网_的第一步_手把手教你调用搜索API_/image_2.jpg" alt="image" /></p>
<ul>
<li>调用示例直接使用 GET 方法调用，可以指定时间和语言。</li>
</ul>
<p>Postman 示例：</p>
<p><img src="https://explinks-blog.oss-cn-beijing.aliyuncs.com/output/2025041012/让大模型_联网_的第一步_手把手教你调用搜索API_/image_3.jpg" alt="image" /></p>
<p><strong>优缺点</strong></p>
<ul>
<li>简单明了，特别是我尝试的 Google 搜索，完成和在网页上使用效果一样的，可以用各种关键字精准搜索。</li>
<li>需自建爬虫进行下一步的信息拉取。</li>
</ul>
<h3>方案 B：SerpAPI</h3>
<ul>
<li>注册也是通过邮箱注册，但是他竟然要验证手机才能使用，而且老是跳出那个认证图片给我点，感觉好烦人……不过注册完后也是获取到可以直接使用的 key 了。</li>
</ul>
<p><img src="https://explinks-blog.oss-cn-beijing.aliyuncs.com/output/2025041012/让大模型_联网_的第一步_手把手教你调用搜索API_/image_4.jpg" alt="image" /></p>
<ul>
<li><a href="https://www.explinks.com/blog/zero-one-thing-api-free-calling-guide-easily-implement-iot-management">调用示例和 SearchAPI</a> 类似，调用格式也基本相同，可惜不能指定时间进行过滤，直接使用 Postman 试试。</li>
</ul>
<p><img src="https://explinks-blog.oss-cn-beijing.aliyuncs.com/output/2025041012/让大模型_联网_的第一步_手把手教你调用搜索API_/image_5.jpg" alt="image" /></p>
<p><strong>优缺点</strong></p>
<ul>
<li>有 Cache，一小时内重复同样的搜索是免费的！</li>
<li>不支持前端跨域访问，后续使用也需要自建爬虫进行下一步的信息拉取。</li>
</ul>
<p><em>无论你选哪家，把返回的 JSON 结构化数据交给 <a href="https://prompts.explinks.com/code_snippet_explainer_debug?from=explinks&amp;sulg=wx-sq-the-first-step-to-let-large-models-connect-to-the-internet-a-step-by-step-guide-to-calling-the-search-api">代码片段解析助手</a> 即可一键生成 TypeScript 接口定义与解析函数，省去手写样板代码的麻烦。</em></p>
<h2>五、意外的小工具：Google 搜索工具？</h2>
<p>找到可以用的 API，本来是要研究怎么继续获取目标网站的数据，然后转换成 AI 能用的格式。但是我忽然想到这些个聚合 <a href="https://www.explinks.com/blog/how-to-integrate-a-new-search-api-into-mindsearch-to-comprehensively-enhance-intelligent-search-capabilities/">搜索 API</a> 让我可以直接在 Google 上进行搜索诶！那我是不是可以构建一个小工具，让我可以免梯子用上 Google？我把自己的需求告诉 DeepSeek V3，于是这个简单的搜索工具就出来了！</p>
<h3>生成 HTML 的 prompt</h3>
<pre><code class="language-typescript">你是一个前端工程师，熟练使用 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，如下：</code></pre>
<pre><code class="language-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"
    }
    ……
  ]
}</code></pre>
<p>我想要将 organic_results 中的结果抽取出来，作为列表展示到页面上，要求和 google 的风格类似：有标题（title）、有摘要（snippet）、小字体显示时间（date），点击标题可以跳转到对应的 link。</p>
<p>请你帮我设计一个好看的，可以交互的页面，符合现代简约设计风格的 <a href="https://www.explinks.com/wiki/what-is-html/">html</a>，用一个 HTML 文件返回。</p>
<pre><code>
### Review 用的 prompt

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

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

## 定位

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

## 核心能力

1. 设计美学分析能力
2. 代码质量诊断能力
3. 自主重构优化能力
4. 完整文件构建能力

## 知识储备

- 现代网页设计原则（Figma/Ant Design/Material Design）
- W3C HTML5/CSS3 最新规范
- 浏览器兼容性处理方案
- 响应式布局实现模式
- JavaScript 的专业知识和用法

## 处理流程

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

1. 视觉层次分析：布局结构/留白比例/视觉动线
2. 风格一致性核查：配色方案/字体系统/组件样式
3. 响应式评估：视口适配方案/断点设置合理性
4. 交互体验检测：元素状态/加载逻辑/错误处理

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

1. 语义化标记检查：标签误用/ARIA 属性缺失
2. 代码健康度检测：未闭合标签/属性错误/控制台报错
3. 资源完整性验证：外部依赖加载/相对路径正确性
4. 性能优化点识别：渲染阻塞资源/未压缩素材

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

1. 设计缺陷修复：注入 CSS 变量系统/补充缺失状态样式
2. 代码规范化处理：DOCTYPE 声明/字符编码标准化
3. 结构完整性补全：补充缺失的内容/优化 DOM 层级
4. 验证性增强：添加视口 meta 标签/完善 alt 描述文本

## 输出要求

输出可以 copy 即可用的完整 html 源码。
现在开始帮我审查下面的 html：

实际测试中，发现 SerpApi 竟然不支持 CORS！所以还额外补充了一点需求：要求如果使用 SerpAPI 的时候还得用跨域代理服务 Cros-Anywhere。Cros-anywhere：是一款用代理解决跨域问题的小工具，几行 js 代码，可以自己部署。

六、部署

找一个可以部署静态 HTML 的网站，将刚刚的 html 上传上去：https://www.32kw.com/view/eca2c3e 如果这个网站挂了，大家还可以将源码拷贝到本地，保存为 html，直接用浏览器打开就可以了，安全又放心。源码地址：https://gitee.com/gavin_luo/small_tool/raw/master/html/searchapi.html 而且我还发现，通过 SearchAPI 使用百度，竟然没有广告了！

整个小工具源码已经开源，上线前不妨用 代码审查助手 再跑一遍，自动修复 DOCTYPE、CORS 与性能隐患；如果想把界面再美化一下，让 代码优化助手 给你生成暗黑模式与响应式断点，一键搞定。

推荐阅读：2025开发者效率翻倍：5个AI代码提示词助你轻松写出高质量程序