Google Antigravity MCP 架設

Part 1: MCP 概念介紹

什麼是 Model Context Protocol?為什麼它能讓 AI 變得更強大?

MCP Server AI 工具整合 自動化工作流

🔗 什麼是 MCP?

MCP(Model Context Protocol)是一種新興的標準協議,讓 AI 助手能夠連接外部服務和工具。

📡 協議標準

MCP 提供統一的介面,讓不同的 AI 工具可以使用相同的方式連接各種服務。

🔌 外掛架構

透過 MCP Server,AI 可以存取 GitHub、Netlify、Notion 等平台的 API。

🤖 自然語言操作

你只需要用自然語言告訴 AI 你想做什麼,AI 會自動呼叫對應的工具完成任務。

🚀 無限擴展

支援多種 MCP Client:Antigravity、Claude Desktop、Cursor、Windsurf 等。

🏗️ MCP 架構說明

MCP 的運作原理可以分為三個層次:

🔹 MCP Client(用戶端)
例如:Antigravity、Claude Desktop、Cursor、Windsurf
這是你與 AI 互動的介面
🔹 MCP Server(伺服器)
例如:GitHub MCP、Netlify MCP、Notion MCP
這是連接外部服務的橋樑,提供 API 工具給 AI 使用
🔹 外部服務
例如:GitHub API、Netlify API、Notion API
這是實際執行操作的平台
┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
│   MCP Client    │────▶│   MCP Server    │────▶│   External API  │
│  (Antigravity)  │◀────│  (GitHub MCP)   │◀────│   (GitHub API)  │
└─────────────────┘     └─────────────────┘     └─────────────────┘
        │                                               │
        └───────────────── 自然語言 ─────────────────────┘
                

💡 為什麼需要 MCP?

傳統方式 vs MCP 方式

比較項目 傳統方式 MCP 方式
操作介面 需要熟悉各平台介面 統一用自然語言操作
學習成本 每個平台都要學 只需會跟 AI 對話
自動化 需要寫程式串接 API AI 自動呼叫工具
效率 切換多個視窗操作 一個對話框完成所有事
MCP 讓你可以:
「幫我建立一個 GitHub repo,然後部署到 Netlify,再把連結記錄到 Notion」
一句話完成跨平台操作!

🖥️ 支援 MCP 的 Client

目前主流的 MCP Client 包括:

🌐 Google Antigravity

OpenAI 推出的桌面版 AI 助手,支援 Remote MCP Server,安裝最簡單。

🤖 Claude Desktop

Anthropic 推出的桌面應用,支援本地 MCP Server 設定。

💻 Cursor IDE

AI 驅動的程式編輯器,內建 MCP 支援,適合開發者。

🌊 Windsurf

另一款 AI 開發工具,支援 MCP 整合。

本課程使用 Google Antigravity 作為示範
因為它支援 Remote MCP Server,設定最簡單,不需要 Docker!

🔧 常見的 MCP Server

本課程將教你設定以下三個最實用的 MCP Server:

📝 Notion MCP

操作 Notion 頁面、資料庫、留言等。

  • 搜尋頁面和資料庫
  • 新增和編輯頁面
  • 查詢資料庫內容
  • 新增留言和評論

🚀 Netlify MCP

管理網站部署、環境變數、網域設定等。

  • 建立和部署專案
  • 管理環境變數
  • 設定網域
  • 查看部署紀錄

🐙 GitHub MCP

管理程式碼倉庫、Issue、Pull Request、Actions 等。

  • 瀏覽和查詢程式碼
  • 建立和管理 Issue
  • 建立 Pull Request
  • 監控 CI/CD 狀態

🏪 Antigravity MCP Store 總覽

Google Antigravity 內建 MCP Store,提供 40+ 個官方 MCP Server,一鍵安裝!

☁️ Google Cloud

16

Cloud Run、Firebase、BigQuery、Cloud SQL、Spanner 等雲端服務

