Docs
Start typing to search…
  1. Introduction

Anima MCP

claude mcp add --transport http anima https://public-api.animaapp.com/v1/mcp
📘

Connect your AI coding agent to Anima Playground, Figma designs, and your team's design system.

Anima MCP connects your AI coding assistant directly to Anima Playground. It bridges the gap between PM prototypes and production code.


Use cases

Handoff Anima playgrounds to coding agents

Pull code from any Anima Playground into your local environment.

Example prompt:

"implement the welcome screen from this playground: https://dev.animaapp.com/chat/xyz"

What happens:

  1. AI downloads the playground project
  2. AI reads relevant files and understands patterns
  3. AI implements adapted version in your codebase

Pro tip: Be specific about which feature you want. The AI will find the relevant files and adapt the code to fit your project's patterns.

Figma to code

Convert Figma designs directly to code through your AI coding agent with high fidelity.

Example prompt for AI code agent:

"implement this Figma design: https://figma.com/design/... using Anima mcp..."

Your AI agent will use Anima MCP to fetch the design and generate production-ready code in your codebase.

Design system access (Enterprise)

Reference your team's design system directly when implementing features.

Example prompt:

"implement a login form following our design system, use Anima MCP and figma url: "

The AI will pull your design system docs and build using your team's established components and patterns.

Getting started: Design system setup is done with our team. Contact us to get it configured.

Setup

Requirements

  • MCP-compatible AI coding tool: Claude Code, Cursor, or other tools that support the Model Context Protocol
  • Anima account: You need access to Anima Playground to share and download projects

Claude Code

Add Anima MCP to your Claude Code configuration, in your terminal (not in Claude Code):

claude mcp add --transport http anima https://public-api.animaapp.com/v1/mcp

After adding:

  1. Restart Claude Code
  2. Enter /mcp to open the MCP menu
  3. Select Anima and authenticate. This opens a browser window to sign in with your Anima account.
  4. (Optional) Connect your Figma account during authentication to enable the Figma URL flow

Cursor

  1. Open Command Palette (⌘ + Shift + P on Mac, Ctrl + Shift + P on Windows)
  2. Search for "MCP" and select Cursor Settings > Tools & MCP
  3. Click Add Custom MCP
  4. Add the following to your mcp.json:
{
  "mcpServers": {
    "anima": {
      "url": "https://public-api.animaapp.com/v1/mcp"
    }
  }
}

  1. After saving, you'll see "anima" appear under Installed MCP Servers with "Needs authentication"

  2. Click Connect to authenticate. This opens a browser window to sign in with your Anima account.

  3. (Optional) Connect your Figma account during authentication to enable the Figma URL flow

Troubleshooting

Can't access playground

Make sure you have access to the playground. Private playgrounds require team membership or direct sharing.

MCP not recognized

Verify that Anima MCP is properly installed and configured in your AI coding tool. Check that your Anima authentication is set up correctly.

Updated 2 days ago