MCP調べてみました！ / Exploring MCP

Transcript

1. MCP調べてみました！ reo(@_uhzz_)
2. 自己紹介 Reo Uehara X: @_uhzz_ GitHub: uh-zz Goとサウナが好き
3. 想定する読者 • MCP、最近インターネットでよく見るけどイマイチよくわかってない • MCPをわかった気になりたい • 情報が多すぎて何を参考にすればいいかわからない
4. ゴール • MCP、なんとなくわかった • すぐ作れそうという気持ちになった • MCP、早く作りたくなってきた
5. アジェンダ • 最初にまとめ • MCPとは • MCPが動いているところを見よう • MCPのうれしいところ • MCPって結局なに？ • まとめ
6. 最初にまとめ
7. これだけ分かればOK AIエージェント(e.g. Cline)にむやみやたらに回答させないための仕組み 代表的な機能を３つ押さえておけばOK 機能1：AIエージェントに最新のデータを提供する(Resource) 機能2：AIエージェント向けの機能を提供する(Tools) 機能３:AIエージェントと対話的に使える質問を提供する(Prompts) 最初にまとめ
8. MCPとは
9. アーキテクチャはこんなかんじ MCPとは MCPはクライアントサーバモデル AIエージェント(e.g. Cline)がホスト ホストにMCPクライアントをインストールする MCPクライアントサーバ間はJSON-RPC 2.0ベース 引用: https://modelcontextprotocol.io/docs/concepts/architecture
10. MCPサーバは、AIエージェント(MCPクライアント)に データを提供 推論するための文脈(コンテキスト)を与える 提供するデータはこんなかんじ • ローカルにあるファイル • データベースレコード • APIレスポンス • スクショとか画像 • ログファイル など APIは以下２つ resources/list: リソースの一覧を取得 resources/read: リソース読み込み AIエージェントに最新のデータを提供する(Resource) MCPとは 引用: https://modelcontextprotocol.io/docs/concepts/architecture
11. MCPサーバは、AIエージェント(MCPクライアント)の アクションに必要な関数を提供 特徴は３つ MCPクライアントは、利用できるツールをリストアップ (発見) MCPクライアントは、見つけたツールを使うために MCPサーバへリクエスト(呼び出し) MCPサーバは、計算した結果を返す(単純計算も複雑 な処理も柔軟に書ける) APIは以下２つ tools/list: ツール一覧を取得 tools/call: ツール呼び出し AIエージェント向けの機能を提供する(Tools) MCPとは 引用: https://modelcontextprotocol.io/docs/concepts/architecture
12. あらかじめ定義された質問テンプレ/ワークフロー Slackのスラッシュコマンドをイメージできれば OK 他にも、以下の特徴がある • 複数のインタラクションをチェーン • 特定のワークフローをガイドする など APIは以下２つ prompts/list: プロンプト一覧を取得 prompts/get: プロンプトを使う AIエージェントと対話的に使える質問を提供する(Prompts) MCPとは 引用: ショートカットを使用して Slack でアクションを実行する
13. MCPが動いているところを見よう
14. チュートリアルをやってみました https://github.com/uh-zz/mcp-tutorial MCPが動いているところを見よう MCPサーバをGoで実装 ClineをMCPクライアントにします
15. MCPのうれしいところ
16. ベンダーロックインされない MCPのうれしいところ 引用: https://modelcontextprotocol.io/docs/concepts/architecture MCPはType-Cのようなもの(公式見解) 様々なデータソースやツールのインターフェースを標準 化することで、異なるAIプロバイダー間で利用可能
17. デザインからコード生成までがよりシームレスに MCPのうれしいところ 引用: https://zenn.dev/ubie_dev/articles/f927aaff02d618 Ubieさんの活用事例 記事から抜粋 1. まず Figma MCP から Figma の情報を取得 2. 次に Ubie UI MCP が呼び出され、コンポーネント情報 やトークン、アイコン情報を取得 3. Figma の情報をもとに、Ubie UI を使って実装を提案 <中略> テキストベースの指示だけで Ubie UI を使った実装が可能にな ります。例えば 「ユーザー情報入力フォームを Ubie UI で作成して。名前、メー ルアドレス、年齢の入力欄と送信ボタンが必要」 といった指示だけで、デザインシステムに準拠した UI を短時間で 生成できるようになりました
18. MCPって結局なに？
19. MCPって結局なに？ 「Model Context Protocol(MCP)の動作原理の概要を 掴むための記事」から抜粋 1. クライアントがサーバに対し、JSON-RPCに則ってリクエ ストを送信
 2. サーバ側はリクエストに応じてリソース（DB, API)を操作
 3. 結果をクライアントに対し、JSON-RPCに則ってレスポン スを送信 引用: https://modelcontextprotocol.io/docs/concepts/architecture JSON-RPC
20. まとめ
21. まとめ AIエージェント(e.g. Cline)にむやみやたらに回答させないための仕組み 代表的な機能を３つ押さえておけばOK 機能1：AIエージェントに最新のデータを提供する(Resource) 機能2：AIエージェント向けの機能を提供する(Tools) 機能３:AIエージェントと対話的に使える質問を提供する(Prompts)
22. 参考 Model Context Protocol Model Context Protocol (MCP) サーバを使ってみた・作ってみた Model Context Protocol(MCP)の動作原理の概要を掴むための記事 社内デザインシステムをMCPサーバー化したらUI実装が爆速になった GitHub - mark3labs/mcp-go: A Go implementation of the Model Context Protocol (MCP), enabling seamless integration between LLM applications and external data sources and tools.