🗄️ 資料庫服務

7

MongoDB、Redis、Supabase、Neon、Pinecone、Prisma

💻 開發工具

5

GitHub、Dart/Flutter、Netlify、Heroku

📋 生產力工具

4

Notion、Linear、Atlassian

🎨 設計工具

2

Figma Dev Mode、Locofy

💳 支付服務

2

Stripe、PayPal

🔧 DevOps

3

SonarQube、Harness、Airweave

🧠 AI 工具

2

Perplexity Ask、Sequential Thinking

💡 如何安裝:在 Antigravity 中點選左下角齒輪 → MCP Servers → 搜尋並一鍵安裝!

☁️ Cloud Run

讓 Antigravity 幫你部署應用程式到 Google Cloud Run

📋 功能說明
Cloud Run MCP Server 可以讓 AI 助手直接幫你把應用程式部署到 Google Cloud Run。Cloud Run 是 Google 的無伺服器容器執行平台,你只需要提供程式碼,它就會自動處理擴展、負載平衡等基礎設施。

🛠️ 主要功能

  • 部署容器化應用程式到 Cloud Run
  • 自動處理流量擴展和負載平衡
  • 管理服務版本和流量分配
  • 設定環境變數和密鑰
  • 查看部署日誌和監控狀態

💬 使用範例

「幫我把這個 Node.js 專案部署到 Cloud Run」
「查看我 Cloud Run 上所有服務的狀態」
「把 production 服務的流量切換到新版本」

🎯 Dart / Flutter MCP

Dart 和 Flutter 開發工具,讓 AI 協助跨平台應用開發

📋 功能說明
Dart 和 Flutter MCP Server 將 Dart(和 Flutter)開發工具的操作能力提供給相容的 AI 助手客戶端。這讓你可以用自然語言來執行 Flutter 開發任務。

🛠️ 主要功能

  • 執行 Dart 和 Flutter CLI 指令
  • 建立新的 Flutter 專案
  • 執行程式碼分析和格式化
  • 管理套件依賴 (pub get, pub upgrade)
  • 建置和執行 Flutter 應用程式

💬 使用範例

「建立一個新的 Flutter 專案叫做 my_app」
「執行 flutter analyze 檢查程式碼問題」
「幫我更新所有套件到最新版本」

🔥 Firebase MCP

Firebase 模型上下文協議伺服器,讓 AI 工具操作你的 Firebase 專案

📋 功能說明
Firebase MCP Server 讓 AI 驅動的開發工具能夠與你的 Firebase 專案和應用程式的程式碼庫協作。你可以用自然語言管理 Firebase 的各種服務。

🛠️ 主要功能

  • 管理 Firebase 專案設定
  • 操作 Firestore 資料庫(讀取、寫入、查詢)
  • 管理 Firebase Authentication 使用者
  • 部署 Firebase Hosting 網站
  • 設定和管理 Cloud Functions
  • 管理 Firebase Storage 檔案

💬 使用範例

「查詢 Firestore 中所有 users 集合的資料」
「部署我的網站到 Firebase Hosting」
「列出所有已註冊的使用者」

📊 BigQuery MCP

用自然語言與你的 BigQuery 資料互動

📋 功能說明
這個 MCP Server 讓你可以用自然語言來操作 BigQuery 資料。它允許你安全地連接到資料集,搜尋資料集、檢視資料表中繼資料、執行 SQL 查詢、產生時間序列預測,並直接從 AI 工具執行貢獻度分析。

🛠️ 主要功能

  • 搜尋和瀏覽 BigQuery 資料集
  • 檢視資料表結構和中繼資料
  • 用自然語言執行 SQL 查詢
  • 產生時間序列預測分析
  • 執行資料貢獻度分析

💬 使用範例

「查詢過去 30 天的銷售總額」
「預測下個月的網站流量趨勢」
「分析哪些因素對轉換率影響最大」

