Microsoft

Visual Studio Code + Cloudflare

無料のオープンソースコードエディターです。ネイティブの Model Context Protocol（MCP）クライアントと Copilot Chat 連携があります。Microsoft 製です。

IDETerminalスタンドアロンExtensionオープンソース

Cloudflare SkillsCloudflare Code Mode API MCPCloudflare ドメイン固有 MCPVisual Studio Code のドキュメント

クイックスタート

Visual Studio Code と GitHub Copilot をインストールする

Visual Studio Code ↗ をインストールし、最新版であることを確認します。次に GitHub Copilot 拡張機能 ↗ をインストールし、GitHub アカウントでサインインします。試すだけなら Copilot の無料プランで十分です。
Cloudflare MCP サーバーを設定する

ワークスペースフォルダー内に .vscode/mcp.json を作成します。
```
{
  "servers": {
    "cloudflare-api": {
      "type": "http",
      "url": "https://mcp.cloudflare.com/mcp"
    }
  }
}
```
Visual Studio Code はルートキーに servers を使います。Cursor や Claude Desktop からコピーした設定は mcpServers を使うため、ここでは何も起きません。ドメイン別 MCP サーバーは mcp-server-cloudflare ↗ を参照してください。Cloudflare API MCP サーバー（Code Mode）の全体は cloudflare/mcp ↗ を参照してください。
サーバーを起動して認可する

mcp.json を保存すると、Visual Studio Code は cloudflare-api サーバー定義の上に Start CodeLens を表示します。これを選択し、OAuth フローを完了して、自分のアカウントに対して Cloudflare MCP サーバーを認可します。付与するスコープに慣れるまでは、デモ用アカウントから始めてください。
プロンプトを試す

Copilot Chat（Ctrl+Shift+I / Cmd+Shift+I）を開き、エージェントモードに切り替えて、次のようなプロンプトを試します。
```
Cloudflare Pages にフルスタックの React アプリをデプロイし、Workers API バックエンドと D1 データベースを付けてください。
```

スクリーンショット付きの手順（OAuth 認可ページ、サーバー起動の確認、自然言語での DNS レコード作成と削除を含む）は、詳細なウォークスルーを参照してください。

Cloudflare プラットフォームへのアクセス

各セクションを開くと、詳しく読めます。

Cloudflare Skills

Cloudflare の仕組みをエージェントに教える、持続するプラットフォームコンテキストです。

Skills は、エージェントが必要なときに読み込む手順です。 cloudflare/skills バンドルはプラットフォームの各層をカバーします。そのため、毎回説明しなくても、エージェントはあなたの作法を把握します。

agents-sdkBuild, debug, or review Cloudflare Agents SDK applications using the agents package.
cloudflareDiscover and choose Cloudflare products for apps, APIs, AI agents, storage, networking, and security. Use for architecture and product selection, including when the user describes a need without naming a Cloudflare product; then find the relevant skill or documentation.
cloudflare-email-serviceImplement or troubleshoot Cloudflare Email Sending and Email Routing integrations and their delivery configuration.
cloudflare-oneDesign, configure, troubleshoot, or review Cloudflare One Zero Trust and SASE deployments. Use cloudflare-one-migrations for migration planning from other vendors.
cloudflare-one-migrationsAssess and plan migrations from existing VPN, SWG, or SASE platforms to Cloudflare One, including policy mapping, parity gaps, and rollout.
durable-objectsBuild, debug, or review Cloudflare Durable Objects code for persistent state and coordination.
nextjs-on-cloudflareBuild, migrate, and deploy Next.js apps on Cloudflare Workers with vinext. Use when starting a Next.js project on Cloudflare, moving an existing app to Workers, choosing between vinext and OpenNext, or setting up vinext for Workers. For setup, migration, or deployment, install vinext's upstream skills with `npx skills add cloudflare/vinext` if missing, then read and follow the applicable skill and docs.
sandbox-migrate-to-nextMigrate Cloudflare Sandbox apps from stable @cloudflare/sandbox to @cloudflare/sandbox@next (SDK 1.0 preview). Use sandbox-next for apps already on the preview.
sandbox-nextBuild or maintain Cloudflare Sandbox apps on @cloudflare/sandbox@next (SDK 1.0 preview). Use sandbox-migrate-to-next when porting a stable app.
sandbox-stableBuild or maintain Cloudflare Sandbox apps on the stable @cloudflare/sandbox package. Use sandbox-next for preview apps and sandbox-migrate-to-next for stable-to-preview migrations.
turnstile-spinSet up, repair, or migrate to Cloudflare Turnstile bot verification in an existing frontend and backend, including server-side Siteverify.
web-perfAudit, diagnose, or optimize website loading and interaction performance, Core Web Vitals, and Lighthouse performance scores.
workers-best-practicesCloudflare Workers best practices for production applications. Use when writing, reviewing, or configuring Workers.
wranglerRun or troubleshoot Wrangler CLI commands and configure Worker projects for local development, deployment, and Cloudflare resource management.

