Bright Data Web MCP + Claude Skills 統合ガイド

この記事では以下を学びます：

新しいClaude Skillsメカニズムとは何か、その仕組みについて。
– MCPツールに取って代わるのではなく、それらと完全に連携する理由
AI体験を向上させるため、Bright DataのWeb MCPおよびスキルとClaude Desktop、API、Codeを統合する方法。

さっそく見ていきましょう！

Claudeのスキルとは？

2025年10月16日、AnthropicはClaudeへのエージェントスキル導入を発表しました。

Claudeにおける「スキル」とは、特定のタスクにおけるモデルのパフォーマンスを向上させるために定義された指示、スクリプト、リソースを含むモジュール式のフォルダーです。より詳細には、各スキルはミニ知識パッケージのように機能し、Claudeに専門的なワークフロー（例：データ分析、文書作成、ブランドガイドラインの適用など）の実行方法を教えます。

一般的な推論だけに依存する代わりに、Claudeは必要な時にのみ関連するスキルを動的に読み込み、応答を迅速かつ的を絞ったものに保ちます。

技術的な観点では、各スキルは少なくともSKILL.mdファイルを含むディレクトリで構成されます。このファイルはスキルの核となり、名前や説明などの必須メタデータを定義するYAMLフロントマターで始まらなければなりません。また、追加のメタデータ、タスク指示、参照ファイル、実行可能スクリプト、ツールなどを含めることもできます。

現在、スキルには主に2種類があります：

Anthropicスキル：Anthropicが事前構築した汎用タスク用（例：PowerPoint作成、GIF作成など）。
カスタムスキル：ユーザーや組織が独自のワークフローやベストプラクティスを実装するために作成する。

スキルは組み合わせて使用でき、移植性があります。つまり、複数のスキルを組み合わせたり、ClaudeアプリやAPI間で再利用したりでき、必要なコンポーネントのみを必要な時にロードできます。

なぜMCPとClaudeエージェントスキルを併用するのか

ここで、スキルはMCPサーバーが公開するツールの新しいバージョンに過ぎないと思われるかもしれませんが、それは正確ではありません…

MCPはClaude（または他のAIモデル）をAPI、データベース、クラウドアプリなどの外部システムに接続します。モデルがリアルタイムデータを取得したり外部アクションをトリガーしたりするためのブリッジとして機能します。

例えば、Bright DataのWeb MCPサーバーは、AIモデルに60以上のウェブデータ取得・統合ツールへのアクセスを提供します。これらの機能は、Bright DataサーバーへのAPI呼び出しによって実現され、様々なクラウドベースのソリューションを提供します。

ただしMCP技術の主な制約は、トークン消費量が多い点です。利用可能なエンドポイント、パラメータ、レスポンスに関する詳細なコンテキストが必要です。このためBrightDataはWeb MCPに2つのモードを提供しています：

無料ティアモード：利用可能なツールがごく一部に限定されるため、Claudeが膨大なツールリストを処理する必要がなく、トークン消費を削減します。Web MCP無料ティアの詳細はこちら。
プロモード：60以上の全ツールに完全アクセス可能ですが、AIが利用可能な全オプションを理解・推論する必要があるため、より多くのトークンを消費します。

一方、スキルは自己完結型の知識モジュールです。本質的には、Claudeに何かを教えるための指示、スクリプト、リソースを含むフォルダーです。したがって、MCPとは異なり、スキルは外部接続に依存しません。必要な時にいつでもロードできる手順的なノウハウをClaudeに提供するだけです。

重要なポイントは、ClaudeスキルとWeb MCPツールが異なるながらも補完的な目的を果たすことです。両者を併用すると非常に相乗効果を発揮します。MCPが外部データやツールへのアクセスを提供する一方、スキルはそれらの活用方法に関する専門知識をAIに提供できます。

要するに、スキルはMCPツールの代替ではありません。むしろ逆で、スキルはMCPツールの活用方法においてクロードをより賢くするのです。

Claude DesktopでWeb MCPとスキルにアクセス可能なAIエージェントの構築方法

このガイド付きチュートリアルでは、Bright Data Web MCPとスキルからツールを装備したClaudeモデルの構築方法を学びます。特に、ニュース＋動画検索シナリオを通じて強化されたAIエージェントの実動を確認します。

注：以下は単なる一例です。最終プロンプトを変更することで、他のユースケースにも容易に適応できます。また、同じ手順はClaudeのウェブ版（Claude.aiとしても知られる）でも機能します。変更が必要なのはWeb MCP統合のみで、これはWeb MCPのリモート版を経由する必要があります。

