実務で動くAIエージェントを作ろう！MCP×Mastraをライブコーディングで実践

2026年1月29日開催の「技育CAMPアカデミア」での登壇資料です。

イベント詳細はこちら
https://talent.supporterz.jp/events/aac4e9f2-bf6f-4bb3-b323-6addade3ff4f/

CursorやClaude CodeなどのAIエージェントが裏側でどのように動いているのか（LLM・Tool・Loop・Memoryの4要素）を解き明かし、参加者が「使う側」から「作る側」になることを目指した内容となっています。

素朴なTypeScript実装から始まり、AIフレームワーク「Mastra」を用いたエージェント構築、さらに話題の「MCP（Model Context Protocol）」の接続から自作サーバーの実装までを、ライブコーディング形式で実践・解説しています。

ライブコーディングのソースコードはこちら
https://github.com/colopl/geek-camp-2026-live-coding

Transcript

1. 実務で動く AIエージェントを作ろう！ 株式会社コロプラ 2026.01.29 ~ MCP×Mastraをライブコーディングで実践 ~
2. • 山田 和毅 (@yamadashy) • 株式会社コロプラ • CIO室 AIイネーブルメントグループ ◦ 社内のAI活用推進 • 2万スターのOSS Repomix の作者 ◦ MCP SDK, Mastraへの貢献も • 約年一でハーフマラソン 自己紹介
3. 質問 AIエージェント触ったことある方 ✋
4. 今日のゴール AIエージェントやMCPの仕組みを理解し、 「自分でも作れる！」 という感覚を持ち帰る
5. 実際に実務で動いているエージェント コロプラの執事「ウィリアム」 • Slack上でやりとり • あらゆる社外・社内サービスと繋がる ◦ Slack ◦ Backlog ◦ Googleカレンダー ◦ DeepWiki ◦ 社内規定RAG ◦ 社内サービス多数
6. 本日の構成 • 座学 ◦ AIエージェントの仕組みを理解する ◦ MCPを理解する • ライブコーディング ◦ シンプルなエージェントの実装、自作Tool実行 ◦ Mastraを使った実装 ◦ MCPで外部サービスに接続 「使う側」から「作る側」へ
7. LLMの限界を知る
8. LLM（生成AI）単体の能力 LLM単体でできることは限られている ▷ できること • テキストからテキストを生成 ▷ できないこと • 外部アクセスできない • 記憶を持たない • 自らの意思で継続できない
9. LLMにできないこと：外部アクセスできない ファイルを読めない、APIを叩けない、時刻を知らない • 各アプリは、日時を埋め込むか「日時がわかるTool」を呼び出している
10. LLMにできないこと：記憶を持たない 前の会話を忘れる、途中経過を保持できない • 各アプリは、会話履歴を保存して毎回全部送り直している
11. LLMにできないこと：自らの意思で継続できない 一度答えたら終わり。「終わるまでやる」ができない • 各アプリは、タスクを完了するまで継続する ◦ Tool実行 ➔ 実行待ち ➔ 返答 Gemini API だけでは自動で続かない Claude Code は完遂
12. エージェントがやっていること Cursor などのエージェントがやっていること • 外部アクセスできない ◦ ➔ Tool（ファイル読み書き、API呼び出し） • 記憶を持たない ◦ ➔ Memory（会話履歴、作業状態を保存） • 自らの意思で継続できない ◦ ➔ Loop（完了まで繰り返す） ※ 対話型AI（ChatGPT, Gemini）も一部エージェント的な性質を持つ
13. エージェントの4部品 （LLM/Tool/Loop/Memory）
14. エージェントの4部品 エージェントは4つの部品で構成されている • LLM ... 判断する（次に何をするか決める） • Tool ... 外部にアクセスする（ファイル読み書き、API呼び出し） • Loop ... 完了まで繰り返す • Memory ... 履歴・状態を保持する Cursor も魔法ではなく、基本的にこれらで構成されている • LLM ... Claude / GPT / Gemini • Tool ... ファイル操作、検索、ターミナル • Loop ... Agent モードの自己継続ループ • Memory ... 会話履歴
15. コードで見る4部品 実装のイメージ： while でループ、llm.chat() で判断、tools[] で実行
16. LLMは「判断」だけ LLMがやること • 次に何をするか決める • どのToolを使うか選ぶ • 完了かどうか判断する アプリがやること • Tool を実際に呼ぶ • Loop を回す / 止める • Memory を管理する ➔ 実行責任はアプリ側にある
17. 実践 エージェントを作ってみる
18. シンプルなエージェントを作ってみる lesson1: 記憶のみを持つエージェント • Memory あり • Loop なし • Tool なし 以下の指示で作ります。動かない場合は対話を重ねてください。 Gemini API で会話履歴を保持するチャットを作ってください。 TypeScript、単一ファイル、ターミナルで対話、tsxで実行。 モデルはgemini-2.5-flashを使用。 環境変数は.envで管理し、こちらで設定します。
19. シンプルなエージェントを作ってみる ライブコーディングのコードはこちら https://github.com/colopl/geek-camp-2026-live-coding 以下で clone してください $ git clone https://github.com/colopl/geek-camp-2026-live-coding.git
20. 補足：GeminiのAPIキー作成 Google AI Studio で発行するのが便利 1. こちらにアクセス a. https://aistudio.google.com/ 2. 「Get API Key」から「APIキーを作成」 3. .env に設定 ※ キーが漏れないように注意。.env に入れる場合は .gitignore に入れる
21. シンプルなエージェントを作ってみる LLMを呼び出し、Memoryに記憶
22. シンプルなエージェントを作ってみる 記憶を保つので、じゃんけんができるように
23. Tool Calling
24. Tool Calling とは Tool Calling = LLMが『この関数を呼べ』という仕組み • LLMは関数を「実行しない」。「呼べ」と指示するだけ • 実行するのはアプリ側 • 結果をLLMに返して、次の判断をさせる 流れ（時刻取得の例） 1. ユーザー「今何時？」 2. アプリ ➔ LLMに送信 3. LLM「getCurrentTime を呼べ」 4. アプリ ➔ 実際に実行 ➔ "2026-01-29 14:30" 5. LLM「現在14時30分です」
25. Toolの定義 Toolは以下のように定義（イメージ） • description ... LLM向けの説明。LLMがこちらを見てToolを使うか判断 • execute ... 実際に実行される関数
26. 補足: Tool設計の原則 「1つのTool」で「1つ責務」 ▷ うまくいく設計 • 説明や入出力のパラメーターが明確 ◦ 「どういう場合に使うか」「どのように使うか」を正確に書く • 1つのToolは1つのことだけやる ▷ うまくいかない設計 • 引数が曖昧 ➔ LLMが「それっぽく」埋めて失敗 • 責務が大きすぎ ➔ 何でもできるToolは安定しない ◦ 悪い例：「ファイル操作Tool」 ◦ 良い例：「読み取りTool」「編集Tool」「削除Tool」
27. 実践 Toolが使えるエージェントを作 る
28. Toolが使えるエージェントを作る lesson2: LoopもToolもある基本的な機能を備えたエージェント • Memory あり • Loop あり • Tool あり lesson1の成果物に以下の指示で追加実装 lesson1-simple-agent-solution フォルダを元に、 getCurrentTime ツールを追加してください。 「今何時？」と聞いたら、実際の時刻を返すようにしてください。 Tool呼び出しがあったら実行して結果を返すLoopも追加してください。
29. Toolが使えるエージェントを作る LoopとTool呼び出し部分が追加される
30. Toolが使えるエージェントを作る 複数回の動作が可能に
31. AIエージェントフレームワーク
32. 素朴実装の強み 細かい制御が可能 • 仕組みを理解できる • Context Engineeringが自由にできる ◦ メッセージ履歴の編集・要約 ◦ Agent切り替え（handoff） ◦ Toolの出力とLLMへの入力を分離 実際のプロダクトでも素朴実装が選ばれるケース • Anthropic/OpenAI は過度な抽象化を避けるよう推奨 ◦ Building Effective AI Agents \ Anthropic
33. 素朴実装 vs AIフレームワーク 素朴実装 • 仕組みを理解できる • 細かい制御が可能で、徹底的に品質にこだわるなら向いている AIフレームワーク • GPT, Gemini などの差異を気にせず使える • 抽象化されていて、シンプルなエージェントなら5~10行程度 • 多くの機能を簡単に導入できる ◦ 記憶の永続化 ◦ MCP ◦ RAG 参考になるリンク： AI Agentフレームワークを使うべきなのか？
34. 主なAIフレームワーク TypeScript • AI SDK（Vercel） ... 複数LLM対応、軽量 • Mastra ... Workflow/MCP対応 • LangChain.js ... Python版の移植 • Claude Agent SDK - Anthropic公式、Claude最適化 Python • LangChain ... 最も有名 • Agent Development Kit ... Google製。Googleのインフラと相性が良い • LlamaIndex ... RAG特化 • Pydantic AI ... 型安全重視 • OpenAI Agents SDK ... シンプル志向
35. 実践 Mastraでエージェントを構築
36. Mastraでエージェントを構築 lesson3: lesson2と同等の機能を持つエージェント • Memory あり • Loop あり • Tool あり lesson2の成果物に以下の指示で追加実装 lesson2-tool-agent-solution フォルダを元に、 今のシンプルなエージェントをMastraで書き直してください。 Mastra v1.0 以上、AI SDK v6.0 以上を使用。 汎用的なエージェントにしつつ、getCurrentTime ツールを使って、「今何 時？」と聞いたら時刻を返すように
37. Mastraでエージェントを構築 ToolとAgentをそれぞれ定義
38. Mastraでエージェントを構築 lesson2と同様に複数回の動作が可能に
39. 補足：Mastra Playground Playgroundという機能があり、エージェントを高品質なUIで検証できる
40. 素朴実装 vs AIフレームワーク AIフレームワークを使うとシンプルに多くの機能の実装ができる 素朴実装 AIフレームワーク Tool呼び出しループ 手動while文 自動 コード量（ CLI版） 約127行 （エージェント部分は約 53行） 約80行 （エージェント部分は 13行） 拡張性 自前で実装 フレームワークの機能が使える MCP・Storage どちらを選択するかは要件によるので深く検討すること
41. MCPを理解する
42. MCP とは AIエージェントとは切っても切り離せない関係 • APIやファイルアクセスなど、あらゆるものをAIが扱いやすい形にできる ◦ それぞれを実装する場合に比べ、差し替えや追加が楽で再利用しやすい • 「AIアプリ向けのUSB-Cポート」と表現される ➔
43. MCPの何が良いのか lesson2で作った「時間Tool」を例にすると... 要件が増えるたびにエージェントのコードを修正する必要がある • タイムゾーンを指定したい • 出力フォーマットを変えたい（ISO 8601、和暦など） • 他のエージェントで「時間Tool」を使いたい 「Agent」と「時間MCP」のように分離できれば • それぞれのコードの複雑化を抑えられる • Claude Code、CursorなどのAIエージェントツールに加え、 MCPを扱えるフレームワーク(Mastra, LangChainなど)でも使える
44. MCPの形態 Local MCP（手元の能力） • ローカルのファイルアクセスなど、あらゆるローカルの作業 • 例 ◦ FileSystem MCP → ファイルの一覧、読み取り、書き込み ◦ APIのラッパーMCP Remote MCP（外部の能力） • Webサイトへのアクセスやデータ読み書き • 例 ◦ DeepWiki MCP → GitHubリポジトリを理解し、OSSのドキュメントや 構造を質問できる
45. 何をMCPにするか MCP公式の MCPサンプル集 を参考にするのがおすすめ • Filesystem ... ファイルアクセス • Memory ... ユーザーとのやりとりを記憶 • Time ... 時間取得 • Git ... Git操作 • Fetch ... Webページの情報取得 参考になるリンク: MCP サーバーの基礎から実践レベルの知識まで
46. 補足：実務におけるMCP利用・開発の壁 今日は扱わないが、実務ではいくつか壁を乗り越える必要がある • 認証・認可 ... 誰がどのように使えるか、アクセス可能範囲 • 監査ログ ... 誰が何を使ったか • 安全性 ... リスクのある操作は人間が確認 or 利用不可 • 費用対効果
47. 実践 MastraでMCPに繋ぐ
48. MastraでMCPに繋ぐ lesson4: lesson3のエージェントにDeepWiki MCPを接続 • Memory あり • Loop あり • Tool あり（MCPあり） lesson3の成果物に以下の指示で追加実装 lesson3のエージェントにDeepWiki MCPを接続してください。 @mastra/mcp パッケージを使う DeepWiki MCP URL: https://mcp.deepwiki.com/mcp
49. MastraでMCPに繋ぐ MCPの設定を作り、MCPをAgentに登録
50. MastraでMCPに繋ぐ 「mastra-ai/mastraの概要を教えて」という質問に正確に回答できるように
51. MCPを作る
52. MCPを作る側になる エージェントの構築は、エージェントの実装のみにあらず ▷ lesson4まで • MCPを「使う側」としてDeepWiki MCPに接続 ◦ 既存のMCPサーバーの能力をエージェントに追加 ▷ lesson5から • MCPを「作る側」になる ◦ lesson2の「時間Tool」をMCPサーバー化する • 何が変わるか • 自分で作ったToolを、どのエージェントからでも使える • Claude Code、Cursor、自作エージェントが全部同じ形で接続可能
53. MCPサーバーの構造 必要なもの • @modelcontextprotocol/sdk（MCP公式SDK） 構造（2つの要素） • Server ... MCPサーバー本体 • Tool ... 提供する能力の定義 Toolの定義 • name ... ツール名 • description ... LLM向けの説明 • inputSchema ... 入力の型（zodで定義） • handler ... 実際の処理
54. コードで見るMCPサーバー MCPサーバーと、それに属するToolを設定
55. 実践 MCPを作る
56. MCPを作る lesson5: 新年らしく「おみくじMCPサーバー」を作る 以下の指示で実装 おみくじを引けるMCPサーバーを作成してください。 サーバー名はomikuji-server。 確率分布: 超大吉5%, 大吉15%, 吉30%, 中吉30%, 小吉15%, 末吉5% TypeScript、単一ファイル、tsxで実行。 @modelcontextprotocol/sdk パッケージを使う。
57. MCPを作る おみくじのロジックを実装し、MCPサーバーにツールとして登録
58. MCPをClaude Codeに登録 作ったMCPサーバーを登録する コピペ用 { "omikuji-server": { "command": "npx", "args": [ "tsx", "/path/to/lesson5-mcp-server-solution/src/index.ts" ] } }
59. 作ったMCPを使う Claude Codeでおみくじができるように
60. まとめ
61. 今日のゴール（振り返り） AIエージェントやMCPの仕組みを理解し、 「自分でも作れる！」 という感覚を持ち帰る
62. まとめ エージェントとMCPの仕組みを理解し、エージェントを構築できるようになった • Cursorは魔法ではない ◦ LLM ... lesson1 ◦ Memory ... lesson1 ◦ Loop ... lesson2 ◦ Tool（MCP） .... lesson3~5 ◦ 今日、その全部を自分の手（エージェント）で作った 「使う側」から「作る側」へ
63. コロプラについて
64. MISSION VISION 行動指針 エンターテインメントで日常をより楽しく、より素晴らしく TRY 挑戦 VALUE 価値あるものづくり BELIEVE 信じる心 会社紹介 - フィロソフィー
65. 65 コロプラの「強み」 - タイトル紹介 世界初の位置情報 × ゲー ム 2003 クイズ × RPG 2013 縦型3DCG × アクション 2014 VRゲーム Steam上1位 2017 位置ゲー × RPG 2019 ゲーム × ライブ配信 2021 ハイポリモデル 2023 ゲーム × 生成AI 2025 ※位置ゲーはコロプラの商標登録です ※2014年からVR向け開発 ©COLOPL, Inc. © ARMOR PROJECT/BIRD STUDIO/SQUARE ENIX All Rights Reserved.
66. 【AIが手伝ってくれるプログラミングエディタ】 コードを書く際に、AIが自動で続きを提案したり、エラー を修正してくれる開発ツールです。 AIエージェントを搭載した Visual Studio Code ベースの 次世代コードエディタです。 コロプラの「取り組み」 - AI推進組織の発足・Cursorの導入 「AI駆動開発」に向けた取り組みを本格化 「AI推進組織」を発足、 「Cursor」をエンジニア組織に導入 「Cursor」とは？ AIナレッジ共有も活発化 エンジニア・企画職問わず活用が広がる
67. 『神魔狩りのツクヨミ』生成AI大賞2025《グランプリ》受賞！ ・技術だけでなく、コミュニティやアーキテクチャ設計まで踏み込んだ点 ・ゲーム内での生成AIの位置づけを明確にし、クリエイターとの信頼構築に取り組んでいる点 ・社会全体で生成AIが加速する中、“恐れを受け止めながら前進する姿勢”を示した点 コロプラの「取り組み」 - 新作：神魔狩りのツクヨミ じんまが ©COLOPL, Inc.