Claude Code 2.1: MCP Elicitation và Hooks — Game Changer Cho Frontend Dev

Claude Code đang "lớn" với tốc độ chóng mặt

Trong tháng 3/2026, Anthropic đã release liên tục từ Claude Code v2.1.76 đến v2.1.87 — hơn 10 phiên bản chỉ trong vài tuần. Tốc độ này nói lên một điều rõ ràng: đây không còn là tool "thử nghiệm". Claude Code đang trở thành một AI coding assistant nghiêm túc cho production workflow.

Là frontend dev, tôi đặc biệt chú ý đến những tính năng mới có thể thay đổi cách làm việc hàng ngày. Đây là những điểm nổi bật nhất.

MCP Elicitation: AI Biết Hỏi Lại Khi Cần

Tính năng lớn nhất trong v2.1.76 là MCP Elicitation support. Nói đơn giản: MCP servers giờ có thể request structured input từ user giữa chừng trong một task — thông qua dialog tương tác (form fields hoặc browser URL).

Điều này có nghĩa gì cho frontend dev? Thay vì AI đoán mò component props của bạn, nó có thể dừng lại và hỏi cụ thể:

// MCP server trigger elicitation dialog
{
  "type": "elicitation",
  "message": "Cho tôi biết thêm về component bạn muốn tạo:",
  "fields": [
    { "name": "componentName", "type": "text", "label": "Tên component?" },
    { "name": "hasAnimation", "type": "boolean", "label": "Cần animation không?" },
    { "name": "variant", "type": "select",
      "options": ["primary", "secondary", "ghost", "danger"] }
  ]
}

Kết quả: AI generate component chính xác hơn ngay lần đầu. Không còn vòng lặp prompt → output sai → sửa prompt → output vẫn sai.

Hooks System: Tự Động Hóa Workflow Frontend

v2.1.78 thêm StopFailure hook — event fires khi turn kết thúc do API error (rate limit, auth failure, v.v.). Kết hợp với các hooks trước đó, bạn có thể build automation pipeline hoàn chỉnh:

# .claude/hooks/post-edit.sh
#!/bin/bash
# Tự động chạy TypeScript check sau mỗi lần AI sửa file .tsx
EDITED_FILE="$CLAUDE_TOOL_INPUT_PATH"
if [[ "$EDITED_FILE" == *.tsx ]]; then
  npx tsc --noEmit "$EDITED_FILE" 2>&1
fi

# .claude/hooks/stop.sh
#!/bin/bash
# Chạy test suite khi AI hoàn thành task
if [ "$CLAUDE_STOP_REASON" = "end_turn" ]; then
  npm test -- --passWithNoTests 2>&1 | tail -20
fi

Hooks hữu ích cho frontend workflow:

• PreTool hook: Auto-format code với Prettier trước khi AI edit file
• PostTool hook: Chạy ESLint sau mỗi file change để catch issues ngay
• Stop hook: Chạy test suite khi AI xong một feature
• StopFailure hook: Notify và log khi có lỗi API, tránh silent failures

--bare Flag: Claude Code Trong CI/CD Pipeline

v2.1.81 thêm flag --bare cho scripted -p calls. Flag này skip hooks, LSP, plugin sync, và skill walks — chỉ gọi AI và lấy kết quả thuần. Cực kỳ hữu ích khi integrate vào pipeline tự động:

# Generate test stubs cho new components trong CI
claude -p --bare \
  "Generate unit tests cho component Button.tsx. Dùng React Testing Library. Cover: render, click handler, disabled state, accessibility." \
  --print > tests/Button.test.tsx

# Pre-commit hook: check accessibility issues
git diff --staged --name-only | grep '\.tsx$' | while read file; do
  echo "Checking $file..."
  claude -p --bare "Review component $file cho accessibility issues. List cụ thể từng issue theo WCAG 2.1."
done

Tôi đang dùng pattern này trong GitHub Actions để tự động generate test coverage cho mọi new component được merge vào main.

Rate Limit Visibility: Không Còn Bị Bất Ngờ

v2.1.80 thêm rate_limits field trong statusline scripts — hiển thị rate limit usage theo 5-hour và 7-day windows với used_percentage và resets_at. Rất hữu ích để plan work sessions:

// Ví dụ statusline script
const status = await claude.getStatus();
const { five_hour, seven_day } = status.rate_limits;

if (five_hour.used_percentage > 80) {
  console.warn(`Gần đến rate limit 5h: ${five_hour.used_percentage}%`);
  console.log(`Reset lúc: ${new Date(five_hour.resets_at).toLocaleTimeString()}`);
}

Kết: Claude Code Đang Trở Thành Một Platform

Với MCP ecosystem, hooks system, scripted mode, và tốc độ release như hiện tại, Claude Code không còn chỉ là "AI viết code hộ bạn". Nó đang trở thành một programmable AI coding platform mà bạn có thể customize và integrate vào toàn bộ frontend workflow.

Nếu bạn chưa thử hooks và --bare mode, đây là lúc bắt đầu. Setup một post-edit hook chạy TypeScript check là điểm khởi đầu dễ nhất — và bạn sẽ thấy lợi ích ngay lập tức.