以下の手順に従ってください！

前提条件

本記事の内容を再現するには、以下の環境が整っていることを確認してください：

ローカルにインストール済みのClaude Desktop
以下のいずれかのプランのClaudeアカウント：Pro、Max、Team、またはEnterprise。
APIキーが設定済みのBright Dataアカウント。

Claude Desktopをローカルにインストール後、アカウントアイコンをクリックし、必要なプランのいずれかに加入していることを確認してください：
Checking you are on the right Claude plan
次に、Claude Desktopが既にBright DataのWeb MCPと統合されていることを前提とします。詳細な手順については、公式のClaude Desktop統合ガイドを参照してください。

また、Bright Data Web MCP統合が有効化されていることも前提とします（無料プランモードで十分です）：
Bright Data Web MCP integration in Claude Desktop
注意：Bright DataのWeb MCPはClaude MCPサーバーとして機能します。

これで、ClaudeでMCP + Skillsの統合をテストするために必要なすべての準備が整いました。

ステップ #1: Claude でエージェントスキルを有効化する

執筆時点では、エージェントスキルはベータ機能であり、デフォルトでは無効化されています。そのため、この機能を利用するには、まず有効化する必要があります。

有効化手順：左下のユーザープロフィールをクリックし、「設定」オプションを選択：
Selecting the “Settings” option

「設定」セクションで「機能」パネルを開き、「スキル」セクションの「有効化」ボタンを押します：
Pressing the “Turn on“ button

これにより自動的に「コード実行とファイル作成」オプションがチェックされ、以下のように事前設定済みのClaudeスキルを有効化できるようになります：
Note that available Skills
これで個々のスキルをトグル操作で有効化できるようになります。

素晴らしい！これでClaude統合でスキルが使用可能になりました。

ステップ #2: カスタムスキルの追加

デフォルトでClaudeは一連のスキルを提供します。これらのスキルの出所が気になる場合は、公式のanthropics/Skillsリポジトリをご覧ください。

要約すると、デフォルトのスキルは以下の通りです：

algorithmic-art: p5.js を使用した生成アートを作成。シード付きランダム性、フローフィールド、パーティクルシステムを適用。
artifacts-builder: React、Tailwind CSS、shadcn/uiコンポーネントを使用して複雑なClaude.ai HTMLアーティファクトを構築します。
brand-guidelines: アーティファクトにAnthropicの公式ブランドカラーとタイポグラフィを適用します。
canvas-design: デザイン哲学に基づき、.pngおよび.pdf形式の美しいビジュアルアートを設計します。
internal-comms: 進捗報告、ニュースレター、FAQなどの社内向けコミュニケーション文書を作成します。
mcp-server: 外部APIやサービスを統合した高品質なMCPサーバー作成ガイド。
slack-gif-creator: Slackのサイズ制限に最適化されたアニメーションGIFを作成する。
スキル作成ガイド: Claudeの機能を拡張する効果的なスキルの作成ガイド。
template-Skill: 新規スキル作成の起点となる基本テンプレート。
theme-factory: 10種類のプリセットプロフェッショナルテーマでアーティファクトをスタイリング、またはオンザフライでカスタムテーマを生成。
webapp-testing: Playwrightを使用したローカルWebアプリケーションのUI検証とデバッグテスト。

さて、Claude統合に新しいスキルを追加したい場合を考えてみましょう。これがスキルの特別な点であり、追加のスキルを簡単にアップロードしてAIモデルに利用させることができます。興味深いスキルを見つけるには、ComposioHQ/awesome-claudeスキルリポジトリをご覧ください。また、Bright Dataの素晴らしいClaudeスキルもチェックしてみてください。

例えば「Video Downloader」スキルは、ClaudeモデルがYouTubeなどのプラットフォームから動画をダウンロードできるようにします：
The “Video Downloader” Claude Skill
ComposioHQ/awesome-claude-Skillsリポジトリを閉じ、「Video Downloader」（video-downloader/）スキルフォルダに移動し、ZIPファイルに変換します：

git clone https://github.com/ComposioHQ/awesome-claude-Skills/
cd awesome-claude-Skills/video-downloader
zip -r video-downloader-Skill.zip .

注：CLIを使わずに実行することも可能です。目的は、awesome-claude-Skills/video-downloaderフォルダ内のSKILL .mdファイルを含む.zipファイルを作成することです。これはClaudeスキルインポートに必要な形式です。

