# rive-mcp

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.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 22
- Author: ODU33104
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/ODU33104/rive-mcp
- Updated: 2026-10-22
- HTML: https://affpapa.org/en/nevibecode/mcp/rive-mcp

## What it 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.

## Requirements
- Needs: Node.js (commands run via npx)

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add rive-mcp -- npx -y rive-mcp-server
```

### Codex

**Platform CLI**
```bash
codex mcp add rive-mcp -- npx -y rive-mcp-server
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "rive-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "rive-mcp-server"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "rive-mcp": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "rive-mcp-server"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add rive-mcp npx -y rive-mcp-server
```

## When to use it
- build a `.riv` animation 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
- Create a `.riv` animation of a card that appears with a gentle entrance.
- Inspect this `.riv` file and report any state-machine issues.
- Import this SVG icon and export animation frames as PNGs.

## Similar
- [Next AI Draw.io](https://affpapa.org/en/nevibecode/mcp/next-ai-drawio.md) — MCP server · ★ 36398
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [Agent-Native Assets](https://affpapa.org/en/nevibecode/mcp/agent-native-assets.md) — MCP server · ★ 7506
- [Remove AI Watermarks](https://affpapa.org/en/nevibecode/mcp/remove-ai-watermarks.md) — MCP server · ★ 6114
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md