MCP サーバー

Cloudflare API、ドキュメント、可観測性へのライブアクセスです。

MCP サーバーは、実行時に Cloudflare を呼ぶ型付きツールを提供します。選択肢は 2 つです。Code Mode — Cloudflare API 全体をカバーする 1 台のサーバー（約 1,000 トークンで 2,500 以上のエンドポイント）— か、 cloudflare/mcp-server-cloudflare リポジトリでホストされる、領域に特化したサーバー群です。カタログ全体は Cloudflare 向け MCP サーバーのドキュメントにもあります。

Code mode APIcode modeBroad access to the full Cloudflare API via code execution, with minimal token overheadhttps://mcp.cloudflare.com/mcp
Code Mode servercode modeBest when you want broad access across Cloudflare's APIs through code executionhttps://mcp.cloudflare.com/mcp
AI Gateway serverSearch your logs, get details about the prompts and responseshttps://ai-gateway.mcp.cloudflare.com/mcp
Audit Logs serverQuery audit logs and generate reports for reviewhttps://auditlogs.mcp.cloudflare.com/mcp
AutoRAG serverSearch and query account AutoRAG instanceshttps://autorag.mcp.cloudflare.com/mcp
Browser Run serverFetch web pages, convert them to markdown and take screenshotshttps://browser.mcp.cloudflare.com/mcp
Cloudflare Blog serverSearch and read posts from the Cloudflare Bloghttps://blog.mcp.cloudflare.com/mcp
Cloudflare One CASB serverQuickly identify any security misconfigurations for SaaS applications to safeguard users & datahttps://casb.mcp.cloudflare.com/mcp
Container serverSpin up a sandbox development environmenthttps://containers.mcp.cloudflare.com/mcp
Demo Day serverDemonstrate a minimal Cloudflare MCP serverhttps://demo-day.mcp.cloudflare.com/mcp
Digital Experience Monitoring serverGet quick insight on critical applications for your organizationhttps://dex.mcp.cloudflare.com/mcp
DNS Analytics serverOptimize DNS performance and debug issues based on current setuphttps://dns-analytics.mcp.cloudflare.com/mcp
Documentation serverGet up-to-date reference information on Cloudflarehttps://docs.mcp.cloudflare.com/mcp
Logpush serverGet quick summaries for Logpush job healthhttps://logs.mcp.cloudflare.com/mcp
Observability serverDebug and get insight into your application's logs and analyticshttps://observability.mcp.cloudflare.com/mcp
Radar serverExplore Cloudflare Radar internet insightshttps://radar.mcp.cloudflare.com/mcp
Workers Bindings serverBuild Workers applications with storage, AI, and compute primitiveshttps://bindings.mcp.cloudflare.com/mcp
Workers Builds serverGet insights and manage your Cloudflare Workers Buildshttps://builds.mcp.cloudflare.com/mcp

Wrangler CLI

ローカル開発、デプロイ、Workers 向けコマンドです。

ローカル開発、デプロイ、製品固有のコマンド（wrangler d1 migrations apply や wrangler tail など）には Wrangler を使います。同梱の wrangler Skill が、いつそれを使うかをエージェントに教えます。

エージェント向けドキュメント

エージェント向けに最適化した、トークン効率のよいリファレンスです。

任意の Cloudflare ドキュメント URL に /index.md を付けると、きれいな Markdown 版になります。各トップレベル製品セクションには、1 つのコンテキストウィンドウに収まるページ索引の llms.txt もあります。よく使うものは次のとおりです。

