Google Calendar MCP Server

google-calendar-mcp-app

Google Calendar with interactive UI — right inside your AI chat.

Ask your AI assistant about your schedule and get real, interactive calendar views instead of plain text. Create events with a form. See your availability as a visual heatmap. All rendered inline in the conversation.

Built on MCP Apps, the official protocol extension for interactive UIs in AI chat. Fork of nspady/google-calendar-mcp (MIT) — all 13 calendar tools preserved, 15 interactive UI screens added on top.

Quick Start

1. Clone & Install

git clone https://github.com/QuantGeekDev/google-calendar-mcp-app.git
cd google-calendar-mcp-app
npm install
npm run build

2. Set Up Google Calendar Access

You need OAuth credentials to access the Google Calendar API. Two ways to set this up:

Option A: Using `gcloud` CLI (fastest)

If you have Google Cloud CLI installed:

# Create project and enable Calendar API
gcloud projects create my-gcal-mcp --name="Google Calendar MCP"
gcloud config set project my-gcal-mcp
gcloud services enable calendar-json.googleapis.com

Then finish in the browser (2 clicks):

1. Configure consent screen — open OAuth consent screen, pick "External", fill app name + your email, skip scopes, add yourself as test user
2. Create credentials — open Create OAuth client, select "Desktop app", create, download JSON

Save the downloaded file as gcp-oauth.keys.json in the project root.

Option B: All in browser

1. Go to Google Cloud Console → create a project
2. Search "Google Calendar API" → Enable it
3. Go to APIs & Services → OAuth consent screen → External → fill basics → add yourself as test user
4. Go to Credentials → Create Credentials → OAuth client ID → Desktop app → Download JSON
5. Save as gcp-oauth.keys.json in the project root

3. Authenticate

export GOOGLE_OAUTH_CREDENTIALS=./gcp-oauth.keys.json
npm run auth

A browser window opens — sign in with your Google account and grant calendar access. Tokens are saved locally. You only need to do this once (tokens auto-refresh).

Tip: If you see "This app isn't verified", click Advanced → Go to [app name] (unsafe). This is normal for test-mode apps.

4. Connect to Your AI Host

Claude Desktop (recommended — full MCP Apps UI support)

Add to ~/.config/Claude/claude_desktop_config.json (Linux) or ~/Library/Application Support/Claude/claude_desktop_config.json (macOS):

{
  "mcpServers": {
    "google-calendar": {
      "command": "node",
      "args": ["/absolute/path/to/google-calendar-mcp-app/build/index.js"],
      "env": {
        "GOOGLE_OAUTH_CREDENTIALS": "/absolute/path/to/gcp-oauth.keys.json"
      }
    }
  }
}

Restart Claude Desktop. Ask: "What's on my calendar this week?"

MCPJam Inspector (best for testing & development)

# Terminal 1: start the MCP server
export GOOGLE_OAUTH_CREDENTIALS=./gcp-oauth.keys.json
npm run start:http -- --port 3001 --host 0.0.0.0

# Terminal 2: launch MCPJam
npx @mcpjam/inspector@latest

Open http://localhost:6274, click Add Server → HTTP, enter http://127.0.0.1:3001, connect. Select any tool and call it — the interactive UI renders inline.

VS Code (GitHub Copilot)

VS Code with GitHub Copilot supports MCP Apps. Add the server in VS Code's MCP settings and use Copilot Chat.

Claude.ai (web — text only, no UI rendering)

# Start HTTP server
npm run start:http -- --port 3001 --host 0.0.0.0

# Tunnel to the internet
npx cloudflared tunnel --url http://localhost:3001

# Copy the tunnel URL → claude.ai → Settings → Connectors → Add custom connector

Note: Claude.ai web currently shows text responses only. Interactive UIs render in Claude Desktop, MCPJam, VS Code, and Goose.

What You Get

Every tool returns an interactive UI. 13 tools, 15 screens:

Calendar Views

Plus Day View (24h timeline), Week View (7-column grid), and Month View (calendar grid with event pills) — all available as alternate views.

Event Actions