🗄️ AlloyDB for PostgreSQL

用自然語言與你的 AlloyDB PostgreSQL 資料互動

📋 功能說明
這個 MCP Server 讓你可以用自然語言來操作 AlloyDB for PostgreSQL 資料。它允許你安全地連接到資料庫,執行 SQL 查詢、檢視資料表結構、分析查詢計劃,並直接從 AI 工具排解資料庫效能問題。

🛠️ 主要功能

  • 安全連接到 AlloyDB 執行個體
  • 執行 SQL 查詢並檢視結果
  • 檢視資料表結構 (Schema)
  • 分析查詢執行計劃
  • 排解和優化資料庫效能

💬 使用範例

「顯示 orders 資料表的結構」
「這個查詢為什麼這麼慢?幫我分析執行計劃」
「查詢最近一週新增的客戶數量」

💾 Spanner MCP

用自然語言與你的 Google Cloud Spanner 資料互動

📋 功能說明
這個 MCP Server 讓你可以用自然語言來操作 Google Cloud Spanner 資料。它允許你安全地連接到執行個體,執行 SQL 查詢、檢視資料庫結構,並直接從 AI 工具執行資料操作。

🛠️ 主要功能

  • 連接到 Spanner 執行個體
  • 執行 SQL 查詢(支援 Google SQL 方言)
  • 檢視資料庫結構和中繼資料
  • 執行資料新增、更新、刪除操作
  • 管理全球分散式資料庫

💬 使用範例

「列出這個 Spanner 資料庫中所有的資料表」
「查詢全球各區域的訂單統計」
「新增一筆交易記錄到 transactions 資料表」

🐘 Cloud SQL for PostgreSQL

用自然語言與你的 Cloud SQL PostgreSQL 資料互動

📋 功能說明
這個 MCP Server 讓你可以用自然語言來操作 Cloud SQL for PostgreSQL 資料。它允許你安全地連接到資料庫,執行 SQL 查詢、檢視資料表結構、分析查詢計劃,並直接從 AI 工具排解資料庫效能問題。

🛠️ 主要功能

  • 安全連接到 Cloud SQL PostgreSQL
  • 執行 SQL 查詢並檢視結果
  • 檢視資料表結構和索引
  • 分析查詢執行計劃 (EXPLAIN ANALYZE)
  • 排解效能瓶頸

💬 使用範例

「顯示 products 資料表有哪些欄位」
「幫我優化這個慢查詢」
「查詢庫存低於 10 的所有商品」

🐬 Cloud SQL for MySQL

用自然語言與你的 Cloud SQL MySQL 資料互動

📋 功能說明
這個 MCP Server 讓你可以用自然語言來操作 Cloud SQL for MySQL 資料。它允許你安全地連接到資料庫,執行 SQL 查詢、檢視資料表結構、分析查詢計劃,並直接從 AI 工具排解資料庫效能問題。

🛠️ 主要功能

  • 安全連接到 Cloud SQL MySQL
  • 執行 SQL 查詢並檢視結果
  • 檢視資料表結構和索引
  • 分析查詢執行計劃
  • 排解效能問題

💬 使用範例

「顯示 users 資料表的結構」
「這個 JOIN 查詢為什麼慢?」
「統計每個月的新註冊用戶數」

🔷 Cloud SQL for SQL Server

用自然語言與你的 Cloud SQL SQL Server 資料互動

📋 功能說明
這個 MCP Server 讓你可以用自然語言來操作 Cloud SQL for SQL Server 資料。它允許你安全地連接到資料庫,執行 SQL 查詢、檢視資料表結構、分析查詢計劃,並直接從 AI 工具排解資料庫效能問題。

🛠️ 主要功能

  • 安全連接到 Cloud SQL SQL Server
  • 執行 T-SQL 查詢並檢視結果
  • 檢視資料表結構和索引
  • 分析查詢執行計劃
  • 排解效能瓶頸

