anima

Anima MCP Server Guide

The Anima MCP server connects your AI coding assistant directly to Anima Playground, Figma designs, and your team's design system. It bridges the gap between PM prototypes and production code.

For the complete set of Anima MCP server docs, see our help documentation.

Features

• Handoff Anima playgrounds to coding agents

  Pull code from any Anima Playground into your local environment. The AI downloads the project, reads relevant files, understands patterns, and implements an adapted version in your codebase.

• Figma to code

  Convert Figma designs directly to code through your AI coding agent with high fidelity. Your agent uses Anima MCP to fetch the design and generate production-ready code.

• Design system access (Enterprise)

  Reference your team's design system directly when implementing features. The AI pulls your design system docs and builds using your team's established components and patterns.

Quick start: Claude Code plugin

/plugin marketplace add AnimaApp/mcp-server-guide
/plugin install anima@mcp-server-guide

This installs the Anima plugin, which auto-configures the MCP server and adds the Anima skill. Authenticate when prompted. That's it.

For other editors (VS Code, Cursor), see the manual setup below.

Installation & Setup

Requirements

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

Step 1: Set up your MCP client

Different MCP clients require slightly different setups. Follow the instructions below for your specific client.

Claude Code

1. Open your terminal (not inside Claude Code) and run:

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

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

Use these commands to manage servers:

• List all configured servers: claude mcp list
• Get details for a specific server: claude mcp get anima
• Remove a server: claude mcp remove anima

For more information, see Anthropic's official documentation.

OpenAI Codex

1. Open your terminal and run:

codex mcp add anima --url https://public-api.animaapp.com/v1/mcp

Or add it directly to your ~/.codex/config.toml:

[mcp_servers.anima]
url = "https://public-api.animaapp.com/v1/mcp"

2. Restart Codex
3. Authenticate when prompted

To install the Anima skill (recommended):

codex skill install AnimaApp/mcp-server-guide/skills/anima

For more information, see OpenAI's Codex MCP documentation.

VS Code

1. Use the shortcut Cmd Shift P (Mac) or Ctrl Shift P (Windows) to search for MCP:Add Server
2. Select HTTP
3. Paste the server URL: https://public-api.animaapp.com/v1/mcp
4. When prompted for a server ID, enter anima
5. Select whether to add this server globally or only for the current workspace

Your mcp.json will look like:

{
  "servers": {
    "anima": {
      "type": "http",
      "url": "https://public-api.animaapp.com/v1/mcp"
    }
  }
}

[!NOTE] You must have GitHub Copilot enabled on your account to use MCP in VS Code.

For more information, see VS Code's official documentation.

Cursor

1. Open Cursor > Settings > Cursor Settings
2. Go to the MCP tab
3. Click + Add new global MCP server
4. Enter the following configuration and save:

{
  "mcpServers": {
    "anima": {
      "url": "https://public-api.animaapp.com/v1/mcp"
    }
  }
}

5. After saving, you'll see "anima" appear under Installed MCP Servers with "Needs authentication"
6. Click Connect to authenticate. This opens a browser window to sign in with your Anima account.
7. (Optional) Connect your Figma account during authentication to enable the Figma URL flow

For more information, see Cursor's official documentation.

Other editors

Other code editors and tools that support Streamable HTTP can also connect to the Anima MCP server.

If you're using a different editor or tool, check its documentation to confirm it supports Streamable HTTP based communication. If it does, you can manually add the Anima MCP server using this configuration:

{
  "mcpServers": {
    "anima": {
      "url": "https://public-api.animaapp.com/v1/mcp"
    }
  }
}

Step 2: Authenticate