コードを書くAIから、運用するAIへ 〜自社サイトをCloudflareでCMS化し、MCP経由でAIに触らせた話〜

「AIにコードを書かせて満足していませんか？」

プロダクトが増えるほど、AIへのコンテキスト説明コストと、散らばるリポジトリの管理に追われてしまう――。そんな「AI開発の運用コストの壁」に直面したことはありませんか。

本資料では、自社サイトをCloudflare（Workers/D1/R2）でCMS化し、MCP（Model Context Protocol）を活用することで、AIエージェントが「コードを書く」だけでなく「プロダクトを自律的に運用する」までの設計と実装を公開します。

本資料で触れている内容：
なぜ「コード生成」だけではプロダクト運用の壁を越えられないのか
既存のコードを維持したまま、データとUIを切り離すCMS化の勘所
APIの上にMCPを載せ、AIに「ツールを使いこなすスキル」を持たせる仕組み
「コード単位」から「能力（スキル）単位」へ――AI時代のタスク分割の考え方
AIに丸投げするのではなく、AIが考え、人間がレビューし、AIが実行する。

「運用というタスク」をAIエージェントに完全に委譲するための、実践的なロードマップです。これからAIと一緒にプロダクトを成長させたいすべてのエンジニアへ。

Transcript

1. 2026/8/26 bitcraft-siteをCloudflareでCMS化し、MCP経由でAIに 触らせた話 コードを書くAIから、運 ⽤するAIへ bitcraft 安藤太亮 © 2026 bitcraft All Rights Reserved 1
2. 00. はじめに ⾃⼰紹介 2018年12⽉ ⿃取県⼩中⾼⽣プログラミングコンテスト 県知事賞（1位相当） 受賞 2020年04⽉ ⿃取県⽴⿃取⻄⾼等学校 ⼊学 2020年12⽉ ⿃取県⼩中⾼⽣プログラミングコンテスト 県知事賞（1位相当） 受賞 2021年08⽉ スーパーコンピューティングコンテスト 本選出場 2021年12⽉ 安藤 太亮 Ando Taisuke ⿃取県⼩中⾼⽣プログラミングコンテスト 県知事賞（1位相当） 受賞 2022年08⽉ スーパーコンピューティングコンテスト 本選出場 2023年04⽉ 島根⼤学総合理⼯学部 ⼊学 2024年02⽉ 株式会社ゲームガム 創業 2025年03⽉ bitcraft 開業 bitcraft © 2026 bitcraft All Rights Reserved 2
3. 00. はじめに もくじ 01. 運⽤という壁 プロジェクトが増えるほど、AIに説明するコストが積 み上がっていく構造を確認する。 02. CMS化という判断 既存のデザインとコードを保ったまま、更新だけを簡 単にする⽅法を選ぶ。 03. Cloudflareで組む Workers‧D1‧R2をどう役割分担させたか、実際の構 成を⾒ていく。 © 2026 bitcraft All Rights Reserved 04. APIの上にMCP AIがコードでなく、完成したプロダクトを直接操作で きる経路をつくる。 05. AIにスキルを持たせる CC SecretaryにMCP操作の⼿順をスキルとして持たせ た実例を紹介する。 06. これからの分割単位 コードの単位ではなく、AIが完結できる単位でタスク を分ける。 3
4. 01 OVERVIEW 複数プロダクト運⽤の壁 有する仕組みが無く、更新のたびに⼈間がコンテキストを © 2026 bitcraft All Rights Reserved バイブコーディングでプロダクトを量産すると、リポジト リとAIエージェントの数が増えていく。またいで情報を共 説明し直す。その負担の正体を切り分ける。 4
5. 01. 複数プロダクト運⽤の壁 プロジェクトが増えると起きること これまでの運⽤⽅法（プロジェクトごとにスキルを⽤意）で起きた問題 • ⾃分⽤‧⾃社サイト‧社内ツールがそれぞれ独⽴ • プロジェクトごとに別のスキルを持つ • リポジトリ間で情報や設計を共有できない • 参照先は毎回パスやURLで指定する • コードを書く作業より接続作業が増えている © 2026 bitcraft All Rights Reserved 5
6. 01. 複数プロダクト運⽤の壁 Q. 質問 ⾃分が今、AIに何度も同じ説明を繰り返させているプロ ジェクトはありますか。 © 2026 bitcraft All Rights Reserved 6
7. 02 OVERVIEW 既存サイトをCMS化する 単にしたいが、デザインとコードは変えたくない。そこで © 2026 bitcraft All Rights Reserved WordPressやSTUDIOも検討したが、運⽤コストやデザイ ンの⾃由度、既存コードとの分離が気になった。更新は簡 ⾃社サイト⾃体をCMS化する⽅針を選んだ。 7
8. 02. 既存サイトをCMS化する サイト更新⽅法の⽐較 更新のしやすさと、デザイン‧運⽤コストのトレードオフを⽐べる 選択肢 更新の⼿軽さ 気になる点 WordPress ◦ 管理画⾯から更新可能 サーバー‧DB運⽤と保守コスト STUDIOなど ◎ ノーコードで更新可能 デザインの⾃由度と既存コードからの分 離 ⾃社サイトをCMS化 ◦ APIを叩けば更新可能 API‧DB‧Storageの実装が必要 © 2026 bitcraft All Rights Reserved 8
9. 02. 既存サイトをCMS化する CMS化の⽅針 既存のデザイン‧コードは維持し、データ部分だけを分離する • UI‧API‧DB‧Storageの4層構造にする • セミナー‧ニュースなどをコンポーネント化 • DBに構造化データ、Storageに画像を保存 • APIがDB‧Storageを操作する唯⼀の窓⼝になる © 2026 bitcraft All Rights Reserved 9
10. 02. 既存サイトをCMS化する デザインとコードは変えていない © 2026 bitcraft All Rights Reserved 10
11. 03 OVERVIEW Cloudflareで組んだ構成 プロイが分散しやすい。コードベースで管理でき、AIから © 2026 bitcraft All Rights Reserved Vercel‧Render‧Replitでも開発はできるが、複数プロダ クトをAI中⼼で運⽤するとDB‧API‧Storage‧認証‧デ も操作できる基盤を求めてCloudflareを選んだ。 11
12. 03. Cloudflareで組んだ構成 3つのWorkersに分ける pnpmモノレポでapps/web‧apps/api‧apps/mcpに分割 • Web：Workers＋Honoでサイトを描画する • API：別Workers。/v1/seminars等を提供 • D1：SQLiteベース。ニュース‧セミナーを保存 • R2：講師写真‧OGP画像などを保存 © 2026 bitcraft All Rights Reserved 12
13. 03. Cloudflareで組んだ構成 3つのWorkerが並ぶ実際の構成 © 2026 bitcraft All Rights Reserved 13
14. 03. Cloudflareで組んだ構成 運⽤しながら変えた判断 動かしてから⾒えた要件に合わせて、実装を差し替えてきた 対象 当初 変更後 セミナー申込 Googleフォーム直POST DB＋⾃前APIに移⾏ メール送信基盤 Cloudflare Email Sending Gmail SMTPリレーに切替 送信成否の把握 no-corsのため判定不可 APIが送信結果を返す © 2026 bitcraft All Rights Reserved 14
15. 04 OVERVIEW APIの上にMCPを置く ⽴てる作業が残るためだ。API呼び出しをAIが使える © 2026 bitcraft All Rights Reserved APIを作っただけでは、AIエージェントが使いこなせると は限らない。仕様を毎回確認し、リクエストボディを組み 「ツール」に変換する層として、MCP Serverを追加した。 15
16. 04. APIの上にMCPを置く コードを書く経路から、操作する経路へ © 2026 bitcraft All Rights Reserved 16
17. 04. APIの上にMCPを置く MCP Serverの設計 実装上の⼯夫（apps/mcp） • createMcpHandlerでステートレスに実装 • D1には直接触れず、Service Binding経由でAPIに委譲 • ツールは/v1/seminars等のAPIを1:1でラップする • 呼び出し元はAPIキー（Bearerトークン）で認証 © 2026 bitcraft All Rights Reserved 17
18. 04. APIの上にMCPを置く AIから⾒えるツールの実物 © 2026 bitcraft All Rights Reserved 18
19. 05 OVERVIEW AIエージェントにスキルを 持たせる を組み⽴てる作業は残る。そこで⾃分のAIエージェントCC © 2026 bitcraft All Rights Reserved MCPでツールは揃ったが、「セミナーを作りたい」と⾔わ れるたびに、AIがツールを探し仕様を確認し、リクエスト Secretaryに、MCP操作の⼿順をスキルとして持たせた。 19
20. 05. AIエージェントにスキルを持たせる なぜMCPだけでは⾜りないか 「セミナーを作りたい」と⾔われたときにAIがする作業 • MCPの利⽤可能なツールを探す • APIの仕様‧必須項⽬を確認する • リクエストボディを組み⽴てる • これを依頼のたびに繰り返す © 2026 bitcraft All Rights Reserved 20
21. 05. AIエージェントにスキルを持たせる 「考える→レビュー→実⾏」の流れ bitcraft-seminar-publisherスキルが実際に⾏う⼿順 • 既存セミナーを参照し、内容案をヒアリング • 内容案をMarkdownでoutput/に書き出す • ⼈間が承認するまで、MCPは⼀切呼ばない • 承認後に作成→内容を再確認する • 問題なければ公開し、Newsに追加する © 2026 bitcraft All Rights Reserved 21
22. 05. AIエージェントにスキルを持たせる AIが実⾏した結果 © 2026 bitcraft All Rights Reserved 22
23. 05. AIエージェントにスキルを持たせる この設計の核 AIに丸投げせず、AIが考え、⼈間がレビューし、AIが実⾏ する。この順番を崩さない。 © 2026 bitcraft All Rights Reserved 23
24. 05. AIエージェントにスキルを持たせる 分割の単位が変わった コードの単位ではなく、能⼒の単位で分ける • 従来：Repository→Code→Feature • これから：Agent→Skill→Tool→API→Data • AIが責任を持って完結できる単位まで分解する • ⼀つのエージェントで複数プロダクトを横断管理する © 2026 bitcraft All Rights Reserved 24
25. 2026/8/26 次はプロダクトを、AIに運⽤させる番です。 ご清聴ありがとうござい ました bitcraft 安藤太亮 © 2026 bitcraft All Rights Reserved 25