💬 使用範例

「列出所有資料表和它們的列數」
「執行這個預存程序並顯示結果」
「分析這個查詢的效能問題」

📈 Looker MCP

將 AI 助手連接到 Looker 商業智慧平台

📋 功能說明
這個 MCP Server 讓你的 AI 助手連接到 Looker 商業智慧平台。它能夠執行自然語言查詢、執行已儲存的 Look 報表、建立和管理儀表板,並在 Looker 環境中執行執行個體健康檢查,實現資料探索和內容管理。

🛠️ 主要功能

  • 執行自然語言資料查詢
  • 執行已儲存的 Look 報表
  • 建立和管理儀表板
  • 探索資料模型和欄位
  • 執行執行個體健康檢查

💬 使用範例

「顯示上個月的銷售儀表板」
「執行『每週營收報表』這個 Look」
「建立一個新的行銷成效儀表板」

🗂️ Dataplex MCP

將 AI 助手連接到 Dataplex 統一目錄

📋 功能說明
這個 MCP Server 讓你的 AI 助手連接到 Dataplex 統一目錄。它能夠搜尋資料資產、擷取詳細的中繼資料(如結構描述和擁有權),並探索分散式資料中的面向類型,實現資料探索和治理。

🛠️ 主要功能

  • 搜尋和探索資料資產
  • 檢視詳細的中繼資料
  • 查看資料擁有權和血緣關係
  • 探索資料結構描述
  • 管理資料治理政策

💬 使用範例

「搜尋所有與『客戶』相關的資料集」
「這個資料表的擁有者是誰?」
「顯示 sales_data 的完整中繼資料」

🔧 MCP Toolbox for Databases

簡化資料庫工具開發的開源 MCP Server

📋 功能說明
MCP Toolbox for Databases 是一個開源的 MCP Server,專門設計用來簡化和保護開發人員建立與資料庫互動的工具。它提供了一個統一的框架,讓你可以快速建立安全的資料庫工具。

🛠️ 主要功能

  • 統一的資料庫連接介面
  • 安全的認證和授權機制
  • 支援多種資料庫類型
  • 簡化的工具開發流程
  • 內建的安全防護措施

💬 使用範例

適合進階開發者使用,可以基於此框架建立自訂的資料庫 MCP 工具。

👤 Cloud SQL / AlloyDB Admin 系列

讓 AI 助手管理資料庫執行個體和使用者

👤 AlloyDB for PostgreSQL Admin

讓 AI 助手與 AlloyDB for PostgreSQL 資源互動,包括建立叢集和管理使用者。

  • 建立和管理 AlloyDB 叢集
  • 管理資料庫使用者和權限
  • 設定備份和還原

👤 Cloud SQL for PostgreSQL Admin

讓 AI 助手與 Cloud SQL for PostgreSQL 資源互動,包括建立執行個體、管理使用者和設定資料庫。

  • 建立和管理 PostgreSQL 執行個體
  • 管理使用者和權限
  • 設定資料庫參數

👤 Cloud SQL for MySQL Admin

讓 AI 助手與 Cloud SQL for MySQL 資源互動,包括建立執行個體、管理使用者和設定資料庫。

  • 建立和管理 MySQL 執行個體
  • 管理使用者和權限
  • 設定資料庫參數

👤 Cloud SQL for SQL Server Admin

讓 AI 助手與 Cloud SQL for SQL Server 資源互動,包括建立執行個體、管理使用者和設定資料庫。

  • 建立和管理 SQL Server 執行個體
  • 管理使用者和權限
  • 設定資料庫參數

🗺️ Google Maps Platform Code Assist

為 AI 編程助手提供最新的 Google Maps Platform 官方資源

📋 功能說明
Google Maps Platform Code Assist MCP Server 為你喜愛的 AI 編程助手提供最新的官方 Google Maps Platform 文件、程式碼範例和最佳實踐。透過將 AI 助手建立在官方資源的基礎上,它可以產生更準確、可靠和有用的程式碼。

