Vercel AI SDK + Scrapeless：通过MCP为您的代理提供的网络工具

TL;DR：

• Vercel AI SDK通过@ai-sdk/mcp中的createMCPClient连接到Scrapeless MCP服务器，在传输配置中传递端点和x-api-token头。
• await client.tools()返回所有21个工具——scrape_markdown，scrape_html，google_search，google_trends，scrape_screenshot，以及16个工具的browser_*集合——按名称键入，准备展开到generateText中。
• 在AI SDK 5及更高版本中，MCP客户端独立于一个包中存在：从@ai-sdk/mcp导入createMCPClient，而不是从ai中导入已被删除的experimental_createMCPClient。
• 每个工具都暴露了一个execute方法，因此您可以直接调用tools.scrape_markdown.execute({ url })并在模型介入之前读取Markdown——加载或调用工具不需要模型密钥。
• 只有generateText步骤需要模型提供者密钥，因为只有在那里模型才会决定调用哪些工具。
• 从Srapeless免费计划开始，让您的TypeScript代理使用真正的网页工具。

Vercel AI SDK是构建TypeScript中的AI应用程序的标准工具包，其中的模型只能通过您传递的工具进行操作。基础SDK中没有任何内容可以访问实时网络。模型上下文协议填补了这个空白：将SDK的MCP客户端指向服务器，该服务器暴露的每个工具都成为您可以直接展开到generateText或streamText中的AI SDK工具。

本指南将AI SDK连接到Scrapeless MCP服务器，加载其21个工具，真实调用一个工具，然后将工具集交给模型——已针对实时端点进行验证。唯一需要模型提供者密钥的步骤是生成调用，而这篇文章正好标记了该步骤的位置。

Scrapeless MCP服务器为代理提供的功能

Scrapeless MCP服务器暴露了网络抓取和浏览器工具，代理可以直接调用，因此抓取层不是您需要构建或托管的内容。一条连接服务21个工具：用于页面内容的scrape_markdown和scrape_html，用于搜索数据的google_search和google_trends，用于捕获的scrape_screenshot，以及通过点击、输入、滚动和等待驱动云浏览器的16个工具的browser_*集合。

browser_*工具在Scrapeless云浏览器上运行，因此模型可以在没有您计算机上浏览器的情况下导航到交互式页面并读取实际渲染的内容。关于协议本身，什么是MCP是解释， LangChain + Scrapeless MCP将同一服务器连接到Python堆栈中。

先决条件

• Node.js 22或更高版本。
• 从仪表板获取的Scrapeless API密钥，导出为SCRAPELESS_API_KEY。
• 仅用于生成步骤的模型提供者密钥，例如OPENAI_API_KEY。加载和调用工具不需要密钥。

安装

安装AI SDK核心和MCP客户端包。

npm install ai@7.0.34 @ai-sdk/mcp@2.0.16

在shell中设置您的Scrapeless密钥，并在源代码中保持占位符。

export SCRAPELESS_API_KEY="sk_your_key_here"

连接并加载工具

createMCPClient打开连接。http传输承载端点和头，client.tools()运行握手并返回按名称键入的工具。

import { createMCPClient } from "@ai-sdk/mcp";

const client = await createMCPClient({
  transport: {
    type: "http",
    url: "https://api.scrapeless.com/mcp",
    headers: { "x-api-token": process.env.SCRAPELESS_API_KEY! },
  },
});

const tools = await client.tools();
const names = Object.keys(tools).sort();
console.log("tool count:", names.length);
console.log("tools:", names.join(", "));

await client.close();

实时服务器返回21个工具，仅设置Scrapeless密钥。

tool count: 21
tools: browser_click, browser_close, browser_create, browser_get_html, browser_get_text, browser_go_back, browser_go_forward, browser_goto, browser_press_key, browser_screenshot, browser_scroll, browser_scroll_to, browser_snapshot, browser_type, browser_wait, browser_wait_for, google_search, google_trends, scrape_html, scrape_markdown, scrape_screenshot

传输和消息层遵循模型上下文协议规范，该规范基于JSON-RPC 2.0规范。AI SDK还接受用于stdio或SSE服务器的传输实例；Scrapeless服务器是托管的HTTP端点，因此http传输在这里是合适的。

直接调用一个工具

返回对象中的每个条目都是一个完整的AI SDK工具，具有 execute 方法，因此您可以在连接任何模型之前自行调用一个。execute 接受参数和调用上下文，并返回一个结果，其 content 是一个块的列表。

