MCPを活用したアプリ自動開発

勉強会全体流れ＋MCPを活用したアプリ自動開発

Transcript

1. ©2025 TC3株式会社 Confidential ©2025 TC3株式会社 Confidential 1
 話題のMCPを含めた 最新AI技術トレンド勉強会 2025/05/14 TC3株式会社
2. ©2025 TC3株式会社 Confidential 2
 全体の流れ 1. オープニング a. 会社紹介 b. 自己紹介 c. 勉強会概要 2. 登壇セッション 3. LTセッション 4. 交流会
3. ©2025 TC3株式会社 Confidential 3
 オープニング
4. ©2025 TC3株式会社 Confidential 　　　会社情報 及び 事業内容 TC3は攻めのDX戦略における 顧客向けウェブアプリケーション開発 及び AI開発に特化した企業です。 ティーシースリー B2B 型アプリケーションを複数ご提供するアプリ ケーション提供者向けに、エンドユーザー自身が組 織内のユーザーやサービスを管理できる「管理ポー タル」をはじめとした、カスタマイズ可能な SaaS プロダクトをご提供 ※ 認証認可基盤には Okta CIC などが選択可能 　「Tactna」SaaS プロダクト事業 世界の選りすぐりのエンジニアを活用した 独自の開発手法を持っています。 TACTNA 共通 ID を軸にした複数アプリ対応 共通プラットフォーム （認証認可基盤を含む）
5. ©2025 TC3株式会社 Confidential 5
 　　　自己紹介 History • 2010.03 ~ 2016.02 KMOU Electronical and Electronics engineering Bachelor • 2015.06 ~ 2018.02 KMOU Electronic communication and Signal processing Master • 2019.02 ~ 2020.08 Mobile application engineer • 2020.09 ~ 2022.09 AI engineer (NLP) • 2022.10 ~ 2023.12 AI engineer (Visual inspection) • 2024.01 ~ NOW AI Architect in TC3 イウンヒョン X: @naninyamx
6. ©2025 TC3株式会社 Confidential 6
 勉強会概要 • 勉強会 ◦ 話題のMCPを含めた最新AI技術トレンド勉強会 • 背景 ◦ 新たなAIに関する技術共有と意見交換 • 目標 ◦ 加速化されるAI技術のフォローアップ ◦ AIとの連携関連の多方面からの知見共有、ディスカッション • 今日の流れ ◦ 登壇セッション ▪ MCPを活用したアプリ自動開発（ヒョン） ▪ Clineプロンプト徹底解剖（梅本さん） ▪ ちょっと高性能なLINE botをつくる（橋詰さん） ◦ LTセッション ▪ Sleep-time Computeについて（sergicalsixさん） ▪ MCP Serverを使った効率的なインフラ開発（ezqyさん） ▪ 社会シミュレーション開発に向けて（Kanakoooさん） ◦ 交流会
7. ©2025 TC3株式会社 Confidential 7
 MCPを活用したアプリ自動開発 （ヒョン）
8. ©2025 TC3株式会社 Confidential 8
 目次 MCPを活用したアプリ自動開発 1. MCPとは? 2. やってみよう！StreamlitからのMCP活用 3. アプリ全自動開発のアイディア共有 4. 質問
9. ©2025 TC3株式会社 Confidential 9
 MCPとは？
10. ©2025 TC3株式会社 Confidential 10
 • MCPとは？ ◦ MCP（Model Context Protocol）→AI用のUSBポート • Why MCP? ◦ 構築済みの統合機能に、直接対応可能なLLM ◦ LLMプロバイダーやベンダーの横断が可能 ◦ インフラ内でデータを保護するためのベストプラクティス MCPとは？ 引用 ：https://qiita.com/syukan3/items/f74b30240eaf31cb2 686 引用：https://modelcontextprotocol.io/introduction
11. ©2025 TC3株式会社 Confidential • MCPホスト ◦ Claude Desktop、IDE、またはMCPを通じてデー タにアクセスしたいAIツールのようなプログラム • MCPクライアント ◦ サーバーと1:1接続を維持するプロトコルクライア ント • MCPサーバー ◦ 標準化されたモデルコンテキストプロトコルを通じ て特定の機能を公開する軽量プログラム • ローカルデータソース ◦ MCPサーバーが安全にアクセスできるファイル、 データベース、およびサービス • リモートサービス ◦ MCPサーバーが接続できる、インターネットを介し て利用可能な外部システム（APIなど） 11
 MCPの構成 引用 ：https://modelcontextprotocol.io/introducti on MCP（Model Context Protocol）の構成
12. ©2025 TC3株式会社 Confidential 12
 MCP! やってみよう
13. ©2025 TC3株式会社 Confidential 13
 MCP! やってみよう：構成図 • Streamlitをホストにした簡単なMCP活用アプリを作ってみる • 複数のMCPサーバからのAPIを自然言語で呼ぶことが可能であることを確認する Streamlit App Github Server 時刻取得 Server MultiService MCP Client 社内情報取得 Server 社内プロダクト 情報取得 現在時刻取得 Issue発行 Issue削除 ブランチ内容確認 MCP Protocol Streamlitをホストにした簡単なMCP活用アプリ構成図
14. ©2025 TC3株式会社 Confidential 14
 MCP! やってみよう：動作確認（１） Streamlitをホストにした簡単MCPアプリの動作（１）：サーバーからの情報取得 時間に関する情報が取れる 会社の情報が取れる
15. ©2025 TC3株式会社 Confidential 15
 MCP! やってみよう：動作確認（２） Streamlitをホストにした簡単MCPアプリの動（２）：github操作可能範囲 Github APIを利用した提供可能機 能リスト
16. ©2025 TC3株式会社 Confidential 16
 MCP! やってみよう：動作確認（３） Streamlitをホストにした簡単MCPアプリの動（３）：github api利用確認 issueの確認、生成が可能
17. ©2025 TC3株式会社 Confidential 17
 MCPを活用したアプリ自動開発
18. ©2025 TC3株式会社 Confidential 18
 MCPを活用したアプリ自動開発：開発フロー アプリの全自動開発フロー 1. Figmaを利用したデザイン 2. MCPを活用し、ClineからFigmaツールを活用 3. Clineを活用したアプリ作成
19. ©2025 TC3株式会社 Confidential 19
 MCPを活用したアプリ自動開発：デモ • アプリ重要機能 ◦ 論文(文書)を読み取って要約 をしてくれる機能 ◦ 論文(文書)に対するQA機能 • MCP活用範囲 ◦ Figma AIから生成されたデザ インの適用 ◦ 会社ロゴを入れる • デモ • Qiita記事 作成したアプリ
20. ©2025 TC3株式会社 Confidential 20
 質問事項
21. ©2025 TC3株式会社 Confidential 21
 登壇・LT会
22. ©2025 TC3株式会社 Confidential 22
 交流会
23. ©2025 TC3株式会社 Confidential 23
 交流会 1. 19:30〜20:00 a. グループトーク i. ５人がグループになってください ii. 10分で一回シャッフルし、３回繰り返します iii. 話題 1. 簡単自己紹介 2. 2025年に対してのAIのトレンドに対して話す 2. 20:00~20:50 a. 自由交流会
24. ©2025 TC3株式会社 Confidential 24
 Thank you for your attention. G I G I N N O V A T E D . If you are interested, please contact to info@tc3.co.jp .