実務で動くAIエージェントを作ろう！MCP×Mastraをライブコーディングで実践

by COLOPL Inc.

Embed

Start on current slide

Slide 1

Slide 1 text

実務で動く AIエージェントを作ろう！株式会社コロプラ 2026.01.29 ~ MCP×Mastraをライブコーディングで実践 ~

Slide 2

Slide 2 text

● 山田和毅 (@yamadashy) ● 株式会社コロプラ ● CIO室 AIイネーブルメントグループ ○ 社内のAI活用推進 ● 2万スターのOSS Repomix の作者 ○ MCP SDK, Mastraへの貢献も ● 約年一でハーフマラソン自己紹介

Slide 3

Slide 3 text

質問 AIエージェント触ったことある方 ✋ Cursor Cursor Cursor Devin Windsurf Antigravity Claude Code その他 Codex GitHub Copilot

Slide 4

Slide 4 text

今日のゴール AIエージェントやMCPの仕組みを理解し、「自分でも作れる！」という感覚を持ち帰る

Slide 5

Slide 5 text

実際に実務で動いているエージェントコロプラの執事「ウィリアム」 ● Slack上でやりとり ● あらゆる社外・社内サービスと繋がる ○ Slack ○ Backlog ○ Googleカレンダー ○ DeepWiki ○ 社内規定RAG ○ 社内サービス多数 ©COLOPL, Inc.

Slide 6

Slide 6 text

本日の構成 ● 座学 ○ AIエージェントの仕組みを理解する ○ MCPを理解する ● ライブコーディング ○ シンプルなエージェントの実装、自作Tool実行 ○ Mastraを使った実装 ○ MCPで外部サービスに接続「使う側」から「作る側」へ

Slide 7

Slide 7 text

LLMの限界を知る

Slide 8

Slide 8 text

LLM（生成AI）単体の能力 LLM単体でできることは限られている ▷ できること ● テキストからテキストを生成 ▷ できないこと ● 外部アクセスできない ● 記憶を持たない ● 自らの意思で継続できない

Slide 9

Slide 9 text

LLMにできないこと：外部アクセスできないファイルを読めない、APIを叩けない、時刻を知らない ● 各アプリは、日時を埋め込むか「日時がわかるTool」を呼び出している

Slide 10

Slide 10 text

LLMにできないこと：記憶を持たない前の会話を忘れる、途中経過を保持できない ● 各アプリは、会話履歴を保存して毎回全部送り直している

Slide 11

Slide 11 text

LLMにできないこと：自らの意思で継続できない一度答えたら終わり。「終わるまでやる」ができない ● 各アプリは、タスクを完了するまで継続する ○ Tool実行 ➔ 実行待ち ➔ 返答 Gemini API だけでは自動で続かない Claude Code は完遂

Slide 12

Slide 12 text

エージェントがやっていること Cursor などのエージェントがやっていること ● 外部アクセスできない ○ ➔ Tool（ファイル読み書き、API呼び出し） ● 記憶を持たない ○ ➔ Memory（会話履歴、作業状態を保存） ● 自らの意思で継続できない ○ ➔ Loop（完了まで繰り返す） ※ 対話型AI（ChatGPT, Gemini）も一部エージェント的な性質を持つ

Slide 13

Slide 13 text

エージェントの4部品（LLM/Tool/Loop/Memory）

Slide 14

Slide 14 text

エージェントの4部品エージェントは4つの部品で構成されている ● LLM ... 判断する（次に何をするか決める） ● Tool ... 外部にアクセスする（ファイル読み書き、API呼び出し） ● Loop ... 完了まで繰り返す ● Memory ... 履歴・状態を保持する Cursor も魔法ではなく、基本的にこれらで構成されている ● LLM ... Claude / GPT / Gemini ● Tool ... ファイル操作、検索、ターミナル ● Loop ... Agent モードの自己継続ループ ● Memory ... 会話履歴

Slide 15

Slide 15 text

コードで見る4部品実装のイメージ： while でループ、llm.chat() で判断、tools[] で実行

Slide 16

Slide 16 text

LLMは「判断」だけ LLMがやること ● 次に何をするか決める ● どのToolを使うか選ぶ ● 完了かどうか判断するアプリがやること ● Tool を実際に呼ぶ ● Loop を回す / 止める ● Memory を管理する ➔ 実行責任はアプリ側にある

Slide 17

Slide 17 text

実践エージェントを作ってみる

Slide 18

Slide 18 text

