このガイドでは以下を学びます：
- LobeChatとは何か、その特長は何か。
- MCPを使用してLobeChatアシスタントを拡張すべき理由。
- – リモート接続を介してLobeChatアシスタントをBright DataのWeb MCPサーバーに接続する方法
さあ、始めましょう！
LobeChatとは？
LobeChatは、ユーザーフレンドリーなデザインのオープンソースLLMチャットプラットフォームです。デスクトップアプリとして、OpenAI、Gemini、Claudeなどの主要AIモデルと連携し、コンピューター上で直接、より優れたチャット体験を提供します。最近では、ブラウザからアクセスできるプログレッシブウェブアプリとしても利用可能になりました。
GitHubでは66,000以上のスターを獲得しており：
この統計は、LobeChatが最も人気のあるAIチャットプラットフォームの一つであることを示しています。オープンソース基盤はセキュリティと信頼性を重視すると同時に、カスタマイズ可能な体験への扉を開いています。
LobeChatは多機能なAIアシスタント兼会話管理ハブとして機能し、単一インターフェース内で複数のAIモデルを管理・切り替え可能です。さらにプラグインシステムにより、MCP統合を通じて機能を拡張できます。
主な機能
LobeChatが提供する主な機能は以下の通りです：
- マルチモーダル対話：テキスト、音声、画像を用いたコミュニケーションにより、より豊かで直感的な会話を実現。
- AIコンパニオン（「アシスタント」と呼ばれる）を自由に作成・カスタマイズし、いつでも切り替え可能。
- 通常のメッセージングアプリのように簡単に使える、シンプルなチャット風インターフェース。
- 直感的なエディターで独自のAIアンサンブルを構築・管理できるエージェントマーケットプレイス。
- 検索、金融、ゲーム、学術など、エージェントの機能を拡張するツールを提供するプラグインエコシステム。
- ナレッジベースを連携し、エージェントが学習・進化する知識と記憶の統合機能。
- 画像をアップロードし、システムが分析・説明を行う視覚認識機能。
- DALL·E、MidJourney、Soraなどのツールを使用した画像、音声、動画生成のための生成AIサポート。
- 音声機能により、エージェントとのリアルタイム会話や音声のカスタマイズが可能。
- モデル柔軟性：GPT、Claude、Geminiなどの世界トップクラスのLLMと連携し、好みのモデルを選択可能。
LobeChatにおけるBright DataのWeb MCP連携の利点
LobeChatはMCP統合をサポートし、アシスタントがプロンプト処理中に基盤LLMが直接呼び出せるツールを利用可能にします。LLM単独では不可能な処理を補完するため特に有用です。
LobeChatのモデル非依存設計により、MCP統合ではチャット内で多様なツールを活用できるアシスタント構築が可能。これはLLMの主要な制約である「静的知識」の克服に特に有効です。
LLMは特定の時点のスナップショットデータを学習しているため、その知識は急速に陳腐化します。さらに重要なのは、LLMがネイティブにWebや外部データソースとやり取りできない点です。仮に可能であっても、通常はボット対策ソリューションによってブロックされます。
ここでMCPを基盤とするLobeChatのプラグインシステムが真価を発揮します。例えばBright DataのWeb MCPに接続すれば、AIアシスタントがウェブから直接最新の高品質データを取得可能になります。
Web MCPは60以上のAI対応ツールへのアクセスを提供し、すべてBright Dataのウェブデータ基盤で動作します。オープンソースパッケージでMCPサーバーをローカルにインストールするか、Bright Dataのサーバー経由でリモートアクセスできます。
無料プランでも、Bright DataのWeb MCPは以下の2つの必須ツールを提供します：
| ツール | 説明 |
|---|---|
scrape_as_markdown |
ボット検知やCAPTCHAを回避し、任意のウェブページをクリーンなMarkdown形式でスクレイピングします。 |
search_engine |
Google、Bing、Yandex の検索結果を JSON または Markdown で取得します。 |
これらの無料ツールに加え、Web MCPではAmazon、LinkedIn、Instagramなど、プラットフォームを横断した構造化データ収集のための数十種類の専門ツールを利用できます。すべての利用可能なツールを発見しましょう！
LobeChatとWeb MCPを組み合わせることで、静的なチャットを動的なアシスタントに変革。リアルタイムのウェブデータにアクセスし、現実世界に根ざした洞察を生成し、ウェブページ上でユーザーに代わってタスクを実行できます。
Bright DataのリモートWeb MCPサーバーにLobeChatを接続する方法
このステップバイステップセクションでは、LobeChatアシスタントをBright Data Web MCPにリモート接続する方法を説明します。
では、ターミナルで@brightdata/mcpをローカル実行する代わりに、なぜリモート接続するのか？その理由は、LobeChatがデスクトップアプリとウェブアプリの双方として動作するからです。ただし、ウェブアプリはMCPサーバーへのリモート接続のみをサポートしています。したがって、このチュートリアルを広く適用可能なものにするため、リモートURL経由でのWeb MCP設定に焦点を当てます。
デスクトップ版を使用中でローカル設定を希望する場合も、それほど複雑ではなく可能です。実際、その場合はLobeChatのBright Data MCPプラグインを直接活用できます。
以下の手順に従ってください！
前提条件
開始前に、以下の準備が整っていることを確認してください：
- LobeChatアカウント（無料トライアルアカウントでも可）
- APIキーが設定済みのBright Dataアカウント（設定方法は後述）。
以下の概念に関する知識も重要です：
ステップ #1: LobeChat の開始
LobeChatアカウントにログインし、LobeHubにアクセスしてください。以下のような画面が表示されます：
ここでは以下の操作を行います：
- MCPプラグインの設定を行います。
- リモートWeb MCPサーバーに接続するカスタムプラグインを作成します。
- 新しいアシスタントを追加します。
- アシスタント内でカスタムWeb MCPプラグインを有効化します。
- 強化されたアシスタントとチャットします。
以下の手順で確認しましょう！
ステップ #2: MCPプラグインの設定
LobeChatにおけるMCP設定の詳細は公式ブログ記事を参照してください。それ以外の場合は、以下のガイドに従ってください。
まず、LobeHubインターフェースの下部ツールバーにあるプラグインアイコンをクリックします。次に、「Plugin Store」オプションを選択します：
表示される「プラグインストア」モーダルで、「MCPプラグインを追加」ボタンを押します：
これでLobeChatにおけるMCPプラグインの設定が開始されます。具体的には、ローカルまたはリモートのMCPサーバーに接続するためのカスタムプラグインを定義できます。このカスタムプラグインを有効にすることで、サーバーが提供するツールがアシスタント内で利用可能になります。
ステップ #3: Web MCP接続URLの取得
MCPプラグインの定義を進める前に、Web MCP接続URLを取得する必要があります。これにはBright Data APIキーが必要で、リモートWeb MCPサーバーへの接続認証に使用されます。公式ガイドに従ってBright Data APIトークンを生成してください。
重要: 設定を簡略化するには、APIキーに管理者権限が必要です。これにより、Bright DataアカウントはWeb MCPによって必要なすべての製品が自動的に設定されます（下記参照）。
詳細はWeb MCPドキュメントページを参照してください。アカウント内の「MCP」クイックセットアップページもご覧ください：
Web MCPのリモート接続URLは次のようになります：
https://mcp.brightdata.com/mcp?token=<YOUR_BRIGHT_DATA_API_KEY><YOUR_BRIGHT_DATA_API_KEY>を Bright Data API キーに置き換えてください。
注意：デフォルトでは、search_engineおよびscrape_as_markdownツール（バッチ版を含む）のみが利用可能です。これは Web MCP の無料プランによるものです。
Web MCPが提供する高度なツール（Webデータフィード、ブラウザ操作など）をすべて利用するには、URLに&pro=1を追加してProモードを有効化してください:
https://mcp.brightdata.com/mcp?token=<YOUR_BRIGHT_DATA_API_KEY>&pro=1これにより60以上のツールが利用可能になりますが、Proモードでの使用には費用が発生することをご留意ください。
素晴らしい！これでLobeChatにBright Data Web MCPを設定する準備が整いました。
ステップ #4: リモート Web MCP サーバーへの接続
LobeChatに戻り、「MCPプラグインを追加」ボタンを押すと、以下の「カスタムプラグインを追加」画面が表示されます:
まず、MCPサーバーへの接続方法を選択します。リモート接続の場合は「Streamable HTTP」を選択してください。次に、MCPプラグインに名前を付け（例：「BrightData」）、Web MCP接続URLを貼り付けます：
「接続テスト」をクリックし、LobeChatがWeb MCPに到達できることを確認します。問題なく動作すれば、以下の4つのツール（無料プランで利用可能）が表示されます：
または、Proモード（&pro=1付き）では60以上のツールが利用可能です：
接続が確認できたら、「プラグインをインストール」をクリックしてカスタムBright Data Web MCPプラグインを作成します：
「プラグインストア」モーダルに戻り、「インストール済み」タブでカスタムBrightDataプラグインが表示されるはずです：
素晴らしい！Web MCPの統合が完了しました。これで新しいLobeChatアシスタントでプラグインを使用する準備が整いました。
ステップ #5: 新規アシスタントの作成と設定
LobeHubに戻り、「New Assistant」ボタンをクリックして新しいLobeChat AIアシスタントを作成します：
以下のような画面が表示されます：
アシスタントの設定を変更できます。例えば、アシスタント名横の「gpt-5-mini」ラベルをクリックし、希望のモデルを選択することで、モデルをデフォルトのGPT-5 MiniからGemini 2.5 Flashに切り替えます：
これでアシスタントはGemini 2.5 Flashで動作します。
執筆時点では、LobeChatはGPT、Claude、Geminiモデル向けに450,000クレジットの豊富な無料トライアルを提供しています。そのため、すぐに費用を気にする必要はありません。ただし、本番環境のアシスタントにはプレミアムプランが必要です。
完了！これでBright Data Web MCPツールで強化されたLobeChatアシスタントが利用可能になりました。
ステップ #6: アシスタントへのBright Data Web MCP統合
アシスタント内で「プラグイン」ボタンを押し、「BrightData」プラグインにチェックを入れて有効化します：
素晴らしい！これでアシスタントがリモートWeb MCPの全ツールを利用可能になりました。
ステップ #7: 統合のテスト
通常は、タスクの特定部分を担当し異なるMCPツールに依存するカスタムエージェント群を構築します。しかしLobeChatのChatGPT風体験により、タスクを複数のプロンプトに分割し、チャットのコンテキスト機能を活かせます。
例えば、データベースクライアントを購入する必要があるスタートアップ企業を想定しましょう。候補はDbVisualizer、DBeaver、DataGrip（おそらく最も人気のある3つのデータベースクライアント）に絞られています。
スタートアップ企業として1ドルも無駄にできないため、価格に基づいて決定を下す必要があります。各製品の価格ページから情報を取得し、そのデータに基づいて最終的な推奨を行うようLLMに依頼するのが基本方針です。
まず、DbVisualizerの価格ページをスクレイピングし、詳細なレポートを返すよう依頼します：
以下の価格ページから主要情報をまとめた要約を作成してください：
https://www.dbvis.com/pricing/
全価格プランを一覧化した表と、私が把握すべき重要な詳細を箇条書きで強調したリストを含めてください。プロンプトをアシスタントに貼り付けて実行してください：
背景で実行された処理:
- Geminiはリクエスト実行計画を作成しました。
- まず「BrightData」プラグインのscrape_
as_markdownツールでページ内容をスクレイピングする必要があると認識しました。 - 正しい引数（プロンプトから取得した価格ページURL）でプラグインを実行し、Markdown形式でコンテンツを取得しました。
- 内容を分析し、要求されたデータを含むレポートを生成しました。
実際の応答前にLobeChatが提供するデバッグ情報で、Bright DataのWeb MCPscrape_as_markdownツールの使用を確認してください：
次に、DBeaverとDataGripの価格ページでも同じ手順を繰り返します。これによりチャットには3つのレポート全てが含まれ、LobeChatアシスタントはデフォルトで直近20件のメッセージを保存するため、後からでもアクセス可能です。
重要：出力結果が正確なのは、アシスタントがBright DataのWeb Unlockerを基盤とするscrape_as_markdownツールで任意のウェブサイトをリアルタイムにスクレイピングできるためです。同様に、Bright DataのSERP APIを活用したsearch_engineツールでウェブ検索も可能です。
最後に、以下のような意思決定プロンプトでタスクを完了させてください：
当社は複数のデータベースを管理する必要があるスタートアップです。プレミアム機能へのアクセスと強力なカスタマーサポートを提供しつつ、最もコストパフォーマンスに優れたソリューションを求めています。適切なソリューションには投資する用意があります。先に収集した情報に基づき、私のニーズに合致するDbVisualizer、DBeaver、DataGripのうちどれを推奨しますか？アシスタントで実行：
LobeChatのGemini搭載アシスタントがWeb MCP経由で事前に収集したデータを分析し、3つのデータベースクライアントを比較します。期待される出力は以下の通りです：
収集データに基づくアシスタントの最終推奨は、DbVisualizerが最適な選択肢であり、DataGripがそれに次ぐ選択肢となります：
さあ、これで完了です！Bright DataのWeb MCP統合により、LobeChatアシスタントがどれほど強力になったかを実証しました。
注: Web MCP統合がなければ、この作業にははるかに多くの時間がかかります。LLM単体ではウェブページコンテンツに直接アクセスできないため、手動で渡す必要がありました。コンテンツがLLMの処理能力を超える長さの場合、これは問題になり得ます。しかし今回は、チャットから離れることなく必要な情報を全て入手できました。これは非常に便利です！
プロンプトを変更することで、アシスタントを他の多くのユースケースに活用できます。
まとめ
本記事では、Bright DataのWeb MCP（無料プランが新たに追加されました！）をLobeChatに統合し、拡張されたAIチャット体験を構築する方法を解説しました。この統合により、アシスタントはウェブ検索、データ抽出、リアルタイムWebインタラクションなどの機能を獲得します。
さらに高度なAIチャットボットを構築するには、Bright DataのAIインフラストラクチャ内で提供される幅広い製品とサービスを探索してください。これらのソリューションは、多様なAIワークフローと様々なチャットボットユースケースをサポートするために設計されています。
無料のBright Dataアカウントに登録し、AI対応のウェブデータ製品を今すぐお試しください！
