TypeScriptで実現する既存APIを活用したリモートMCPサーバー構築 / TSKaigi 2026

2026-05-22 「TSKaigi 2026」の登壇資料です。

Transcript

1. TypeScript で実現する既存API を活用した リモートMCP サーバー構築 Shodai Suzuki @SoartecL TSKaigi 2026 2026.05.23 © MOSH Inc.
2. 鈴⽊翔⼤ X @SoartecL VP of Technology 趣味 OSS Orval メンテナ ダイビング
3. 今日の主題 リモートMCP 運用の変化に対する設計判断と、実践可能 な構築パターンの一例を共有 AI の進化とプロダクトの変化、両方への継続的な適応 変化の種類ごとに責務と適応方法を分離 TypeScript / OpenAPI 資産を活用した低コスト運⽤
4. アジェンダ なぜリモートMCP サーバーが 必要だったのか 背景 変化の種類に応じた責務分離 と、自動生成とSkill による アプローチ 設計方針 既存API 資産とTypeScript を 活用したMCP サーバー構築 実装 1 2 3
5. MOSH のユーザー ヨガ・フィットネス ヘルス・ウェルネス 育児・子育て 養成講座・スクール オンラインサロン・ コミュニティ メイク・ ビューティー
6. MOSH のプロダクト
7. デモいきます
8. デモ
9. アジェンダ なぜリモートMCP サーバーが 必要だったのか 背景 変化の種類に応じた責務分離 と、自動生成とSkill による アプローチ 設計方針 既存API 資産とTypeScript を 活用したMCP サーバー構築 実装 1 2 3
10. プロダクトの機能追加・仕 様変更 複数チーム並行開発 ①内部環境の変化 AI モデル・Agent の進化 ユーザーの業務プロセス・ ユースケースの変化 ベストプラクティスの発見 ②外部環境の変化 開発・運用における重要な焦点
11. 変化に適応できない事による問題 プロダクト開発スピードにMCP 開発が追いつかず陳腐化 AI 自体の成長に追いつかずAI 本来の性能を活かせない MCP の実装が固定化され変化するユーザーニーズに応え られない AI を使ったベストプラクティス探索の改善サイクルの速 度が低下
12. 内部環境であるプロダクト変化と AI を筆頭とした外部環境 への変化への適応が重要ポイント
13. 進化可能性 “ 進化的アーキテクチャとは、複数の次元 にわたる漸進的で誘導的な変更を支援す るものである“ “ アーキテクトは重要な次元すべてにわ たってシステムがどのように進化するか を考えなくてはならない“ 引用: 「進化的アーキテクチャ」 P.3, 12
14. プロダクトの機能追加・仕 様変更 複数チーム並行開発 ①内部環境の変化 → 自動⽣成で追従 AI モデル・Agent の進化 ユーザーの業務プロセス・ ユースケースの変化 ベストプラクティスの発見 ②外部環境の変化 → claude skill で高速・高頻 度に改善 課題に対するアプローチ方針
15. 内部・外部それぞれの変化の特性 に合わせ責務を分離し適応する設計 方針
16. 変化の種類 具体例 発生する課題 対策 内部環境 プロダクトの仕様 変更・新機能開発 複数チーム並行開 発 プロダクト開発のス ピードにMCP の開発 が追いつかず陳腐化 OpenAPI を起点に機械的に MCP Tool を自動⽣成 外部環境 AI の進化 ユーザーの業務プ ロセス・ユースケー スの変化 ベストプラクティス の発見 MCP の実装が固定化 され変化するユー ザーニーズに応えら れない AI 自体の成長に追い つかず本来の性能を 活かせない AI 活用の変化はSkill やPrompt で高速に改善 MCP Tool はユースケースへ固 定化せず、小さな単位へ分割す ることで、AI 活用側で柔軟に組 み合わせ可能にする 課題・対策の整理
17. アジェンダ なぜリモートMCP サーバーが 必要だったのか 背景 変化の種類に応じた責務分離 と、自動生成とSkill による アプローチ 設計思想 既存API 資産とTypeScript を 活用したMCP サーバー構築 実装 1 2 3
18. 全体アーキテクチャ
19. OpenAPI zod Orval fetch API client MCP tool zod Orval OpenAPI からのMCP Tool 生成 MCP サーバー API サーバー
20. MCP tool 追加の具体例
21. 1.OpenAPI の更新 既存のOpenAPI 定義に 「mcp 」タグを設置 プロダクトはスキーマ駆 動開発を実践している orval のfilter で「mcp 」タグが ついているエンドポイントの みmcp tool を生成する様に設 定 openapi.yml
22. 2. ソースコードの自 動生成① AI エージェントが認識するた めに、MCP server にtool 定義 する処理 生成対象のAPI と1:1 にな る形で生成 server.ts
23. 2. ソースコードの自 動生成② MCP server へのtool 定義関数 のIF に準拠するhander 定義 hander は1:1 になっているAPI サーバーへのエンドポイント にfetch リクエストするだけ http-client.ts handlers.ts
24. 自動生成したMCP server の適応 hono + @hono/mcp を使いサー バーの実装を大幅に削減 自動生成されるcreateMcpServer 関数を呼び出すとtool がセット アップされたMCP server が返却 される custom-server.ts
25. まとめ リモートMCP の構築・運用は「内部環境の変化」と「外 部環境の変化」への適応が重要ポイント 「変化の性質」に応じた責務分離と適応 内部環境であるプロダクト変化には自動⽣成 AI を筆頭とした外部環境の変化はSkill で高速に改善・ 適応 既存API 資産を活用し低コストで構築・運用
26. おわり