rive-mcp — Claude Code MCP server for Rive animation
Create and edit .riv animations, inspect their structure, and export previews through an MCP client. Useful when you want to work on Rive files from an AI coding chat.
claude mcp add rive-mcp -- npx -y rive-mcp-serverWhat rive-mcp does
rive-mcp gives an MCP client tools to build a .riv file from a JSON scene description or modify an existing animation. It can also import SVG artwork as vector shapes and export animations as PNG frames, GIF, APNG, WebM, or sprite sheets. Rendering uses the official Rive runtime in headless Chromium.
A local Studio provides a canvas, object hierarchy, inspector, and timeline, with edits reflected live. Other tools inspect files, flag issues such as unreachable state-machine states, and run state-machine inputs. There is a runtime limitation to keep in mind: embedded audio plays in a GPU-backed Rive runtime, not in the server’s own preview.
What it helps with
- build a
.rivanimation from a JSON scene description - inspect a file and catch state-machine problems
- turn SVG artwork into Rive vector shapes
- export an animation as a GIF or sprite sheet
- generate Rive integration code for React or Flutter
Example prompts for the agent
- Create a
.rivanimation of a card that appears with a gentle entrance. - Inspect this
.rivfile and report any state-machine issues. - Import this SVG icon and export animation frames as PNGs.
How to install rive-mcp
Platform CLI
claude mcp add rive-mcp -- npx -y rive-mcp-serverPlatform CLI
codex mcp add rive-mcp -- npx -y rive-mcp-serverConfig file
{
"mcpServers": {
"rive-mcp": {
"command": "npx",
"args": [
"-y",
"rive-mcp-server"
]
}
}
}Config file
{
"servers": {
"rive-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"rive-mcp-server"
]
}
}
}Platform CLI
gemini mcp add rive-mcp npx -y rive-mcp-serverStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about rive-mcp
How do I install rive-mcp in Claude Code?
Run claude mcp add rive-mcp -- npx -y rive-mcp-server. This registers the rive-mcp MCP server.
What does rive-mcp do?
It lets an MCP client create and edit .riv animations, inspect their contents, and render them into image or video formats.
Can the server preview play embedded audio?
No. Embedded audio plays in a GPU-backed Rive runtime, but not in the server’s own preview.
