LoginSignup
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?

@YusukeYoshiyama(Yoshiyama Yusuke)

Gradioを使ってMCP（Model Context Protocol）を手軽に試す実験アプリを作ってみた

Posted at

はじめに

最近、AIエージェント界隈で話題の新技術 MCP (Model Context Protocol) をご存知でしょうか？ Anthropic社が提唱した、AIモデルと外部ツールを連携させるためのオープンな標準規格です。

このMCPを実際に動かしてみたいと思い、様々なMCPサーバーを手軽に切り替えて試せるシンプルなUIアプリケーションをPythonで作成してみました。UIの構築には、こちらも便利なライブラリである Gradio を採用しています。

本記事では、このアプリケーションの紹介を通じて、MCPとGradioの魅力、そしてAIエージェント開発のこれからについてお伝えできればと思います。

ソースコードは以下のリポジトリで公開しています。
https://github.com/YusukeYoshiyama/simple_mcp_experiment

MCPとは

MCP (Model Context Protocol) とは、一言で言うと「AIのための標準的な接続規格」です。

これまで、AIモデルにファイルシステムやWeb検索、各種APIといった外部ツールを使わせるには、個別のツールごとに独自の連携方法（インテグレーション）を実装する必要がありました。これでは開発コストが高く、ツールの追加や変更も大変です。

MCPは、この連携方法を標準化するためのプロトコルです。よく「AIのためのUSB-Cポート」と表現されるように、MCPという共通の接続口さえ用意すれば、様々なツールやデータソースを簡単にAIモデルに接続できるようになります。

MCPは主に以下の3つの要素で構成されています。

  • MCPホスト: AIモデルを搭載したアプリケーション本体（例: Claude, ChatGPT）
  • MCPクライアント: ホストとサーバー間の通信を仲介するコンポーネント
  • MCPサーバー: ファイルシステムやAPIなど、特定のツールへのアクセスを提供する軽量サーバー

この仕組みにより、AIは利用可能なツールを動的に発見し、リアルタイムで双方向の通信を行うことが可能になります。
今回作成したアプリケーションでは、langchain-mcp-adapters というライブラリを使い、LangChainで構築したAIエージェントとMCPサーバーを接続しています。src/mcp_list.py に定義されているように、ファイルシステムやBrave Search、GitHubなど、様々なMCPサーバーを試せるようになっています。

Gradioとは

Gradio は、機械学習モデルのUIを驚くほど簡単に作成できるPythonライブラリです。

通常、Web UIを開発するにはHTML, CSS, JavaScriptといったフロントエンドの知識が必要ですが、Gradioを使えば数行のPythonコードを書くだけで、インタラクティブなWebアプリを構築できます。

今回のプロジェクトでは、以下のような目的でGradioを採用しました。

  • 迅速なプロトタイピング: MCPサーバーの設定やプロンプトの入力、結果の表示といった基本的なUIを素早く実装するため。
  • コンポーネントの豊富さ: テキストボックスやドロップダウン、ボタンといった必要なUI部品が標準で用意されているため。
  • Pythonとの親和性: バックエンドのロジック（src/mcp_execution.py）も全てPythonで記述しているため、UIからシームレスに関数を呼び出すことができる。

例えば、main.py の中では、以下のように直感的なコードでUIが構築されています。

import gradio as gr

# (中略)

with gr.Blocks() as app:
    with gr.Tab("MCP設定"):
        mcp_set = gr.Dropdown(
            choices=list(mcp_list.keys()),
            label="MCPを選択",
            interactive=True
        )
        command_textbox = gr.Textbox(label="command")
        args_textbox = gr.Textbox(label="args")
    
    with gr.Tab("メッセージ送信"):
        user_prompt_textbox = gr.Textbox(label="User Prompt")
        send_button = gr.Button("Send Prompt")
        result_area = gr.TextArea(label="Result")

このように、機械学習の実験やデモ作成において、Gradioは非常に強力なツールとなります。

Quick Start

このアプリケーションは、uv を使って簡単にセットアップして実行できます。

前提条件

  • uv
  • git
  • Python 3.12+

インストールと実行

  1. リポジトリをクローンします:

    git clone https://github.com/YusukeYoshiyama/simple_mcp_experiment
cd simple_mcp_experiment

  2. 仮想環境を作成し、依存関係をインストールします:

    uv sync

  3. 仮想環境をアクティベートします:

    source .venv/bin/activate

  4. .env ファイルを作成し、APIキーを設定します:
    README.md を参考に .env.example をコピーして、最低限 OPENAI_API_KEY を設定してください。

  5. アプリケーションを実行します:

    uv run python main.py

ブラウザで http://127.0.0.1:7860 のようなアドレスが開けば成功です。
「MCP設定」タブで試したいMCPサーバーを選び、「メッセージ送信」タブでプロンプトを入力してAIエージェントの動作を試してみてください。

今後の展望

今回作成したのは、あくまでMCPを試すためのシンプルな実験用アプリケーションです。今後は、以下のような機能拡張を考えています。

  • 対応MCPサーバーの追加: src/mcp_list.py に、コミュニティで開発されている様々なMCPサーバーの定義を追加していく。
  • UIの改善: ログの表示を見やすくしたり、ストリーミング出力に対応したりするなど、よりリッチなインターフェースを目指す。
  • エージェントの高度化: LangGraphの機能をより活用し、複数のツールを組み合わせるような、より複雑なタスクを実行できるエージェントを試す。
  • 実験管理機能: プロンプトや実行結果、トークン数などを保存・比較できるような機能を追加する。

MCPはまだ新しい技術ですが、AIエージェント開発のあり方を大きく変えるポテンシャルを秘めていると感じています。この記事が、皆さんがMCPやGradioに触れるきっかけになれば幸いです。

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
Sign upLogin
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?