21st.dev Magic

Magic MCP → 21st MCP

Magic MCP ตอนนี้คือ 21st MCP แล้ว เซิร์ฟเวอร์ Magic MCP (@21st-dev/magic) ถูกแทนที่ด้วย 21st MCP แบบรวมศูนย์ ซึ่งติดตั้งผ่าน 21st CLI — ดูการตั้งค่าได้ที่ 21st.dev/mcp แพ็คเกจนี้ยังคงเผยแพร่เป็นพร็อกซีความเข้ากันได้แบบบาง เพื่อให้การกำหนดค่าเดิมยังคงทำงานได้

ติดตั้ง 21st MCP (แนะนำ)

npx @21st-dev/cli@latest init --client cursor   # or: claude | vscode | windsurf | codex

หรือเพิ่มด้วยตนเอง — มันคือเซิร์ฟเวอร์ MCP แบบ HTTP ธรรมดา:

{
  "mcpServers": {
    "21st": {
      "url": "https://21st.dev/api/mcp",
      "headers": { "x-api-key": "YOUR_21ST_API_KEY" }
    }
  }
}

รับ API key ได้ที่ 21st.dev/mcp

API key เดิมของ Magic ถูกรีเซ็ตแล้ว คีย์ที่ออกโดยคอนโซล Magic เดิมใช้ไม่ได้อีกต่อไปแล้ว สร้างคีย์ใหม่ได้ที่ 21st.dev/mcp

แพ็คเกจนี้ทำอะไรตอนนี้ (v0.2.0+)

npx -y @21st-dev/magic@latest API_KEY="..." ยังคงทำงานได้: ตั้งแต่ v0.2.0 เป็นต้นไป มันคือพร็อกซี stdio ขนาดเล็กที่ส่งต่อทุกข้อความ MCP ไปยังเซิร์ฟเวอร์ 21st MCP รายการ mcp.json เดิมที่อ้างอิง @21st-dev/magic ยังคงทำงานได้ — แต่ตอนนี้มันสื่อสารกับเซิร์ฟเวอร์เดียวกันกับ 21st CLI พร้อมชุดเครื่องมือปัจจุบันทั้งหมด

API key ถูกรับในรูปแบบดั้งเดิมทั้งหมด: API_KEY="..." แบบระบุตำแหน่ง, --API_KEY=..., /API_KEY:..., -API_KEY ... หรือตัวแปรสภาพแวดล้อม TWENTY_FIRST_API_KEY / API_KEY_21ST

ชื่อเครื่องมือเดิม → ชื่อเครื่องมือใหม่

21st MCP ยังคงยอมรับชื่อเครื่องมือ Magic เดิมและแปลมัน ดังนั้นเอเจนต์ที่จำชื่อเดิมได้ยังคงทำงานได้ แนะนำให้ใช้ชื่อใหม่:

เครื่องมือ Magic เดิม	เครื่องมือ 21st MCP
21st_magic_component_builder	generate
21st_magic_component_inspiration	get_inspiration
21st_magic_component_refiner	generate (เจเนอเรชันใหม่จากพรอมต์การปรับแต่ง)
logo_search	search_logo (หนึ่งคิวรีต่อการเรียกหนึ่งครั้ง)

เซิร์ฟเวอร์ปัจจุบันมีมากกว่าเครื่องมือสี่ตัวเดิม: การค้นหาแคตตาล็อกข้ามคอมโพเนนต์/ธีม/เทมเพลต, การเรียกโค้ดแบบเสียเงิน, บุ๊กมาร์ก, ไลบรารีทีม, การสร้าง UI พร้อมตัวแปร, การจัดการโปรไฟล์ และอื่นๆ เชื่อมต่อและเรียก tools/list เพื่อดูชุดทั้งหมด

ลิงก์

• การตั้งค่า 21st MCP และ API keys: https://21st.dev/mcp
• 21st CLI บน npm: https://www.npmjs.com/package/@21st-dev/cli
• 21st.dev — ค้นพบ, เผยแพร่ และสร้างคอมโพเนนต์ UI: https://21st.dev

คำถามที่พบบ่อย

ทำไม Magic MCP เดิมของฉันถึงหยุดทำงาน? แบ็กเอนด์ Magic (magic.21st.dev) ถูกแทนที่ด้วย 21st MCP แบบรวมศูนย์ และ API key เดิมทั้งหมดถูกรีเซ็ตเพื่อความปลอดภัย อัปเดตเป็นคีย์ใหม่จาก 21st.dev/mcp — การกำหนดค่า @21st-dev/magic ที่มีอยู่ของคุณจะทำงานอีกครั้งผ่านพร็อกซีความเข้ากันได้นี้ แม้ว่าเราแนะนำให้เปลี่ยนไปใช้ npx @21st-dev/cli@latest init

/ui ยังมีอยู่ไหม? ใช้ภาษาธรรมชาติ: ขอให้เอเจนต์ของคุณค้นหา 21st สำหรับคอมโพเนนต์ (search) หรือสร้าง UI ใหม่ (generate) วลีทริกเกอร์ /ui, /21 เดิมเป็นธรรมเนียมของคำอธิบายเครื่องมือเดิม ไม่ใช่โปรโตคอล