Rive MCP Server - Core System

A Model Context Protocol (MCP) server for orchestrating Rive animations in production applications. This system enables developers to discover, integrate, and compose Rive animations through a standardized interface, with support for multiple frameworks and deployment scenarios.

Features

• Component Discovery: Browse and search Rive components across libraries with rich metadata
• Runtime Integration: Get framework-specific integration surfaces for React, Vue, Stencil, and more
• Scene Composition: Orchestrate multi-component animation sequences with precise timing
• Code Generation: Auto-generate production-ready wrapper components for any framework
• Multi-Backend Storage: Support for local filesystem, S3, and remote HTTP/CDN storage
• Type Safety: Full TypeScript support with comprehensive type definitions

Quick Start

Get up and running in under 5 minutes:

# 1. Install dependencies
npm install

# 2. Build the packages
npm run build:packages

# 3. Initialize storage
npm run init-storage

# 4. Verify setup
npm run validate-setup

# 5. Start the MCP server (outputs connection config)
npm run mcp-server

The server will output the exact configuration you need to add to your MCP client (Claude Desktop, Cline, etc.).

See MCP_CLIENT_CONFIGURATION.md for detailed client setup instructions.

Architecture Overview

The system separates three key layers:

1. Rive Editor & Assets - Designers author .riv files using the Rive Editor
2. Rive MCP Orchestrator - This server that discovers, indexes, and orchestrates Rive assets
3. Consumer Applications - React, Vue, Stencil, Unity/Unreal apps that integrate animations

Integration and logic live OUTSIDE the .riv files, enabling true separation of concerns.

See ARCHITECTURE.md for detailed architecture documentation.

MCP Tools

The server exposes the following MCP tools:

listComponents

List and filter available Rive components across all libraries.

{
  "libraryId": "ui-components",    // optional filter
  "tags": ["loading", "spinner"],  // optional filter
  "category": "ui-elements"        // optional filter
}

getComponentDetail

Get complete manifest details for a specific component.

{
  "componentId": "ui-loading-spinner"
}

getRuntimeSurface

Get framework-specific runtime integration surface.

{
  "componentId": "ui-loading-spinner",
  "framework": "react"  // react | vue | stencil | angular
}

composeScene

Compose multi-component animation sequences.

{
  "sceneId": "celebration-big-win"
}

generateWrapper

Generate production-ready component wrappers.

{
  "componentId": "ui-loading-spinner",
  "framework": "react",
  "typescript": true
}

Example Components

The system includes four realistic example components:

• Astralis Slot Machine - Casino game slot machine with spinning reels and win animations
• Premium Loading Spinner - Customizable loading indicator with 5 style variants
• Interactive Button - Fully interactive button with hover, press, and disabled states
• Game Character Avatar - Animated character with 8 emotions and reactions

See QUICKSTART.md for detailed examples.

Configuration

Local Storage (Development)

{
  "storage": {
    "backend": "local",
    "local": {
      "basePath": "./data",
      "manifestPath": "manifests",
      "assetsPath": "assets"
    }
  }
}

S3 Storage (Production)

{
  "storage": {
    "backend": "s3",
    "s3": {
      "bucket": "my-rive-assets",
      "region": "us-east-1",
      "manifestPrefix": "manifests/",
      "assetsPrefix": "assets/"
    }
  }
}

Remote Storage (CDN)

{
  "storage": {
    "backend": "remote",
    "remote": {
      "manifestUrl": "https://cdn.example.com/manifest

... [View full README on GitHub](https://github.com/astralisone/rive-mcp-server-core#readme)