次に、Claudeで「Skills」セクションに移動し、「Upload Skill」をクリックして以下のモーダルを開きます：
The “Upload Skill” modal
次に、.zipファイルを「スキルをアップロード」エリアにドラッグするか、クリックして手動でアップロードします。「スキルが正常にアップロードされました」という通知が表示されます。

最後に、スキルが自動的にインポートされ、スキルリストに表示され、デフォルトで有効化されます：
Note the “video-downloader” Skill
この手順を繰り返せば、他のカスタムスキルも追加できます。よくできました！

ステップ #3: Web MCP + Claudeスキル連携のテスト

これで、Bright DataのWeb MCPツールと動画ダウンロードスキルの両方にアクセスできるClaude Desktopインスタンスが設定されました。次に、両方の機能を使用する必要があるプロンプトを作成して、この設定をテストしてみましょう。

例えば、構造化されたMarkdown形式のニュース記事からコンテンツをスクレイピングし、関連する最も適切なYouTube動画を検索・ダウンロードしたい場合を考えます。これはニュースダウンロードエージェントの優れたユースケースであり、オフライン分析やアーカイブに有用です。

この目的を達成するプロンプト例は以下の通りです：

以下のニュース記事からコンテンツをスクレイピングしてください：
"https://blog.google/products/google-tv/gemini-google-tv/"

クリーンなMarkdown形式でコンテンツを返してください。その後、公式Googleチャンネルから関連動画をYouTubeで検索し、1080p解像度のMP4ファイルとしてダウンロードしてください。

Claude Desktopで新規チャットを開き、プロンプトを貼り付けて実行してください：
The task execution in Claude Desktop
上記のGIFは簡略化のため速度調整・編集されていますが、実際の流れは以下の通りです：

Claudeは、ニュース記事の内容をスクレイピングする適切なツールとして、Bright Data Web MCPのscrape_as_markdownツールを特定します。
ツール実行の許可を求めます。
許可されると、ツールが記事をリアルタイムでスクレイピングし、内容をMarkdown形式で返します。
Claudeは関連するYouTube動画を検索するのに適切なツールとして、WebMCPのsearch_engineツールを特定します。
検索クエリを実行する許可を求めます。
このツールはクエリに関連する SERP（Bright Data の SERP API 経由）を返し、その中には記事に最も関連性の高い YouTube 動画「Introducing Gemini for Google TV」への URL が含まれています。
Claudeはvideo-downloaderスキルを使用して、動画を1080pのローカルファイルとしてダウンロードします。
このスキルは内部でyt-dlpを使用し、必要なロジックを実行します。
動画は記事コンテンツを含むMarkdownファイルと共に、出力フォルダにダウンロード・保存されます。
最終結果として、Markdownファイルとダウンロードされた動画が表示されます。

Claude Desktop上の最終結果は以下のような要約となるはずです：
The final summary presenting the produced output by the AI
完璧です！結果は期待できそうです。AIが意図した目標を達成したか確認しましょう！

ステップ #4: 出力の分析

出力フォルダ（デフォルトではお使いのマシンの「Downloads/」フォルダ）には、以下の2つのファイルが含まれているはずです：

your-output-folder
  ├── gemini_google_tv_article.md
  └── introducing-gemini-for-google-tv_1080p.mp4

gemini_google_tv_article.mdファイルを開くと、以下のような内容が表示されるはずです：
Exploring the gemini_google_tv_article.md file in Visual Studio Code

これは、プロンプトで入力として渡された「Gemini comes to Google TV」記事のMarkdown版です：
The source article
ご覧の通り、Bright Data Web MCPサーバーによりClaudeは対象ページに接続し、ボット対策機能を回避してコンテンツにアクセスし、それをMarkdown形式でクリーンに抽出できました。

次に、introducing-gemini-for-google-tv_1080p.mp4ファイルを開きます:
Opening the introducing-gemini-for-google-tv_1080p.mp4 file with VLC

これはYouTubeから直接取得した「Introducing Gemini for Google TV」動画です：

さあ、どうぞ！出力結果から、Claude DesktopがBright Data Web MCPツールと動画ダウンロードスキルを両方活用してタスクを完了したことが確認できます。

この二重統合により、AIエージェントは両方の長所を兼ね備えます：

MCPツールによるサードパーティAPI・自動化システムとの連携。
特定のタスクを処理するための手順指示を与え、Claudeの知識を強化するスキル。

ほら！Bright Data Web MCPとClaude Skillsの連携は完璧に機能しています。

