Skip to content
All agents
Microsoft

Visual Studio Code + Cloudflare

Free, open-source code editor with native Model Context Protocol (MCP) client support and Copilot Chat integration. Made by Microsoft.

IDETerminalStandaloneExtensionOpen Source
Cloudflare SkillsCloudflare Code Mode API MCPCloudflare Domain Specific MCPsVisual Studio Code Docs

Quick start

  1. Install Visual Studio Code and GitHub Copilot

    Install Visual Studio Code ↗ and make sure it is fully up to date. Then install the GitHub Copilot extension ↗ and sign in with a GitHub account. The Copilot free tier is enough to try this.

  2. Configure the Cloudflare MCP server

    Create .vscode/mcp.json inside your workspace folder:

    {
  "servers": {
    "cloudflare-api": {
      "type": "http",
      "url": "https://mcp.cloudflare.com/mcp"
    }
  }
}

    Visual Studio Code uses servers as the root key. Configurations copied from Cursor or Claude Desktop use mcpServers and will silently do nothing here. For domain-specific MCP servers, refer to mcp-server-cloudflare ↗. For the full Cloudflare API MCP server (Code Mode), refer to cloudflare/mcp ↗.

  3. Start the server and authorize

    After you save mcp.json, Visual Studio Code shows a Start CodeLens on the cloudflare-api server definition. Select it and complete the OAuth flow to authorize the Cloudflare MCP server against your account. Start with a demo account until you are comfortable with the scope you grant.

  4. Try a prompt

    Open Copilot Chat (Ctrl+Shift+I / Cmd+Shift+I), switch to agent mode, and try a prompt — for example:

    Add bot protection and rate limiting to my login and checkout endpoints.

For a screenshot-by-screenshot walkthrough — including the OAuth authorization page, verifying the server is running, and using natural language to create and delete DNS records — refer to the detailed walkthrough.

Cloudflare platform access

Expand any section to learn more.

Cloudflare Skills

Persistent platform context that teaches the agent how Cloudflare works.

Skills are instructions the agent loads on demand. The cloudflare/skills bundle covers every layer of the platform — so the agent knows your conventions without you re-explaining them.

  • 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 servers

Live access to the Cloudflare API, docs, and observability.

MCP servers provide typed tools to call into Cloudflare at runtime. There are two options: Code Mode — a single server that covers the entire Cloudflare API (2,500+ endpoints in ~1,000 tokens) — or a set of focused, domain-specific servers hosted in the cloudflare/mcp-server-cloudflare repo. The full catalog is also in the MCP servers for Cloudflare docs.

  • 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

Local dev, deploys, and Workers-specific commands.

Use Wrangler for local development, deploys, and product-specific commands like wrangler d1 migrations apply or wrangler tail. The bundled wrangler Skill teaches the agent when to reach for it.

Agent-friendly docs

Token-efficient references optimized for agents.

Append /index.md to any Cloudflare docs URL for a clean markdown version. Every top-level product section also has its own llms.txt — a page index sized for a single context window. A few useful ones:

For a full overview of how these docs are structured for agents, refer to the Docs for Agents guide.

Example prompts

Add real-time collaboration to my app using Durable Objects with WebSocket hibernation.
Build an AI chat agent using the Cloudflare Agents SDK with persistent conversation history stored in D1.
Deploy a globally distributed REST API on Workers with automatic scaling and zero cold starts.
Create a Logpush job to stream Workers analytics to my data warehouse.
Create a RAG pipeline using Vectorize and Workers AI to answer questions over my documentation.

Tips

  • The Cloudflare API MCP server uses Code Mode — the agent writes JavaScript against a typed API to reach any of 2,500+ endpoints in ~1,000 tokens. That is why you see only three tools registered, not thousands.
  • Visual Studio Code's MCP configuration uses servers as the root key. Configurations copied from other agents (Cursor, Claude Desktop) use mcpServers and will not work in Visual Studio Code.
  • Scope the OAuth grant to a single account, and start with Read only or a Custom permission set before granting Full access.
  • Revoke the grant at any time from the Cloudflare dashboard under My Profile → Access Management → Connected Applications.

