Slide 1
Slide 1 text
バイブコーディング超えてバイブデプロイ
〜Cloudflare MCP
で実現する、未来のアプリケーシ
ョンデリバリー〜
Workers Tech Talks in Kyoto #1
Slide 2
Slide 2 text
自己紹介
azukiazusa
https://azukiazusa.dev
FE
（フロントエンド|
ファイアーエ
ムブレム）が好き
Slide 3
Slide 3 text
https://azukiazusa.dev
↖ Cloudflare Workers
にホスト
Slide 4
Slide 4 text
バイブコーディング
Slide 5
Slide 5 text
バイブコーディングとは？
AI
エージェントが自律的にコードを生成・実行する技術
AI
に自然言語で指示を出す
AI
エージェントが主体になってアプリケーションの開発を進める
雰囲気・フィーリング・ノリ
Slide 6
Slide 6 text
Cloudflare
の特徴
Slide 7
Slide 7 text
Cloudflare
の特徴
驚異的なデプロイの簡単さ
Slide 8
Slide 8 text
ドキュメントのボタン
をクリックするだけで
デプロイを開始
Slide 9
Slide 9 text
もっと気軽にデプロイしたい
バイブコーディングのようなノリで...
Slide 10
Slide 10 text
Cloudflare MCP
13
のMCP
サーバーを提供
https://blog.cloudflare.com/ja
-jp/thirteen-new-mcp-
servers-from-cloudflare/
Slide 11
Slide 11 text
Model Control Protocol (MCP)
とは？
LLM
が外部システムと連携するためのプロトコル
AI
エージェントが様々なサービスを直接操作可能
Slide 12
Slide 12 text
Workers Bindings Server
AI
エージェントがKV
やR2, D1
などのCloudflare
リソースを操作可能
自然言語で指示を出すだけでリソースの作成・削除が可能
真の「バイブデプロイ」
Slide 13
Slide 13 text
実際にやってみよう！
URL
短縮サービスを Cloudflare Workers + KV
ストレージで実装
Slide 14
Slide 14 text
下準備
Cloudflare Workers
アカウントを作成
Claude Code
をインストール
npm install -g @anthropics/claude-code
Slide 15
Slide 15 text
Claude Code
に MCP
サーバーを追加
claude mcp add --transport sse -s project "Cloudflare Workers" "https://bindings.mcp.cloudflare.com/sse"
Slide 16
Slide 16 text
.mcp.json
ファイルが生成される
{
"mcpServers": {
"Cloudflare Workers": {
"type": "sse",
"url": "https://bindings.mcp.cloudflare.com/sse"
}
}
}
Slide 17
Slide 17 text
認証
/mcp
コマンドで認証
が必要
Slide 18
Slide 18 text
Cloudflare
の認証画面
Slide 19
Slide 19 text
プロンプト
Claude Codeを使って、URL短縮サービスをCloudflare Workers + KVストレージで実装してデプロイしてください。
要件：
- Hono を使ってHTTPサーバーを実装
- web UI で短縮URLを生成
- Cloudflare KVを使ってURL情報を保存
- 短縮コードは6文字のランダムな英数字
Slide 20
Slide 20 text
Claude Code
が実行計画を立てる
Slide 21
Slide 21 text
KV
が MCP
を通じて生成される
Slide 22
Slide 22 text
wrangler deploy
で Worker
をデプロイ
Slide 23
Slide 23 text
Worker
のデプロイが完了
Slide 24
Slide 24 text
Worker
の情報を取得
Slide 25
Slide 25 text
URL
短縮サービスの完成
Slide 26
Slide 26 text
まとめ
バイブコーディングはAI
エージェントが主体となる開発スタイル
Cloudflare MCP
は LLM
から Cloudflare
のリソースにアクセスした
り、作成・削除するためのツールを提供
Cloudflare MCP
の Workers Bindings Server
により、AI
エージェン
トが直接Worker
をデプロイ可能
Slide 27
Slide 27 text
No content