從零開始掌握 AI 輔助編程。解鎖無限次數的代碼補全與智能對話，利用 MCP 連接外部數據，成為高效開發者。

🌐 在線預覽

本專案是一個互動式單頁應用程式 (SPA)，旨在為學生和開發者提供完整的 GitHub Copilot 學習路徑及 Model Context Protocol (MCP) 伺服器整合指南。

本指南涵蓋：

• 學生免費申請流程：完整的 GitHub Education 申請步驟（以 VTC 為例）
• Copilot 核心功能：AI 輔助編程、模型選擇、快捷鍵操作
• MCP 伺服器整合：連接外部數據源，增強 AI 能力
• 提示語工程：PIRCAI 框架與 4S 原則實踐

• 🎓 在學學生（年滿 13 歲，持有 .edu 郵箱）
• 💻 初學者開發者
• 🚀 希望提升 AI 輔助編程效率的工程師

參考：index.html 第 160-320 行

• ✅ 六步驟申請流程（第 194-310 行）

  • 資格確認與文件準備
  • 雙重驗證 (2FA) 設定（第 220-238 行）
  • 帳單資訊完善（第 240-258 行）
  • 申請表填寫
  • 證明文件上傳
  • 學校地址資訊

• 🎁 三大福利說明（第 166-188 行）

  • 完全免費（無需信用卡）
  • 無限使用（GPT-4o / Claude 無限制）
  • 有效期長（2 年，可續期）

• ⚠️ 重要提示（第 198-206 行）

  • 禁止使用 VPN
  • 必須開啟定位權限
  • 建議手機操作並在學校網路環境進行

參考：index.html 第 322-423 行

• 📦 安裝步驟（第 341-349 行）

  • VS Code 下載
  • 擴充功能安裝
  • GitHub 授權登入

• ⌨️ 快捷鍵指南（第 351-366 行）

  • 接受建議：Tab
  • 拒絕建議：Esc
  • 開啟聊天：Ctrl+I
  • 下一個建議：Alt+]

• 🧠 模型選擇策略（第 370-420 行）

  • Claude 4.5 Sonnet：複雜任務（12 積分/請求）
  • GPT-4o：日常開發首選（0 積分）
  • Claude Haiku：快速編輯（0 積分）

參考：index.html 第 425-630 行

AI 應用 (Client) ─JSON-RPC→ MCP 伺服器 ─存取→ 外部數據源

完整的統一配置 JSON，包含：

• 輸入參數定義
• HTTP 伺服器配置（Context7）
• 命令行伺服器配置（Sequential Thinking、Filesystem、Brave）
• 環境變數映射

參考：index.html 第 690-760 行

• P - Profile：設定 AI 角色
• I - Input：提供背景信息
• R - Request：清晰具體的請求
• C - Constraints：技術約束
• A - Assistants：輸出格式
• I - Instructions：逐步指令

• Single���專注單一任務
• Specific：指令具體化
• Short：保持簡潔
• Surround：提供上下文

參考：index.html 第 1-110 行

核心框架:
  - HTML5 (第 2 行)
  - Tailwind CSS v3 (第 14 行 - CDN)
  
字體:
  - Noto Sans TC (繁體中文, 第 11 行)
  - JetBrains Mono (等寬字體, 第 11 行)
  
圖標庫:
  - Lucide Icons (第 16 行)
  
工具庫:
  - Marked.js (Markdown 解析, 第 19 行)
  