FAQ

Why does the MCP server only show three tools?

The Cloudflare API specification is roughly two million tokens, which is far too large to hand an agent directly. The Cloudflare MCP server uses a code-execution pattern: the agent gets a tool to search the API spec and a tool to execute calls, and the spec stays server-side. Three tools is the correct, healthy state.

Does this only work with Visual Studio Code?

No. The same server URL (https://mcp.cloudflare.com/mcp) works in Claude Code, Cursor, Claude Desktop, or any MCP-capable client. Visual Studio Code is one option among many.

Can I use a Cloudflare API token instead of OAuth?

Yes. You can pass a Cloudflare API token as a bearer credential, which makes sense for CI/CD or shared automation. For interactive editor use, OAuth is the recommended path. API tokens using Client IP Address Filtering are not supported.

Do I need GitHub Copilot to use MCP in Visual Studio Code?

Copilot Chat is the MCP client used in this guide, so yes — you need Copilot (or another MCP-capable extension) to actually drive the server. Visual Studio Code itself provides the MCP configuration and lifecycle, but the chat UI comes from Copilot.

Troubleshooting

Chat throws 'Cannot read properties of undefined'

The Visual Studio Code build and the Copilot extension are out of sync. Update Visual Studio Code from the blue button in the title bar, let it restart, and try again.

Writes fail with API error 10000, but reads work

The OAuth grant is read-only even though you intended to grant full access. This can happen if you authorize more than once — subsequent flows can silently come through with a reduced scope. Revoke the application under My Profile → Access Management → Connected Applications in the Cloudflare dashboard, sign out of the MCP session in Visual Studio Code (the account icon at the bottom of the activity bar), then start the server again.

No Start button appears in mcp.json

Check the root key in the JSON. Visual Studio Code requires servers, not mcpServers. Also confirm the file is at .vscode/mcp.json inside the open folder, not at the folder root.

The agent suggests creating an API token to work around an error

Decline. If authentication is broken, the fix is the OAuth grant, not pasting a bearer token into a chat window. Follow the API error 10000 troubleshooting steps to re-grant cleanly.

401 errors in the Visual Studio Code logs

Expected behavior until you select Allow in this Session in the Copilot Chat authorization prompt.

Build agents on Cloudflare

Cloudflare is not just a deploy target for agents, it is a full stack for building your own.

Agents SDK

Stateful AI agents with state, scheduling, RPC, email, streaming chat — and the Code Mode SDK for token-efficient tool use.

Learn more
Build an MCP server

Ship a remote MCP server on Workers with OAuth, durable state, and streamable HTTP transport.

Learn more
Workers AI

Run open-source LLMs, embedding models, and image models at the edge. Use it as your agent's model provider.

Learn more
Worker Loader

Load user-generated code into isolated Workers on demand. The secure sandbox behind Code Mode.

Learn more

Other agents

Anthropic

Claude Code

Terminal-based coding agent that understands your codebase, runs commands, edits files, and manages git. Made by Anthropic.

View guide
OpenAI

Codex

OpenAI coding agent available as a terminal CLI and desktop app. It reads and writes files, runs commands, and browses the web in a sandbox.

View guide
Cursor

Cursor

AI-first IDE built on VS Code with multi-file Composer edits and background agents. Made by Cursor.

View guide
GitHub

GitHub Copilot

Editor extension and CLI with agent mode, workspace context, and native PR integration. Made by GitHub.

View guide
Anomaly

OpenCode

Open-source terminal agent with a rich TUI that works with 75+ LLMs. Made by Anomaly.

View guide
Cognition

Windsurf

Agentic IDE with Cascade context and Flows for multi-step tasks. Made by Cognition.

View guide
LM Studio

Bionic

Powerful agent for coding and work. Natively local, with open models in the cloud. By LM Studio.

View guide

Was this helpful?