【ITニュース解説】How I Integrated WebMCP into My Developer Portfolio (And Turned It into an AI-Callable Agent)

現在の多くの開発者ポートフォリオは、まるで紙のパンフレットのように静的な情報提供にとどまっている。これらは人間が見て情報を得る分には問題ないが、最近増えているAIエージェント、つまりAIがインターネット上を動き回り、ユーザーのために情報を集めたり作業をしたりするプログラムにとっては、扱いにくいものとなっている。AIエージェントが従来のポートフォリオにアクセスしても、人間が見ているウェブサイトの見た目から情報を推測したり、ウェブページの構造を細かく解析したりする必要があり、これは非常に手間がかかる。時には、ウェブサイトのスクリーンショットをAIが解析して意味を理解しようとするため、多大な計算コストがかかることもある。例えば、「この開発者はAngularとAIエージェントの経験がありますか？」という単純な質問に答えるためだけに、AIは多くの労力を費やさなければならない。

こうした現状に対し、自身のポートフォリオサイトを、単に人間が読むだけでなく、AIエージェントが直接情報を取得し、対話できるような形に作り変える試みが行われた。その結果生まれたのが、AIに対応し、インタラクティブに動作するウェブアプリケーションである。これはAngular 22という最新のウェブフレームワークと、WebMCP（Web Model Context Protocol）という新しい技術標準を組み合わせて構築された。WebMCPは、ウェブサイトが持つ機能や情報を、AIエージェントが理解しやすいように構造化して公開するためのプロトコルだ。

この新しいポートフォリオでは、AIエージェントや、開発者であればブラウザの開発者ツールを使うだけで、ポートフォリオが提供する機能を発見し、開発者の経験やプロジェクトに関する構造化された情報を問い合わせ、さらにこれらのツールとリアルタイムで対話できるようになった。これは、ポートフォリオが単なる情報表示ツールから、AIが実際に操作できる「エージェント」へと変化したことを意味する。

具体的に、この仕組みはどのように機能するのか。従来のAIがウェブサイトの不完全な情報を推測したり、壊れたウェブページの部品から情報をかき集めたりする代わりに、このWebMCPを導入したポートフォリオでは、AIが開発者の経歴について質問した際、ウェブサイトの裏側で定義された構造化されたデータに基づいて正確な情報を提供する。このポートフォリオでは、Angular 22が提供する最新の技術である「zoneless change detection」（ゾーンレス変更検知）と「signals」（シグナル）が使われている。これらにより、WebMCPのツールに対する問い合わせが実行されても、ウェブサイトの動作が不必要に遅くなったり、画面がカクついたりすることがなく、非常にスムーズな応答が可能になる。

この機能は、特別な拡張機能がなくても、誰でもブラウザの開発者ツールを開いて簡単に試すことができる。例えば、Google ChromeやMozilla Firefoxの開発者コンソールで、document.modelContext.listTools()と入力すれば、ポートフォリオに登録されているWebMCP対応ツールの一覧を確認できる。さらに、await window.agentAPI.searchSkills("LangGraph");のように入力すれば、特定の技術スキル（例：LangGraph）について開発者の経験を検索できる。また、await window.agentAPI.ask("What is Vishnu's experience with Angular and microfrontends?");と自然言語で質問することも可能で、AIエージェントがウェブサイトから構造化された情報を抽出し、質問に答える様子を直接確認できる。

この取り組みを通して、いくつかの重要な教訓が得られた。一つ目は、ポートフォリオはAIエージェントが読み取れる形であるべきだということだ。自律的に動くAIエージェントが、ソフトウェアエンジニアや技術リーダーを調査する主要な手段となるにつれて、オープンで機械が読み取り可能なツールインターフェース（mcp.jsonという設定ファイルとWebMCPというプロトコル）を持つことは、静的なPDFや通常のHTMLだけのポートフォリオに比べて圧倒的な優位性をもたらす。二つ目は、オフラインでも機能するような回復力が不可欠だということだ。もしウェブサイトのバックエンドサーバーが一時的に停止していても、ローカルに構造化された情報の控えがあれば、ユーザーは0ミリ秒という即座の応答を得ることができ、コミュニケーションが途切れることはない。これは、常に安定したユーザー体験を提供する上で非常に重要である。最後に、独自の複雑な仕組みを作るよりも、WebMCPのような標準仕様に基づいて構築することの価値が強調された。標準に従うことで、将来的にWebMCPを採用するあらゆるブラウザ拡張機能やAIエージェントが、特別な設定なしにウェブサイトと即座に連携できるようになるため、汎用性と将来性が確保される。この革新的なアプローチは、開発者ポートフォリオのあり方を根本から変える可能性を秘めている。