MCP App for VS Code with BigQuery

A full-stack demo of an MCP (Model Context Protocol) App designed for VS Code GitHub Copilot Chat. This system allows Copilot to query BigQuery through an MCP server and render rich, interactive React visualizations directly in the chat panel.

Prerequisites

• Node.js 18+ and npm/yarn
• Google Cloud SDK (gcloud CLI)
• BigQuery API enabled in your Google Cloud project
• VS Code with GitHub Copilot Chat extension

Setup

1. Google Cloud Credentials

Set up your Google Cloud authentication:

gcloud auth application-default login

This will create ~/.config/gcloud/application_default_credentials.json on your system.

Alternatively, if you have a service account JSON key, set the environment variable:

export GOOGLE_APPLICATION_CREDENTIALS=/path/to/your-key.json

2. Install Dependencies

From the root directory:

npm install

3. Create BigQuery Dataset and Seed Data

npm run seed --workspace=bigquery-setup

This will:

• Create a mcp_demo_dataset dataset in BigQuery
• Create an ecommerce_sales table with sample schema
• Populate it with 500 rows of dummy data

4. Build the Project

npm run build

This compiles:

• The React UI into a single index.html file
• The MCP server TypeScript code

5. Configure VS Code

The .vscode/mcp.json configuration is already set up to connect to the local MCP server. Open VS Code and the Copilot Chat panel should automatically connect to the server.

Project Structure

.
├── bigquery-setup/    # BigQuery data initialization
├── mcp-server/        # MCP server (Node.js/TypeScript)
├── mcp-ui/            # React UI (Vite)
└── .vscode/
    └── mcp.json       # VS Code MCP configuration

Usage

Once set up, open Copilot Chat in VS Code and ask queries like:

• "Show me the ecommerce sales dashboard"
• "What are total sales by product category?"
• "Display revenue trends over time"

The MCP server will query BigQuery and return an interactive dashboard visualization in the chat panel.