配色方案 (第 29-37 行):
  - GitHub Dark Theme (#0d1117)
  - 自訂色彩系統 (blue, green, purple, gray)

參考：index.html 第 46-109 行

• 🎨 Glass Panel 效果（第 50-54 行）
• 🌈 漸變文字（第 55-59 行）
• 📜 自訂捲軸（第 61-71 行）
• ⌨️ 鍵盤樣式（第 72-81 行）
• 📝 Markdown 渲染（第 83-95 行）
• ✨ Shimmer 動畫（第 96-106 行）

參考：index.html 第 820-887 行

• Icon 初始化（第 823 行）
• Toast 通知系統（第 825-837 行）
• 剪貼簿複製（第 839-848 行）
• 平滑滾動導航（第 850-855 行）

• 點擊展開/收合（第 862-872 行）
• 一鍵複製功能（第 875-890 行）
• 避免按鈕衝突（第 865 行）

# 瀏覽器支援
Chrome 90+
Firefox 88+
Safari 14+
Edge 90+

1. 克隆專案

git clone https://github.com/wedsamuel1230/copilot-mcp-guide.git
cd copilot-mcp-guide

2. 啟動服務

# 使用 Python HTTP 伺服器
python -m http.server 8000

# 或使用 Node.js
npx http-server -p 8000

3. 訪問應用

http://localhost:8000

本專案已配置 GitHub Pages 自動部署：

• 主分支: main
• 發布源: 根目錄
• 訪問地址: https://wedsamuel1230.github.io/copilot-mcp-guide/

參考：index.html 第 112-127 行

固定頂部導航欄 (第 113 行)
├── Logo 與標題 (第 116-119 行)
└── 導航連結 (第 120-125 行)
    ├── #student - 學生申請
    ├── #basics - Copilot 基礎
    ├── #mcp - MCP 伺服器
    └── #prompts - 提示語工程

參考：index.html 第 129-157 行

• 漸變背景效果（第 130 行）
• 動態狀態徽章（第 134-141 行）
• CTA 按鈕組（第 149-156 行）

學生申請指南
├── 福利卡片 (第 166-188 行)
├── 重要提示 (第 198-206 行)
└── 申請步驟 (第 210-310 行)
    ├── Step 1: 資格確認
    ├── Step 2: 2FA 設定
    ├── Step 3: 帳單資訊
    ├── Step 4: 申請表
    ├── Step 5: 文件上傳
    ├── Step 6: 地址填寫
    └── Step 7: 提交等待

Copilot 核心與安裝
├── 安裝步驟 (第 341-349 行)
├── 快捷鍵指南 (第 351-366 行)
└── 模型選擇 (第 370-420 行)
    ├── Claude 4.5 Sonnet
    ├── GPT-4o
    └── Claude Haiku

MCP：為 AI 裝上雙手
├── 架構可視化 (第 433-457 行)
├── 推薦伺服器卡片 (第 461-623 行)
│   ├── Sequential Thinking
│   ├── Context7
│   ├── Filesystem MCP
│   └── Brave Search
├── 快速配置範例 (第 628-665 行)
└── Awesome MCP 連結 (第 676-682 行)

提示語工程：PIRCAI 框架
├── PIRCAI 說明 (第 692-728 行)
├── 範例程式碼 (第 731-755 行)
└── 4S 原則 (第 765-787 行)

參考：index.html 第 792-809 行

• 官方資源連結（第 799-803 行）
• 版權聲明（第 804-806 行）

配置來源：index.html 第 486-497 行

{
  "servers": {
    "sequential-thinking": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-sequential-thinking"]
    }
  }
}

使用場景：

• 複雜邏輯推理
• 架構設計決策
• 長鏈式問題解決

提示語建議（第 499 行）：

"請分解問題並逐步給出推理，每一步驗證前一步假設。"

配置來源：index.html 第 525-535 行

{
  "servers": {
    "context7": {
      "type": "http",
      "url": "https://mcp.context7.com/mcp",
      "headers": {
        "CONTEXT7_API_KEY": "YOUR_API_KEY"
      }
    }
  }
}

使用場景：

• 大型代碼庫理解
• 跨檔案引用解析
• API 文檔查詢

提示語建議（第 538 行）：

"請引用相關檔案並附上行號來源。"

配置來源：index.html 第 563-573 行

{
  "servers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "${workspaceFolder}"
      ]
    }
  }
}

安全建議（第 576 行）：

• 限制 ROOT_PATH 為專案根目錄
• 避免過度訪問系統文件

使用範例：

"列出 src 目錄並打開 index.js"

配置來源：index.html 第 608-620 行

{
  "inputs": [{
    "password": true,
    "id": "brave-api-key",
    "type": "promptString",
    "description": "Brave Search API Key"
  }],
  "servers": {
    "brave-search-mcp-server": {
      "command": "npx",
      "args": ["-y", "@brave/brave-search-mcp-server", "--transport", "stdio"],
      "env": {
        "BRAVE_API_KEY": "${input:brave-api-key}"
      }
    }
  }
}

使用範例（第 623 行）：

"搜尋最新 Node.js LTS 版本釋出資訊"

完整範例：index.html 第 632-660 行

將所有伺服器整合到單一配置檔：

• 支援動態輸入（第 634 行）
• 混合 HTTP 與 CLI 伺服器
• 環境變數���射

探索社群維護的伺服器列表： 🔗 Awesome MCP Servers

1. Fork 本專案
2. 創建特性分支

git checkout -b feature/amazing-feature

3. 提交變更

git commit -m '新增某某功能'

4. 推送到分支

git push origin feature/amazing-feature

5. 開啟 Pull Request

• 📝 改進文檔說明
• 🌐 添加其他語言版本
• 🐛 修復 Bug
• ✨ 新增 MCP 伺服器範例
• 🎨 優化 UI/UX 設計
• ♿ 改善無障礙功能

參考專案現有風格：

• HTML 縮排：4 空格（第 1-888 行一致）
• CSS 類別：Tailwind CSS 工具類
• JavaScript：ES6+ 語法
• 註釋：中文說明

本專案採用 MIT License 授權。

詳見 LICENSE 文件。

• GitHub Education - 學生開發者計劃
• Anthropic - MCP 協議標準
• Tailwind CSS - 樣式框架
• Lucide Icons - 圖標庫

• GitHub: @wedsamuel1230
• 專案連結: copilot-mcp-guide