・
【Chrome DevTools MCPの使い方】GitHub Copilotでエラーの原因分析と修正案生成を実践
AIエージェントがプログラムのコードを書くだけでなく、実際のブラウザ画面を見て、操作し、デバッグまで完結できたら理想的だと思いませんか。
これまでは人間がブラウザの表示確認を行い、その結果をAIに伝えて修正を依頼するという「目隠しプログラミング」の状態が続いていました。
Chrome DevTools MCPを導入すると、対応するAIコーディングエージェントからChromeの操作やデバッグ情報の取得を行えるようになります。
本記事では、この革新的なツールの導入方法から具体的な活用アイデアまで、実機検証を交えて詳しく解説します。
🛠️Chrome DevTools MCPとは？AIエージェントがブラウザを「見る」仕組み
Chrome DevTools MCPは、Google Chromeチームが公開した、AIコーディングエージェントからChromeを操作・検査するためのオープンソースMCPサーバーです。
このセクションでは、MCPの基本的な概念と、従来のAIツールと比較して何が優れているのかを整理していきます。
AIエージェントとブラウザを繋ぐMCPサーバーの概要
MCP（Model Context Protocol）は、LLM（大規模言語モデル）が外部のツールやデータソースとやり取りするための標準規格です。
Chrome DevTools MCPは、この規格に則ってAIエージェントとブラウザの懸け橋となります。
サーバーを起動すると、対応するAIクライアントからChrome DevToolsの機能をMCP経由で利用できるようになります。
単なるテキストのやり取りではなく、ブラウザ内部のデータに直接アクセスできる点が最大の特徴です。
Chrome DevTools MCPで実現できる主な操作
AIエージェントは、人間がデベロッパーツールを使って行う操作の多くを実行できます。
- 指定したURLのページを開く
- 要素のクリックやフォームへの入力
- アクセシビリティツリー（ページの構造）の取得
- コンソールログの確認
- ネットワークリクエストの監視
これらをAIが状況に応じて使い分けることで、人間が介在せずに検証が進みます。
DevToolsのスナップショットやログを取得できるため、問題によってはエンジニアが手動でスクリーンショットを撮ってAIに送る手間を減らせます。
ただし、視覚的なレイアウトやデザインを確認する場合は、スクリーンショットの取得が有効です。
従来のコーディングアシスタントとの決定的な違い
これまでのAIツールは、主に「コードの生成」に特化しており、実行結果の確認は人間に依存していました。
一方、DevTools MCPを利用できるAIエージェントは、ブラウザ上でコードの実行結果を確認し、表示崩れやエラーの原因を調査できます。
ブラウザ上の情報とプロジェクトのソースコードを組み合わせて調査できる環境なら、問題の特定や修正案の作成を効率化できるということです。
※ただし、エージェントがソースコードを編集できるかどうかは、利用するAIクライアントの機能と権限に依存します。
「修正したけれど動かない」という不毛なやり取りを最小限に抑えることが可能です。
⚙️Chrome DevTools MCPの導入手順と基本設定
MCPサーバーを利用するには、いくつかの環境構築と設定作業が必要です。
ここでは、Node.js環境の準備から実際にブラウザと連携させるためのコマンド操作、安全に使うためのセキュリティ設定までを、順を追って解説します。
動作に必要な前提条件と開発環境の確認
まずは、ご自身のPC環境が最新のツールをサポートしているか確認しましょう。
- Node.js（LTS版。パッケージのエンジン要件を満たすバージョン）
- Google Chrome（最新の安定版）
- npmまたはnpxコマンド
これらの条件を満たしていない場合、サーバーの起動時にエラーが発生することがあります。
Node.jsは、Chrome DevTools MCPが要求するパッケージのエンジン要件を満たすLTS版を使用してください。具体的なバージョン要件は変更される可能性があるため、利用時は公式リポジトリやnpmパッケージの最新情報を確認しましょう。
MCPサーバーのインストールとnpxコマンドによる起動
サーバーをローカルにインストールすることなく、MCPクライアントの設定にnpxコマンドを登録して利用する方法が一般的です。
各クライアントの設定ファイルに、以下のコマンドを指定します。
`npx -y chrome-devtools-mcp@latest`
MCPクライアントからこのコマンドが呼び出されると、Chrome DevTools MCPサーバーが起動し、クライアントからのリクエストを受け付けます。
複数のプロジェクトで使い分ける場合も、この方法ならバージョン管理が容易で非常に便利です。
外部ツールからアクセスを許可するためのセキュリティ設定
MCPサーバーは強力な権限を持つため、以下のように適切なセキュリティ対策を講じることが重要です。
- 信頼できるAIクライアントのみに接続を許可する
- 公開ネットワーク上でデバッグポートを露出させない
- 機密情報が含まれるタブは閉じておく
特にリモートデバッグを有効にすると、デバッグポートに接続できるアプリケーションから、ブラウザ内の情報を読み取ったり操作したりできるリスクがあります。
作業が終わったらデバッグポートを閉じるなど、基本的な運用ルールを決めておくことをお勧めします。
💻主要クライアント別のChrome DevTools MCP設定ガイド
MCPサーバーは単体で動かすものではなく、Claude CodeやCursorといったクライアントと組み合わせて使用します。
各ツールごとに設定方法が異なるため、代表的な3つのクライアントにおける接続手順をまとめました。
Claude Codeでブラウザ操作を有効にする専用コマンドの実行
Anthropicが提供するCLIツール「Claude Code」では、CLIからChrome DevTools MCPサーバーを登録できます。
ターミナルで以下のコマンドを実行するだけで、自動的に設定が追加されます。
`claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest`
設定後は、Claudeに対してブラウザの確認を依頼すると、設定したChrome DevTools MCPのツールを利用できます。
CLIベースで軽快に動作するため、ターミナル作業が中心のエンジニアに最適な環境と言えます。
CursorのTools設定からMCPサーバーを登録する手順
人気のAIエディタ「Cursor」では、GUI画面から直感的に設定が可能です。
- 設定（Settings）の「Features」セクションから「MCP」を選択
- 「+ Add MCP Server」ボタンをクリック
- 名前を「Chrome DevTools」とし、Typeを「command」に設定
- Command欄に `npx -y chrome-devtools-mcp@latest` と入力
保存後、AIペインでブラウザ関連の指示を出すと、ツールが自動的に呼び出されます。
GitHub Copilot（VS Code）でmcp.jsonを編集して接続する方法
VS CodeのGitHub CopilotでMCPを利用する場合は、ワークスペースの.vscode/mcp.json、またはコマンドパレットの「MCP: Open User Configuration」からユーザー用のmcp.jsonを編集します。
VS Codeでは、serversオブジェクトの中に以下のエントリーを追加します。
{
"servers": {
"chrome-devtools": {
"type": "stdio",
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}設定を保存したら、mcp.json上部に表示される「Start」ボタンからMCPサーバーを起動します。
Copilot ChatをAgentモードに切り替え、ツール一覧にchrome-devtoolsが表示されることを確認してください。
これで、Copilot Chatの中でブラウザの情報を参照しながら会話ができるようになります。
GitHub Copilotの詳しい導入手順は、本記事の【GitHub Copilot Freeで検証】でも紹介しています。実際の画面キャプチャ付きで解説しているのでぜひチェックしてみてください！
🚀Yoomは開発に関連するプロセスを自動化できます
Chrome DevTools MCPはAIによるブラウザ操作を可能にする画期的なツールですが、日々の開発業務では周辺の事務作業も多く発生しますね。
開発前後の細かなルーチンワークも、YoomならAIエージェントと連携して一気通貫で自動化可能です。
手作業の転記や通知から解放されることで、エンジニアは本来注力すべき設計や複雑なロジックの実装に集中できるようになります。
[Yoomとは]
AIワーカーを活用することで、情報の取得から分析や整理、他のツールへの記録・通知といった一連の作業を自動的に行えます。
まずは以下のテンプレートを使い、業務効率化を体感してみてください！
- GoogleフォームとNotionを用いて、新規事業開発のアイデア管理を行っている方
- ai agentを活用して、新規事業開発のアイデア評価プロセスを効率化したい方
- 手作業でのアイデア評価や情報転記に手間を感じている事業開発担当者の方
- アイデア投稿後の市場性評価や優先度判定をAIが自動で行うため、リサーチや分析にかかる時間を短縮することができます
- ai agentが一定の基準で評価を行うことで、担当者ごとの判断のばらつきを防ぎ、新規事業開発の評価プロセスを標準化できます
- はじめに、GoogleフォームとNotionをYoomと連携します
- 次に、トリガーでGoogleフォームを選択し、「フォームに回答が送信されたら」というアクションを設定します
- 次に、オペレーションでAIワーカーを設定し、送信されたアイデアの市場性評価と優先度判定を行うためのマニュアル（指示）を作成します
- 最後に、オペレーションでNotionの「データベースにページを作成する」アクションを設定し、AIの評価結果を含めたアイデア情報を指定のデータベースへ追加します
■このワークフローのカスタムポイント
- Googleフォームのトリガー設定で、アイデアを収集する対象のフォームIDを任意で設定してください
- AIワーカーの設定では、使用するAIモデルを選択し、事業アイデアの評価基準など独自の指示を任意で設定してください
- Notionでデータベースにページを作成するアクションを設定する際に、情報を集約するデータベースを任意で設定してください
- Googleフォーム、NotionのそれぞれとYoomを連携してください。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- Googleフォームをトリガーとして使用した際の回答内容を取得する方法は「Googleフォームトリガーで、回答内容を取得する方法」を参照ください。
- AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
- AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。
特にファイル数が多い場合、手作業による分類漏れや管理ミスのリスクも高まります。
このワークフローを活用すれば、Boxにファイルが追加されるだけでAIワーカーが内容を分析し、最適なファイル名へのリネームとフォルダ移動を自動で行います。
さらにChatworkへの通知まで一気通貫で完結するため、ファイル管理の効率化と迅速な情報共有を同時に実現できます。
- Box内でのファイル整理やリネーム作業を手作業で行っており、業務の効率化を目指している事務担当者の方
- アップロードされたファイルの内容に応じた適切なフォルダ分けを自動化し、管理体制を強化したい管理職の方
- ファイル追加の見落としを防ぐため、整理が完了したタイミングで即座にChatworkでの通知を受け取りたい方
- AIがファイル内容を読み取って自動で整理するため、手作業で行っていた分類作業の時間を削減し、他の重要な業務に集中できます。
- 人によってばらつきが出やすいファイル名や保存場所のルールをAIが統一することで、情報の検索性が高まりチーム全体の生産性が向上します。
- はじめに、BoxとChatworkをYoomと連携します。
- トリガーとしてBoxを選択し、「フォルダにファイルがアップロードされたら」アクションを設定します。
- オペレーションとして、フォルダ整理を行うためのAIワーカーのスキルを設定します。
この際にBoxの「ファイルをダウンロード」「ファイル名を変更」「ファイルを移動」といったアクションと、Chatworkの「メッセージを送る」アクションを使用ツールとして設定します。
■このワークフローのカスタムポイント
- Boxのトリガー設定では、監視対象とするコンテンツIDを運用に合わせて指定してください。
- AIワーカーの指示（プロンプト）を調整することで、特定のキーワードに基づいたリネームルールや、移動先のフォルダ分け条件、通知先やメッセージ内容を柔軟に変更可能です。
- Box、ChatworkのそれぞれとYoomを連携してください。AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- Boxはミニプラン以上でご利用いただけるアプリとなっております。フリープラン・パーソナルプランの場合は設定しているフローボットのオペレーションやデータコネクトはエラーとなりますので、ご注意ください。
- パーソナルプラン・ミニプラン・チームプラン・サクセスプランなどの有料プランは、2週間の無料トライアルを行うことが可能です。無料トライアル中には制限対象のアプリを使用することができます。詳しくは、料金プランのページをご参照ください。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。
詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。 - AIワーカーはスキルを詳細に設定することで適切な処理を実行しやすくなります。
詳細は「【AIワーカー】スキル（旧マニュアル）の作成方法」をご参照ください。 - トリガーやオペレーションによっては、取り扱い可能なファイル容量に制限がある場合があります。詳しくは「ファイルの容量制限について」をご参照ください。
- AIによるファイル処理では、容量が大きいと、エラーが発生したり精度が落ちたりする可能性がありますのでご注意ください。
💡Chrome DevTools MCPを最大限に活用する具体的なアイデア
ツールを導入した後は、いかに実務に組み込むかが鍵となります。
単なるデバッグにとどまらず、日々のフロントエンド開発やデータ収集を効率化するための3つの活用案を紹介します。
動的なUIコンポーネントの挙動確認の自動化
ホバー時やクリック時に表示が変わるUIのテストは、人間が手動で行うと非常に手間がかかります。
- ドロップダウンメニューが正しく開くか
- モーダルウィンドウの背後がスクロール不可になっているか
- レスポンシブ対応でレイアウトが崩れていないか
これらをAIに依頼すれば、各画面サイズや状態を自律的にチェックし、問題があればその場で修正案を提示してくれます。
複数のブラウザ状態を網羅的に確認させることで、デグレーションの防止にも役立ちます。
ログインが必要なサイトでの自動データ収集
スクレイピングツールでは扱いにくい、ログイン後に表示される動的なページの調査にも利用できる場合があります。
ログイン済みのブラウザセッションを再利用したい場合は、Chromeでリモートデバッグを有効にしたうえで、MCPサーバーに--autoConnectを指定します。
- 社内管理システムの特定の数値を抽出する
- 複数のページを渡り歩いて情報を集計する
- JSで描画されるグラフのデータを読み取る
このような人が画面を見ながら行っていた作業を、AIがページの構造や表示内容を参照しながら支援できます（ただし、取得結果や入力内容は必ず人間が確認してください）。
APIが提供されていない古いシステムからのデータ抽出において、特に威力を発揮します。
開発中のWebサイトのアクセシビリティチェック
ページのスナップショットやブラウザ情報を確認し、アクセシビリティ上の問題の候補を調査することも可能です。
- 適切なARIA属性が付与されているか
- 見出しのレベル（H1〜H6）が論理的か
- 画像にalt属性が設定されているか
これらの情報をAIが確認し、アクセシビリティ上の問題の候補を提示します。
視覚的なデザインだけでなく、構造的な正しさを担保することで、より高品質なWebサイト制作が可能になります。
ただし、アクセシビリティツリーの確認だけで十分とは限らないため、キーボード操作、フォーカス移動、色のコントラスト、スクリーンリーダーでの読み上げなども別途確認する必要があります。
🧪【GitHub Copilot Freeで検証】ネットワークエラーの原因分析と修正案の自動生成
ここでは、GitHub Copilot FreeプランとChrome DevTools MCPを組み合わせ、ネットワークエラーの調査を試しました。
実際のトラブルを想定したシナリオで、その性能を確認してみましょう。
※結果は使用した環境やプロンプト、Copilotの応答内容によって異なる可能性があります。
【事前準備】Chrome DevTools MCPを導入
まずは「GitHub Copilot」を使い、Chrome DevToolsを使えるようにしておきます。
導入に必要なものは以下です。
ステップ1：VS CodeとGitHub Copilot Chatの準備
まずは、エディタ側でMCPを利用できる状態を整えます。
①VS Codeを開く
②左サイドバーにある拡張機能タブ（四角が4つ並んだアイコン）を開く
③「GitHub Copilot Chat」をインストール（Installボタンが歯車アイコンに変わっている場合はインストールが完了しています）
④インストール後、VS Code右下または左下のアカウントアイコンからGitHubアカウントでログイン
以上の準備により、Copilot Chatが外部のMCPサーバー（今回はChrome DevTools）を呼び出せる土台が整います。
ステップ2：mcp.jsonにChrome DevTools MCPサーバーを登録
Chrome DevTools MCPは、事前の個別インストール作業なしに、設定ファイルへの記述だけで使えるようになります。
【方法A】コマンド1行で登録（おすすめ・簡単）
①VS Code内のターミナルを開く（メニュー「Terminal」→「New Terminal」）
②以下のコマンドを貼り付けて実行
code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["-y","chrome-devtools-mcp@latest"],"env":{}}'【方法B】設定ファイルを手動で編集する場合
①コマンドパレットを開く（Ctrl+Shift+P / Macは Cmd+Shift+P）
②「MCP: Open User Configuration」と入力して選択
③開いたmcp.jsonに以下を追記して保存（Ctrl+S）
{
"servers": {
"chrome-devtools": {
"type": "stdio",
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}この設定により、Copilot Chatがブラウザ操作を必要とするタイミングで、chrome-devtools-mcpサーバーを自動的に起動・管理してくれるようになります。手動でターミナルを立ち上げたままにしておく必要はありません。
ステップ3：Copilot Chatでツールが認識されているか確認
次に、登録したMCPサーバーがCopilot Chat上で認識されているかを確認します。
①VS Code右側などにあるCopilot Chatパネルを開く
②チャット入力欄の下部にあるツール選択ボタン（スライダーのようなアイコン）をクリック
③一覧に「chrome-devtools」が表示され、チェックが入っている（有効になっている）ことを確認
④表示されていない場合は、MCPサーバーを再起動し、それでも解決しなければVS Codeを再起動してから再確認
ここで有効化しておくことで、AIがチャットの文脈に応じて自動でブラウザへ命令を送れるようになります。
ステップ4：チャット画面での接続ステータス確認
最後に、Copilotが正しくブラウザを認識できているか最終確認を行います。
チャット欄で「現在開いているタブのタイトルを教えて」といった簡単な質問を投げかけてみました。
AIがChrome DevTools関連のツールを使用した履歴とともに回答を返せば、連携は成功です。
【検証】ネットワークエラーの原因分析と修正案の自動生成
導入できたので、次はエラーの原因分析と修正案の自動生成を試してみます。
検証のため、あらかじめ「1文字だけ間違ったAPIエンドポイント」を仕込んだ Node.js製のダミーアプリを用意しました。
検証用ファイルの内容は以下の通りです。
①VS Codeで検証用ファイル copilot-network-test を開き、検証用サーバーを起動
②GitHub CopilotにChrome DevTools MCPを連携
③ブラウザで修正前の画面を確認
Chromeで該当のアプリを開いてみると、「Cannot GET /」とだけ表示されています。
本来なら画面に3つのボタンが表示され、意図した通りのエラーが出るはずなのですが…
せっかくなので、次のステップでこの原因も含めて分析してもらいましょう。
④Copilot Chatに調査依頼を送る
VS CodeのCopilot Chat（Agentモード）に下記を送信します。
プロンプト：
現在ブラウザで発生しているネットワークエラーをChrome DevTools MCPを使って解析し、
エディタ内の関連するコードの修正案を提案してください。
すると、作業計画作成からファイルの読み込み、修正案の適用までの一連の流れが自動的に行われました（環境によっては、AIによるファイル変更に確認操作が求められる場合があります）。
検証結果
表示された調査結果は以下です。
- 原因の特定：/api/dataa への1文字タイプミスが404エラーの原因（狙い通りのバグを検出）
- 追加で発見した問題：server.js の静的ファイル配信設定と、実際のファイル配置（publicフォルダの有無）にズレがあった（先ほどの「Cannot GET /」 はこのミスが原因）
あらかじめ仕込んでおいたバグを正確に検出したほか、ファイルの設定ミスも特定してくれました。
続いて、下記の修正が行われました。
- script.js を修正： /api/dataa → /api/data に変更（タイプミス修正）
- server.js を修正：HTMLファイルの配置に合わせて静的ファイルの配信パスを変更
修正後、アプリを開いてみると、3つのボタンが意図通り正確に作動するようになっています。
今回の検証内容では、人の作業を挟まずに、AIが直接「原因の発見から修正」までを一気通貫で行えることが確認できました。
人がエラーの原因を手探りで探す手間がなく、コードだけでなく実際の画面の動きも見た上で判断してくれるのが便利なポイントです。
ちょっとしたバグ調査や「とりあえず何が原因か知りたい」という場面では、実務にもすぐに役立てられそうな手応えを感じました。
📉Chrome DevTools MCP導入のメリットと注意点
導入によって得られる恩恵は大きいですが、同時に運用上のリスクやコストについても理解しておく必要があります。
メリットとデメリットを天秤にかけ、チームにとって最適な利用方法を検討してください。
【メリット】開発者が手動でデバッグ報告をする手間の削減
最大のメリットは、エンジニアの「伝達コスト」がほぼゼロになることです。
これまでは、不具合を見つけたらスクリーンショットを撮り、ログをコピーし、AIに説明するという準備が必要でした。
この自動化により、デバッグ作業に伴う精神的な疲労や、情報の伝え漏れによる手戻りが減ります。
以下のような手間の削減が期待できます。
- AIが直接画面を見るための指示
- 再現手順の説明
- 修正後の再テスト
【メリット】エンドツーエンド（E2E）テスト作成の高速化
PlaywrightやCypressなどのテストコードを書く際、要素のセレクターを探す作業は意外と時間がかかります。
Chrome DevTools MCPで取得したDOMやアクセシビリティ情報、操作結果をAIエージェントに渡すことで、PlaywrightやCypressなどのテストコードのたたき台を生成させられる場合があります。
AIがDOMやアクセシビリティ情報を参照してセレクター候補を提示できるため、テストコード作成の初期作業が効率化可能です。
- IDやクラス名の自動特定
- 複雑なXPathの生成
- 操作フローのスクリプト化
といった挙動が期待できます。
ただし、セレクターの安定性やテストコードの保守性は、生成後に人間が確認する工程が必要です。
【注意点】利用するLLMモデルのコストとAPI制限への配慮
ブラウザのスナップショット、ログ、ネットワーク情報、スクリーンショットなどを頻繁にAIへ渡すと、利用するモデルやクライアントによってはコンテキスト消費が増え、有料プランのメッセージ回数制限に達しやすくなる場合があります。
必要な情報だけを取得するように指示し、利用中のサービスの料金・利用制限を確認することが重要です。
無駄な操作をさせないよう、指示を具体的に出し、必要なタイミングでのみブラウザを確認させる工夫が求められます。
【注意点】ローカル環境へのアクセス権限管理の重要性
AIエージェントにブラウザ操作を許すことは、接続対象となるブラウザのタブ、Cookie、ページ内容、DevTools情報などへのアクセスや変更を許可することにつながります。
よって、下記の点に注意が必要です。
- 開発用DBのパスワードがブラウザに表示されていないか
- 個人情報が含まれるタブを開きっぱなしにしていないか
- AIが予期せぬフォーム送信（データの削除など）を行わないか
特に自律性の高いエージェントを使用する場合、勝手なボタン操作による事故を防ぐため、常に監視下で動かすことが鉄則です。
また、会社支給のPCなど制約がある環境では、セキュリティポリシーに抵触しないか事前に確認が必要です。
✅まとめ
AIがブラウザを直接デバッグできるChrome DevTools MCPは、開発者の「目隠しプログラミング」を解消する画期的なツールです。
主要なクライアントで設定を完了させることで、動作確認と修正のループをAIに任せ、より本質的な設計業務に集中できる環境が整います。
初期設定には多少の工数がかかりますが、その後のデバッグ効率の向上を考えれば、導入する価値は十分にあります。
まずはGitHub CopilotやClaude Codeなどの身近なツールから、その驚くべき能力を体感してみてください。
🤖Yoomでできること
Chrome DevTools MCPによって開発作業は効率化できても、関連する事務作業は依然として手間がかかりますね。
そんな問題もYoomが解決！
AIワーカー機能を活用し、「バグ報告の共有」や「テスト結果の記録」といった細かい作業を自動化できます。
以下のテンプレートを使い、エンジニアが本来のクリエイティブな仕事に100%集中できる環境を構築しましょう。
👉ご登録はこちら
- Gmailに届く大量の問い合わせメールの管理と対応に課題を感じている担当者の方
- AIを活用してメール対応の品質向上と効率化を両立させたいチームリーダーの方
- 手作業によるメールの振り分けや返信作成業務の自動化を検討している方
- AIがメール内容の解析から返信案作成までを自動で行うため、人が対応する時間を短縮し、より重要な業務に集中できます。
- 緊急度や重要度の判定を自動化することで、重要なメールの見落としを防ぎ、対応漏れなどのヒューマンエラーのリスクを軽減します。
- はじめに、GmailをYoomと連携します。
- 次に、トリガーでGmailを選択し、「特定のキーワードに一致するメールを受信したら」というアクションを設定します。
- 最後に、オペレーションでAIワーカーを選択し、受信メールの情報をもとに「対応優先順位の判定」「返信案の生成」「Slackへの通知」を行うためのマニュアル（指示）を作成します。
- Gmailのトリガー設定では、自動化の対象としたいメールを特定するためのキーワード（例：「お問い合わせ」「資料請求」など）を任意で設定してください。
- AIワーカーオペレーションでは、利用したいAIモデルを任意で選択し、優先順位付けのルールや返信文のトーンなど、自社の運用に合わせた指示を設定してください。
- Gmail、SlackのそれぞれとYoomを連携してください。 AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
- AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。
- GoogleドキュメントからGoogle スプレッドシートへのデータインポートを手作業で行っている方
- 会議の議事録など、Googleドキュメントの内容をAIで自動的に分類・抽出したい方
- 定型的なデータ入力作業を自動化し、より重要な業務に集中したいと考えている方
- Googleドキュメントの内容をGoogle スプレッドシートへインポートする作業が自動化され、これまでデータ入力に費やしていた時間を短縮できます
- 手作業による転記がなくなるため、情報の分類ミスや入力漏れといったヒューマンエラーの発生を防ぎ、データの正確性を保てます
- はじめに、GoogleドキュメントとGoogle スプレッドシートをYoomと連携します
- 次に、トリガーでChrome拡張機能を選択し、「Googleドキュメント上から起動」を設定します
- 最後に、オペレーションでAIワーカーを選択し、Googleドキュメントの内容を分類・抽出し、Google スプレッドシートに自動でインポート（登録）するためのマニュアル（指示）を作成します
- AIワーカーのオペレーション設定では、処理内容やコストに応じて、利用したいAIモデルを任意で選択してください
- AIワーカーへの指示（プロンプト）は、抽出したい項目や分類のルールに合わせて自由にカスタマイズしてください。例えば、「報告者」「日付」「要点」といった特定の項目を抽出するよう設定できます
- Googleドキュメント、Google スプレッドシートのそれぞれとYoomを連携してください。AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
- AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。
- AIワーカーで大容量のデータを処理する場合、処理件数に応じて膨大なタスクを消費する可能性があるためご注意ください。
- Chrome拡張機能を使用したトリガーを使用することで、Googleドキュメント上から直接トリガーを起動させることができます。
- Chrome拡張機能を使ったトリガーの設定方法は「Chrome拡張機能を使ったトリガーの設定方法」をご参照ください。
出典：https://developer.chrome.com/blog/chrome-devtools-mcp?hl=ja
プログラミング知識なしで手軽に構築できます。