import { createMCPClient } from "@ai-sdk/mcp";

const client = await createMCPClient({
  transport: {
    type: "http",
    url: "https://api.scrapeless.com/mcp",
    headers: { "x-api-token": process.env.SCRAPELESS_API_KEY! },
  },
});

const tools = await client.tools();
const result = await tools.scrape_markdown.execute(
  { url: "https://quotes.toscrape.com/" },
  { toolCallId: "call_1", messages: [] },
);
const text = result.content
  .filter((block: { type: string }) => block.type === "text")
  .map((block: { text: string }) => block.text)
  .join("");
console.log("markdown 字符数:", text.length);
console.log("包含引用:", text.includes("Einstein"));

await client.close();

调用返回页面的Markdown，内容检查确认返回了真实文本。

markdown 字符数: 4308
包含引用: true

这就是模型从同一工具获得的形状：它可以推理的页面内容。AI SDK MCP 工具文档 涵盖了传输选项和在工作完成时应调用的 client.close()。

让模型调用工具

将工具传入 generateText，当任务需要它们时模型会调用它们。多步骤工具使用需要停止条件 — stepCountIs 让模型调用一个工具，读取结果并回答。这是需要模型提供者密钥的步骤。

注意：此块需要 @ai-sdk/openai 提供者包和 OPENAI_API_KEY，而这些在此处未设置。加载21个工具和上面直接的 scrape_markdown 调用不需要它们。此块展示其确切形状；只有模型往返才是先决条件的缺口。

import { createMCPClient } from "@ai-sdk/mcp";
import { generateText, stepCountIs } from "ai";
import { openai } from "@ai-sdk/openai";

const client = await createMCPClient({
  transport: {
    type: "http",
    url: "https://api.scrapeless.com/mcp",
    headers: { "x-api-token": process.env.SCRAPELESS_API_KEY! },
  },
});

const tools = await client.tools();
const { text } = await generateText({
  model: openai("gpt-4o"),
  tools,
  stopWhen: stepCountIs(5),
  prompt:
    "使用 scrape_markdown 获取 https://quotes.toscrape.com/ 并列出前三个引用及其作者。",
});
console.log(text);

await client.close();

在运行时，模型读取提示，使用 URL 调用 scrape_markdown，接收已经返回的Markdown，然后写出答案。无论是模型调用还是您调用，工具都是相同的对象。

结论

Vercel AI SDK 加上 Scrapeless MCP 服务器是从简单模型到一个能够读取实时网页的模型的快捷路径。createMCPClient 打开连接，client.tools() 返回所有21个工具，execute 证明一个有效，且将 tools 传入 generateText 将该集合交给模型。只有生成步骤需要模型密钥，因此您可以首先连接并测试整个工具表面。从上面的脚本开始，限定工具到任务需要的内容，让模型驱动。

创建一个免费的Scrapeless账户以获取API密钥，并在规划定期代理时查看Scrapeless定价。

常见问题

问：Vercel AI SDK需要模型密钥来加载MCP工具吗？

不需要。createMCPClient 执行握手，而 client.tools() 只返回设置了Scrapeless API密钥的工具，每个工具的 execute 方法直接调用它。只有在您将工具传入 generateText 或 streamText 时才需要模型提供者密钥，因为那时模型决定调用哪些工具。

问：我该使用哪个导入 — createMCPClient 还是 experimental_createMCPClient？

使用 @ai-sdk/mcp 中的 createMCPClient。较旧的教程导入 ai 包中的 experimental_createMCPClient；MCP客户端移动到了自己的 @ai-sdk/mcp 包中，ai 的重新导出被删除。如果示例无法解析导入，通常就是这个原因。

问：我如何在没有模型的情况下调用一个MCP工具？

调用 await client.tools()，然后 tools.<name>.execute(args, { toolCallId, messages: [] })。它返回一个结果，其 content 是一个块的列表；从文本块中读取文本。这是确认连接并检查工具输出的最快方法，然后再连接模型。

问：我如何连接到本地MCP服务器？
传递一个用于标准输入输出（stdio）或服务器发送事件（SSE）的传输实例，而不是 http 传输对象，然后以相同的方式调用 client.tools()。Scrapeless MCP 服务器是一个托管的 HTTP 端点，因此本指南使用 http 传输。

问：通过工具进行抓取是否受目标规则的限制？

是的。工具获取公共页面，您仍然需要负责遵循每个目标的条款和其 机器人排除协议 指令。保持抓取量有限，数据公开，模型范围仅限于任务实际需要的工具。