シンプルなエージェントを作ってみる lesson1: 記憶のみを持つエージェント ● Memory あり ● Loop なし ● Tool なし以下の指示で作ります。動かない場合は対話を重ねてください。 Gemini API で会話履歴を保持するチャットを作ってください。 TypeScript、単一ファイル、ターミナルで対話、tsxで実行。モデルはgemini-2.5-ﬂashを使用。環境変数は.envで管理し、こちらで設定します。

Slide 19

Slide 19 text

シンプルなエージェントを作ってみるライブコーディングのコードはこちら https://github.com/colopl/geek-camp-2026-live-coding 以下で clone してください $ git clone https://github.com/colopl/geek-camp-2026-live-coding.git

Slide 20

Slide 20 text

補足：GeminiのAPIキー作成 Google AI Studio で発行するのが便利 1. こちらにアクセス a. https://aistudio.google.com/ 2. 「Get API Key」から「APIキーを作成」 3. .env に設定 ※ キーが漏れないように注意。.env に入れる場合は .gitignore に入れる

Slide 21

Slide 21 text

シンプルなエージェントを作ってみる LLMを呼び出し、Memoryに記憶

Slide 22

Slide 22 text

シンプルなエージェントを作ってみる記憶を保つので、じゃんけんができるように

Slide 23

Slide 23 text

Tool Calling

Slide 24

Slide 24 text

Tool Calling とは Tool Calling = LLMが『この関数を呼べ』という仕組み ● LLMは関数を「実行しない」。「呼べ」と指示するだけ ● 実行するのはアプリ側 ● 結果をLLMに返して、次の判断をさせる流れ（時刻取得の例） 1. ユーザー「今何時？」 2. アプリ ➔ LLMに送信 3. LLM「getCurrentTime を呼べ」 4. アプリ ➔ 実際に実行 ➔ "2026-01-29 14:30" 5. LLM「現在14時30分です」

Slide 25

Slide 25 text

Toolの定義 Toolは以下のように定義（イメージ） ● description ... LLM向けの説明。LLMがこちらを見てToolを使うか判断 ● execute ... 実際に実行される関数

Slide 26

Slide 26 text

補足: Tool設計の原則「1つのTool」で「1つ責務」 ▷ うまくいく設計 ● 説明や入出力のパラメーターが明確 ○ 「どういう場合に使うか」「どのように使うか」を正確に書く ● 1つのToolは1つのことだけやる ▷ うまくいかない設計 ● 引数が曖昧 ➔ LLMが「それっぽく」埋めて失敗 ● 責務が大きすぎ ➔ 何でもできるToolは安定しない ○ 悪い例：「ファイル操作Tool」 ○ 良い例：「読み取りTool」「編集Tool」「削除Tool」

Slide 27

Slide 27 text

実践 Toolが使えるエージェントを作る

Slide 28

Slide 28 text

Toolが使えるエージェントを作る lesson2: LoopもToolもある基本的な機能を備えたエージェント ● Memory あり ● Loop あり ● Tool あり lesson1の成果物に以下の指示で追加実装 lesson1-simple-agent-solution フォルダを元に、 getCurrentTime ツールを追加してください。「今何時？」と聞いたら、実際の時刻を返すようにしてください。 Tool呼び出しがあったら実行して結果を返すLoopも追加してください。

Slide 29

Slide 29 text

Toolが使えるエージェントを作る LoopとTool呼び出し部分が追加される

Slide 30

Slide 30 text

Toolが使えるエージェントを作る複数回の動作が可能に

Slide 31

Slide 31 text

AIエージェントフレームワーク

Slide 32

Slide 32 text

素朴実装の強み細かい制御が可能 ● 仕組みを理解できる ● Context Engineeringが自由にできる ○ メッセージ履歴の編集・要約 ○ Agent切り替え（handoﬀ） ○ Toolの出力とLLMへの入力を分離実際のプロダクトでも素朴実装が選ばれるケース ● Anthropic/OpenAI は過度な抽象化を避けるよう推奨 ○ Building Eﬀective AI Agents \ Anthropic

Slide 33

Slide 33 text

素朴実装 vs AIフレームワーク素朴実装 ● 仕組みを理解できる ● 細かい制御が可能で、徹底的に品質にこだわるなら向いている AIフレームワーク ● GPT, Gemini などの差異を気にせず使える ● 抽象化されていて、シンプルなエージェントなら5~10行程度 ● 多くの機能を簡単に導入できる ○ 記憶の永続化 ○ MCP ○ RAG 参考になるリンク： AI Agentフレームワークを使うべきなのか？

Slide 34

Slide 34 text

