3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Azure OpenAI と MCP を連携するチャット UI アプリを作りました (Win/Mac 対応)

Last updated at Posted at 2025-07-23

はじめに

AIエージェントの活用が進む現代において、複数のMCP(Model Context Protocol)サーバと柔軟に連携できるクライアントツールのニーズが高まっています。特に、皆様がすでに利用されているAzure OpenAIを活用し、社内外のMCPサーバとの統合が求められる場面では、WindowsやMacなどのデスクトップ環境や開発環境で利用できる汎用性の高いUIクライアントアプリが重要です。

本記事では、上記を手軽に実現できるように開発した「MCP Client for Azure」について紹介します。このツールは、Azure OpenAIとSTDIO/HTTP/SSE型のMCPサーバと連携可能なエージェント型チャットUIを提供し、技術者がより自由にAIエージェントを活用できる環境を構築します。以前の記事でCLIツールをご紹介しましたが、今回はとても活用しやすいUIアプリです。

MCP_Client_for_Azure_sample.png


コンセプトと目的

「MCP Client for Azure」は、以下のような目的を持って設計されています:

  • Azure OpenAIの活用を簡易化:APIキーまたはEntra ID認証による接続で、Azure OpenAIの機能をすぐに利用可能
  • MCPサーバとの柔軟な連携:STDIO、HTTP、SSEといった多様なプロトコルやMCP仕様準拠のOAuth2認可フローにも対応し、社内外のMCPサーバと統合可能
  • エージェント型UIの提供:ユーザーが自然な対話を通じてAIエージェントとやり取りできる、直感的なチャットインターフェース

このツールは、技術検証、社内業務支援、デモ、教育・研修など、さまざまなシーンでの活用が期待されます。


主な機能

🔗 Azure OpenAIとの統合

  • エンドポイント、デプロイ名、APIバージョン、APIキーを設定するだけで利用可能
  • APIキーを省略すれば、Entra ID(旧Azure AD)による認証にも対応
  • モデルパラメータ(temperature、max_tokensなど)も柔軟に設定可能
  • ユーザ指示に対応し、MCPサーバと連携したタスク実行や応答を実現

🌐 MCPサーバとの接続

  • STDIO型:ローカルで起動したMCPサーバとの標準入出力による接続
  • HTTP/SSE型:REST APIベースのリモートMCPサーバとの通信
  • サーバごとに環境変数やヘッダーを個別設定でき、柔軟な運用が可能
  • HTTP/SSE型サーバ接続においてMCP仕様準拠のOAuth2認可フローをサポート

🛡️ ツール実行の承認ダイアログ

  • 各ツール呼び出しに対して「許可」「すべて許可」「拒否」の選択が可能
  • セキュリティと操作性のバランスを保ち、誤操作を防止

💾 サーバ設定の保存と再利用

  • 一度登録したMCPサーバ設定はローカルに保存され、次回以降の起動時に簡単に再利用可能
  • 設定ファイルはユーザホームの .mcpclient/mcpclient.conf に保存され、ユーザーごとに管理可能

🗂️ セッション管理機能

  • すべてのチャット履歴はローカルファイルとして保存
  • 過去のセッションを再読み込みして、検証や振り返りに活用可能
  • セッションごとにタグ付けやメモの追加も可能で、ナレッジ管理にも活用できる

🎨 モダンなUI

  • Material-UIを採用した洗練されたユーザーインターフェース
  • リアルタイムな更新と軽快なレスポンス

インストールと起動手順

1. バイナリのダウンロード

GitHubのリリースから、WindowsまたはMacOS向けのバイナリをダウンロードします。

ダウンロードした実行ファイルの起動には適切な実行許可が必要になる場合があります。特にMacOSでは一度アイコンをダブルクリックで起動すると、強制的に停止します。その後、「設定」メニューの「プライバシーとセキュリティ」の「アプリケーションの実行」セクションでアプリを「そのまま開く」を選んでいただくことで、起動できるようになります

2. 初回起動とデータディレクトリの選択

初回起動時には、AzureやMCPの設定ファイルとチャット履歴の保存先を選択するダイアログが表示されます。選択したパスはユーザのホームディレクトリの.mcpclient/mcpclient.conf に保存され、以降の起動時に自動で読み込まれます。

MCP_Client_Data_dir.png

3. Azure OpenAIの設定

「Azure Settings」から以下の情報を入力:

  • エンドポイントURL
  • デプロイ名
  • APIバージョン
  • APIキー(省略するとEntraIDの認証を利用)
MCP_Client_AOAI_setting.png

オプションでシステムプロンプトの設定を更新しエージェント動作をカスタマイズ可能です
また、temperatureやtop_p、max_tokensといったパラメータも設定できます

4. MCPサーバの登録

「MCP Servers」から新規サーバを追加。STDIO/HTTP/SSEいずれにも対応しています

  • STDIO型
MCP_Client_STDIO.png

STDIO型は利用するコマンドや環境依存の設定もありますので確認の上で利用ください
特にMacOSはコンソールの環境変数を本アプリ内に持ち込めないため、MCPサーバの環境変数設定でPATHの設定を追加しないとnpxなどのコマンドが見つからず実行できないため、適切なPATH環境変数の設定(例 PATH=/opt/homebrew/bin:/bin:/usr/bin:/usr/local/bin:$PATH)が必要です

  • HTTP/SSE
MCP_Client_HTTP.png

本アプリはHTTP/SSEのMCPサーバへの接続において2025-06-18版のMCPの認可仕様をサポートしています。接続時にブラウザーが自動的に開きユーザコンセントの確認とコールバックにより、MCPサーバに接続するアクセストークンを取得できます

一度登録したMCPサーバは自動保存され、すぐに再利用可能です
MCP_Client_saved_MCP.png

5. チャットを開始しツールを選択

  • NEW CHATで新規チャットを開始します
  • 利用するMCPサーバのツールを選択します。チャットの頭に#<ツール名>をつけることで、特定のツールを強制的に実行させることもできます
MCP_Client_toollist.png
  • 会話履歴は保存され、いつでも再開できます

活用シーンとユースケース

🧪 技術検証

  • 複数のMCPサーバを切り替えながら、AIエージェントの応答精度や動作を比較
  • Azure OpenAIとローカルMCPサーバの挙動を並列検証
  • プロンプト設計の試行錯誤と結果の比較が容易

🏢 社内ツール連携

  • HTTP/SSE型の社内MCPサーバと接続し、業務支援エージェントとして活用
  • 社内データベースや業務システムとの統合も可能
  • 社内ポータル連携など、拡張性の高い運用が可能

🧠 社内 MCP サーバの検証

  • 社内で構築したMCPサーバの検証
  • 効果的なMCPサーバの構築や運用シナリオの検討
  • 複数の社内MCPサーバを連携する技術検証

🎓 デモ・教育・研修

  • デモ環境としてプレゼンテーションなどに利用
  • セッション履歴を保存して、技術トレーニングやレビューに活用
  • 講師と受講者の対話ログを教材化することも可能

まとめ

「MCP Client for Azure」は、Azure OpenAIと多様なMCPサーバをつなぐ柔軟なクライアントツールです。自分の環境で手軽にMCPと連携するエージェントを体験できますので、MCPやAI活用にお役立ていただければ幸いです。

GitHubリポジトリはこちら 👉 https://github.com/hatasaki/MCP-Client-App-for-Azure

免責事項

本ツールはテスト・検証・デモ用途向けに開発されています。プロダクション環境での利用は想定していません。利用にあたっては自己責任でお願いします。また、開発者が所属する組織とは無関係であり、いかなる承認や保証もありません。

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?