Skip to main content
Glama

Rive VS Code MCP

Preview and inspect Rive .riv files without leaving Visual Studio Code.

Rive file preview in VS Code

Features

  • Preview Rive artboards with timeline animations and state machines.

  • Select artboards and animations, play or pause playback, and scrub timelines.

  • Inspect state-machine inputs and interact with supported inputs.

  • Adjust fit, zoom, and preview background.

  • Align an artboard over a temporary background image and copy its top-left x/y coordinates and scale.

  • Optionally inspect Rive file metadata through the inspect_rive_file MCP tool.

Related MCP server: lsp-mcp

Use the preview

  1. Install Rive VS Code MCP from the Visual Studio Code Marketplace.

  2. Open a .riv file. If prompted, choose Rive VS Code MCP as its editor.

  3. Use the side panel to choose an artboard or inspect animations and state machines.

  4. Use the preview toolbar for playback, timeline scrubbing, fit, zoom, background color and opacity, and screenshot export.

MCP server in VS Code

The extension contributes one local stdio MCP server, discovered automatically by VS Code across workspaces. Use MCP: List Servers to manage Rive MCP. The inspect_rive_file tool returns artboard dimensions, animation names and timing, state-machine names, and input names and types.

Enable in Cursor or another MCP client

  1. Run Rive VS Code MCP: Copy Global MCP Configuration from the Command Palette once.

  2. Paste the copied rive-vscode-mcp entry into your MCP client's user-level/global configuration. For Cursor, use ~/.cursor/mcp.json. This works across projects under your home directory.

Requirements

  • Visual Studio Code 1.101 or later.

  • Node.js 18 or later to run the MCP server from another client outside VS Code.

Development

npm install
npm run compile
"/Applications/Visual Studio Code.app/Contents/Resources/app/bin/code" --new-window --extensionDevelopmentPath="$PWD" "/absolute/path/to/sample.riv"

The compile command builds the preview stylesheet and TypeScript extension code.

Standalone MCP server

The extension bundles the same MCP server for automatic VS Code discovery. It is also published independently as rive-vscode-mcp-server. Run this in a terminal to add it to global MCP configs for VS Code, Cursor, Claude Code, and Claude Desktop:

npx -y rive-vscode-mcp-server

License

MIT

Related MCP Connectors

Related MCP Servers

  • A
    license
    Not graded
    quality
    B
    maintenance
    Enables AI assistants to leverage VS Code's language intelligence for code navigation, refactoring, and analysis via the MCP protocol.
    MIT
  • A
    license
    Not graded
    quality
    D
    maintenance
    Enables AI assistants to interact with VS Code's language server protocol features (definitions, references, diagnostics) and debugger (breakpoints, stepping, variable inspection) via an MCP server.
    5 npm
    1
    MIT
  • A
    license
    Not graded
    quality
    B
    maintenance
    Enables MCP clients to inspect and interact with VS Code virtual workspaces and live editor buffers, including reading, searching, editing, saving, and diagnostics without shell access.
    1
    MIT
  • F
    license
    Not graded
    quality
    A
    maintenance
    Enables MCP clients and AI coding agents to query a running VSCode instance for real-time LSP diagnostics, hover/definition/signature info, symbol references, and workspace-wide renames instead of waiting on slow tsc or eslint runs. It also supports opening files, listing workspaces, and executing VSCode commands through a bridge extension.
    -