คู่มือติดตั้ง Magic MCP เข้า Claude Code ฉบับภาษาไทย สำหรับมือใหม่
🪄 Magic MCP — คู่มือติดตั้งฉบับภาษาไทย
คู่มือนี้จะสอนวิธีเพิ่ม Magic MCP เข้าไปใน Claude Code แบบทีละขั้นตอน เขียนให้คนที่ ไม่ใช่สายเทคนิค ก็ทำตามได้ ไม่ต้องเขียนโค้ดเป็น 😊
💡 Magic MCP คืออะไร? เป็นเครื่องมือเสริมที่ทำให้ AI (Claude) ช่วยหา “ตัวอย่างหน้าตาเว็บ/แอป” และ “ไอคอนโลโก้” มาใส่ในงานของคุณได้อัตโนมัติ — ไม่ต้องนั่งหาเองทีละอัน
✨ มีอะไรให้ใช้บ้าง
| เครื่องมือ | ใช้ทำอะไร | ราคา | |-----------|-----------|------| | 🔍 Inspiration Search (ค้นหาแรงบันดาลใจ) | ค้นหาตัวอย่างหน้าตา UI และดีไซน์เป็นพัน ๆ แบบ AI จะหาตัวอย่างที่เกี่ยวข้องให้ก่อนเขียนโค้ด — ไม่ต้องเปิดหาเอง | ฟรี | | 🎨 SVG Icon Search (ค้นหาไอคอน) | ค้นหาไอคอนและโลโก้แบรนด์เป็นพัน ๆ แบบ (ใช้พลังจาก svgl) AI จะหาและใส่โลโก้/ไอคอนให้ในโค้ดเลย | ฟรี |
🔑 ขั้นที่ 0: ขอ API Key ก่อน (สำคัญ!)
ก่อนติดตั้ง คุณต้องมี API Key ของตัวเองก่อน (เหมือนกุญแจประจำตัว)
- เปิดเว็บ 👉 https://21st.dev/mcp
- เข้าสู่ระบบ / สมัครสมาชิก
- คัดลอก API Key ของคุณเก็บไว้
⚠️ ห้ามเอา API Key ไปโพสต์ในที่สาธารณะเด็ดขาด (เช่น GitHub, กลุ่มแชต, รูปภาพ) มันคือกุญแจส่วนตัวของคุณ ถ้าคนอื่นได้ไป เขาจะใช้แทนคุณได้
🛠️ ขั้นที่ 1: รันคำสั่งติดตั้ง
เปิดโปรแกรม Terminal (เทอร์มินัล) แล้วพิมพ์คำสั่งนี้
👉 อย่าลืมเปลี่ยน YOUR_API_KEY เป็นกุญแจของคุณจากขั้นที่ 0
claude mcp add magic --scope user --env API_KEY="YOUR_API_KEY"
ตัวอย่างเช่น ถ้ากุญแจของคุณคือ abc123 ก็พิมพ์เป็น:
claude mcp add magic --scope user --env API_KEY="abc123"
✅ ขั้นที่ 2: ตรวจสอบว่าติดตั้งสำเร็จไหม
หลังรันคำสั่งข้างบนแล้ว Magic MCP จะถูกตั้งค่าให้อัตโนมัติ ลองพิมพ์คำสั่งนี้เพื่อเช็กรายการ MCP ที่มี:
claude mcp list
ถ้าเห็นคำว่า magic อยู่ในรายการ = ติดตั้งสำเร็จแล้ว 🎉
จากนั้นคุณก็เริ่มใช้คำสั่ง Magic ใน Claude Code ได้ทันที
❓ ปัญหาที่เจอบ่อย
| อาการ | วิธีแก้ |
|-------|--------|
| พิมพ์ claude แล้วขึ้นว่า "command not found" | คุณยังไม่ได้ติดตั้ง Claude Code — ติดตั้งก่อนที่ https://claude.com/claude-code |
| ใส่ API Key แล้วใช้ไม่ได้ | เช็กว่าคัดลอกกุญแจมาครบ ไม่มีเว้นวรรคเกิน และเอามาจาก https://21st.dev/mcp จริง |
| ไม่เห็น magic ใน claude mcp list | ลองรันคำสั่งติดตั้งในขั้นที่ 1 ใหม่อีกครั้ง |
🔗 ลิงก์ที่เกี่ยวข้อง
- ขอ API Key / ดูรายละเอียด Magic MCP: https://21st.dev/mcp
- ติดตั้ง Claude Code: https://claude.com/claude-code
📌 หมายเหตุ: คู่มือนี้จัดทำเพื่อการศึกษา ภาษาไทยล้วน เข้าใจง่ายสำหรับมือใหม่