主なAIフレームワーク TypeScript ● AI SDK（Vercel） ... 複数LLM対応、軽量 ● Mastra ... Workﬂow/MCP対応 ● LangChain.js ... Python版の移植 ● Claude Agent SDK - Anthropic公式、Claude最適化 Python ● LangChain ... 最も有名 ● Agent Development Kit ... Google製。Googleのインフラと相性が良い ● LlamaIndex ... RAG特化 ● Pydantic AI ... 型安全重視 ● OpenAI Agents SDK ... シンプル志向

Slide 35

Slide 35 text

実践 Mastraでエージェントを構築

Slide 36

Slide 36 text

Mastraでエージェントを構築 lesson3: lesson2と同等の機能を持つエージェント ● Memory あり ● Loop あり ● Tool あり lesson2の成果物に以下の指示で追加実装 lesson2-tool-agent-solution フォルダを元に、今のシンプルなエージェントをMastraで書き直してください。 Mastra v1.0 以上、AI SDK v6.0 以上を使用。汎用的なエージェントにしつつ、getCurrentTime ツールを使って、「今何時？」と聞いたら時刻を返すように

Slide 37

Slide 37 text

Mastraでエージェントを構築 ToolとAgentをそれぞれ定義

Slide 38

Slide 38 text

Mastraでエージェントを構築 lesson2と同様に複数回の動作が可能に

Slide 39

Slide 39 text

補足：Mastra Playground Playgroundという機能があり、エージェントを高品質なUIで検証できる

Slide 40

Slide 40 text

素朴実装 vs AIフレームワーク AIフレームワークを使うとシンプルに多くの機能の実装ができる素朴実装 AIフレームワーク Tool呼び出しループ手動while文自動コード量（ CLI版）約127行（エージェント部分は約 53行）約80行（エージェント部分は 13行）拡張性自前で実装フレームワークの機能が使える MCP・Storage どちらを選択するかは要件によるので深く検討すること

Slide 41

Slide 41 text

MCPを理解する

Slide 42

Slide 42 text

MCP とは AIエージェントとは切っても切り離せない関係 ● APIやファイルアクセスなど、あらゆるものをAIが扱いやすい形にできる ○ それぞれを実装する場合に比べ、差し替えや追加が楽で再利用しやすい ● 「AIアプリ向けのUSB-Cポート」と表現される ➔

Slide 43

Slide 43 text

MCPの何が良いのか lesson2で作った「時間Tool」を例にすると... 要件が増えるたびにエージェントのコードを修正する必要がある ● タイムゾーンを指定したい ● 出力フォーマットを変えたい（ISO 8601、和暦など） ● 他のエージェントで「時間Tool」を使いたい「Agent」と「時間MCP」のように分離できれば ● それぞれのコードの複雑化を抑えられる ● Claude Code、CursorなどのAIエージェントツールに加え、 MCPを扱えるフレームワーク(Mastra, LangChainなど)でも使える

Slide 44

Slide 44 text

MCPの形態 Local MCP（手元の能力） ● ローカルのファイルアクセスなど、あらゆるローカルの作業 ● 例 ○ FileSystem MCP → ファイルの一覧、読み取り、書き込み ○ APIのラッパーMCP Remote MCP（外部の能力） ● Webサイトへのアクセスやデータ読み書き ● 例 ○ DeepWiki MCP → GitHubリポジトリを理解し、OSSのドキュメントや構造を質問できる

Slide 45

Slide 45 text

何をMCPにするか MCP公式の MCPサンプル集を参考にするのがおすすめ ● Filesystem ... ファイルアクセス ● Memory ... ユーザーとのやりとりを記憶 ● Time ... 時間取得 ● Git ... Git操作 ● Fetch ... Webページの情報取得参考になるリンク: MCP サーバーの基礎から実践レベルの知識まで

Slide 46

Slide 46 text

補足：実務におけるMCP利用・開発の壁今日は扱わないが、実務ではいくつか壁を乗り越える必要がある ● 認証・認可 ... 誰がどのように使えるか、アクセス可能範囲 ● 監査ログ ... 誰が何を使ったか ● 安全性 ... リスクのある操作は人間が確認 or 利用不可 ● 費用対効果

Slide 47

Slide 47 text

実践 MastraでMCPに繋ぐ

Slide 48

Slide 48 text

MastraでMCPに繋ぐ lesson4: lesson3のエージェントにDeepWiki MCPを接続 ● Memory あり ● Loop あり ● Tool あり（MCPあり） lesson3の成果物に以下の指示で追加実装 lesson3のエージェントにDeepWiki MCPを接続してください。 @mastra/mcp パッケージを使う DeepWiki MCP URL: https://mcp.deepwiki.com/mcp