🛠️ 主要功能

  • 存取最新的 Google Maps API 文件
  • 取得官方程式碼範例
  • 學習 Maps Platform 最佳實踐
  • 產生符合規範的地圖程式碼
  • 解答 Maps API 使用問題

💬 使用範例

「如何在網頁中嵌入 Google 地圖?」
「產生一個顯示多個標記的地圖程式碼」
「如何計算兩點之間的駕駛距離?」

🎨 Figma Dev Mode MCP

將 Figma 設計直接整合到你的開發工作流程

📋 功能說明
Dev Mode MCP Server 將 Figma 直接帶入你的工作流程,為從 Figma 設計檔案產生程式碼的 AI Agent 提供重要的設計資訊和上下文。

🛠️ 主要功能

  • 從 Figma 設計檔案提取設計資訊
  • 取得元件尺寸、間距、顏色等資訊
  • 獲取字體樣式和排版設定
  • 產生符合設計的 CSS/程式碼
  • 提供設計上下文給 AI Agent

💬 使用範例

「從這個 Figma 設計產生 React 元件」
「取得這個按鈕的 CSS 樣式」
「這個設計用了什麼顏色和字體?」

🐙 GitHub MCP

GitHub MCP Server 提供與 GitHub API 的無縫整合

📋 功能說明
GitHub MCP Server 是一個模型上下文協議伺服器,提供與 GitHub API 的無縫整合,為開發者和工具啟用進階自動化和互動功能。

🛠️ 主要功能

  • 管理程式碼倉庫(建立、複製、刪除)
  • 建立和管理 Issue
  • 建立和審查 Pull Request
  • 瀏覽和搜尋程式碼
  • 管理 GitHub Actions 工作流程
  • 管理分支和標籤

💬 使用範例

「建立一個新的 GitHub 倉庫叫做 my-project」
「列出這個專案所有未解決的 Issue」
「建立一個 PR 將 feature 分支合併到 main」

🌿 Neon MCP

用自然語言與你的 Neon Postgres 資料庫互動

📋 功能說明
Neon MCP Server 是一個開源工具,讓你可以用自然語言與 Neon Postgres 資料庫互動。Neon 是一個無伺服器的 Postgres 平台,提供自動擴展和分支功能。

🛠️ 主要功能

  • 用自然語言執行 SQL 查詢
  • 管理資料庫分支
  • 檢視和修改資料表結構
  • 自動擴展資源
  • 管理資料庫連接

💬 使用範例

「建立一個新的開發分支」
「查詢所有活躍用戶的數量」
「顯示 orders 資料表的結構」

💳 Stripe MCP

透過函數呼叫與 Stripe API 整合

📋 功能說明
Stripe 模型上下文協議伺服器讓你可以透過函數呼叫與 Stripe API 整合。此協議支援各種工具來與不同的 Stripe 服務互動。

🛠️ 主要功能

  • 處理支付和退款
  • 管理客戶資料
  • 建立和管理訂閱
  • 產生發票
  • 查詢交易紀錄
  • 管理產品和價格

💬 使用範例

「列出所有活躍的訂閱客戶」
「為這個客戶建立一張發票」
「查詢昨天的所有交易紀錄」

🔴 Redis MCP

與 Redis 鍵值存儲互動

📋 功能說明
Redis MCP Server 讓你可以與 Redis 鍵值存儲互動。Redis 是一個高效能的記憶體資料結構存儲,常用於快取、訊息佇列和即時應用程式。

🛠️ 主要功能

  • 讀取和寫入鍵值對
  • 管理快取資料
  • 使用 Pub/Sub 訊息功能
  • 操作列表、集合、雜湊等資料結構
  • 設定過期時間

💬 使用範例

「取得 user:123 的快取資料」
「設定一個 5 分鐘後過期的快取」
「列出所有以 session: 開頭的鍵」

