Rive MCP

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

หมายเหตุ

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

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

คุณสมบัติที่รองรับ

• สร้างและจัดการไฟล์ Rive — เพิ่ม เปลี่ยนชื่อ ปรับขนาด จัดเรียง และโฟกัสอาร์ตบอร์ด
• ตรวจสอบและแก้ไขฉาก — ค้นหาลำดับชั้น เลือกวัตถุ อัปเดตคุณสมบัติ เปลี่ยนชื่อ ทำสำเนา จัดลำดับใหม่ เปลี่ยนผู้ปกครอง หรือลบองค์ประกอบ
• สร้างการออกแบบ — สร้างรูปร่าง เส้นทาง เลย์เอาต์ อินสแตนซ์คอมโพเนนต์ รายการคอมโพเนนต์ และองค์ประกอบที่ใช้แอสเซ็ต
• สร้างแอนิเมชันและการโต้ตอบ — แก้ไขแอนิเมชันเชิงเส้น สเตตแมชชีน สเตต การเปลี่ยนผ่าน เงื่อนไข คีย์เฟรม และการประมาณค่าระหว่างกลาง
• ทำงานกับการผูกข้อมูล — สร้างวิวโมเดล คุณสมบัติ อินสแตนซ์ การผูก และกลุ่มคุณสมบัติที่กำหนดเอง
• แก้ไขสคริปต์และเชเดอร์ — จัดการสคริปต์ Luau และเชเดอร์ WGSL อัปเดตซอร์สโค้ด รันการวินิจฉัย คอมไพล์ใหม่ ทดสอบ ค้นหาโค้ด และอ่านเอาต์พุตคอนโซล

ข้อมูล

รายการคุณสมบัตินี้จะมีการพัฒนาเพิ่มเติมเมื่อเวลาผ่านไปเมื่อมีการเพิ่มเครื่องมือมากขึ้น

การติดตั้ง

การใช้ Cursor

ติดตั้งและเปิดเวอร์ชันล่าสุดของแอปเดสก์ท็อป [Rive](https://rive.app/downloads) สำหรับ Mac หรือ Windows สร้างบัญชี [Cursor](https://www.cursor.com/) และติดตั้งแอป เปิด Cursor และไปที่แผงการตั้งค่าที่มุมขวาบน

<img src="https://mintcdn.com/rive/4WyvnoR1218cyi0r/images/editor/cursor-settings-button.png?fit=max&auto=format&n=4WyvnoR1218cyi0r&q=85&s=39bb9802e31872b2317fed055e5cf24b" alt="Open cursor settings" width="1660" height="1090" data-path="images/editor/cursor-settings-button.png" />

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

<img src="https://mintcdn.com/rive/4WyvnoR1218cyi0r/images/editor/cursor-mcp-settings.png?fit=max&auto=format&n=4WyvnoR1218cyi0r&q=85&s=d82531f4741d02cdd01233d7517a5f25" alt="Open Cursor MCPs tab" width="1658" height="1080" data-path="images/editor/cursor-mcp-settings.png" />

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

```json theme={null}
{
  "mcpServers": {
      "rive": {
          "url": "http://127.0.0.1:9791/mcp"
      }
  }
}
```

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

<img src="https://mintcdn.com/rive/4WyvnoR1218cyi0r/images/editor/cursor-mcp-connection.png?fit=max&auto=format&n=4WyvnoR1218cyi0r&q=85&s=59ca6c71d1cc1317320ab8272eae0e16" alt="Cursor verified" width="1660" height="1104" data-path="images/editor/cursor-mcp-connection.png" />

หมายเหตุ

เพื่อให้เซิร์ฟเวอร์ Rive พร้อมใช้งาน คุณต้องเปิดแอป Rive Early Access ไว้

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

การใช้ Claude ในเทอร์มินัล

ติดตั้งและเปิดเวอร์ชันล่าสุดของ [แอปเดสก์ท็อป Rive](https://rive.app/downloads) สำหรับ macOS หรือ Windows รันคำสั่งต่อไปนี้ในเทอร์มินัลของคุณ:

```shell theme={null}
claude mcp add --transport http rive http://127.0.0.1:9791/mcp
```

รัน Claude และทำตามคำแนะนำ:

```shell theme={null}
claude
```

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

เมื่อติดตั้ง Cursor และตั้งค่าทุกอย่างถูกต้องแล้ว ก็ถึงเวลาเริ่มสั่งงาน AI

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

ตัวอย่างคำสั่ง:

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

เมื่อประมวลผลคำขอเสร็จแล้ว ให้พิมพ์ **End Prompt** เพื่อให้ AI ทำการเปลี่ยนแปลงไฟล์ Rive