Rive MCP

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

export const YouTube = ({id, timestamp}) => { const videoSrc = timestamp ? https://www.youtube.com/embed/${id}?start=${timestamp} : https://www.youtube.com/embed/${id}; return ; }; <Note> การผสานรวม MCP ในปัจจุบันมีให้ใช้งานเฉพาะใน Editor เวอร์ชันเดสก์ท็อปสำหรับ Windows และ macOS เท่านั้น

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

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

• สร้างและจัดการไฟล์ Rive — เพิ่ม, เปลี่ยนชื่อ, ปรับขนาด, จัดเรียง และโฟกัสอาร์ตบอร์ด
• ตรวจสอบและแก้ไขฉาก — สอบถามลำดับชั้น, เลือกวัตถุ, อัปเดตคุณสมบัติ, เปลี่ยนชื่อ, ทำซ้ำ, เรียงลำดับใหม่, เปลี่ยน parent หรือลบองค์ประกอบ
• สร้างการออกแบบ — สร้าง shapes, paths, layouts, component instances, component lists และองค์ประกอบที่อิงกับ asset
• สร้างแอนิเมชันและการโต้ตอบ — แก้ไข linear animations, state machines, states, transitions, conditions, keyframes และ interpolation
• ทำงานกับการผูกข้อมูล — สร้าง view models, properties, instances, bindings และ custom property groups
• แก้ไขสคริปต์และเชดเดอร์ — จัดการสคริปต์ 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 snippet ต่อไปนี้ลงในคอมพิวเตอร์ของคุณเป็น `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" />

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

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

การใช้ Claude ใน Terminal

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

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

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

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

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

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

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

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

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

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