🍃 MongoDB MCP

與 MongoDB Atlas 互動的模型上下文協議伺服器

📋 功能說明
這是一個用於與 MongoDB Atlas 互動的模型上下文協議伺服器。MongoDB 是一個文件導向的 NoSQL 資料庫,Atlas 是其雲端託管服務。

🛠️ 主要功能

  • 查詢和搜尋文件
  • 新增、更新、刪除文件
  • 建立和管理索引
  • 執行聚合管線
  • 管理集合和資料庫

💬 使用範例

「查詢所有狀態為 active 的用戶」
「為 email 欄位建立唯一索引」
「統計每個城市的訂單數量」

📝 Notion MCP

官方 Notion MCP Server,透過 Notion API 與工作區互動

📋 功能說明
官方 Notion MCP Server 允許透過 Notion API 與 Notion 工作區、頁面、資料庫和留言互動。Notion 是一個強大的筆記和專案管理工具。

🛠️ 主要功能

  • 搜尋頁面和資料庫
  • 建立和編輯頁面
  • 查詢和更新資料庫
  • 新增和管理留言
  • 管理區塊內容

💬 使用範例

「在『專案追蹤』資料庫新增一個任務」
「搜尋所有包含『會議紀錄』的頁面」
「更新這個頁面的狀態為『已完成』」

📋 Linear MCP

官方 Linear.app MCP Server,與專案、Issue 和工作流程互動

📋 功能說明
官方 Linear.app MCP Server 用於與 Linear 專案、Issue 和工作流程互動。Linear 是一個現代化的專案管理工具,專為軟體團隊設計。

🛠️ 主要功能

  • 建立和管理 Issue
  • 管理專案和里程碑
  • 更新 Issue 狀態和指派人
  • 查詢和篩選 Issue
  • 管理工作流程和標籤

💬 使用範例

「建立一個新的 Bug Issue」
「列出所有指派給我的 Issue」
「將這個 Issue 移到『進行中』狀態」

🔎 Perplexity Ask MCP

整合 Perplexity Sonar API 提供即時網路研究能力

📋 功能說明
這是一個 MCP Server 實作,整合 Perplexity Sonar API 來提供即時、全網路的研究能力。讓你的 AI 助手可以搜尋最新的網路資訊。

🛠️ 主要功能

  • 即時網路搜尋
  • 取得最新資訊和新聞
  • 研究特定主題
  • 驗證事實和數據
  • 擴展 AI 的知識範圍

💬 使用範例

「搜尋最新的 AI 發展趨勢」
「查詢今天的科技新聞」
「研究這個公司的最新動態」

💰 PayPal MCP

官方 PayPal MCP Server,整合 PayPal API 進行支付處理

📋 功能說明
官方 PayPal MCP Server 允許與 PayPal API 整合,用於支付處理、交易管理和帳戶操作。PayPal 是全球最大的線上支付服務之一。

🛠️ 主要功能

  • 處理支付和結帳
  • 管理交易紀錄
  • 處理退款
  • 查詢帳戶資訊
  • 產生報表

💬 使用範例

「查詢最近一週的所有交易」
「為這筆訂單處理退款」
「顯示今天的收款總額」

☁️ Heroku MCP

Heroku Platform MCP Server 讓 AI 與 Heroku 資源無縫互動

📋 功能說明
Heroku Platform MCP Server 實現與 Heroku Platform 資源的無縫互動,讓大型語言模型可以讀取、管理和操作應用程式、附加元件、資料庫等。

🛠️ 主要功能

  • 部署和管理應用程式
  • 管理附加元件 (Add-ons)
  • 操作 Heroku Postgres 資料庫
  • 查看日誌和監控
  • 管理環境變數
  • 擴展和縮減資源

💬 使用範例

「部署這個應用程式到 Heroku」
「顯示 my-app 的最近日誌」
「將 web dyno 擴展到 2 個」