developers.cloudflare.com/llms.txt — すべての Cloudflare 製品のディレクトリです。
developers.cloudflare.com/workers/llms.txt
developers.cloudflare.com/agents/llms.txt
developers.cloudflare.com/r2/llms.txt
developers.cloudflare.com/d1/llms.txt

これらのドキュメントがエージェント向けにどう構成されているかの全体像は、エージェント向けドキュメントガイドを参照してください。

プロンプトの例

Worker に D1 データベースを追加し、CRUD エンドポイント付きの users テーブルを作ってください。

顧客ごとに隔離された D1 データベースを持つ、マルチテナント SaaS バックエンドを作ってください。

R2 と Cloudflare Images で、画像のアップロードと変換サービスを作ってください。

公開 API への不正利用を止めるために、レート制限と WAF ルールを設定してください。

Workers 上に、自動スケールとコールドスタートなしの、世界分散 REST API をデプロイしてください。

ヒント

Cloudflare API MCP サーバーは Code Mode を使います。エージェントは型付き API に対して JavaScript を書き、約 1,000 トークンで 2,500 以上のエンドポイントに到達できます。そのため、登録されるツールは数千ではなく 3 つだけです。
Visual Studio Code の MCP 設定はルートキーに servers を使います。他のエージェント（Cursor、Claude Desktop）からコピーした設定は mcpServers を使うため、Visual Studio Code では動きません。
OAuth の付与は 1 つのアカウントに限定し、Full access を付与する前に Read only または Custom の権限セットから始めてください。
付与はいつでも Cloudflare ダッシュボードの My Profile → Access Management → Connected Applications から取り消せます。

FAQ

MCP サーバーにツールが 3 つしか表示されないのはなぜですか？

Cloudflare API の仕様はおよそ 200 万トークンあり、エージェントにそのまま渡すには大きすぎます。 Cloudflare MCP サーバーはコード実行パターンを使います。エージェントには API 仕様を検索するツールと呼び出しを実行するツールが渡され、仕様自体はサーバー側に残ります。ツールが 3 つであることは、正常な状態です。

Visual Studio Code でしか使えませんか？

いいえ。同じサーバー URL（https://mcp.cloudflare.com/mcp ↗）は Claude Code、Cursor、Claude Desktop、その他の MCP 対応クライアントで使えます。Visual Studio Code は選択肢の 1 つです。

OAuth の代わりに Cloudflare API トークンを使えますか？

使えます。Cloudflare API トークンを bearer 資格情報として渡せます。CI/CD や共有オートメーションではこの方法が適しています。エディターでの対話利用では、OAuth を推奨します。Client IP Address Filtering を使った API トークンはサポートされていません。

Visual Studio Code で MCP を使うには GitHub Copilot が必要ですか？

このガイドでは Copilot Chat を MCP クライアントとして使うため、サーバーを実際に操作するには Copilot（または別の MCP 対応拡張機能）が必要です。Visual Studio Code 自体が MCP の設定とライフサイクルを提供し、チャット UI は Copilot が提供します。

トラブルシューティング

チャットで「Cannot read properties of undefined」と表示される

Visual Studio Code 本体と Copilot 拡張機能のバージョンがずれています。タイトルバーの青いボタンから Visual Studio Code を更新し、再起動してから再試行してください。

読み取りは成功するが、書き込みが API エラー 10000 で失敗する

フルアクセスを付与したつもりでも、OAuth の付与が読み取り専用になっています。複数回認可すると、後続のフローがスコープを縮小したまま通ることがあります。 Cloudflare ダッシュボードの My Profile → Access Management → Connected Applications でアプリを取り消し、 Visual Studio Code の MCP セッションからサインアウトして（アクティビティバー下部のアカウントアイコン）、サーバーを再起動してください。

mcp.json に Start ボタンが表示されない

JSON のルートキーを確認してください。Visual Studio Code では servers が必要で、 mcpServers では動きません。ファイルが開いているフォルダー内の .vscode/mcp.json にあり、フォルダー直下ではないことも確認してください。

エージェントがエラー回避のために API トークンの作成を提案する

拒否してください。認証が壊れている場合の修正は OAuth の再付与であり、チャットに bearer トークンを貼ることではありません。API エラー 10000 の手順に従って、クリーンに再付与してください。

Visual Studio Code のログに 401 エラーが出る

Copilot Chat の認可プロンプトで Allow in this Session を選択するまでは、想定どおりの動作です。