ZedのAIネイティブエディタをBright DataのWeb MCPに接続し、開発環境内でリアルタイムのウェブアクセス、クリーンなデータ抽出、ウェブ対応AIワークフローを有効にする方法を学びましょう。
このチュートリアルでは、以下のことを学びます：
- Zedとは何か、そしてそのAIネイティブなエージェント編集モデルが最新のコードエディタ内でどのように機能するか。
- 正確なAI支援開発のために、リアルタイムのウェブインタラクションとデータ抽出機能でZedを拡張することがなぜ重要なのか。
- ZedをBright DataのWeb MCPに接続して、エディタ内で直接ライブの公開ウェブデータを取得・利用できるウェブ対応AIエージェントを有効にする方法。
さっそく始めましょう！
Zedとは？
Zedは、スピード、コラボレーション、AI支援開発のために設計された最新の高性能コードエディタです。応答性と低レイテンシに焦点を当てて一から構築されており、大規模なコードベースでも即時かつ流暢なコーディング体験を目指しています。
ZedはRustで完全に書かれており、複数のCPUコアとGPUアクセラレーションを効率的に活用するように設計されています。この設計により、Zedは高速な起動時間、スムーズなUI操作、最小限のタイピングレイテンシを実現しており、これらは開発者体験の核心的な要素です。
ZedはmacOS、Linux、Windowsで利用可能で、プラットフォーム間で一貫したネイティブ体験を提供します。
Zedには、標準で以下を含む幅広いコア開発者機能が含まれています：
- ステージング、コミット、プル、プッシュ、差分表示のためのネイティブGitサポート。
- Debug Adapter Protocol（DAP）上に構築されたデバッグサポート。
- 複数のプログラミング言語向けのLanguage Server Protocol（LSP）サポート。
- 単一ビューで異なるファイルのコンテンツを構成・編集するためのマルチバッファ編集。
- 共有編集、チャット、画面共有などの組み込みコラボレーション機能。
- モーダルワークフローを好む開発者向けのVimスタイルモーダル編集。
Bright Data Web MCPでZedを強化する理由
Zed内でどのAIモデルを使用しても、重要な制限があります：LLMはウェブへのライブアクセスを持ちません。その応答はある時点のスナップショットを表すトレーニングデータに基づいており、すぐに古くなる可能性があります。
この制限は、進化するドキュメント、ツール、フレームワークを扱う際に明らかになります。エディタ内のAIアシスタントは、現在の情報を検証したり、ウェブサイトを閲覧したり、独自にリアルコンテンツを抽出したりすることができません。
ZedのAIエージェントを以下の機能で拡張することを想像してみてください：
- ライブドキュメントページの読み取り
- 最新のガイドとリファレンスの取得
- 実際のウェブサイトからのコンテンツの閲覧と抽出
これらの機能は、ZedをBright Data Web MCPに接続することで解放されます。Bright DataのWeb MCPは、Bright Dataの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に統合する方法
このセクションでは、以下のことを行います：
- Bright Data Web MCPをZed内のMCPサーバーとして設定する
- Bright Data APIトークンを使用してMCPサーバーを認証する
- ZedのAIエージェントがMCPを通じてライブウェブコンテンツにアクセスできるようにする
- 統合が正しく機能していることを確認する
始めるには以下の手順に従ってください！
前提条件
始める前に、以下のものが揃っていることを確認してください：
- サポートされているオペレーティングシステム（macOS、Linux、またはWindows）
- Zedがインストールされて実行中であること
- Node.jsがインストールされていること（最新のLTS推奨）
- APIトークンを持つBright Dataアカウント
事前にBright Dataを設定する必要はありません。必要な設定は以下のセクションで段階的に説明します。
必須ではありませんが、以下の事前知識があると役立ちます：
- Model Context Protocol（MCP）の基本的な仕組みの理解
- Bright Data Web MCPとその利用可能なツールへの一般的な親しみ
ステップ#1：Zedのインストールと起動
公式ウェブサイトからZedをダウンロードし、お使いのオペレーティングシステム（macOS、Linux、またはWindows）にインストールします。
インストール後、アプリケーションメニューからZedを開き、エディタがエラーなく起動することを確認します。
メインエディタインターフェースが表示され、設定パネルを開けるはずです。Zedが正常に起動すれば、次のステップに進む準備ができています。
ステップ2：ZedでAIとエージェント編集を有効にする
ZedでSettingsを開き、LLM Providersセクションに移動します。
Zed AIにサインインするか、Anthropic、Google AI、Amazon Bedrockなどのサポートされているプロバイダーを設定してAI機能を有効にします。
プロバイダーが有効になったら、エディタに戻りAIまたはチャットパネルを開いて、プロンプトが受け付けられ応答が生成されることを確認します。エディタ内でAIが応答すれば、エージェント編集が正常に有効化されています。
ステップ#3：Bright Data Web MCPをローカルにセットアップする
ZedのAIエージェントのリアルタイムウェブアクセスを有効にするには、ローカルマシンにBright Data Web MCPをセットアップする必要があります。このMCPサーバーは、AIエージェントとライブウェブデータの橋渡し役として機能します。
まず、Bright DataダッシュボードからBright Dataアカウントを作成します。すでにアカウントをお持ちの場合は、ログインするだけです。
クイックセットアップのために、アカウントの「MCP」ページを開き、手順に従ってください：
または、以下の手順に従ってください：
Bright DataダッシュボードからAPIトークンを生成し、安全に保管してください。このトークンはWeb MCPサーバーがリクエストを認証し、BrightDataのウェブツールにアクセスするために使用されます。
このチュートリアルでは、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でSettingsを開き、Model Context Protocol（MCP）Serversセクションに移動します。Add Serverをクリックして新しいローカルMCPサーバーを登録します。
プロンプトが表示されたら、Web MCPパッケージを実行するコマンド（npx @brightdata/mcp）を設定し、認証に必要な環境変数（API_TOKEN）を追加してBright Data MCPサーバーを定義します。設定を保存してMCPサーバーをZedのAIエージェントで利用可能にします。
追加されると、Bright DataがMCP Serversリストに表示され、AI支援ワークフロー中にZedがWeb MCPに接続する準備ができていることを示します。
MCPサーバーが有効になると、ZedのAIエージェントはエディタ内のAI支援ワークフロー中にBright Dataのウェブツールを使用する準備ができます。
ステップ#6：Zedで実際のタスクを実行する
このステップでは、ZedのAIエージェントとBright Data Web MCPを組み合わせて、ライブウェブコンテンツを取得し、ローカルに保存し、実際のデータに基づいた小さなスクリプトを生成します。
ZedのAIまたはチャットパネルを開きます（先ほどAI応答をテストするために使用したもの）
- ここでプロンプトを入力します
- コードを書くのではなく、ZedのAIエージェントと対話しています。
以下のプロンプトをそのままZedにコピー＆ペーストしてください：
Fetch the live documentation page at
https://nodejs.org/en/docs
Use Bright Data MCP to extract the main documentation content and convert it into clean Markdown. Save the extracted content as docs.md. Then generate a short summary of the documentation and save it as summary.md. Finally, create a simple Node.js script called readDocs.js that loads docs.md and prints the first few lines.プロンプトを送信した後、何が起こるかを観察してください：
- AIエージェントが実行するステップを説明または計画します
- ウェブアクセスが必要であることを特定します
- Bright Data MCPツール（通常はscrape_as_markdown）を選択します
- Zedがツールの実行を承認するよう求める場合があります
タスクが完了したら、生成されたファイルがプロジェクトディレクトリに存在することを確認します。Markdownファイルを開いて、ライブドキュメントページから抽出されたコンテンツが含まれていることを確認します。
生成されたスクリプトを実行すると、スクレイピングされたコンテンツからのデータが出力され、ワークフローが正常に実行されたことが確認できます。
まとめ
このチュートリアルでは、Bright Data Web MCPとZedを統合して、AIネイティブエディタ内でリアルタイムのウェブインタラクションを有効にする方法を学びました。Zedのエージェント編集モデルとBright Dataのウェブツールを組み合わせることで、AIがライブコンテンツを取得し、ローカルに保存し、実際のデータに基づいて使用可能なコードとファイルを生成するワークフローを作成しました。
Bright DataのWeb MCPは、構造化された最新のウェブデータへのアクセスを提供することで、より信頼性が高くコンテキストを認識したAI支援開発ワークフローの構築への扉を開きます。このアプローチは静的な知識への依存を減らし、AI生成出力の精度を向上させます。
より高度なエージェントのユースケースを探求するには、より広いBright Dataインフラとそのアクセス可能なAI対応ウェブデータソリューションをご覧ください。
無料のBright Dataアカウントから始めて、Web MCPをさらに試して独自のAI駆動開発ワークフローを強化できます。
