Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
MCP調べてみました! / Exploring MCP
Search
uhzz
April 13, 2025
Programming
2
2.4k
MCP調べてみました! / Exploring MCP
uhzz
April 13, 2025
Tweet
Share
More Decks by uhzz
See All by uhzz
自動生成されたhttpエンドポイントごとにカスタムミドルウェアを挿入したい話
uhzz
1
2.4k
Enablement Bootcampを終えて -Enablement Bootcamp for Gopherizing 〜業務で使えるGoを学ぼう〜
uhzz
0
280
安全にQAを行える環境が整いました!- Kyash TechTalk #6 - Kyashの開発をチラ見せ
uhzz
0
760
Goのローカル開発をWorkspacesではじめよう
uhzz
1
930
【Go:パッケージ管理】DepからGo Modulesへ
uhzz
0
1k
コードレビューで泣かないためのintSize = 32 << (^uint(0) >> 63)
uhzz
0
220
「ウチも、gRPC使えますか?」
uhzz
0
280
「インタフェースデザインの心理学」を読んで話したい3つのこと
uhzz
0
21k
「世界一「自由」な会社、NETFLIX NO RULES」を読んでみた
uhzz
0
380
Other Decks in Programming
See All in Programming
マテリアルって何者?RealityKitで扱うマテリアル入門
nao_randd
0
130
TSConfigからTypeScriptの世界を覗く
planck16
2
1.2k
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
120
衛星の軌道をWeb地図上に表示する
sankichi92
0
230
TVer iOSチームの共通認識の作り方 - Findy Job LT iOSアプリ開発の裏側 開発組織が向き合う課題とこれから
techtver
PRO
0
630
TSConfig Solution Style & subpath imports to switch types on a per-file basis
maminami373
1
160
バランスを見極めよう!実装の意味を明示するための型定義 TSKaigi 2025 Day2 (5/24)
whatasoda
2
740
鯛変だったRubyKaigi 2025 ── それでも楽しかった!
pndcat
0
130
イベントソーシングとAIの親和性ー物語とLLMに理解できるデータ
tomohisa
1
150
Language Server と喋ろう – TSKaigi 2025
pizzacat83
2
570
クラシルリワードにおける iOSアプリ開発の取り組み
funzin
1
750
TypeScriptのmoduleオプションを改めて整理する
bicstone
4
400
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Become a Pro
speakerdeck
PRO
28
5.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
105
19k
The Cost Of JavaScript in 2023
addyosmani
49
7.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Raft: Consensus for Rubyists
vanstee
137
6.9k
Typedesign – Prime Four
hannesfritz
41
2.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
A Tale of Four Properties
chriscoyier
159
23k
Transcript
MCP調べてみました! reo(@_uhzz_)
自己紹介 Reo Uehara X: @_uhzz_ GitHub: uh-zz Goとサウナが好き
想定する読者 • MCP、最近インターネットでよく見るけどイマイチよくわかってない • MCPをわかった気になりたい • 情報が多すぎて何を参考にすればいいかわからない
ゴール • MCP、なんとなくわかった • すぐ作れそうという気持ちになった • MCP、早く作りたくなってきた
アジェンダ • 最初にまとめ • MCPとは • MCPが動いているところを見よう • MCPのうれしいところ •
MCPって結局なに? • まとめ
最初にまとめ
これだけ分かればOK AIエージェント(e.g. Cline)にむやみやたらに回答させないための仕組み 代表的な機能を3つ押さえておけばOK 機能1:AIエージェントに最新のデータを提供する(Resource) 機能2:AIエージェント向けの機能を提供する(Tools) 機能3:AIエージェントと対話的に使える質問を提供する(Prompts) 最初にまとめ
MCPとは
アーキテクチャはこんなかんじ MCPとは MCPはクライアントサーバモデル AIエージェント(e.g. Cline)がホスト ホストにMCPクライアントをインストールする MCPクライアントサーバ間はJSON-RPC 2.0ベース 引用: https://modelcontextprotocol.io/docs/concepts/architecture
MCPサーバは、AIエージェント(MCPクライアント)に データを提供 推論するための文脈(コンテキスト)を与える 提供するデータはこんなかんじ • ローカルにあるファイル • データベースレコード • APIレスポンス
• スクショとか画像 • ログファイル など APIは以下2つ resources/list: リソースの一覧を取得 resources/read: リソース読み込み AIエージェントに最新のデータを提供する(Resource) MCPとは 引用: https://modelcontextprotocol.io/docs/concepts/architecture
MCPサーバは、AIエージェント(MCPクライアント)の アクションに必要な関数を提供 特徴は3つ MCPクライアントは、利用できるツールをリストアップ (発見) MCPクライアントは、見つけたツールを使うために MCPサーバへリクエスト(呼び出し) MCPサーバは、計算した結果を返す(単純計算も複雑 な処理も柔軟に書ける) APIは以下2つ
tools/list: ツール一覧を取得 tools/call: ツール呼び出し AIエージェント向けの機能を提供する(Tools) MCPとは 引用: https://modelcontextprotocol.io/docs/concepts/architecture
あらかじめ定義された質問テンプレ/ワークフロー Slackのスラッシュコマンドをイメージできれば OK 他にも、以下の特徴がある • 複数のインタラクションをチェーン • 特定のワークフローをガイドする など APIは以下2つ
prompts/list: プロンプト一覧を取得 prompts/get: プロンプトを使う AIエージェントと対話的に使える質問を提供する(Prompts) MCPとは 引用: ショートカットを使用して Slack でアクションを実行する
MCPが動いているところを見よう
チュートリアルをやってみました https://github.com/uh-zz/mcp-tutorial MCPが動いているところを見よう MCPサーバをGoで実装 ClineをMCPクライアントにします
MCPのうれしいところ
ベンダーロックインされない MCPのうれしいところ 引用: https://modelcontextprotocol.io/docs/concepts/architecture MCPはType-Cのようなもの(公式見解) 様々なデータソースやツールのインターフェースを標準 化することで、異なるAIプロバイダー間で利用可能
デザインからコード生成までがよりシームレスに 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 を短時間で 生成できるようになりました
MCPって結局なに?
MCPって結局なに? 「Model Context Protocol(MCP)の動作原理の概要を 掴むための記事」から抜粋 1. クライアントがサーバに対し、JSON-RPCに則ってリクエ ストを送信 2. サーバ側はリクエストに応じてリソース(DB,
API)を操作 3. 結果をクライアントに対し、JSON-RPCに則ってレスポン スを送信 引用: https://modelcontextprotocol.io/docs/concepts/architecture JSON-RPC
まとめ
まとめ AIエージェント(e.g. Cline)にむやみやたらに回答させないための仕組み 代表的な機能を3つ押さえておけばOK 機能1:AIエージェントに最新のデータを提供する(Resource) 機能2:AIエージェント向けの機能を提供する(Tools) 機能3:AIエージェントと対話的に使える質問を提供する(Prompts)
参考 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.