--- title: "opencodeでBright DataのBright Data MCPをCLIで" slug: opencode-with-web-mcp date: 2025-08-26T08:13:43+00:00 modified: 2025-11-04T08:46:03+00:00 permalink: https://brightdata.jp/blog/ai/opencode-with-web-mcp type: blog --- [ ブログ ](https://brightdata.jp/blog "ブログ") / [AI](https://brightdata.jp/blog/ai) [AI](https://brightdata.jp/blog/ai) # opencodeでBright DataのBright Data MCPをCLIで Bright DataのWeb MCPに接続することで、opencodeの機能を拡張する方法をご紹介します。このチュートリアルに従って、端末でリアルタイムのWebデータを抽出してください。 3 分読 [ ![Antonello Zanini](https://media.brightdata.jp/2022/12/Antonello-Zanini-2-50x50.jpg) ](https://brightdata.com/blog/authors/antonello-zanini) [Antonello Zanini Technical Writer ](https://brightdata.com/blog/authors/antonello-zanini) ![Opencode × Bright Data MCP](https://media.brightdata.jp/2025/08/Opencode%E2%80%AF%C3%97%E2%80%AFBright%E2%80%AFData-MCP.png) このチュートリアルでは - opencodeとは何か、どのような機能を提供するのか、なぜCrushと混同してはいけないのか。 - ウェブ・インタラクションやデータ抽出機能で拡張することで、どのようにさらにリソースを増やすことができるか。 - opencodeをCLIでBright Data MCPサーバーに接続し、強力なAIコーディングエージェントを作成する方法。 さあ、飛び込もう！ ## opencodeとは？ [opencodeは](https://opencode.ai/)、ターミナル用に構築されたオープンソースのAIコーディングエージェントです。特に、以下のように動作します： 1. CLIのTUI[（ターミナル・ユーザー・インターフェース](https://github.com/rothgar/awesome-tuis)）。 2. Visual Studio CodeやCursorなどのIDE統合。 3. GitHubエクステンション。 より詳細には、opencodeを使用すると、次のことができます： - レスポンシブでテーマ設定可能なターミナルインターフェースの設定。 - LLMに正しいLSP[（言語サーバプロトコル](https://microsoft.github.io/language-server-protocol/)）をロードする。 - 同じプロジェクトで複数のエージェントを並行して実行する。 - 参照やデバッグのためにセッションへのリンクを共有する。 - Anthropicでログインし、Claude ProまたはMaxアカウントを使用することができます。また、[Models.dev](https://models.dev/)（ローカルモデルを含む）を介して他の75以上のLLMプロバイダと統合することもできます。 ご覧の通り、CLIはLLMに依存しません。このCLIは主にGoとTypeScriptで開発されており、[GitHubでは](https://github.com/sst/opencode)すでに[2万以上のスターを](https://github.com/sst/opencode)獲得している。 **注**：このテクノロジーは、”opencode “というオリジナルの名前を持つ別のプロジェクト、Crushと混同してはならない。もしCrushをお探しなら、[Bright Data MCPとCrushの](/blog/ai/crush-cli-with-web-mcp)統合に関するガイドをご覧ください。 ## Bright DataのBright Data MCPをopencode TUIに統合する理由 最終的にどのLLMをopencodeに設定したとしても、それらはすべて同じ制限を共有しています。LLMの知識は静的なものであり、トレーニングされたデータはスナップショットであり、すぐに古くなります。これは、ソフトウェア開発のような動きの速い分野では特に当てはまります。 では、opencode CLIアシスタントに次のような能力を与えることを想像してみてください： - 新鮮なチュートリアルやドキュメントを取り込む。 - コードを書きながらライブガイドを参照する。 - ローカルファイルをナビゲートするのと同じように、ダイナミックなウェブサイトを簡単にブラウズする。 これらの機能は、[Bright DataのBright Data MCPに](/ai/mcp-server)接続することで実現できます。 Bright Data MCPは、リアルタイムのWebインタラクションとデータ収集のために設計された60以上のAI対応ツールへのアクセスを提供します。 Bright Data MCPで最も利用されている2つのツール[（無料層でも利用可能](https://docs.brightdata.com/mcp-server/overview)）です： **ツール****ツール**`scrape_as_markdown`高度な抽出オプションで1つのウェブページからコンテンツをスクレイピングし、結果のデータをMarkdownで返します。ボット検知やCAPTCHAをバイパスすることができます。`サーチエンジン`Google、Bing、Yandexから検索結果を抽出する。SERPデータをJSONまたはMarkdown形式で返す。この2つに加えて、ウェブページと対話し（例えば、`scraping_browser_click`）、LinkedIn、Amazon、Yahoo Finance、TikTokなどの複数のドメインから構造化データを収集するための[55以上の特化したツールが](https://github.com/brightdata/brightdata-mcp/blob/main/assets/Tools.md)ある。 Bright Data MCPがopencodeの中でどのように機能するかをチェックする時間だ！ ## opencodeをBright DataのBright Data MCPに接続する方法 ローカルにopencodeをインストールして設定し、Bright DataのBright Data MCPサーバーと統合する方法をご紹介します。その結果、60以上のWebツールにアクセスできる拡張コーディングエージェントになります。そのCLIエージェントをサンプルタスクで使用します： 1. LinkedInの製品ページをオンザフライでスクレイピングし、実世界のプロファイルデータを収集する。 2. データをJSONファイルにローカルに保存する。 3. Node.jsスクリプトを作成し、データをロードして処理する。 以下の手順に従ってください！ **注**：このチュートリアル・セクションは、CLI経由でopencodeを使用することに焦点を当てています。しかし、[ドキュメントに記載されているように](https://opencode.ai/docs/ide/)、IDEに直接統合するために同様のセットアップを使用することができます。 ### 前提条件 始める前に、以下の環境があることを確認してください： - macOSまたはLinux環境（Windowsユーザーは[WSLを使用する](https://learn.microsoft.com/en-us/windows/wsl/install)必要があります）。 - [Claude Pro または Max のサブスクリプション](https://claude.ai/settings/billing?action=subscribe)、または[資金と API キーを持つ Anthropic アカウント](https://www.anthropic.com/pricing)（このチュートリアルでは Anthropic API キーを使用しますが、[他のサポートされている LLM を](https://opencode.ai/docs/providers/)設定することもできます）。 - [ローカルにインストールされたNode.js](https://nodejs.org/en/download)（最新のLTSバージョンを推奨します）。 - Bright DataアカウントとAPIキーの準備。 Bright Dataのセットアップについては、次のステップで説明しますので、今は心配しないでください。 次に、オプションですが、あると便利な予備知識をご紹介します： - [MCPの仕組みについての](https://docs.anthropic.com/en/docs/mcp)一般的な理解。 - Bright DataのBright Data MCPとそのツールにある程度精通していること。 ### ステップ#1: opencodeのインストール 以下のコマンドを使用して、Unixベースのシステムにopencodeをインストールします： ```none curl -fsSL https://opencode.ai/install | bash ``` これにより、`https://opencode.ai/install`からインストーラーがダウンロードされ、それを実行してマシンに opencode をセットアップします。[他のインストール・オプションも試してみて](https://opencode.ai/docs/#install)ください。 を使ってopencodeが動作することを確認してください： ```none opencode ``` もし “missing executable “や “unrecognized command “エラーが発生したら、マシンを再起動してもう一度試してください。 すべてが期待通りに動けば、このように表示されるはずです： ![The opencode TUI](https://media.brightdata.com/2025/08/image-134-1024x472.png)これでopencodeが使えるようになりました。 ### ステップ2：LLMの設定 opencodeは多くのLLMに接続できますが、推奨モデルはAnthropicのものです。Claude MaxまたはProサブスクリプション、またはAnthropicアカウントと資金、APIキーがあることを確認してください。 以下のステップでは、APIキーを介してAnthropicアカウントにopencodeを接続する方法を説明しますが、[他のサポートされているLLMインテグレーションでも動作します](https://opencode.ai/docs/providers/#directory)。 `exit`コマンドでopencodeのウィンドウを閉じ、[LLMプロバイダで認証を開始](https://opencode.ai/docs/#configure)します： ```none opencode auth login ``` AIモデルプロバイダの選択を求められます： ![Selecting the “Anthropic” provider in opencode](https://media.brightdata.com/2025/08/image-135-1024x266.png)`Enter`キーを押して “Anthropic “を選択し、”Manually enter API key “オプションを選択します： ![Selecting the “Manually enter API key” option](https://media.brightdata.com/2025/08/image-136-1024x180.png)AnthropicのAPIキーを貼り付け、Enterキーを押します： ![LLM integration](https://media.brightdata.com/2025/08/image-137-1024x222.png)これでLLMの設定は完了です。opencodeを再起動し、[`/models`](https://opencode.ai/docs/tui/#models)コマンドを起動すると、Anthropicモデルを選択できるようになります。例えば、”Claude Opus 4.1 “を選択します： ![Selecting the “Claude Opus 4.1” model](https://media.brightdata.com/2025/08/image-138-1024x538.png)`Enterを押して`ください： ![Selecting the “Claude Opus 4.1” model from Anthropic](https://media.brightdata.com/2025/08/image-139-1024x459.png)opencodeが、設定されたAnthropic Claude Opus 4.1モデルを使ってどのように動作しているかに注目してください。よくできました！ ### ステップ3：opencodeプロジェクトを初期化する `cd`コマンドを使ってプロジェクト・ディレクトリに移動し、そこでopencodeを起動します： ```none cd 。 opencode ``` `init`コマンドを実行して、[opencodeプロジェクトを初期化](https://opencode.ai/docs/#initialize)します。出力はこのようになるはずです： ![The /init command output](https://media.brightdata.com/2025/08/image-140-1024x474.png)具体的には、`/init`コマンドは[`AGENTS.md`](https://opencode.ai/docs/rules/)ファイルを作成します。[`CLAUDE.mdや`](https://docs.anthropic.com/en/docs/claude-code/settings#key-points-about-the-configuration-system) [Cursorのルールと](https://docs.cursor.com/en/context/rules)同様に、これはopencodeにカスタム命令を提供します。これらの命令はLLMのコンテキストに含まれ、特定のプロジェクト用に動作をカスタマイズします。 IDE（例えばVisual Studio Code）で`AGENTS.md`ファイルを開いてください： ![Exploring the AGENTS.md file in VS Code](https://media.brightdata.com/2025/08/image-141-1024x586.png)プロジェクト・ディレクトリ内でAIコーディング・エージェントがどのように動作するかを指示するために、ニーズに応じてカスタマイズしてください。 **ヒント**:`AGENTS.md`ファイルは、プロジェクトフォルダの Git リポジトリにコミットしてください。 ### ステップ #4: Bright DataのBright Data MCPをテストする あなたのopencodeエージェントをBright Data MCPサーバーと統合する前に、このサーバーがどのように動作し、あなたのマシンで実行できるかを理解することが重要です。 まだの場合は、[Bright Dataのアカウントを作成する](/?hs_signup=1)ことから始めてください。すでにアカウントをお持ちの場合は、[ログインして](/cp/start)ください。簡単なセットアップのために、[アカウントの “MCP “ページを見てください](/cp/mcp)： ![The Bright Data “MCP” page in your account](https://media.brightdata.com/2025/08/image-142-1024x548.png)そうでなければ、以下の手順に従ってください。 [Bright Data APIキーを生成してください](https://docs.brightdata.com/api-reference/authentication#generating-an-api-key%3A)。すぐに必要になりますので、安全な場所に保管してください。ここでは、統合がより簡単になるように、管理者権限を持つAPIキーを使用していると仮定します。 ターミナルで、[`@brightdata/mcp`](https://www.npmjs.com/package/@brightdata/mcp)パッケージを使用してBright Data MCPをグローバルにインストールします： ```none npm install -g @brightdata/mcp ``` 以下のBashコマンドで、ローカルのMCPサーバーが動作することを確認する： ```none API_TOKEN="" npx -y @brightdata/mcp ``` API\_TOKEN=`"`“npx -y @brightdata/mcp.コマンドは必要な`API_TOKEN`環境変数を設定し、`@brightdata/mcp`パッケージを通してBright Data MCPを起動します。 成功した場合、このようなログが表示されます： ![Bright Data MCP startup logs](https://media.brightdata.com/2025/08/image-143-1024x157.png)初回起動時に、パッケージは自動的にBright Dataアカウントに2つのデフォルトゾーンを設定します： - `mcp_unlocker`：[mcp\_unlocker: Web Unlocker](/products/web-unlocker)用のゾーンです。 - `mcp_browser`：mcp\_unlocker: Web Unlocker用のゾーン。 これら2つのゾーンは、Bright Data MCPが公開するすべてのツールを動かすために必要です。 上記2つのゾーンが作成されたことを確認するには、Bright Dataアカウントにログインします。ダッシュボードで[“Proxies & Scraping Infrastructure](/cp/zones)” ページに移動します。そこに、テーブル内の2つのゾーンが表示されているはずです： ![The mcp_unlocker and mcp_browser zones created by the Bright Data MCP at startup](https://media.brightdata.com/2025/08/image-144-1024x539.png)**注意**: API トークンに Admin 権限がない場合、これらのゾーンは自動的に作成されない可能性があります。その場合は、[パッケージのGitHubページで説明されているように](https://github.com/brightdata/brightdata-mcp?tab=readme-ov-file#-account-setup)、ダッシュボードで手動で設定し、環境変数で名前を指定することができます。 デフォルトでは、MCPサーバーは`search_engineと` `scrape_as_markdown`ツール[（無料で使用](/blog/ai/web-mcp-free-tier)できます！）のみを公開しています。 ブラウザの自動化や構造化データ・フィードの取得といった高度な機能をアンロックするには、Proモードを有効にする必要があります。そのためには、MCPサーバーを起動する前に環境変数`PRO_MODE=trueを`設定してください： ```none API_TOKEN="" PRO_MODE="true" npx -y @brightdata/mcp ``` **重要**：Proモードを有効にすると、60以上のすべてのツールにアクセスできるようになります。一方、Proモードは無料ティアには含まれず、追加料金が発生します。 完璧です！Bright Data MCPサーバーがあなたのマシンで動作することを確認しました。これからopencodeがサーバーを起動し、サーバーに接続するように設定するので、サーバープロセスを停止してください。 ### ステップ#5: Bright Data MCPをopencodeに統合する opencodeは[設定ファイルの`mcp`エントリを介して](https://opencode.ai/docs/mcp-servers/)MCPの統合をサポートしています。サポートされている[設定方法は](https://opencode.ai/docs/config/)2つあることに注意してください： - **グローバルに**：グローバルに`：~/.config/opencode/opencode.jsonの`ファイルを通して。グローバル設定はテーマ、プロバイダー、キーバインドなどの設定に便利です。 - **プロジェクトごと**：プロジェクトのディレクトリにあるローカルの`opencode.json`ファイルを通して。 MCP統合をローカルで設定したいとします。まず、作業ディレクトリ内に`opencode.json`ファイルを追加します。 そのファイルを開き、以下の行が含まれていることを確認してください： ```none { "$schema"："https://opencode.ai/config.json"、 "mcp"：{ "brightData"：{ "type"："ローカル": true "enabled": true、 "コマンド": [ "npx"、 "-y", "@brightdata/mcp" ], "environment"：{ "API_TOKEN"：""、 "PRO_MODE"："true" } } } } ``` `を`、先ほど生成してテストしたBright Data APIキーに置き換えてください。 この構成では - `mcp`オブジェクトは、opencode に外部 MCP サーバの起動方法を指示します。 - `brightData`エントリは、Bright Data MCP を起動するために必要なコマンド`(npx`) と環境変数を指定します。`(PRO_MODEは`オプションですが、有効にすると利用可能なツールのフルセットがアンロックされます)。 言い換えると、上記の`opencode.json`コンフィギュレーションは、先に定義した環境変数で同じ`npx`コマンドを実行するようにCLIに指示します。これにより、opencode は Bright Data MCP サーバーを起動し、接続することができます。 この記事を書いている時点では、MCPサーバーの接続を確認する専用のコマンドや利用可能なツールはありません。それでは、テストに移りましょう！ ### ステップ#6: opencodeでタスクを実行する 強化されたopencodeコーディングエージェントのウェブ機能をチェックするには、以下のようなプロンプトを起動します： ```none https://it.linkedin.com/in/antonello-zanini "をスクレイピングし、結果のデータをローカルの "profile.json "ファイルに保存します。次に、JSON ファイルを読み込み、その内容を返す基本的な Node.js スクリプトをセットアップします。 ``` これは、実際のデータを収集し、それをNode.jsスクリプトで使用するという、実際のユースケースを表している。 opencodeを起動し、プロンプトを入力し、`Enter`キーを押して実行する。このような動作が表示されるはずだ： ![Task execution in opencode](https://media.brightdata.com/2025/08/image-145-1024x533.png)GIFはスピードアップされていますが、これはステップ・バイ・ステップで起こることです： 1. クロード・オーパスのモデルはプランを定義する。 2. プランの最初のステップは、リンクトインのデータを取得することです。これを行うために、LLMは適切なMCPツール`（web_data_linkedin_person_profile`、CLIでは`Brightdata_web_data_linkedin_person_profileとして`参照）をプロンプトから抽出された正しい引数で選択`します（https://it.linkedin.com/in/antonello-zanini）`。 3. LLMはLinkedInスクレイピングツールを介してターゲットデータを収集し、プランを更新します。 4. データはローカルの`profile.json`ファイルに保存される。 5. `profile.jsonから`データを読み込んで印刷するNode.jsスクリプト（`readProfile.js`）が作成される。 6. 実行されたステップの概要と、作成された Node.js スクリプトを実行する指示が表示されます。 この例では、タスクが生成する最終出力はこのようになります： ![The final instructions produced by opencode](https://media.brightdata.com/2025/08/image-146-1024x470.png)インタラクションの最後には、作業ディレクトリに以下のファイルが含まれているはずです： ```none ├── AGENTS.md ├── opencode.json ├── profile.json # <-- CLIによって作成される └─ readProfile.js # <-- CLIによって作成される ``` すばらしい！それでは、生成されたファイルに意図したデータとロジックが含まれているかどうか確認してみましょう。 ### ステップ#7: 出力の確認とテスト Visual Studio Codeでプロジェクトディレクトリを開き、`profile.json`ファイルを調べることから始めましょう： ![Exploring profile.json in VSC](https://media.brightdata.com/2025/08/image-147-1024x756.png)**重要**：`profile.jsonの`データは、専用の`web_data_linkedin_person_profile`MCPツールを介してBright Data[LinkedIn Scraperが](/products/web-scraper/linkedin)収集した本物のLinkedInデータです。幻覚や、クロードモデルによって生成されたでっち上げのコンテンツではありません！ プロンプトに記載されているLinkedInの公開プロフィールページを検査することで確認できるように、LinkedInのデータは正常に取得された： ![The input LinkedIn page](https://media.brightdata.com/2025/08/image-148-1024x550.png)**注**：[LinkedInのスクレイピングは](/blog/各種ご利用方法/linkedin-scraping-guide)、その洗練されたアンチボットプロテクションのために悪名高く困難です。通常の LLM では、このタスクを確実に実行することはできません。これは、Bright Data MCP の統合により、コーディングエージェントがいかに強力になったかを示しています。 次に、`readProfile.js`ファイルを見てください： ![Exploring readProfile.json in VSC](https://media.brightdata.com/2025/08/image-149-1024x772.png)このコードでは、`profile.jsonから`LinkedInのプロフィールデータを読み込むために、`readProfileData()`関数が定義されていることに注目してください。この関数は、すべての詳細情報を含むプロフィールデータを表示するために呼び出されます。 スクリプトをテストします： ```none ノード readProfile.js ``` 出力されるはずです： ![The readProfile.js output](https://media.brightdata.com/2025/08/image-150-1024x621.png)生成されたスクリプトが計画通りにLinkedInのスクレイピングされたデータをどのように表示するかを見てください。 ミッション完了！さまざまなプロンプトを試して、CLIで直接[LLM駆動の高度なデータワークフローを](/ai/web-access)テストしてください。 ## まとめ この記事では、opencodeとBright DataのBright Data MCP[（現在、無料ティアを提供中！](/blog/ai/web-mcp-free-tier)）を接続する方法を見た。その結果、ウェブからデータを抽出して対話することができる、ツール豊富なAIコーディングエージェントができました。 より複雑なAIエージェントを構築するには、[Bright DataのAIインフラストラクチャで](/ai)利用可能なあらゆるサービスや製品をご利用ください。これらのソリューションは、CLI統合を含め、様々な[エージェントシナリオを](/ai/web-access)サポートします。 Bright Dataに無料でサインアップして、AI対応ウェブツールの実験を始めてください！ お問い合わせ無料トライアル![google social icon](/wp-content/themes/brightdata/assets/images/ic_google.svg) 目次 日本企業向けデータソリューション 日本のトップ企業が信頼するスケーラブルなウェブデータプラットフォーム。日本語24時間サポート、GDPR・個人情報保護法準拠、日本企業20社以上の導入実績。 [詳細を見る](https://brightdata.jp/solutions/data-solutions-for-japanese-companies "詳細を見る") [ ](https://news.ycombinator.com/submitlink?t=opencode%E3%81%A7Bright+Data%E3%81%AEBright+Data+MCP%E3%82%92CLI%E3%81%A7&u=https://brightdata.jp/blog/ai/opencode-with-web-mcp) [ ](https://www.linkedin.com/shareArticle?mini=true&title=opencode%E3%81%A7Bright+Data%E3%81%AEBright+Data+MCP%E3%82%92CLI%E3%81%A7&url=https://brightdata.jp/blog/ai/opencode-with-web-mcp) [ ](http://www.reddit.com/submit?title=opencode%E3%81%A7Bright+Data%E3%81%AEBright+Data+MCP%E3%82%92CLI%E3%81%A7&url=https://brightdata.jp/blog/ai/opencode-with-web-mcp) ## あなたは下記にもご興味がおありかもしれません [ ![OpenHuman with Bright Data](https://media.brightdata.jp/2026/09/OpenHuman-with-Bright-Data.png) ](https://brightdata.jp/blog/ai/openhuman-with-bright-data "Bright Data CLIを通じたOpenHumanにおける本番対応ウェブアクセス") [AI ![Antonello Zanini](https://media.brightdata.jp/2022/12/Antonello-Zanini-2-50x50.jpg) Antonello Zanini Technical Writer ### Bright Data CLIを通じたOpenHumanにおける本番対応ウェブアクセス Bright Data CLIをOpenHumanに統合して、AIエージェント向けの本番対応ウェブアクセスとデータ収集を実現します。 09-Sep-2026 3 分読 ](https://brightdata.jp/blog/ai/openhuman-with-bright-data) [ ![Multimodal Web Scraping with MiniMax](https://media.brightdata.jp/2026/09/Multimodal-Web-Scraping-with-MiniMax.png) ](https://brightdata.jp/blog/%e3%82%a6%e3%82%a7%e3%83%96%e3%83%87%e3%83%bc%e3%82%bf/multimodal-web-scraping-with-minimax "MiniMaxによるマルチモーダルウェブスクレイピング") [ウェブデータ ![Antonello Zanini](https://media.brightdata.jp/2022/12/Antonello-Zanini-2-50x50.jpg) Antonello Zanini Technical Writer ### MiniMaxによるマルチモーダルウェブスクレイピング Bright Data Web UnlockerとMiniMax M3ビジョンを組み合わせて、画像やウェブページのスクリーンショットから構造化データを抽出します。 09-Sep-2026 1 分読 ](https://brightdata.jp/blog/%e3%82%a6%e3%82%a7%e3%83%96%e3%83%87%e3%83%bc%e3%82%bf/multimodal-web-scraping-with-minimax) [ ![The 10 Best CLI Tools for Codex in 2026](https://media.brightdata.jp/2026/08/The-10-Best-CLI-Tools-for-Codex-in-2026.png) ](https://brightdata.jp/blog/ai/best-cli-tools-for-codex "2026年版 Codex向けCLIツール10選 – テスト＆ランキング") [AI ![Daniel Shashko](https://media.brightdata.jp/2022/04/Daniel-Shashko-2-50x50.png) Daniel Shashko Web Data & AI Expert ### 2026年版 Codex向けCLIツール10選 – テスト＆ランキング Codexをより速く、より有能にする10のCLIツール。サンドボックス内から実際のウェブアクセスを提供するBright Data CLIから始まります。 06-Sep-2026 4 分読 ](https://brightdata.jp/blog/ai/best-cli-tools-for-codex)