ここで示したのはあくまで簡単な例です。Web MCPツールとClaudeスキルを組み合わせた他のプロンプトを自由に試して、様々なエージェント型AIユースケースをカバーしてください。

Claude APIでWeb MCPとスキルを併用する方法

以下の手順に従い、Claude API内でBright Data Web MCPとスキルを併用する方法をご確認ください。

この例では、Web MCPツールを使用してAmazonから製品をスクレイピングし、公式のAnthropicpptxスキルでそのデータを用いたプレゼンテーションを生成するワークフローを構築します！

前提条件

以下のコードを実行するには、以下が必要です：

Anthropic APIキー
Claude Pro、Max、Team、またはEnterpriseアカウント。
APIキーが設定済みのBright Dataアカウント。
ローカルにインストールされたPython 3.8。
Anthropic Python APIライブラリがインストールされたプロジェクト（例：pip install anthropicを実行）。

Web MCP + Claude API スキル

ローカルのSTDIO MCPサーバーはClaude APIに直接接続できない点に注意してください。代わりに、HTTP経由で公開されているサーバーを使用する必要があります。Bright Data Web MCPもリモートサーバーとして利用可能なため、これは問題になりません。

また、スキルがドキュメント（Excel、PowerPoint、PDF、Wordなど）を作成する場合、レスポンスにfile_id属性が返される点に留意してください。これらのファイルをダウンロードするには、Files APIを使用する必要があります。

具体的には、以下の流れで処理が行われます：

スキルはコード実行中にファイルを生成します
レスポンスには作成された各ファイルのfile_idが含まれます
Files APIを使用して実際のファイルコンテンツをダウンロードする
ファイルをローカルに保存するか、必要に応じて処理します。

Claude APIにおけるスキル使用の詳細（必須前提条件、ヘッダーその他の情報を含む）については、公式ドキュメントを参照してください。

この例では、以下のコードがClaude APIにリモートWeb MCPアクセスと対象タスク用のスキルを提供します：

# pip install anthropic
import anthropic

# 実際のAPIキーに置き換えてください
ANTHROPIC_API_KEY = "<YOUR_ANTHROPIC_API_KEY>"
BRIGHT_DATA_API_KEY = "<YOUR_BRIGHT_DATA_API_KEY>"

# pptxスキルで作成されたファイルIDを抽出する関数
def extract_file_ids(response):
    file_ids = []
    for item in response.content:
        if item.type == "bash_code_execution_tool_result":
            content_item = item.content
            if content_item.type == "bash_code_execution_result":
                for file in content_item.content:
                    if hasattr(file, "file_id"):
                        file_ids.append(file.file_id)
    return file_ids

# Anthropicクライアントを初期化してClaude APIに接続
client = anthropic.Anthropic(
    api_key=ANTHROPIC_API_KEY)


# Bright Data Web MCPリモート接続設定を定義
web_mcp_server = {
    "type": "url",
    "url": f"https://mcp.brightdata.com/sse?token={BRIGHT_DATA_API_KEY}&pro=1", # Pro Modeはオプション（&pro=1）
    "name": "bright-data-web-mcp"
}

# 公式「pptx」スキルの設定
container = {
    "skills": [
        {
            "type": "anthropic",
            "skill_id": "pptx",
            "version": "latest"
        }
    ]
}

# Web MCPツールとスキルの両方を使用するプロンプトを記述
prompt = """
このAmazonページから製品詳細をウェブスクレイピングしてください:
"https://www.amazon.com/Medicube-Zero-Pore-Pads-Dual-Textured/dp/B09V7Z4TJG/"
取得したデータを使用して、製品をプレゼンテーションするためのPowerPointファイルを生成してください。
"""

# MCP連携でClaude APIにリクエスト送信
response = client.beta.messages.create(
    model="claude-sonnet-4-5-20250929",
    max_tokens=4096,
    messages=[{
        "role": "user",
        "content": prompt
    }],
    mcp_servers=[web_mcp_server],
    container=container,
    betas=["code-execution-2025-08-25", "skills-2025-10-02", "mcp-client-2025-04-04"], # Skills実行とMCP統合に必須
    tools=[{"type": "code_execution_20250825", "name": "code_execution"}] # Skills実行に必須
)

# ファイルIDを取得
file_ids = extract_file_ids(response)

# Files APIを使用してプレゼンテーションファイルをダウンロード
for file_id in file_ids:
    file_metadata = client.beta.files.retrieve_metadata(
        file_id=file_id,
        betas=["files-api-2025-04-14"]
    )
    file_content = client.beta.files.download(
        file_id=file_id,
        betas=["files-API-2025-04-14"]
    )

    # プレゼンテーションをディスクに保存
    file_content.write_to_file(file_metadata.filename)
    print(f"ダウンロードしたプレゼンテーション: {file_metadata.filename}")

