バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜

バイブコーディングとは、AIエージェントが自律的にコードを生成・実行する技術です。Cloudflare Workers MCPを使って、AIエージェントがCloudflareのリソースを操作し、アプリケーションをデプロイする方法を実践します。

Transcript

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