Rive MCP

การผสานรวม Rive MCP

[!NOTE]

ขณะนี้การผสานรวม MCP ใช้งานได้เฉพาะใน Editor บนเดสก์ท็อปสำหรับ Windows และ macOS เท่านั้น

คุณสามารถเชื่อมต่อ Rive Editor กับเครื่องมือ AI ผ่าน MCP (Model Context Protocol) ได้ เครื่องมือชุดแรกออกแบบมาเพื่อให้ AI จัดการงานซ้ำ ๆ เช่น การสร้าง View Models ที่ซับซ้อน State Machines ที่มีหลายร้อย states/layers, Layouts, Shapes และอื่น ๆ

YouTube video player

ฟีเจอร์ที่รองรับ

• สร้างและจัดการไฟล์ Rive — เพิ่ม เปลี่ยนชื่อ ปรับขนาด จัดเรียง และโฟกัส artboards
• ตรวจสอบและแก้ไขฉาก — สอบถามลำดับชั้น เลือกออบเจ็กต์ อัปเดตคุณสมบัติ เปลี่ยนชื่อ ทำซ้ำ จัดลำดับใหม่ เปลี่ยน parent หรือลบองค์ประกอบ
• สร้างงานออกแบบ — สร้าง shapes, paths, layouts, component instances, component lists และองค์ประกอบที่อิงตาม assets
• สร้างโครงกระดูกด้วย bones — สร้าง root bones และ bone chains โดยกำหนดความยาวและการหมุน หรือกำหนดจากจุดหัวและหาง จากนั้น bind และกำหนดน้ำหนักให้
• สร้างแอนิเมชันและการโต้ตอบ — แก้ไข linear animations, state machines, states, transitions, conditions, keyframes และ interpolation
• ทำงานกับ data binding — สร้าง view models, properties, instances, bindings และกลุ่มคุณสมบัติแบบกำหนดเอง
• แก้ไขสคริปต์และ shaders — จัดการ Luau scripts และ WGSL shaders อัปเดตซอร์สโค้ด เรียกใช้การวินิจฉัย คอมไพล์ใหม่ ทดสอบ ค้นหาโค้ด และอ่านเอาต์พุตจากคอนโซล

[!NOTE]

รายการฟีเจอร์นี้จะเปลี่ยนแปลงไปตามเวลาเมื่อมีการเพิ่มเครื่องมือเพิ่มเติม

ระบบจะปฏิเสธและย้อนกลับการแก้ไขที่ทำให้ runtimes ปฏิเสธไฟล์หรือขัดข้อง เช่น การใส่สีสองสีใน fill เดียว หรือการวาง gradient ไว้นอก fill หรือ stroke ระบบจะอ่านสีในลักษณะเดียวกับช่อง hex: #fff คือสีขาว และจะปฏิเสธชื่ออย่าง red

การติดตั้ง

ใช้ Cursor

1. เปิด Rive

ติดตั้งและเปิดแอปเดสก์ท็อป Rive เวอร์ชันล่าสุดสำหรับ Mac หรือ Windows

2. ตั้งค่า Cursor

สร้างบัญชี Cursor และติดตั้งแอป

3. เปิดการตั้งค่า Cursor

เปิด Cursor แล้วไปที่แผงการตั้งค่าที่มุมขวาบน

4. เพิ่ม MCP แบบกำหนดเอง

เปิดแท็บ Tools & MCPs แล้วคลิก Add Custom MCP

5. บันทึกการกำหนดค่า

บันทึกข้อมูลโค้ด JSON ต่อไปนี้ลงในคอมพิวเตอร์ของคุณเป็น mcp.json

{
  "mcpServers": {
      "rive": {
          "url": "http://127.0.0.1:9791/mcp"
      }
  }
}

6. เปิดใช้งานการเชื่อมต่อ

เปิดการเชื่อมต่อ MCP On

7. ตรวจสอบการเชื่อมต่อ

หากติดตั้งทุกอย่างถูกต้อง คุณจะเห็น Rive เป็นเซิร์ฟเวอร์ MCP ที่พร้อมใช้งาน

[!NOTE]

ต้องเปิดแอปเดสก์ท็อป Rive ไว้เพื่อให้เซิร์ฟเวอร์ Rive พร้อมใช้งาน

ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่า MCP ได้ที่นี่

ใช้ Claude ใน Terminal

YouTube video player

1. เปิด Rive

ติดตั้งและเปิด แอปเดสก์ท็อป Rive เวอร์ชันล่าสุดสำหรับ macOS หรือ Windows

2. เพิ่มเซิร์ฟเวอร์ MCP

เรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัล:

claude mcp add --transport http rive http://127.0.0.1:9791/mcp

3. เริ่มใช้งาน Claude

เรียกใช้ Claude แล้วทำตามข้อความแจ้ง:

claude

ทำอะไรได้บ้าง?

เมื่อเชื่อมต่อเครื่องมือ AI แล้ว ก็ถึงเวลาเริ่มป้อนพรอมป์ต์ให้ AI

1. เปิดไฟล์ Rive

เปิดไฟล์ Rive และสร้าง Artboard ไว้แล้ว

2. ป้อนพรอมป์ต์

พิมพ์พรอมป์ต์ใน UI แชตแล้วกด Enter AI จะใช้เวลาสักครู่ในการประมวลผลคำขอ จากนั้นการเปลี่ยนแปลงจะปรากฏในไฟล์ Rive ที่เปิดอยู่

ตัวอย่างพรอมป์ต์:

Create a State Machine about birds with 20 states and 2 layers