出力の分析

上記スクリプトの結果はPowerPointプレゼンテーションとなります。Excelで開くか、以下のようにDriveに読み込むと、次のような結果が表示されます：
The resulting presentation
ご覧の通り、出力は非常に印象的です。ただし、スキル実行（特にファイル生成時）では、プロンプト実行中に複数のステップが必要になる場合があります。これによりトークンを大量に消費し、コストが積み上がる可能性があります。今回のケースでは、この単一のAPI呼び出しで17.83ドルの費用が発生しました。スキルは慎重にご利用ください！

生成されたプレゼンテーションには、対象Amazon商品ページに表示される正確な商品データが含まれています：
The target Amazon product page
Amazonのウェブスクレイピングを試みたことがある方なら、Amazon CAPTCHAのようなボット対策により非常に複雑になることをご存知でしょう。Bright Data Web MCPのweb_data_amazon_productツールのおかげで、この問題は解決されました！

このツールはバックエンドでBright DataのAmazonスクレイパーに接続し、商品ページのJSON構造データを取得します。その後Claudeがpptxスキルを用いて、そのデータを視覚的に魅力的なプレゼンテーションに変換します。

ミッション完了！

Claude CodeでWeb MCPとスキルを使用する方法

Claude CodeでBright DataのWeb MCPツールとスキルを併用する方法を、以下の手順で学びましょう。

前提条件

このチュートリアルセクションを実践するには、以下の環境が整っていることを確認してください：

ローカルにインストール済みのClaude Code v1.0
Claudeアカウント（Pro、Max、Team、Enterpriseプランのいずれか）
有効なAPIキーを持つBright Dataアカウント。

本チュートリアルでは、Bright DataのWeb MCPがClaude Codeに既に設定済みであることを前提とします。

詳細な手順については、「Claude CodeとBright DataのWeb MCPの統合」ガイドを参照してください。必要な変更点は、APIキーの代わりにClaudeアカウントで認証を行うことです。

ステップ #1: スキルを追加する

ドキュメントで説明されている通り、Claude Codeは次の2か所でスキル（単なるフォルダ）を自動的に検索します：

グローバル:~/.claude/skills/(Windowsの場合:C:Users<ユーザー名>.claudeskills)
ローカル（プロジェクトベース）：プロジェクトフォルダ内の.claude/skills/

Claude Codeプロジェクトでデフォルトのスキルを利用したい場合は、プロジェクトのローカル.claude/skills/フォルダにクローンしてください：

git clone https://github.com/anthropics/skills.git .claude/skills/

クローン後、プロジェクトフォルダからClaude Codeを起動してスキルを読み込みます。これで完了です！

ステップ #2: スキルの統合を確認する

現時点では、Claude Codeには利用可能なスキルを一覧表示する専用コマンドは提供されていません。ロードされているスキルを確認するには、以下のようなプロンプトを記述するだけで済みます：

利用可能なスキルをすべてリストアップ

結果は以下のような表示になります：
The Skills returned by Claude Code
.claude/skillsフォルダからAnthropicのデフォルトスキルが全て正常に読み込まれたことが確認できました。素晴らしい！

ステップ #3: Claude Code におけるスキル + Web MCP ツール

これでClaude Codeにプロンプトを提示するたびに、Web MCPツールとエージェントスキルの両方にアクセスできるようになります。例えば、次のプロンプトを試してみてください：

以下の記事のMarkdown版を取得してください：
"https://www.businessinsider.com/rise-of-vibe-working-coding-microsoft-openai-2025-10"
記事を読み「vibe coding」の概念を理解してください。理解した内容に基づき、開発者Slackチャンネルで共有するのに適した短く軽量なミームGIFを作成してください。

上記のプロンプトをClaude Codeで実行すると、以下の結果が得られます：
Task execution in Claude Code
ClaudeCodeはscrape_as_markdownツールで記事内容を抽出し、内容を理解した上でslack-gif-creatorスキルを適用してGIFを生成します。

生成されたGIFでは「vibe coding」と「still actual work」が交互に表示され、遊び心をもって両者が実は同一であることを示唆しています。出来上がったアニメーションGIFは非常に楽しい仕上がりです：
The resultign GIF
さらに、わずか32KBなのでSlackでの共有に最適です。素晴らしい！