Slide 1

Slide 1 text

TypeScript で実現する既存API を活用した リモートMCP サーバー構築 Shodai Suzuki @SoartecL TSKaigi 2026 2026.05.23 © MOSH Inc.

Slide 2

Slide 2 text

鈴⽊翔⼤ X @SoartecL VP of Technology 趣味 OSS Orval メンテナ ダイビング

Slide 3

Slide 3 text

今日の主題 リモートMCP 運用の変化に対する設計判断と、実践可能 な構築パターンの一例を共有 AI の進化とプロダクトの変化、両方への継続的な適応 変化の種類ごとに責務と適応方法を分離 TypeScript / OpenAPI 資産を活用した低コスト運⽤

Slide 4

Slide 4 text

アジェンダ なぜリモートMCP サーバーが 必要だったのか 背景 変化の種類に応じた責務分離 と、自動生成とSkill による アプローチ 設計方針 既存API 資産とTypeScript を 活用したMCP サーバー構築 実装 1 2 3

Slide 5

Slide 5 text

MOSH のユーザー ヨガ・フィットネス ヘルス・ウェルネス 育児・子育て 養成講座・スクール オンラインサロン・ コミュニティ メイク・ ビューティー

Slide 6

Slide 6 text

MOSH のプロダクト

Slide 7

Slide 7 text

デモいきます

Slide 8

Slide 8 text

デモ

Slide 9

Slide 9 text

アジェンダ なぜリモートMCP サーバーが 必要だったのか 背景 変化の種類に応じた責務分離 と、自動生成とSkill による アプローチ 設計方針 既存API 資産とTypeScript を 活用したMCP サーバー構築 実装 1 2 3

Slide 10

Slide 10 text

プロダクトの機能追加・仕 様変更 複数チーム並行開発 ①内部環境の変化 AI モデル・Agent の進化 ユーザーの業務プロセス・ ユースケースの変化 ベストプラクティスの発見 ②外部環境の変化 開発・運用における重要な焦点

Slide 11

Slide 11 text

変化に適応できない事による問題 プロダクト開発スピードにMCP 開発が追いつかず陳腐化 AI 自体の成長に追いつかずAI 本来の性能を活かせない MCP の実装が固定化され変化するユーザーニーズに応え られない AI を使ったベストプラクティス探索の改善サイクルの速 度が低下

Slide 12

Slide 12 text

内部環境であるプロダクト変化と AI を筆頭とした外部環境 への変化への適応が重要ポイント

Slide 13

Slide 13 text

進化可能性 “ 進化的アーキテクチャとは、複数の次元 にわたる漸進的で誘導的な変更を支援す るものである“ “ アーキテクトは重要な次元すべてにわ たってシステムがどのように進化するか を考えなくてはならない“ 引用: 「進化的アーキテクチャ」 P.3, 12

Slide 14

Slide 14 text

プロダクトの機能追加・仕 様変更 複数チーム並行開発 ①内部環境の変化 → 自動⽣成で追従 AI モデル・Agent の進化 ユーザーの業務プロセス・ ユースケースの変化 ベストプラクティスの発見 ②外部環境の変化 → claude skill で高速・高頻 度に改善 課題に対するアプローチ方針

Slide 15

Slide 15 text

内部・外部それぞれの変化の特性 に合わせ責務を分離し適応する設計 方針

Slide 16

Slide 16 text

変化の種類 具体例 発生する課題 対策 内部環境 プロダクトの仕様 変更・新機能開発 複数チーム並行開 発 プロダクト開発のス ピードにMCP の開発 が追いつかず陳腐化 OpenAPI を起点に機械的に MCP Tool を自動⽣成 外部環境 AI の進化 ユーザーの業務プ ロセス・ユースケー スの変化 ベストプラクティス の発見 MCP の実装が固定化 され変化するユー ザーニーズに応えら れない AI 自体の成長に追い つかず本来の性能を 活かせない AI 活用の変化はSkill やPrompt で高速に改善 MCP Tool はユースケースへ固 定化せず、小さな単位へ分割す ることで、AI 活用側で柔軟に組 み合わせ可能にする 課題・対策の整理

Slide 17

Slide 17 text

アジェンダ なぜリモートMCP サーバーが 必要だったのか 背景 変化の種類に応じた責務分離 と、自動生成とSkill による アプローチ 設計思想 既存API 資産とTypeScript を 活用したMCP サーバー構築 実装 1 2 3

Slide 18

Slide 18 text

全体アーキテクチャ

Slide 19

Slide 19 text

OpenAPI zod Orval fetch API client MCP tool zod Orval OpenAPI からのMCP Tool 生成 MCP サーバー API サーバー

Slide 20

Slide 20 text

MCP tool 追加の具体例

Slide 21

Slide 21 text

1.OpenAPI の更新 既存のOpenAPI 定義に 「mcp 」タグを設置 プロダクトはスキーマ駆 動開発を実践している orval のfilter で「mcp 」タグが ついているエンドポイントの みmcp tool を生成する様に設 定 openapi.yml

Slide 22

Slide 22 text

2. ソースコードの自 動生成① AI エージェントが認識するた めに、MCP server にtool 定義 する処理 生成対象のAPI と1:1 にな る形で生成 server.ts

Slide 23

Slide 23 text

2. ソースコードの自 動生成② MCP server へのtool 定義関数 のIF に準拠するhander 定義 hander は1:1 になっているAPI サーバーへのエンドポイント にfetch リクエストするだけ http-client.ts handlers.ts

Slide 24

Slide 24 text

自動生成したMCP server の適応 hono + @hono/mcp を使いサー バーの実装を大幅に削減 自動生成されるcreateMcpServer 関数を呼び出すとtool がセット アップされたMCP server が返却 される custom-server.ts

Slide 25

Slide 25 text

まとめ リモートMCP の構築・運用は「内部環境の変化」と「外 部環境の変化」への適応が重要ポイント 「変化の性質」に応じた責務分離と適応 内部環境であるプロダクト変化には自動⽣成 AI を筆頭とした外部環境の変化はSkill で高速に改善・ 適応 既存API 資産を活用し低コストで構築・運用

Slide 26

Slide 26 text

おわり