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ステップのみで、ここでモデルがどのツールを呼び出すかを決定します。
• Scrapelessの無料プランから始めて、あなたのTypeScriptエージェントに本物のWebツールを提供してください。

Vercel AI SDKは、TypeScriptでAIアプリを構築するための標準ツールキットであり、その内部のモデルは、渡されたツールを介してのみ動作できます。ベースSDKの中には、ライブWebに到達するものはありません。モデルコンテキストプロトコルは、そのギャップを埋めます：SDKのMCPクライアントをサーバーに向けると、そのサーバーが公開しているすべてのツールがAI SDKツールとしてgenerateTextまたはstreamTextに直接展開できます。

このガイドでは、AI SDKをScrapeless MCPサーバーに接続し、21のツールをロードし、実際に1つを呼び出し、そのセットをモデルに渡します—ライブエンドポイントと照らし合わせて確認します。モデルプロバイダーキーが必要なのは生成呼び出しのみで、この投稿はその境界がどこにあるかを正確に示します。

Scrapeless MCPサーバーがエージェントに提供するもの

Scrapeless MCPサーバーは、エージェントが直接呼び出すことができるWebスクレイピングとブラウザツールを公開しますので、スクレイピングレイヤーはあなたが構築またはホストするものではありません。1つの接続で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

シェルで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トランスポートが適切です。

ツールを直接呼び出す

返されたオブジェクトの各エントリは、execute メソッドを持つ完全なAI SDKツールであるため、モデルが接続される前に自分自身で呼び出すことができます。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 chars:", text.length);
console.log("contains a quote:", text.includes("Einstein"));

await client.close();

この呼び出しはページをMarkdownとして返し、コンテンツチェックは本物のテキストが戻ってきたことを確認します。

markdown chars: 4308
contains a quote: 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:
    "Use scrape_markdown to fetch https://quotes.toscrape.com/ and list the first three quotes with authors.",
});
console.log(text);

await client.close();

実行時にモデルはプロンプトを読み、URLを使って scrape_markdown を呼び出し、すでに戻ってきたMarkdownを受け取り、答えを記述します。ツールは、モデルが呼び出すかどうかにかかわらず、同じオブジェクトです。

結論

Vercel AI SDKとScrapeless MCPサーバーは、素朴なモデルからライブウェブを読むモデルへの短い道です。 createMCPClient が接続を開き、client.tools() が21のすべてのツールを返し、execute が1つが機能することを証明し、generateText にツールを展開することでモデルにセットを渡します。生成ステップのみがモデルキーを必要とするため、最初に全ツールをワイヤリングしてテストできます。上記のスクリプトから始め、タスクに必要なツールにスコープを合わせてモデルにドライブさせます。

無料のScrapelessアカウントを作成してAPIキーを取得し、Scrapelessの料金を確認して、定期的なエージェントを計画してください。

FAQ

Q: Vercel AI SDKはMCPツールを読み込むのにモデルキーが必要ですか？

いいえ。 createMCPClient がハンドシェイクを実行し、client.tools() がScrapeless APIキーのみを設定してツールを返し、各ツールの execute メソッドがそれを直接呼び出します。 モデルプロバイダーキーは、ツールを generateText または streamText に展開するときのみ必要です。このタイミングでモデルが呼び出すツールを決定します。

Q: どのインポートを使用するべきですか — createMCPClient それとも experimental_createMCPClient ですか？

@ai-sdk/mcp からの createMCPClient を使用してください。古いチュートリアルは ai パッケージから experimental_createMCPClient をインポートしています。 MCPクライアントは独自の @ai-sdk/mcp パッケージに移動し、ai の再エクスポートが削除されました。例がインポートを解決できない場合、これが通常の理由です。

Q: モデルなしでMCPツールを1つ呼び出すにはどうすればよいですか？

await client.tools() を呼び出し、その後 tools.<name>.execute(args, { toolCallId, messages: [] }) を呼び出します。それは content がブロックのリストである結果を返します；テキストブロックからテキストを読み取ります。これは接続を確認し、モデルをワイヤリングする前にツールの出力を調査するための最も迅速な方法です。

Q: 代わりにローカルMCPサーバーに接続するにはどうすればよいですか？
標準入出力またはSSEのためのトランスポートインスタンスをhttpトランスポートオブジェクトの代わりに渡し、その後同じ方法でclient.tools()を呼び出します。Scrapeless MCP ServerはホスティングされたHTTPエンドポイントであるため、このガイドではhttpトランスポートを使用しています。

Q: ツールを通じてのスクレイピングはターゲットのルールに縛られますか？

はい。ツールは公共のページを取得し、各ターゲットの利用規約やそのロボット排除プロトコルの指示を尊重する責任は常にあなたにあります。ボリュームを制限し、データは公開され、モデルは実際にタスクに必要なツールに限定してください。