วิธีการตั้งค่าเซิร์ฟเวอร์ ExodeUI MCP ใน Cursor
การตั้งค่าทีละขั้นตอนสำหรับเซิร์ฟเวอร์ ExodeUI MCP ใน Cursor (และ Claude Code): รายการ mcp.json การตรวจสอบเครื่องมือ การแจ้งครั้งแรก และการตรวจสอบอย่างปลอดภัย
หลัก Takeaway
เพิ่มรายการลงใน .cursor/mcp.json ของโปรเจ็กต์ของคุณที่รันแพ็คเกจ claude-exode-mcp ด้วย npx รีโหลด Cursor และตรวจสอบว่าเซิร์ฟเวอร์ exode และเครื่องมือปรากฏในการตั้งค่า MCP ของ Cursor จากนั้นขอให้ตัวแทนของ Cursor สร้างหรือแก้ไขภาพเคลื่อนไหวในภาษาธรรมดา และตรวจสอบผลลัพธ์ในตัวแก้ไข ExodeUI ก่อนจัดส่ง
สิ่งที่คุณต้องการ
Cursor, Node.js (ดังนั้น npx จึงพร้อมใช้งาน) และบัญชี ExodeUI หากคุณต้องการเปิดผลลัพธ์ในตัวแก้ไข เซิร์ฟเวอร์ ExodeUI MCP ได้รับการเผยแพร่บน npm เป็น claude-exode-mcp; มันทำงานภายในเครื่องผ่าน npx ดังนั้นจึงไม่มีสิ่งใดให้ติดตั้งด้วยตนเอง
ขั้นตอนที่ 1: เพิ่มเซิร์ฟเวอร์ใน mcp.json
Cursor อ่านเซิร์ฟเวอร์ MCP แบบกำหนดเองจากไฟล์ mcp.json ไฟล์ระดับโปรเจ็กต์อยู่ที่ .cursor/mcp.json ในพื้นที่เก็บข้อมูลของคุณ เซิร์ฟเวอร์บรรทัดคำสั่งในเครื่องใช้ประเภท "stdio" พร้อมด้วยคำสั่งและอาร์กิวเมนต์ รายการสำหรับ ExodeUI รัน npx พร้อมกับแพ็คเกจ claude-exode-mcp (ดูบล็อกโค้ดด้านล่าง)
ขั้นตอนที่ 2: โหลดซ้ำและตรวจสอบเครื่องมือ
โหลด Cursor อีกครั้ง เปิดการตั้งค่า MCP และยืนยันว่าเซิร์ฟเวอร์ exode กำลังทำงานอยู่ และมีเครื่องมืออยู่ในรายการ หากไม่สามารถเริ่มต้นได้ ให้ตรวจสอบว่า npx ใช้งานได้ในเทอร์มินัลของคุณและเวอร์ชัน Node.js ของคุณเป็นเวอร์ชันปัจจุบัน
ขั้นตอนที่ 3: พรอมต์
ถามด้วยภาษาธรรมดาและเจาะจงเกี่ยวกับสถานะและความรู้สึก:
- "สร้างการสลับที่มีสถานะเปิดและปิดและมีสปริงที่นุ่มนวลระหว่างสถานะเหล่านั้น"
- "เพิ่มสถานะการโหลดให้กับปุ่มบันทึกที่กะพริบเบาๆ จากนั้นจึงตรวจสอบความสำเร็จ"
- "ทำให้แอนิเมชั่นความสำเร็จเร็วขึ้นและลดการโอเวอร์ช็อต"
ใช้ Claude Code แทน
ใน Claude Code ให้เพิ่มเซิร์ฟเวอร์เดียวกันด้วยคำสั่งเดียว: claude mcp add exode npx -y claude-exode-mcp Claude Code ยังรองรับการกำหนดค่าระดับโปรเจ็กต์ในไฟล์ .mcp.json อีกด้วย
ตรวจสอบก่อนจัดส่ง
เจ้าหน้าที่ที่สามารถแก้ไขไฟล์ก็อาจทำผิดพลาดได้เช่นกัน เก็บไฟล์ .exode ไว้ใน Git เพื่อให้การเปลี่ยนแปลงเปลี่ยนแปลงได้ เปิดผลลัพธ์ในตัวแก้ไข ExodeUI เพื่อตรวจสอบเวลาและทุกสถานะ และทดสอบพฤติกรรมการลดการเคลื่อนไหว
ตัวอย่างการใช้งานการผลิต
// .cursor/mcp.json
{
"mcpServers": {
"exode": {
"type": "stdio",
"command": "npx",
"args": ["-y", "claude-exode-mcp"]
}
}
}
# Claude Code alternative
claude mcp add exode npx -y claude-exode-mcpคีย์ Principles ที่ต้องจำ
- เซิร์ฟเวอร์คือแพ็คเกจ npm claude-exode-mcp ซึ่งรันด้วย npx
- ใน Cursor ให้เพิ่มลงใน .cursor/mcp.json เป็นเซิร์ฟเวอร์ stdio
- โหลดซ้ำและยืนยันว่าเครื่องมือปรากฏในการตั้งค่า MCP
- พร้อมท์กับสภาวะและความรู้สึก ปรับแต่งตัวเลขในภายหลัง
- เก็บไฟล์ไว้ใน Git และตรวจสอบการเปลี่ยนแปลงในตัวแก้ไข
คำถามที่พบบ่อย
แหล่งที่มา
- claude-exode-mcp — npm
- Model Context Protocol (MCP) — เอกสาร Cursor
- Connect Claude Code to tools via MCP — เอกสาร Claude Code