AI agent và MCP
Werewolf được làm để dùng qua agent code. Agent của bạn có ba thứ: luật để đọc trước khi viết UI, MCP server để tra component và token, và linter để tự kiểm tra code.
Luật agent đọc
npx werewolf-ui init luôn ghi AGENTS.md (một phần do CLI quản lý, giữa <!-- werewolf:start --> và <!-- werewolf:end -->) và .agents/skills/werewolf-design/SKILL.md, tức design skill. Lệnh thêm file riêng của từng agent được chọn. Không có --agent, init giữ luật của Cursor và thêm mọi agent nó nhận ra từ môi trường hoặc file trong dự án.
npx werewolf-ui init --agent claude,copilot| `--agent` | File ngoài `AGENTS.md` và skill |
|---|---|
claude | A block with @AGENTS.md in CLAUDE.md, and .claude/skills/werewolf-design/SKILL.md |
cursor | .cursor/rules/werewolf.mdc |
copilot | .github/instructions/werewolf.instructions.md |
windsurf | .windsurf/rules/werewolf.md (or .devin/rules/werewolf.md when .devin/ exists) |
gemini | A block with @./AGENTS.md in GEMINI.md |
cline | .clinerules/werewolf.md |
codex, jules, amp, other | None: they read AGENTS.md |
Nội dung của bạn quanh phần do CLI quản lý được giữ nguyên. Init không bao giờ xóa file của agent bạn không chọn.
Để agent tự cài
Dán prompt này vào agent khi đang ở thư mục app. Prompt yêu cầu agent chạy init với id của chính nó và dừng lại khi có xung đột thay vì ghi đè file của bạn.
Run `npx werewolf-ui@latest init --agent <id> --yes --json`. Use your tool's id: cursor, claude, copilot, windsurf, gemini, cline, or other (Codex and anything else). Don't add --overwrite. If there's a conflict, stop and show me. Then tell me which files were created, updated or unchanged.Kết nối MCP server
Thêm cấu hình tiến trình này vào phần MCP của client và thay /absolute/path/to/app bằng thư mục app. Phiên bản được ghim chính xác để client không tự tải bản mới mà bạn chưa xem. Client cần Node 20+ và npx trên PATH.
{
"command": "npx",
"args": [
"--yes",
"werewolf-ui@0.1.0-alpha.1",
"mcp",
"--cwd",
"/absolute/path/to/app"
]
}Lần chạy đầu tải package; sau đó catalog trong package dùng được offline, không cần dịch vụ online hay API key. Thư mục nào đã tồn tại cũng được, init không bắt buộc. Stdout chỉ dành cho giao thức, nên đừng chuyển stderr vào đó.
Năm công cụ
Mọi công cụ đều chỉ đọc. MCP không cài component, sửa file hay ghi theme: agent dùng CLI cho những việc đó.
| Công cụ | Ví dụ tham số | Trả về |
|---|---|---|
list_components | {"status":"draft","limit":10} | Tóm tắt component kèm trạng thái API, có phân trang |
search | {"query":"button","kind":"component"} | Component, token hoặc luật, xếp theo độ khớp |
get_component | {"name":"button"} | Spec, mã nguồn, ví dụ, cách dùng, dependency và lệnh cài |
generate_theme | {"seed":{"radius-base":"round"}} | Bảng token tối và sáng cùng kết quả kiểm tra tương phản cho một seed |
lint | {"paths":["src/App.tsx"]} | Lỗi style và phạm vi đã kiểm tra |
Tài liệu dạng Markdown
Mọi trang của site đều có bản Markdown: thêm .md vào đường dẫn, ví dụ /docs/installation.md hoặc /vi/docs/installation.md. llms.txt liệt kê mọi trang docs và component kèm link Markdown. Nút Copy trang trên header docs copy trang bạn đang đọc.
Kiểm tra code agent viết
Bảo agent chạy lint sau mỗi lần sửa UI và sửa những gì lint báo. Với --json, agent đọc một bản kết quả duy nhất; --fix --yes chỉ áp dụng chỉnh sửa mà linter chứng minh được. Xem data.coverage: style động mà lint không đọc được là cảnh báo, không phải đã đạt.
npx werewolf-ui lint src --json
npx werewolf-ui lint src --fix --yes --json