---
description: A screenshot-by-screenshot guide to connecting Visual Studio Code to the Cloudflare API through the Cloudflare MCP server, then creating, verifying, and deleting a DNS record with natural language.
title: Visual Studio Code detailed walkthrough
image: https://developers.cloudflare.com/og-docs.png
---

[Skip to content](#main-content)

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/agent-setup/llms.txt  
> Use this file to discover all available pages before exploring further.

# Visual Studio Code detailed walkthrough

Last updated Sep 3, 2026|Copy as Markdown| [View as Markdown](https://641a99ee.previews.developers.cloudflare.com/agent-setup/visual-studio-code/detailed-walkthrough/index.md)| [Agent setup](https://641a99ee.previews.developers.cloudflare.com/agent-setup/)

This walkthrough connects Visual Studio Code directly to the Cloudflare API using the [Cloudflare MCP server ↗](https://github.com/cloudflare/mcp-server-cloudflare). By the end, you can create a DNS record by typing a sentence, without leaving the editor.

The Cloudflare MCP server at `mcp.cloudflare.com` exposes the Cloudflare API to any MCP-capable agent. The Visual Studio Code Copilot agent connects to it, and you run API calls from natural language.

For the condensed version, refer to the [Visual Studio Code quick start](https://641a99ee.previews.developers.cloudflare.com/agent-setup/visual-studio-code/).

## Before you start

- Visual Studio Code, fully up to date. A version mismatch between the editor and the Copilot extension is the most common source of agent-mode errors.
- GitHub Copilot. Any GitHub account works, and the free tier is enough.
- A Cloudflare account you are comfortable pointing an agent at. Use a demo account. The reason becomes clear at the authorization step.

## Connect Visual Studio Code to the Cloudflare API

1. **Confirm your Visual Studio Code version**

   Open Visual Studio Code and select **Help** > **About**. Confirm you are on a current build. If an **Update** button appears in the title bar, select it and let Visual Studio Code restart before continuing.![Visual Studio Code Help menu showing the About dialog used to confirm the installed version](https://641a99ee.previews.developers.cloudflare.com/cdn-cgi/image/onerror=redirect,width=1476,height=922,format=webp/_astro/vscode-help-about.DZbAxRm2.png)
2. **Sign in to Copilot**

   Select the Copilot icon in the Status Bar, select **Use AI Features**, then sign in with a GitHub account. Visual Studio Code opens your browser to authorize.![Visual Studio Code prompt to enable AI features and sign in with GitHub](https://641a99ee.previews.developers.cloudflare.com/cdn-cgi/image/onerror=redirect,width=1469,height=923,format=webp/_astro/vscode-pilot-signin.C0VZ3V6j.png)
3. **Authenticate to Copilot**

   Follow the browser pages to authenticate to GitHub.![GitHub sign-in page for authorizing GitHub Copilot](https://641a99ee.previews.developers.cloudflare.com/cdn-cgi/image/onerror=redirect,width=1468,height=925,format=webp/_astro/vscode-copilot-login.BLqMAZ3V.png)
4. **Create a folder and open it**

   Create an empty folder for this project, then open it in Visual Studio Code with **File** > **Open Folder**. For example, `~/cloudflare-api-mcp/`.![Visual Studio Code Open Folder dialog selecting an empty project folder](https://641a99ee.previews.developers.cloudflare.com/cdn-cgi/image/onerror=redirect,width=1538,height=1027,format=webp/_astro/vscode-open-folder.myi5RNpK.png)
5. **Create the configuration file**

   Inside the folder, create one file: `.vscode/mcp.json`. Typing `.vscode/mcp.json` in the Explorer creates the folder and file together.![Visual Studio Code Explorer creating the .vscode/mcp.json configuration file](https://641a99ee.previews.developers.cloudflare.com/cdn-cgi/image/onerror=redirect,width=1541,height=1034,format=webp/_astro/vscode-create-mcp-json.Dfhk6e7P.png) Paste the following into the file, then save:

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

   Note

   The root key in Visual Studio Code is `servers`. Configurations written for Cursor or Claude Desktop use `mcpServers`, which does nothing here.
6. **Start the server**

   After you save the file, a **Start** link appears on the `cloudflare-api` server definition. It looks like a comment, but it is a button (a [CodeLens ↗](https://learn.microsoft.com/en-us/visualstudio/ide/find-code-changes-and-other-history-with-codelens)). Select it, then allow the authentication prompt. Your browser opens the Cloudflare authorization page.![Visual Studio Code showing the Start CodeLens on the Cloudflare MCP server definition in mcp.json](https://641a99ee.previews.developers.cloudflare.com/cdn-cgi/image/onerror=redirect,width=1538,height=1030,format=webp/_astro/vscode-start-cloudflare-mcp.CFgXmbiP.png)
7. **Choose an access template**

   The authorization page is where you decide what the agent can access. This example selects **Full access** to modify DNS records. You can also start with **Read only** or build a **Custom** permission set. Scope the grant to a single account, then review what you are granting.![Cloudflare MCP authorization page showing access templates and account scope options](https://641a99ee.previews.developers.cloudflare.com/cdn-cgi/image/onerror=redirect,width=1551,height=1644,format=webp/_astro/cloudflare-mcp-access-template.BuSG8Wod.png) Before you authorize, know two things. **Full access** lets the agent create and delete real resources, which is why this belongs on a demo account. You can revoke the grant at any time from the dashboard under **My Profile** > **Access Management** > **Connected Applications**, which is also the page to visit if a re-authorization behaves unexpectedly.
8. **Verify permissions and authorize**

   Review the list of permissions, then select **Authorize** to let the Cloudflare API interact with your account.![Cloudflare MCP authorization page listing the requested permission groups before authorizing](https://641a99ee.previews.developers.cloudflare.com/cdn-cgi/image/onerror=redirect,width=1460,height=911,format=webp/_astro/cloudflare-mcp-confirm-authorization.BiEdoNbZ.png) Note

   You may see 401 errors in the Visual Studio Code logs. This is expected until you select **Allow in this Session** in the authorization prompt. ![Visual Studio Code Copilot prompt to allow the Cloudflare MCP server in the current session](https://641a99ee.previews.developers.cloudflare.com/cdn-cgi/image/onerror=redirect,width=764,height=968,format=webp/_astro/vscode-chat-allow-in-this-session.B1JRX2iR.png)
9. **Open Copilot Chat**

   If Copilot is minimized, open it with **View** > **Chat**.![Visual Studio Code View menu opening the Copilot Chat panel](https://641a99ee.previews.developers.cloudflare.com/cdn-cgi/image/onerror=redirect,width=1482,height=925,format=webp/_astro/vscode-open-copilot-chat.q2eWZZ8B.png)
10. **Confirm the server is running**

    The server now shows as running. The CodeLens reads **Running | 3 tools**. Three tools is correct, not a broken install: the server uses a search-and-execute pattern instead of registering thousands of individual endpoints.![Visual Studio Code CodeLens showing the Cloudflare MCP server running with three tools](https://641a99ee.previews.developers.cloudflare.com/cdn-cgi/image/onerror=redirect,width=1541,height=1027,format=webp/_astro/vscode-cloudflare-mcp-status.B1n7i2kW.png)
11. **List your zones**

    In Copilot Chat, set the mode to **Agent**, then ask it to list your zones. The agent requests your approval before running the call and returns a live list of every domain in the account.![Copilot Chat returning a list of Cloudflare zones from the account](https://641a99ee.previews.developers.cloudflare.com/cdn-cgi/image/onerror=redirect,width=1479,height=1056,format=webp/_astro/cloudflare-mcp-list-available-zones.By3y10Td.png)

    ```txt
    List zones in my account
    ```

    ```txt
    Ran Cloudflare API Code Executor

    - Zones returned: 1
    - Zone: cloudflaredemo.net — id: <ZONE_ID> — status: active
    ```
12. **Create a DNS record**

    Ask the agent to create a DNS AAAA record and turn on the Cloudflare proxy. This example points `test.cloudflaredemo.net` at `100::`, a reserved placeholder address from the IPv6 discard prefix `0100::/64` ([RFC 6666 ↗](https://www.rfc-editor.org/rfc/rfc6666)). Because the record is proxied, Cloudflare intercepts requests before they reach this address. Approve the tool call (**Always Allow**), and the agent reports the record created.![Copilot Chat creating a proxied AAAA DNS record through the Cloudflare MCP server](https://641a99ee.previews.developers.cloudflare.com/cdn-cgi/image/onerror=redirect,width=1479,height=1054,format=webp/_astro/cloudflare-mcp-create-aaaa-record.9y7YCmFb.png)

    ```txt
    Create a AAAA record for test.cloudflaredemo.net pointing to 100:: and enable the proxy.
    ```

    ```txt
    Ran Cloudflare API Code Executor

    - Record created: test.cloudflaredemo.net
    - Type: AAAA
    - Value: 100::
    - Proxied: true
    - Record ID: <RECORD_ID>
    ``` Do not rely on the agent's report alone. Open the dashboard and check the zone. ![Cloudflare dashboard DNS records page confirming the new AAAA record exists](https://641a99ee.previews.developers.cloudflare.com/cdn-cgi/image/onerror=redirect,width=1807,height=1314,format=webp/_astro/cloudflare-dash-verify-dns-record.fsKq8sUx.png)
13. **Verify DNS propagation**

    Ask the Cloudflare MCP server to verify that the record propagated.![Copilot Chat verifying DNS propagation across public resolvers](https://641a99ee.previews.developers.cloudflare.com/cdn-cgi/image/onerror=redirect,width=1478,height=1054,format=webp/_astro/cloudflare-mcp-verify-dns-propagation.Bj4T6fcx.png)

    ```txt
    Verify DNS propagation for test.cloudflaredemo.net
    ```

    ```txt
    Ran: dig @1.1.1.1 test.cloudflaredemo.net AAAA +short

    - Result: DNS resolves to Cloudflare IPv6 addresses (proxy active).
    - Resolvers returning AAAA: 1.1.1.1, 8.8.8.8, 9.9.9.9
      - 2606:4700::6812:2f3
      - 2606:4700::6812:3f3
    ```

    Note

    Because you turned on the proxy, the response returns Cloudflare-owned IP addresses rather than the origin `100::` address.
14. **Delete the DNS record**

    You can delete the record as easily as you created it.![Copilot Chat deleting the test DNS record through the Cloudflare MCP server](https://641a99ee.previews.developers.cloudflare.com/cdn-cgi/image/onerror=redirect,width=1545,height=1030,format=webp/_astro/cloudflare-mcp-delete-dns-record.DahKGny6.png)

    ```txt
    Delete test.cloudflaredemo.net
    ```

    ```txt
    Ran Cloudflare API Code Executor

    Deleted the DNS record for test.cloudflaredemo.net.
    ```

You now have an AI agent with read and write access to Cloudflare services in the account, driven entirely from Visual Studio Code.

## Related resources

- [Visual Studio Code quick start](https://641a99ee.previews.developers.cloudflare.com/agent-setup/visual-studio-code/) — condensed setup, tips, FAQ, and troubleshooting.
- [Cloudflare MCP server ↗](https://github.com/cloudflare/mcp-server-cloudflare) — domain-specific MCP servers.
- [Cloudflare API](https://641a99ee.previews.developers.cloudflare.com/api/) — the full REST API reference.

Was this helpful?

YesNo

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/agent-setup/visual-studio-code/detailed-walkthrough/#page","headline":"Visual Studio Code detailed walkthrough · Agent setup docs","description":"A screenshot-by-screenshot guide to connecting Visual Studio Code to the Cloudflare API through the Cloudflare MCP server, then creating, verifying, and deleting a DNS record with natural language.","url":"https://developers.cloudflare.com/agent-setup/visual-studio-code/detailed-walkthrough/","inLanguage":"en","image":"https://developers.cloudflare.com/og-docs.png","dateModified":"2026-09-03","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```