ファインディ株式会社におけるMCP活用とサービス開発

Transcript

1. © Findy Inc. 2025.09.08 Findy AI Meetup in Fukuoka #2 ファインディ株式会社における MCP活⽤とサービス開発 1 ファインディ株式会社 テックリード ⼾⽥ 千隼 @starfish0206
2. © Findy Inc. 2 今⽇話すこと • MCPとは • MCP活⽤事例 ◦ MCPサーバーを内製 ◦ Pull request⾃動作成 ◦ 不具合を⾃動修正 ◦ リポジトリを跨いで参照 ◦ プロダクト ✕ MCP • まとめ
3. © Findy Inc. 3 MCPとは
4. © Findy Inc. 4 MCPとは • Model Context Protocolの略 • LLM にコンテキストを提供する⽅法を標準化するプロトコル • ⽣成AI⽤のUSB-Cポートのようなもの ◦ USB-Cは様々な周辺機器やアクセサリに接続するための標準規格 ◦ httpは様々なブラウザがWebに接続するための標準規格 ◦ MCPはAIモデルを様々なデータソースやツールに接続するための標準規格
5. © Findy Inc. 5 設定⽅法 { "inputs": [ { "type": "promptString", "id": "GITHUB_PERSONAL_ACCESS_TOKEN", "password": true } ], "servers": { "github": { "command": "docker", "args": [ "run", "-i", "--rm", "-e", "GITHUB_PERSONAL_ACCESS_TOKEN", "ghcr.io/github/github-mcp-server" ], "env": { "GITHUB_PERSONAL_ACCESS_TOKEN": "${input:GITHUB_PERSONAL_ACCESS_TOKEN}" } } } } 設定ファイルに追記してMCPサーバーを起動するだけ
6. © Findy Inc. 6
7. © Findy Inc. 7 MCP活⽤事例
8. © Findy Inc. MCPサーバーを内製 8
9. © Findy Inc. 9 MCPサーバーを内製 • MCP公式のTypeScript SDKを利⽤ • Nxを使って、簡単にMCPサーバーを⾃作出来る環境を整備 ◦ generatorコマンドで、ワンコマンドでMCPサーバーの雛形を作成 ◦ monorepo化により、社内MCPサーバーのエコシステム化 • 3⽇間で10個のMCPサーバー、30個のtoolを実装して、社内のエンジニアに配布できた
10. © Findy Inc. 10 Figmaのデータを取得して分析する FigmaデータのLint • Figma MCPを使ってデザインデータを取得する • 守るべきデザインルールのプロンプトを動的に作成してMCPサーバーから返す • デザインデータと、デザインルールのプロンプトをLLMに⾷わせて、分析する Figmaデータと共通Componentの差分チェック • Figma MCPを使ってデザインデータを取得する • デザインデータと⽐較して判定させるプロンプトを動的に作成してMCPサーバーから返す • デザインデータと、判定プロンプトをLLMに⾷わせて、分析する ◦ デザインデータが共通Componentに存在しないデザインを使っているかどうか判定させる MCPとLLMの責務を分けて運⽤することがコツ
11. © Findy Inc. 11 エンジニア教育 メンティーが受け取ったレビューの傾向を分析する • GitHubのAPIを実⾏して、次の情報を取得する ◦ ⼀定期間内でメンティーが作ったPull requestの⼀覧 ◦ そのPull requestで受け取った全てのレビュー内容 • レビューの内容と、評価基準をまとめたプロンプトを⼀緒にLLMに⾷わせて、⾃動で評価 GitHub Copilotの利⽤統計をグラフで出⼒する • GitHubのAPIを実⾏して、⼀定期間内のGitHub Copilotの利⽤状況を取得 • 取得したデータを加⼯して、mermaid記法のmarkdown形式のテキストで返す • クライアント側がmermaid記法のmarkdown形式のテキストをグラフで出⼒する MCPサーバーとクライアント側の責務を分けて運⽤することがコツ
12. © Findy Inc. Pull request⾃動作成 12
13. © Findy Inc. 13 GitHub MCP • GitHubのIssueにタスクを洗い出す • GitHub MCPを利⽤して、Issueの内容を取得する • 取得したIssueの内容をLLMに渡してコード修正を⾏う • lint/typecheck/testが全て通ったら、GitHub MCPを使ってPull requestを⾃動作成 ◦ Pull requestの概要⽂もLLMが⾃動⽣成
14. © Findy Inc. 不具合を⾃動修正 14
15. © Findy Inc. 15 Sentry MCP • SentryのMCPを使って、Issue情報を取得 • 不具合の原因探しと実装、テストコードを修正 • Pull requestまで⾃動作成 • この⼀連の流れを⾃動で実⾏するClaude Codeのカスタムスラッシュコマンドも⽤意
16. © Findy Inc. 16
17. © Findy Inc. リポジトリを跨いで参照 17
18. © Findy Inc. 18 Filesystem MCP • Filesystem MCPを使って、別のリポジトリへ参照を追加する • 公式のMCPサーバーなので安⼼して使うことができる ◦ 権限を与えるフォルダを指定することができる • 想定されるユースケース ◦ 開発⽤リポジトリとドキュメント⽤リポジトリが別れている場合 ◦ バックエンドとフロントエンドのリポジトリが別れている場合
19. © Findy Inc. 19
20. © Findy Inc. 20 プロダクト ✕ MCP
21. © Findy Inc. Findy AI+ 21
22. © Findy Inc. 22 Findy AI+とは？ GitHub連携‧プロンプト指⽰ で ⽣成AIアクティビティを可視化 し ⽣成AIの利活⽤向上を⽀援 するサービスです ⼈と⽣成AIの協働を後押しして、 開発組織の変⾰をサポートします
23. © Findy Inc. 23 サービス概要 • ⽣成AIの活⽤度を可視化するサービス ◦ GitHub Copilot ◦ Claude Code ◦ Devin ◦ Codex • ⽣成AIアクティビティを可視化し、⽣成AI利活⽤のボトルネック発⾒‧利活⽤推進をサポート • ユーザーがプロンプトで指⽰して、Findy AI+のMCPサーバー経由で⽣成AIの利活⽤状況を定量‧定性 両⾯から⾃動取得
24. © Findy Inc. 24 アーキテクチャ
25. © Findy Inc. 25 MCPを選定した理由 • MVP(Minimum Viable Product)で開発したい ◦ サービスそのものが受け⼊れられるか、売れるかどうかの⾒極めをしたい ◦ リモートMCPで提供することで、画⾯が不要となる • データ取得、加⼯に専念できる ◦ 分析結果のバラつきを防ぐために、promptまではMCPサーバーが⽤意 ◦ 分析はクライアント側のLLMに任せる • 初期の開発、運⽤コストを最⼩限としたかった
26. © Findy Inc. 26 管理画⾯もMCP • 運営管理側の管理画⾯を作るコストをカットしたい ◦ 画⾯のデザインやフロントエンドの実装は不要 • 運営メンバーのPCにgit cloneしてきて、Local MCPサーバーとして運⽤ ◦ 機能追加したら、git pullからのbuild、Local MCPサーバー再起動 • ⽣成AIを使って、⾃然⾔語ベースで管理機能を利⽤することが可能 ◦ 操作、⼊⼒ミスによる誤動作にはMCPサーバーのElicitationが有効
27. © Findy Inc. 27 Elicitation MCPサーバーが対話中にクライアントを介してユーザーに追加情報を要求する
28. © Findy Inc. 28 MCPでプロダクトを作った所感 • 世間⼀般にMCPという概念がまだ浸透していない ◦ MCPの設定をするところからサポートが必要 ◦ 想定以上に利⽤までのハードルが⾼かった • 画⾯無しでデータのCRUDを提供することが可能になった ◦ プロダクトの作り⽅が変わる • LLMとMCPの責務分けが重要 ◦ MCPはデータを取得して加⼯するところまでが役割 ◦ 分析、解析はLLMの役割
29. © Findy Inc. 29 まとめ
30. © Findy Inc. まとめ 30 • MCPの可能性は無限⼤ ◦ 開発効率を上げる ◦ プロダクトに埋め込む ◦ プロダクトの作り⽅が変わる • LLMや⽣成AIツールが変わっても、MCPは変わらない ◦ プロトコルなので、どのLLMや⽣成AIツールとも接続が出来る ◦ ⻑く使える知識、技術 • ファインディはMCPの有⽤性にいち早く気づき、検証を続けてきた ファインディに興味がある⽅は、ぜひカジュアル⾯談しましょう
31. © Findy Inc. ご清聴ありがとうございました 31