🌲 Pinecone MCP

搜尋文件、設定索引、產生程式碼、上傳和搜尋資料

📋 功能說明
Pinecone MCP Server 讓 AI 工具可以搜尋 Pinecone 文件、設定索引、根據索引設定產生程式碼,並在 Pinecone 索引中上傳和搜尋資料。Pinecone 是一個向量資料庫,專為 AI 應用程式設計。

🛠️ 主要功能

  • 建立和管理向量索引
  • 上傳和索引向量資料
  • 執行相似性搜尋
  • 搜尋 Pinecone 文件
  • 產生整合程式碼

💬 使用範例

「建立一個新的向量索引」
「搜尋與這段文字最相似的文件」
「如何在 Python 中使用 Pinecone?」

⚡ Supabase MCP

將 Supabase 專案連接到 AI 助手

📋 功能說明
將你的 Supabase 專案連接到 AI 助手。這個 MCP Server 允許管理資料表、取得設定、執行 SQL 查詢、管理 Edge Functions,並在 Supabase 專案中操作資料庫結構。

🛠️ 主要功能

  • 建立和管理資料表
  • 執行 SQL 查詢
  • 管理 Edge Functions
  • 操作資料庫結構 (Schema)
  • 取得專案設定
  • 管理認證和儲存

💬 使用範例

「建立一個 users 資料表」
「部署一個新的 Edge Function」
「查詢所有已驗證的用戶」

💎 Prisma MCP

讓 AI 工具與 Prisma 互動,輕鬆建立和管理 Postgres 資料庫

📋 功能說明
Prisma MCP Server 讓 AI 工具可以與 Prisma 互動,輕鬆建立和管理 Postgres 資料庫。Prisma 是一個現代化的資料庫工具包,提供類型安全的資料庫存取。

🛠️ 主要功能

  • 建立和管理資料庫
  • 產生和執行遷移
  • 定義和更新資料模型
  • 產生 Prisma Client
  • 執行資料庫查詢

💬 使用範例

「建立一個新的 Prisma 專案」
「在 schema 中新增一個 User 模型」
「執行資料庫遷移」

🔧 Locofy MCP

讓 Locofy.ai 程式碼可以與 IDE 整合和擴展

📋 功能說明
Locofy MCP Server 讓 Locofy.ai 產生的程式碼可以與你的 IDE 整合和擴展。Locofy 是一個設計轉程式碼的工具,可以將 Figma 或 XD 設計轉換為前端程式碼。

🛠️ 主要功能

  • 將設計轉換為程式碼
  • 與 IDE 無縫整合
  • 支援 React、Vue、Next.js 等框架
  • 產生響應式設計
  • 客製化程式碼輸出

💬 使用範例

「從這個設計產生 React 元件」
「將這個按鈕設計轉換為 Vue 元件」
「產生符合設計的響應式佈局」

✈️ Airweave MCP

讓 AI Agent 搜尋任何應用程式

📋 功能說明
Airweave 讓 AI Agent 可以搜尋任何應用程式的資料。它提供了一個統一的介面來存取和搜尋各種應用程式中的資訊。

🛠️ 主要功能

  • 連接多個應用程式
  • 統一搜尋介面
  • 跨應用程式資料存取
  • 安全的認證機制
  • 即時資料同步

💬 使用範例

「在所有連接的應用程式中搜尋『專案報告』」
「找出最近修改的所有文件」
「搜尋與這個客戶相關的所有資料」

🔵 Atlassian MCP

與 Atlassian 產品互動的 MCP Server

📋 功能說明
Atlassian MCP Server 用於與 Atlassian 產品互動。Atlassian 提供 Jira(專案管理)、Confluence(文件協作)等知名工具。

🛠️ 主要功能

  • 建立和管理 Jira Issue
  • 更新 Issue 狀態和指派人
  • 建立和編輯 Confluence 頁面
  • 搜尋文件和 Issue
  • 管理專案和看板

