ZedのAIネイティブエディターをBright DataのWeb MCPに接続し、開発環境内でリアルタイムWebアクセス、クリーンなデータ抽出、Web対応AIワークフローを実現する方法を学びましょう。
このチュートリアルでは以下を学びます：
- Zedの定義と、そのAIネイティブ・エージェンティック編集モデルが現代的なコードエディタ内でどのように機能するか。
- 正確なAI支援開発に不可欠な、リアルタイムWebインタラクションとデータ抽出機能によるZedの拡張理由。
- ZedをBright DataのWeb MCPに接続し、エディター内で直接ライブ公開ウェブデータを取得・利用できるウェブ対応AIエージェントを実現する方法。
さあ、始めましょう！
Zedとは？
Zedは、高速性、コラボレーション、AI支援開発を目的に設計された現代的な高性能コードエディタです。レスポンス性と低遅延に重点を置き、大規模なコードベースでも即座かつ滑らかなコーディング体験を実現するよう一から構築されています。
Zedは完全にRustで記述され、複数のCPUコアとGPUアクセラレーションを効率的に活用するアーキテクチャを採用しています。この設計により、高速な起動時間、滑らかなUI操作、最小限のタイピング遅延を実現し、開発者体験の中核を成す要素を提供します。
ZedはmacOS、Linux、Windowsで利用可能であり、プラットフォームをまたいだ一貫したネイティブ体験を提供します。
Zedには最初から、以下のような幅広いコア開発者機能が含まれています：
- ステージング、コミット、プル、プッシュ、差分表示のためのネイティブGitサポート
- デバッグアダプタプロトコル（DAP）に基づくデバッグサポート。
- 複数のプログラミング言語に対応した言語サーバープロトコル（LSP）サポート。
- マルチバッファ編集：単一ビュー内で異なるファイルのコンテンツを作成・編集可能。
- 共有編集、チャット、画面共有などの組み込みコラボレーション機能。
- モーダルワークフローを好む開発者向けのVimスタイルモーダル編集。
Bright Data Web MCPでZedを強化する理由
Zed内で使用するAIモデルに関わらず、LLMには重大な制約があります：LLMはウェブへのリアルタイムアクセスを持たないため、応答は特定の時点のスナップショットであるトレーニングデータに基づきます。この情報は急速に陳腐化する可能性があります。
この制限は、進化するドキュメント、ツール、フレームワークを扱う際に明らかになります。エディタ内のAIアシスタントは、最新情報を検証したり、ウェブサイトを閲覧したり、実際のコンテンツを独自に抽出したりすることはできません。
ここで、ZedのAIエージェントに以下の機能を拡張できると想像してみてください：
- ライブドキュメントページを読む
- 最新のガイドやリファレンスを取得する
- 実際のウェブサイトを閲覧しコンテンツを抽出する
これらの機能は、ZedをBright Data Web MCPに接続することで実現します。Bright DataのWeb MCPは、同社のAIインフラストラクチャを基盤とする60以上のAI対応ツールを提供し、AIエージェントによるリアルタイムのウェブ操作とデータ取得を可能にします。
無料プランでも利用可能な、最も一般的に使用される2つのツールは以下の通りです：
| ツール | 説明 |
|---|---|
scrape_as_markdown |
ウェブページからコンテンツを抽出し、ボット対策やCAPTCHAを処理したクリーンなMarkdown形式で返します。 |
search_engine |
Google、Bing、Yandex から検索結果を JSON または Markdown 形式で取得します。 |
コアツールに加え、Web MCPにはブラウザ操作や構造化データ抽出のための高度なオプションが多数含まれています。無料プランでは基本ツールが利用可能で、Proモードを有効化するとより高度なユースケースに対応する全機能が解放されます。
Bright Data Web MCPをZedに接続することで、AIエージェントは静的な知識ではなくライブウェブコンテンツを操作できるようになり、エディター内でより正確で信頼性の高い支援を提供します。
Bright Data Web MCPとZedの連携方法
このセクションでは以下の操作を行います：
- Zed内でBright Data Web MCPをMCPサーバーとして設定する
- Bright Data APIトークンを使用したMCPサーバーの認証
- ZedのAIエージェントがMCP経由でライブWebコンテンツにアクセスできるようにする
- 統合が正しく機能していることを確認する
以下の手順に従って開始してください！
前提条件
開始前に、以下の環境が整っていることを確認してください：
- サポート対象のオペレーティングシステム（macOS、Linux、またはWindows）
- Zedがインストールされ、実行されていること
- Node.jsがインストールされていること（最新の LTS を推奨）
- APIトークン付きのBright Dataアカウント
Bright Dataの事前設定は不要です。必要な設定は後述の各セクションで段階的に説明します。
必須ではありませんが、以下の事前知識があると便利です：
- Model Context Protocol（MCP）の基本的な仕組み
- Bright Data Web MCPとその利用可能なツールに関する一般的な知識
ステップ #1: Zed のインストールと起動
公式サイトからZedをダウンロードし、お使いのOS（macOS、Linux、Windows）に合わせてインストールしてください。
インストール後、アプリケーションメニューからZedを開き、エディタがエラーなく起動することを確認してください。
メインエディタインターフェースが表示され、設定パネルを開けるはずです。Zedが正常に起動したら、次のステップに進む準備が整っています。
ステップ2: ZedでAIおよびエージェント編集を有効化する
Zedで設定を開き、LLMプロバイダーセクションに移動します。
Zed AIにサインインするか、Anthropic、Google AI、Amazon Bedrockなどの対応プロバイダーを設定して、AI機能を活用できるようにします。
プロバイダーが有効になったら、エディターに戻り、AI またはチャットパネルを開いて、プロンプトが受け入れられ、応答が生成されることを確認します。AI がエディター内で応答する場合、エージェント編集は正常に有効化されています。
ステップ #3: Bright Data Web MCP をローカルに設定
ZedのAIエージェントにリアルタイムWebアクセスを有効化するには、ローカルマシンにBright Data Web MCPを設定する必要があります。このMCPサーバーはAIエージェントとライブWebデータの間のブリッジとして機能します。
まず、Bright DataダッシュボードからBright Dataアカウントを作成します。既にアカウントをお持ちの場合は、ログインしてください。
迅速な設定には、アカウント内の「MCP」ページを開き、指示に従ってください：
以下の手順に従ってください：
BrightDataダッシュボードからAPIトークンを生成し、安全に保管してください。このトークンはWeb MCPサーバーがリクエストを認証し、Bright Dataのウェブツールにアクセスするために使用されます。
このチュートリアルでは、APIトークンが唯一の認証情報となります。
Bright Data Web MCPはNode.jsを使用したローカルサーバーとして動作します。ターミナルで以下のコマンドを実行し、グローバルにインストールしてください：
npm install -g @brightdata/mcpこれにより、Zedが後で接続するWeb MCPパッケージがインストールされます。
Web MCPサーバーを起動するには以下を実行します：
API_TOKEN="YOUR_BRIGHT_DATA_API_TOKEN" npx -y @brightdata/mcpYOUR_BRIGHT_DATA_API_TOKEN を実際の API トークンに置き換えてください。
サーバーが正常に起動すると、MCPサーバーが実行中でリクエストを受け付ける準備が整ったことを示すログメッセージが表示されます。
初回実行時、Bright Data Web MCPサーバーはお客様のBright Dataアカウント内に2つの必須ゾーンを自動作成します：Web Unlocker用と Browser API用です。これらのゾーンはWeb MCPが提供するツールをサポートするために内部で使用されます。
Bright Data ダッシュボードの「プロキシとスクレイピングインフラ」セクションで作成を確認できます。API トークンに管理者アクセス権がない場合、ゾーンを手動で作成し、環境変数を通じて参照する必要があるかもしれません。
デフォルトでは、Web MCPは無料プランで利用可能なsearch_engineとscrape_as_markdownツールのみを公開します。Proモードを有効にすると、高度なブラウザ自動化を含む全ツールが利用可能になりますが、追加料金が発生する場合があります。
ブラウザ自動化や構造化データ抽出などの高度な機能を利用するには、Web MCPサーバー起動前にPRO_MODE=trueを設定してProモードを有効化してください。
API_TOKEN="<YOUR_BRIGHT_DATA_API>" PRO_MODE="true" npx -y @brightdata/mcpサーバーが正常に動作していることを確認したら、一旦停止してください。次のステップで、ZedがWeb MCPサーバーに自動的に接続して起動するよう設定されます。
ステップ #4: Zed で Bright Data Web MCP を設定する
Zedの「設定」を開き、「Model Context Protocol (MCP) サーバー」セクションに移動します。「サーバーを追加」をクリックして新しいローカルMCPサーバーを登録します。
プロンプトが表示されたら、Web MCPパッケージを実行するコマンド（npx @brightdata/mcp）を設定し、認証に必要な環境変数（API_TOKEN）を追加してBright Data MCPサーバーを定義します。設定を保存すると、ZedのAIエージェントがMCPサーバーを利用できるようになります。
追加後、Bright DataがMCPサーバーリストに表示され、ZedがAI支援ワークフロー中にWeb MCPへ接続可能になったことを示します。
MCPサーバーが有効化されると、ZedのAIエージェントはエディター内のAI支援ワークフロー中にBright DataのWebツールを利用できるようになります。
ステップ #6: Zed で実世界のタスクを実行
このステップでは、ZedのAIエージェントとBright Data Web MCPを組み合わせて、ライブWebコンテンツを取得し、ローカルに保存し、実際のデータに基づいて小さなスクリプトを生成します。
ZedのAIまたはチャットパネルを開きます（以前にAI応答をテストしたのと同じパネルです）
- プロンプトを入力する場所です
- コードを書くのではなく、ZedのAIエージェントと対話しています。
以下のプロンプトを正確にコピーしてZedに貼り付けます：
https://nodejs.org/en/docs のライブドキュメントページを取得
Bright Data MCPを使用して主要なドキュメントコンテンツを抽出し、クリーンなMarkdown形式に変換してください。抽出したコンテンツをdocs.mdとして保存します。次に、ドキュメントの短い要約を生成し、summary.mdとして保存します。最後に、docs.mdを読み込み最初の数行を出力するreadDocs.jsというシンプルなNode.jsスクリプトを作成します。プロンプトを送信後、次の動作を確認してください：
- AIエージェントが実行手順を説明または計画します
- ウェブアクセスが必要であると特定します
- Bright Data MCPツール（通常はscrape_as_markdown）を選択する
- Zedがツール実行の承認を求める場合があります
タスク完了後、生成されたファイルがプロジェクトディレクトリに存在することを確認してください。Markdownファイルを開き、ライブドキュメントページから抽出されたコンテンツが含まれていることを確認します。
生成されたスクリプトを実行すると、スクレイピングされたコンテンツのデータが出力され、ワークフローが正常に実行されたことを確認できます。
まとめ
このチュートリアルでは、ZedとBright Data Web MCPを統合し、AIネイティブエディタ内でリアルタイムWebインタラクションを実現する方法を学びました。Zedのエージェント型編集モデルとBright DataのWebツールを組み合わせることで、AIがライブコンテンツを取得し、ローカルに保存し、実際のデータに基づいて使用可能なコードやファイルを生成するワークフローを構築しました。
Bright DataのWeb MCPは、構造化され最新のウェブデータへのアクセスを提供することで、より信頼性が高く文脈を認識するAI支援開発ワークフローの構築を可能にします。このアプローチは静的知識への依存を減らし、AI生成出力の精度向上に寄与します。
より高度なエージェント型ユースケースを探求するには、Bright Dataプラットフォーム全体とそのAI対応ウェブデータソリューションをご覧ください。
無料のBright Dataアカウントから始め、Web MCPをさらに活用して独自のAI駆動開発ワークフローを構築してみてください。
