Agent 與 Context Engineering

什麼是 Agent？

Agent vs 傳統 AI

傳統 AI	Agent
生成文字	Write code → Call tools → Execute → Loop
一問一答	自主完成任務
被動等待	主動執行

Agent 的工作流程

接收指令
    ↓
分析任務
    ↓
呼叫工具（讀檔、寫檔、執行指令）
    ↓
檢查結果
    ↓
決定下一步
    ↓
重複直到完成

LLM 的運作原理

在模型看到的是這樣：

System: You are a helpful assistant.
User: Please write a function that adds two numbers.
Assistant: Here is a Python function that adds two numbers:
def add(a, b):
    return a + b
User: Now, please save this function to a file named add.py.
Assistant: （這裡 LLM 會根據前面的文字預測下一段文字）

是在「文字接龍」，不是在「思考並回答」。

Claude Code 就是一個 Agent

Claude Code 能夠：

• 讀寫檔案
• 執行 shell commands
• 搜尋 codebase
• 呼叫 MCP tools
• 自主決定下一步

這就是為什麼它比一般的 chatbot 更強大。

Context Engineering

"The art of providing all the context for the task to be plausibly solvable by the LLM"

— Tobi Lütke (Shopify CEO), 2025

從 Prompt Engineering 到 Context Engineering

傳統的 Prompt Engineering 著重於寫好的 prompt。

Context Engineering 則是管理 AI 能看到的所有資訊：

• System prompts
• Tools / MCP
• Message history
• Retrieved data (RAG)
• Memory

為什麼 Context 重要？

AI 的能力 = 模型能力 × Context 品質

即使模型很強，如果 Context 品質不好，結果也會很差。

Context 的組成

┌─────────────────────────────────────┐
│           Context Window            │
├─────────────────────────────────────┤
│  System Prompt                      │
│  ├─ 角色定義                         │
│  ├─ 行為規範                         │
│  └─ CLAUDE.md 內容                   │
├─────────────────────────────────────┤
│  Tools / MCP                        │
│  ├─ 可用工具列表                      │
│  ├─ 工具使用說明                      │
│  └─ 工具執行結果                      │
├─────────────────────────────────────┤
│  Message History                    │
│  ├─ 對話紀錄                         │
│  └─ 之前的指令與回應                   │
├─────────────────────────────────────┤
│  Retrieved Data                     │
│  ├─ 檔案內容                         │
│  ├─ 搜尋結果                         │
│  └─ 外部 API 回應                    │
└─────────────────────────────────────┘

MCP (Model Context Protocol)

MCP 是 Anthropic 在 2024 年 11 月推出的開放標準，用於標準化 AI 系統與外部工具、資料的整合方式。

MCP 的歷史

• 2024 年 11 月：Anthropic 發布 MCP
• 2025 年：OpenAI、Google DeepMind 採用
• 2025 年 12 月：Anthropic 將 MCP 捐贈給 Linux Foundation 下的 Agentic AI Foundation (AAIF)

MCP Server 提供的能力

1. Resources — 檔案類資料（API 回應、檔案內容）
2. Tools — LLM 可呼叫的函數（需要使用者同意）
3. Prompts — 預先寫好的模板

為什麼需要 MCP？

沒有 MCP：
AI ──────> 只能根據訓練資料回答

有 MCP：
AI ──────> MCP Server ──────> 外部工具
   │                              │
   │                              ▼
   │                         即時資料
   │                         最新文件
   │                         資料庫
   └──────────────────────────────┘

Claude Code 的 MCP 設定

# 查看已安裝的 MCP
claude mcp list

# 新增 MCP
claude mcp add <name> -- <command>

# 移除 MCP
claude mcp remove <name>

推薦 MCP Servers

MCP	功能	安裝指令
Context7	即時取得最新文件	claude mcp add context7 -- npx -y @upstash/context7-mcp@latest
shadcn	查詢 shadcn/ui 元件	npx shadcn@latest mcp init --client claude
Playwright	瀏覽器自動化測試	claude mcp add playwright -- npx @playwright/mcp@latest
Supabase	資料庫操作	claude mcp add --transport http supabase https://mcp.supabase.com/mcp

實踐 Context Engineering

1. 建立好的 CLAUDE.md

讓 AI 了解你的專案規範：

# CLAUDE.md

## 專案規範
- 使用 TypeScript
- 用 shadcn/ui 元件
- 不要用 any

## 常見錯誤
- 不要直接 import from @radix-ui
- 記得加 "use client"

2. 使用 MCP 取得最新資料

# 安裝 Context7
claude mcp add context7 -- npx -y @upstash/context7-mcp@latest

# 使用時加上 "use context7"
> Create a Server Component using Next.js 16 - use context7

3. 給予足夠的 Context

❌ 不好的 prompt
幫我修 bug

✅ 好的 prompt
我在執行 npm run dev 時遇到這個錯誤：
[完整錯誤訊息]

相關檔案：src/app/page.tsx
我剛剛改了：XXX
預期行為：XXX
實際行為：XXX

下一步

• MCP 設定 - 詳細的 MCP 安裝與設定
• Vibe Coding vs Vibe Engineering - 正確的開發心態