💬 使用範例

「在 Jira 中建立一個新的 Bug」
「更新 Confluence 上的會議紀錄」
「列出這個 Sprint 中所有未完成的 Issue」

🔄 Harness MCP

讓 AI 助手與 Harness 平台 API 互動

📋 功能說明
Harness MCP Server 讓 AI 助手可以與 Harness 平台 API 互動,為軟體交付和雲端操作啟用智慧自動化和輔助功能。Harness 是一個現代化的 CI/CD 平台。

🛠️ 主要功能

  • 管理 CI/CD 管線
  • 觸發和監控部署
  • 管理雲端資源
  • 設定自動化工作流程
  • 監控應用程式效能

💬 使用範例

「觸發 production 環境的部署」
「顯示最近的部署歷史」
「建立一個新的 CI/CD 管線」

🔍 SonarQube MCP

讓 AI 助手與 SonarQube 執行個體互動

📋 功能說明
SonarQube MCP Server 讓 AI 助手可以與 SonarQube 執行個體互動,進行程式碼品質分析、專案管理和品質門檻操作。SonarQube 是一個程式碼品質和安全分析工具。

🛠️ 主要功能

  • 執行程式碼品質分析
  • 查看品質門檻狀態
  • 管理專案設定
  • 檢視和管理問題
  • 追蹤技術債

💬 使用範例

「執行這個專案的程式碼分析」
「顯示所有 Critical 等級的問題」
「這個專案通過品質門檻了嗎?」

🚀 Netlify MCP

讓 AI 助手與 Netlify 平台互動

📋 功能說明
Netlify MCP Server 讓 AI 助手可以與 Netlify 平台互動,管理網站、部署、網域和其他網頁開發工作流程。Netlify 是一個流行的靜態網站和無伺服器函數託管平台。

🛠️ 主要功能

  • 建立和管理網站
  • 觸發和監控部署
  • 設定自訂網域
  • 管理環境變數
  • 查看部署紀錄和日誌
  • 管理 Serverless Functions

💬 使用範例

「部署這個專案到 Netlify」
「設定 my-domain.com 為自訂網域」
「顯示最近的部署紀錄」

🧠 Sequential Thinking MCP

為 LLM 對話提供結構化思考和推理能力

📋 功能說明
這是一個模型上下文協議伺服器,為 LLM 對話提供結構化思考和推理能力。它幫助 AI 以更系統化的方式處理複雜問題。

🛠️ 主要功能

  • 提供系統化推理流程
  • 分步驟解決複雜問題
  • 強化邏輯思考能力
  • 改善回答的結構性
  • 支援多步驟推理任務

💬 使用範例

適合需要複雜推理的任務,如:
「分析這個商業問題並提出解決方案」
「逐步推導這個數學證明」
「設計這個系統的架構」

📋 前置準備

在開始設定 MCP 之前,請確認你已準備好以下項目:

✅ 必要工具

  • Google Antigravity 桌面版(或其他 MCP Client)
  • Notion 帳號(用於 Notion MCP)
  • Netlify 帳號(用於 Netlify MCP)
  • GitHub 帳號(用於 GitHub MCP)

✅ 選用工具(進階)

  • Node.js 22 或更高版本(部分 MCP 需要)
  • Docker Desktop(本地 MCP Server 需要)
好消息!
使用 Remote MCP Server 的話,不需要安裝 Node.js 和 Docker!
Antigravity 支援 Remote MCP,設定超簡單!

🎯 本課程學習目標

Part 1

理解 MCP 的概念和架構

Part 2

設定 Notion MCP Server

Part 3

設定 Netlify MCP Server

Part 4

設定 GitHub MCP Server

Part 5

實戰應用與整合案例

準備好了嗎?

接下來我們將開始設定第一個 MCP Server:Notion MCP

前往 Part 2 →