Slide 49

Slide 49 text

MastraでMCPに繋ぐ MCPの設定を作り、MCPをAgentに登録

Slide 50

Slide 50 text

MastraでMCPに繋ぐ「mastra-ai/mastraの概要を教えて」という質問に正確に回答できるように

Slide 51

Slide 51 text

MCPを作る

Slide 52

Slide 52 text

MCPを作る側になるエージェントの構築は、エージェントの実装のみにあらず ▷ lesson4まで ● MCPを「使う側」としてDeepWiki MCPに接続 ○ 既存のMCPサーバーの能力をエージェントに追加 ▷ lesson5から ● MCPを「作る側」になる ○ lesson2の「時間Tool」をMCPサーバー化する ● 何が変わるか ● 自分で作ったToolを、どのエージェントからでも使える ● Claude Code、Cursor、自作エージェントが全部同じ形で接続可能

Slide 53

Slide 53 text

MCPサーバーの構造必要なもの ● @modelcontextprotocol/sdk（MCP公式SDK）構造（2つの要素） ● Server ... MCPサーバー本体 ● Tool ... 提供する能力の定義 Toolの定義 ● name ... ツール名 ● description ... LLM向けの説明 ● inputSchema ... 入力の型（zodで定義） ● handler ... 実際の処理

Slide 54

Slide 54 text

コードで見るMCPサーバー MCPサーバーと、それに属するToolを設定

Slide 55

Slide 55 text

実践 MCPを作る

Slide 56

Slide 56 text

MCPを作る lesson5: 新年らしく「おみくじMCPサーバー」を作る以下の指示で実装おみくじを引けるMCPサーバーを作成してください。サーバー名はomikuji-server。確率分布: 超大吉5%, 大吉15%, 吉30%, 中吉30%, 小吉15%, 末吉5% TypeScript、単一ファイル、tsxで実行。 @modelcontextprotocol/sdk パッケージを使う。

Slide 57

Slide 57 text

MCPを作るおみくじのロジックを実装し、MCPサーバーにツールとして登録

Slide 58

Slide 58 text

MCPをClaude Codeに登録作ったMCPサーバーを登録するコピペ用 { "omikuji-server": { "command": "npx", "args": [ "tsx", "/path/to/lesson5-mcp-server-solution/src/index.ts" ] } }

Slide 59

Slide 59 text

作ったMCPを使う Claude Codeでおみくじができるように

Slide 60

Slide 60 text

まとめ

Slide 61

Slide 61 text

今日のゴール（振り返り） AIエージェントやMCPの仕組みを理解し、「自分でも作れる！」という感覚を持ち帰る

Slide 62

Slide 62 text

まとめエージェントとMCPの仕組みを理解し、エージェントを構築できるようになった ● Cursorは魔法ではない ○ LLM ... lesson1 ○ Memory ... lesson1 ○ Loop ... lesson2 ○ Tool（MCP） .... lesson3~5 ○ 今日、その全部を自分の手（エージェント）で作った「使う側」から「作る側」へ

Slide 63

Slide 63 text

コロプラについて

Slide 64

Slide 64 text

MISSION VISION 行動指針エンターテインメントで日常をより楽しく、より素晴らしく TRY 挑戦 VALUE 価値あるものづくり BELIEVE 信じる心会社紹介 - フィロソフィー

Slide 65

Slide 65 text

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.

Slide 66

Slide 66 text

【AIが手伝ってくれるプログラミングエディタ】コードを書く際に、AIが自動で続きを提案したり、エラーを修正してくれる開発ツールです。 AIエージェントを搭載した Visual Studio Code ベースの次世代コードエディタです。コロプラの「取り組み」 - AI推進組織の発足・Cursorの導入「AI駆動開発」に向けた取り組みを本格化「AI推進組織」を発足、「Cursor」をエンジニア組織に導入「Cursor」とは？ AIナレッジ共有も活発化エンジニア・企画職問わず活用が広がる

Slide 67

Slide 67 text

『神魔狩りのツクヨミ』生成AI大賞2025《グランプリ》受賞！・技術だけでなく、コミュニティやアーキテクチャ設計まで踏み込んだ点・ゲーム内での生成AIの位置づけを明確にし、クリエイターとの信頼構築に取り組んでいる点・社会全体で生成AIが加速する中、“恐れを受け止めながら前進する姿勢”を示した点コロプラの「取り組み」 - 新作：神魔狩りのツクヨミじんまが ©COLOPL, Inc.