Rive MCP: วิธีการเชื่อมต่อ Claude Code, Cursor และ Codex กับ Rive
วิธีการทำงานของเซิร์ฟเวอร์ Rive MCP วิธีเชื่อมต่อ Claude Code และ Cursor กับโปรแกรมแก้ไข Rive สิ่งที่ AI ทำได้และไม่สามารถทำได้ และวิธีที่ AI ทำได้และทำไม่ได้ และเปรียบเทียบกับเอเจนต์ในตัวของ Rive และ Rive CLI ได้อย่างไร
หลัก Takeaway
เซิร์ฟเวอร์ Rive MCP สร้างขึ้นในโปรแกรมแก้ไขเดสก์ท็อป Rive สำหรับ Mac และ Windows ในขณะที่ Rive เปิดอยู่ แต่ก็ทำงานที่ http://127.0.0.1:9791/mcp และเครื่องมือการเข้ารหัส AI เช่น Claude Code และ Cursor ก็สามารถเชื่อมต่อกับมันเพื่อสร้างอาร์ตบอร์ด รูปร่าง แอนิเมชั่น สเตทแมชชีน ดูโมเดล และสคริปต์ในไฟล์ที่เปิดอยู่ ใน Claude Code ให้เชื่อมต่อด้วยคำสั่งเดียว: claude mcp add --transport http rive http://127.0.0.1:9791/mcp
เกี่ยวกับคู่มือนี้
ExodeUI ไม่มีส่วนเกี่ยวข้องกับ Rive หรือ Anthropic คู่มือนี้อ้างอิงจากเอกสารของ Rive ณ เดือนตุลาคม 2026 คุณสมบัติ AI ของ Rive เปลี่ยนแปลงอย่างรวดเร็ว ดังนั้นโปรดตรวจสอบหน้า MCP อย่างเป็นทางการหากขั้นตอนไม่ตรงกับที่คุณเห็น เราสร้าง ExodeUI ซึ่งมีเซิร์ฟเวอร์ MCP ของตัวเอง และเราจะเปรียบเทียบทั้งสองในตอนท้าย
สิ่งที่เซิร์ฟเวอร์ Rive MCP สามารถทำได้
Rive กล่าวว่าเครื่องมือแรกๆ มุ่งเป้าไปที่การทำงานซ้ำๆ เช่น การสร้างโมเดลมุมมองหรือเครื่องจักรสถานะที่มีสถานะและเลเยอร์หลายร้อยสถานะ ตามเอกสารของ Rive เครื่องมือ AI ที่เชื่อมต่อสามารถ:
- สร้างและจัดการไฟล์: เพิ่ม เปลี่ยนชื่อ ปรับขนาด จัดเรียงและเน้นอาร์ตบอร์ด
- ตรวจสอบและแก้ไขฉาก: ค้นหาลำดับชั้น เลือกวัตถุ อัปเดตคุณสมบัติ ทำซ้ำ เรียงลำดับใหม่ สร้างใหม่ หรือลบองค์ประกอบ
- การออกแบบบิวด์: รูปร่าง เส้นทาง เค้าโครง อินสแตนซ์ส่วนประกอบ และรายการ
- สร้างแอนิเมชั่นและการโต้ตอบ: แอนิเมชั่นเชิงเส้น, เครื่องสถานะ, สถานะ, การเปลี่ยนภาพ, เงื่อนไข, คีย์เฟรม และการแก้ไข
- ทำงานกับการเชื่อมโยงข้อมูล: ดูโมเดล คุณสมบัติ อินสแตนซ์ และการเชื่อมโยง
- แก้ไขสคริปต์ Luau และเชเดอร์ WGSL: อัปเดตโค้ด เรียกใช้การวินิจฉัย คอมไพล์ใหม่ ทดสอบและอ่านเอาต์พุตคอนโซล
วิธีการตั้งค่า Rive MCP ด้วย Claude Code
MCP ใช้งานได้กับโปรแกรมแก้ไขเดสก์ท็อปเท่านั้น ไม่ใช่เวอร์ชันเบราว์เซอร์ เปิด Rive ก่อน จากนั้นเชื่อมต่อเครื่องมือ AI ของคุณ
1. เปิดแอปเดสก์ท็อป Rive
ติดตั้งโปรแกรมแก้ไขเดสก์ท็อป Rive ล่าสุดสำหรับ macOS หรือ Windows จาก rive.app/downloads และเปิดไฟล์ที่คุณต้องการใช้งาน
2. เพิ่มเซิร์ฟเวอร์ MCP
ในเทอร์มินัล ให้รัน: claude mcp add --transport http rive http://127.0.0.1:9791/mcp
3. สตาร์ท Claude Code
วิ่งนะโคลด เริ่มต้นหลังจาก Rive เปิดอยู่ จึงสามารถค้นหาเครื่องมือ Rive ได้
4. พร้อมท์ในฟีเจอร์ ไม่ใช่โค้ด
อธิบายสิ่งที่คุณต้องการดูและสิ่งที่ต้องไม่เปลี่ยนแปลง เช่น "เพิ่มสถานะโฮเวอร์ให้กับปุ่มที่ปรับขนาดเป็น 1.05 พร้อมสปริง และคงสถานะการกดไว้เหมือนเดิม"
วิธีการตั้งค่า Rive MCP ด้วย Cursor และ Codex
ใน Cursor ให้เปิดการตั้งค่า ไปที่ Tools & MCPs เลือก Add Custom MCP และเพิ่มเซิร์ฟเวอร์ชื่อ rive ด้วย URL http://127.0.0.1:9791/mcp จากนั้นเปิดการเชื่อมต่อ Rive เอกสาร Claude Code และ Cursor เนื่องจากเซิร์ฟเวอร์เป็นเซิร์ฟเวอร์ HTTP MCP ในเครื่อง ไคลเอ็นต์อื่นๆ ที่รองรับเซิร์ฟเวอร์ HTTP MCP เช่น Codex จึงสามารถเชื่อมต่อกับ URL เดียวกันได้
Rive MCP เทียบกับ AI Agent ในตัวของ Rive
Rive ยังมี AI Agent อยู่ภายในตัวแก้ไขอีกด้วย ทั้งสองสามารถแก้ไขไฟล์ของคุณได้ ความแตกต่างอยู่ที่ว่าใครเป็นผู้จ่ายเงินและสิ่งอื่นใดที่ตัวแทนสามารถมองเห็นได้
- Agent ในตัวทำงานบนแผนของ Rive: จำกัดเฉพาะ Free และ Cadet พร้อมด้วยโมเดลขั้นสูง เครดิตเติมเงิน และคีย์ API ของคุณเองบน Voyager
- ด้วย MCP คุณจะใช้การสมัครสมาชิก AI ที่คุณชำระเงินแล้ว เช่น Claude หรือ Cursor
- ตัวแทนภายนอกยังสามารถอ่านโค้ดแอป บันทึก และเอกสารของคุณ จึงสามารถแก้ไขไฟล์ Rive และโยงเข้ากับแอปของคุณในเซสชันเดียวกันได้
- Agent ในตัวไม่จำเป็นต้องตั้งค่าและใช้งานได้ในตัวแก้ไขเบราว์เซอร์
Rive MCP กับ Rive CLI
CLI รุ่นใหม่ของ Rive เป็นเส้นทางที่แตกต่าง แทนที่จะขับเคลื่อนโปรแกรมแก้ไขแบบเปิด เอเจนต์การเขียนโค้ดของคุณจะเขียนฉากเป็นข้อความในภาษามาร์กอัป Rive (RML) และ CLI จะสร้างไฟล์ .riv สำหรับแอพของคุณหรือไฟล์ .rev ที่เปิดในตัวแก้ไข โดยจะแสดงตัวอย่างในเครื่อง สามารถเรนเดอร์เฟรมและรันการทดสอบโดยไม่มีหน้าต่าง และเก็บโปรเจ็กต์เป็นโฟลเดอร์ข้อความ เพื่อให้สามารถใช้งานได้ในการควบคุมเวอร์ชัน ใช้ MCP เพื่อทำงานร่วมกับนักออกแบบในตัวแก้ไข ใช้ CLI เมื่อตัวแทนสร้างหรือแก้ไขกราฟิก Rive จากโค้ด
ข้อจำกัดที่ต้องรู้ก่อนเริ่ม
การบูรณาการ MCP ของ Rive ยังใหม่อยู่ และมีข้อจำกัดในทางปฏิบัติบางประการ
- ตัวแก้ไขเดสก์ท็อปเท่านั้นบน macOS และ Windows และต้องเปิด Rive ด้วยไฟล์ของคุณ
- AI ทำงานกับไฟล์ที่เปิดอยู่ ดังนั้น โปรดตรวจสอบผลลัพธ์บนหน้าจอก่อนที่คุณจะเชื่อถือ
- การเผยแพร่ไฟล์ .riv ที่ไม่มีหน้าจอเริ่มต้น Rive ยังคงต้องใช้แผนการชำระเงิน โดยเริ่มต้นที่ Cadet ที่ 9 ดอลลาร์ต่อที่นั่งต่อเดือน โดยเรียกเก็บเงินเป็นรายปี
- พร้อมท์ที่อธิบายผลลัพธ์ที่คุณต้องการทำงานได้ดีกว่าพร้อมท์ที่อธิบายโค้ด
อีกทางเลือกหนึ่ง: เซิร์ฟเวอร์ MCP ของ ExodeUI
ExodeUI เป็นเครื่องมือเบราว์เซอร์และเดสก์ท็อปสำหรับ UI และภาพเคลื่อนไหวแบบโต้ตอบ นอกจากนี้ยังมีเซิร์ฟเวอร์ MCP ดังนั้น Claude Code, Cursor และเครื่องมือการเขียนโค้ด AI อื่นๆ จึงสามารถสร้างและแก้ไขภาพเคลื่อนไหวจากข้อความแจ้งภาษาธรรมดาได้ ผลลัพธ์ที่ได้คือไฟล์ .exode JSON ที่เปิดอยู่หนึ่งไฟล์พร้อมเครื่องสถานะ ฟิสิกส์ของสปริง และอินพุตและเหตุการณ์ที่คุณควบคุมโค้ด ซึ่งเล่นตามรันไทม์สำหรับ React, Vue, Svelte, Angular, Solid, React Native, SwiftUI และ Flutter เหมาะกับ UI ของผลิตภัณฑ์แบบโต้ตอบมากกว่าภาพเคลื่อนไหวของตัวละคร หากคุณทำงานใน Rive อยู่แล้ว เซิร์ฟเวอร์ MCP จะเป็นตัวเลือกที่ง่ายกว่า
ตัวอย่างการใช้งานการผลิต
# Rive desktop editor must be open first
claude mcp add --transport http rive http://127.0.0.1:9791/mcp
# then start Claude Code
claudeคีย์ Principles ที่ต้องจำ
- เซิร์ฟเวอร์ Rive MCP ทำงานภายในโปรแกรมแก้ไขเดสก์ท็อป Rive ที่ http://127.0.0.1:9791/mcp
- Claude Code เชื่อมต่อด้วยคำสั่งเดียว Cursor เชื่อมต่อผ่านเครื่องมือและ MCP
- โดยสามารถสร้างรูปร่าง แอนิเมชั่น สเตทแมชชีน ดูโมเดล และสคริปต์ Luau ในไฟล์ที่เปิดอยู่
- Rive CLI เป็นเส้นทางแบบข้อความแยกต่างหากสำหรับเอเจนต์ที่สร้างไฟล์ Rive จากโค้ด