1.什麼是模型上下文協定（MCP）？
MCP 是一個標準協議，允許人工智慧代理與 外部工具和服務。您無需自行編寫整合程式碼，而是安裝 MCP 伺服器來擴充 Copilot 的功能。
┌─────────────────────────────────────────────────┐
│ MCP ARCHITECTURE │
├─────────────────────────────────────────────────┤
│ │
│ ┌──────────┐ ┌────────────┐ │
│ │ Copilot │────▶│ MCP Server │ │
│ │ Agent │◀────│ (Figma) │ │
│ └──────────┘ └────────────┘ │
│ │ │
│ │ ┌────────────┐ │
│ └──────────▶│ MCP Server │ │
│ ◀───────────│ (Database) │ │
│ └────────────┘ │
│ │ │
│ │ ┌────────────┐ │
│ └──────────▶│ MCP Server │ │
│ ◀───────────│ (GitHub) │ │
│ └────────────┘ │
│ │
│ Copilot dùng tools từ MCP servers │
│ như dùng built-in tools │
│ │
└─────────────────────────────────────────────────┘
2. 在 VS Code 中安裝 MCP 伺服器
2.1. settings.json 中的配置
{
"mcp": {
"servers": {
"figma": {
"command": "npx",
"args": ["-y", "@anthropic/mcp-server-figma"],
"env": {
"FIGMA_ACCESS_TOKEN": "${env:FIGMA_ACCESS_TOKEN}"
}
},
"github": {
"command": "npx",
"args": ["-y", "@anthropic/mcp-server-github"],
"env": {
"GITHUB_TOKEN": "${env:GITHUB_TOKEN}"
}
},
"postgres": {
"command": "npx",
"args": ["-y", "@anthropic/mcp-server-postgres"],
"env": {
"DATABASE_URL": "${env:DATABASE_URL}"
}
}
}
}
}
2.2.每個專案的配置 (.vscode/mcp.json)
{
"servers": {
"project-db": {
"command": "npx",
"args": ["-y", "@anthropic/mcp-server-postgres"],
"env": {
"DATABASE_URL": "postgresql://dev:password@localhost:5432/myapp_dev"
}
}
}
}
3. 流行的MCP伺服器
3.1. Figma MCP－從設計到程式碼
將 Figma 與 Copilot 連接，將設計轉換為程式碼：
// Prompt ví dụ:
Look at the Figma design for the login page and create
a React component that matches it exactly.
Use TailwindCSS for styling.
2026 年 3 月：Figma MCP 伺服器成為可能 直接從 VS Code 產生設計層。
3.2. GitHub MCP — 儲存庫操作
// Copilot có thể:
- Tìm và phân tích issues
- Đọc pull request comments
- Tạo issues từ code analysis
- Review PR changes
3.3.資料庫 MCP — 查詢與架構
// Prompt ví dụ:
Show me the schema of the users table and write a query
to find all users who registered in the last 30 days
but haven't made any purchases.
3.4.其他 MCP 伺服器
| MCP伺服器 | 功能 |
|---|---|
| 檔案系統 | 讀/寫工作區外的文件 |
| 勇敢的搜索 | 從 Copilot 內進行網路搜尋 |
| 傀儡師 | 瀏覽器自動化和螢幕截圖 |
| 鬆弛 | 從 Slack 發送訊息、建立問題 |
| 記憶體 | 對話持久記憶 |
| 吉特克拉肯 | Git高級操作 |
4. 建立自訂 MCP 伺服器
您可以為內部工具建立單獨的 MCP 伺服器：
// custom-mcp-server/index.ts
import { Server } from '@modelcontextprotocol/sdk/server/index.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
const server = new Server({
name: 'internal-api',
version: '1.0.0',
}, {
capabilities: {
tools: {},
},
});
// Register tool
server.setRequestHandler('tools/list', async () => ({
tools: [{
name: 'get_customer',
description: 'Lấy thông tin khách hàng từ CRM',
inputSchema: {
type: 'object',
properties: {
customerId: { type: 'string', description: 'Customer ID' },
},
required: ['customerId'],
},
}],
}));
server.setRequestHandler('tools/call', async (request) => {
if (request.params.name === 'get_customer') {
const { customerId } = request.params.arguments;
// Call internal API
const customer = await fetchCustomer(customerId);
return { content: [{ type: 'text', text: JSON.stringify(customer) }] };
}
});
const transport = new StdioServerTransport();
await server.connect(transport);
5. Copilot Hooks－生命週期事件的自動化
掛鉤允許在特定事件時運行自訂命令：
{
"github.copilot.chat.hooks": {
"postSave": [
{
"command": "npm run lint:fix",
"pattern": "**/*.{ts,tsx}"
}
],
"postCreate": [
{
"command": "npx prettier --write",
"pattern": "**/*.{ts,tsx,css}"
}
]
}
}
Hooks 確保始終產生 AI 程式碼 自動格式化和 lint。
6. 安全考慮
⚠️MCP伺服器擁有強大的存取權限：
- 資料庫MCP：可以讀取/寫入資料庫→僅與開發資料庫一起使用
- 文件系統MCP：可以存取工作區之外的文件
- MCP API：可以使用您的憑證呼叫外部 API
最佳實踐：
- 使用 環境變數 用於秘密，而不是硬編碼
- 限制範圍：只授予MCP伺服器必要的權限
- 查看 MCP 原始碼：安裝前檢查MCP伺服器程式碼
- 獨立的環境：開發資料庫與生產資料庫不同
- 審核日誌：監控MCP伺服器活動
七、總結
MCP 伺服器將副駕駛從 程式碼產生器 進入 全面開發助理 可以與設計工具、資料庫、API 和外部服務互動。
| MCP伺服器 | Vibe 編碼用例 |
|---|---|
| 菲格瑪 | 「建置此設計」→ 程式碼 |
| 資料庫 | 「為此模式建立 API」→ 完整的 CRUD |
| GitHub | 「修復分配給我的問題」→ 自動實施 |
| 客製化 | 「與我們的 CRM 整合」→ 特定領域的工具 |
從第 5 部分開始，我們將運用所學的所有知識 實戰項目 — 使用 Vibe Coding 建立完整的全端應用程式。