21st.dev Magic

ทางการ

สร้างส่วนประกอบ UI ที่ออกแบบอย่างประณีต โดยได้รับแรงบันดาลใจจากวิศวกรออกแบบชั้นนำของ 21st.dev

GitHub

5.9k

คุณทำอะไรได้บ้างด้วย 21st Dev Magic MCP?

สร้างคอมโพเนนต์ UI — ให้ AI ของคุณสร้างคอมโพเนนต์ใหม่ด้วย generate โดยสร้างเวอร์ชันต่างๆ จากพรอมป์ภาษาธรรมชาติเมื่อเปิดใช้งานการเข้าถึง AI
ค้นหาแคตตาล็อกคอมโพเนนต์ — ใช้ search เพื่อค้นหาคอมโพเนนต์ ธีม หรือเทมเพลตบน 21st.dev จากนั้นดึงโค้ดเต็มด้วย get_component
ปรับปรุงดีไซน์ที่มีอยู่ — ขอการสร้างใหม่จากพรอมป์การปรับปรุงผ่าน generate โดยนำบริบทของร่างก่อนหน้าของคุณไปต่อ
ดึงโค้ดแบบชำระเงิน — ขอโค้ดคอมโพเนนต์ระดับพรีเมียมผ่าน get_component เมื่อบัญชีของคุณเปิดใช้งานการเข้าถึงแบบชำระเงิน
ตรวจสอบสถานะการเข้าถึง AI — สืบค้น get_usage เพื่อยืนยันว่า aiGenerationEnabled เป็น true ก่อนพยายามสร้างบนโฮสต์

เอกสาร

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 ได้ที่ 21st.dev/mcp

คีย์ Magic API เก่าถูกรีเซ็ตแล้ว คีย์ที่ออกโดยคอนโซล 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 ถูกยอมรับในทุกรูปแบบเดิม: API_KEY="..." แบบตำแหน่ง, --API_KEY=..., /API_KEY:..., -API_KEY ..., หรือตัวแปรสภาพแวดล้อม TWENTY_FIRST_API_KEY / API_KEY_21ST

การเข้าถึง AI

การเข้าถึงคอมโพเนนต์สำหรับนักพัฒนาไม่ได้เปิดใช้งาน 21st AI แบบโฮสต์ เซิร์ฟเวอร์จะแสดงรายการ generate และ iterate_generation เฉพาะเมื่อเปิดใช้งานการเข้าถึง AI เท่านั้น ตรวจสอบ get_usage.aiGenerationEnabled; รายงานนี้แสดงการเข้าถึง ไม่ใช่ยอดเครดิต AI ที่เหลืออยู่ เมื่อปิด AI ให้ใช้ search และ get_component จากนั้นปรับ โค้ดด้วยเอเจนต์เขียนโค้ดของคุณเอง แบบร่างที่มีอยู่ยังคงอ่านได้

การเรียกสร้างแบบแคชหรือแบบเดิมอาจส่งคืน ai_subscription_required อย่า ลองใหม่จนกว่าจะเปิดใช้งาน AI รีเฟรชรายการเครื่องมือของไคลเอนต์หรือเชื่อมต่อใหม่หลังจาก เปิดใช้งาน AI พร็อกซีส่งต่อการค้นพบไปยังเซิร์ฟเวอร์ ดังนั้นพร็อกซี เวอร์ชันเดิมจะได้รับพฤติกรรมนี้โดยไม่ต้องอัปเดต npm

server.json สะท้อนรายการรีจิสทรี dev.21st/mcp อย่างเป็นทางการ เวอร์ชันรีจิสทรี เป็นอิสระจากเวอร์ชันแพ็กเกจความเข้ากันได้นี้

ชื่อเครื่องมือเก่า → ชื่อเครื่องมือใหม่

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 เพื่อดูเครื่องมือที่พร้อมใช้งานสำหรับบัญชีของคุณ

ติดตั้งเป็นปลั๊กอิน

พื้นที่เก็บข้อมูลนี้ยังถูกแพ็กเป็นปลั๊กอินเอเจนต์ (เซิร์ฟเวอร์ MCP + ทักษะ UI) คุณไม่ต้องรอสโตร์ใดๆ — พื้นที่เก็บข้อมูลนี้คือมาร์เก็ตเพลส เพิ่มได้โดยตรง:

# Claude Code
claude plugin marketplace add 21st-dev/magic-mcp   # then: /plugin install 21st

# Grok Build
grok plugin marketplace add 21st-dev/magic-mcp && grok plugin install 21st --trust

# Codex CLI
codex plugin marketplace add 21st-dev/magic-mcp    # then install "21st" from /plugins

ตั้งค่าคีย์ API ของคุณในตัวแปร API_KEY_21ST (คีย์ฟรีที่ 21st.dev/mcp)

รายการสโตร์:

Cursor / Grok Bot — ติดตั้ง "21st" จาก Cursor Marketplace จากนั้นตั้งค่า API_KEY_21ST ของคุณภายใต้ Plugins → Configure รับคีย์ได้ที่ 21st.dev/mcp
Grok Build — grok plugin install 21st --trust (จาก xAI marketplace อย่างเป็นทางการ) จากนั้นส่งออก API_KEY_21ST
Claude Code — พื้นที่เก็บข้อมูลมีไฟล์ manifest .claude-plugin/: /plugin install จากมาร์เก็ตเพลสใดๆ ที่แสดงรายการพื้นที่เก็บข้อมูลนี้ หรือโหลดในเครื่องด้วย claude --plugin-dir . และส่งออก API_KEY_21ST

การกำหนดค่าปลั๊กอินคาดหวังคีย์ API ในตัวแปร API_KEY_21ST ในทุกไคลเอนต์

ลิงก์

การตั้งค่า 21st MCP และคีย์ API: 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 เก่าทั้งหมดถูกรีเซ็ตเพื่อความปลอดภัย อัปเดตเป็นคีย์ใหม่จาก 21st.dev/mcp — การกำหนดค่า @21st-dev/magic ที่มีอยู่ของคุณจะทำงานอีกครั้งผ่านพร็อกซีความเข้ากันได้นี้ แม้ว่าเราจะแนะนำให้เปลี่ยนไปใช้ npx @21st-dev/cli@latest init

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