Build Webflow-Powered Applications in GitHub Copilot with CData MCP Server

GitHub Copilot is an AI-powered coding assistant that integrates directly into Visual Studio Code and other IDEs. With support for MCP, GitHub Copilot can connect to local tools and enterprise data sources, enabling natural language interaction with live systems during development.

Model Context Protocol (MCP) is an open standard for connecting LLM clients to external services through structured tool interfaces. MCP servers expose capabilities such as schema discovery and live querying, allowing AI agents to retrieve and reason over real-time data safely and consistently.

In this article, we guide you through installing the CData API Driver for MCP Server, configuring the connection to Webflow, connecting the MCP Server add-on to GitHub Copilot, and querying live Webflow data from within Visual Studio Code.

Prerequisites

• Visual Studio Code is installed on your machine
• GitHub Copilot Chat extension is enabled in Visual Studio Code
• CData API Driver for MCP Server has been installed

Step 1: Download and install the CData API Driver for MCP Server

1. To begin, download the CData API Driver for MCP Server 👁 Downloading the CData MCP Server add-on installer
   
2. Find and double-click the installer to begin the installation
3. Run the installer and follow the prompts to complete the installation 👁 Completing the CData MCP Server add-on installation
   

When the installation is complete, you are ready to configure your MCP Server add-on by connecting to Webflow.

Step 2: Configure the connection to Webflow

1. After installation, open the CData API Driver for MCP Server configuration wizard 👁 The CData MCP Server add-on configuration wizard
   

   NOTE: If the wizard does not open automatically, search for "CData API Driver for MCP Server" in the Windows search bar and open the application.

   👁 Opening the CData MCP Server add-on configuration wizard (Google Sheets is shown).
   
2. In MCP Configuration > Configuration Name, either select an existing configuration or choose to create a new one 👁 Creating a new configuration
   
3. Name the configuration (e.g. "cdata_api") and click OK 👁 Naming the configuration
   

4. Enter the appropriate connection properties in the configuration wizard

   Authentication

   Webflow uses OAuth 2.0 authentication to ensure secure access to sites, CMS collections, e-commerce data, and other resources. This authentication method allows you to securely connect to your Webflow workspace and manage resources with proper authorization.

   OAuth 2.0 Setup and Configuration

   Step 1: Create a Webflow OAuth Application

   To set up OAuth authentication:

   1. Visit the Webflow Developer Portal
   2. Navigate to "Apps & Integrations" in your Webflow account
   3. Click "Register an App" to create a new OAuth application
   4. Configure the application name, description, and redirect URI (CallbackURL)
   5. Copy the Client ID and Client Secret for use in your connection

   Required Connection Properties

   • AuthScheme: Set this to OAuth (required)
   • OAuthClientId: Client ID from your Webflow OAuth application (required)
   • OAuthClientSecret: Client secret from your Webflow OAuth application (required)
   • CallbackURL: Redirect URI specified in your OAuth application (required)
   • InitiateOAuth: Set to GETANDREFRESH for automatic token management (recommended)

   Required OAuth Scopes

   The Webflow API Profile requires the following OAuth scopes:

   • sites:read - Read access to site information and configuration
   • pages:read - Read access to site pages
   • cms:read - Read access to CMS collections and items
   • forms:read - Read access to forms and form submissions
   • assets:read - Read access to media assets and folders
   • ecommerce:read - Read access to products, orders, and inventory
   • authorized_user:read - Read access to the authorized user
   👁 Configuring the MCP Server add-on connection
   
5. Click Connect to authenticate with Webflow through OAuth
6. Click Save & Test to finalize the connection 👁 Saving and testing the MCP Server add-on configuration
   

This process creates a .mcp configuration file that GitHub Copilot will reference when launching the MCP Server add-on. Now with your MCP Server add-on configured, you are ready to connect it to GitHub Copilot.

Step 3: Connect the MCP Server add-on to GitHub Copilot

1. Download and install Visual Studio Code and enable the GitHub Copilot Chat extension

Option 1: Manually add the MCP configuration

1. Open or create the mcp.json file:
   • For global configuration: %%APPDATA%%/Roaming/Code/User/mcp.json
   • For project-specific configuration:
2. Add the JSON code shown below and save the file

{
 "servers": {
 "cdata_api": {
 "command": "C:\Program Files\CData\CData API Driver for MCP Server\jre\bin\java.exe",
 "args": [
 "-Dfile.encoding=UTF-8",
 "-jar",
 "C:\Program Files\CData\CData API Driver for MCP Server\lib\cdata.mcp.api.jar",
 "cdata_api"
 ]
 }
 }
}

NOTE: The command value should point to your Java 17+ java.exe executable, and the JAR path should point to the installed CData MCP Server add-on .jar file. The final argument must match the MCP configuration name you saved in the CData configuration wizard (e.g. "cdata_api").

Option 2: Copy the MCP configuration from the CData API Driver for MCP Server UI

1. After saving and testing your connection in the configuration wizard, click Next 👁 Selecting 'Next'
   
2. Select Github Copilot from the AI MCP Tool dropdown 👁 Choosing GitHub Copilot as the AI MCP tool
   
3. Follow the MCP Client Instructions to create the required configuration file 👁 MCP configuration instructions for GitHub Copilot
   
4. Copy the displayed JSON code and paste it into your configuration file

Step 4: Query live Webflow data in GitHub Copilot

1. Launch Visual Studio Code and open the GitHub Copilot Chat interface. Select the tool icon to enable the configured MCP Server add-on 👁 Enabling the CData MCP Server add-on in GitHub Copilot
   
2. Ask questions about your Webflow data using natural language. For example:

   "List all tables available in my Webflow data data connection."

   👁 Querying live data from GitHub Copilot
   
3. Start building with natural language prompts:

   For my project, data from the Sites is very important. Pull data from the most important columns like and .
   

GitHub Copilot is now fully integrated with CData API Driver for MCP Server and can use the MCP tools to explore schemas and execute live queries against Webflow.

Build with MCP Server. Deploy with CData Drivers.

Download CData API Driver for MCP Server for free and give your AI tools schema-aware access to live Webflow data during development. When you're ready to move to production, CData API Drivers deliver the same SQL-based access with enterprise-grade performance, security, and reliability.

Visit the CData Community to share insights, ask questions, and explore what's possible with MCP-powered AI workflows.