MCP Server Guide

🚀 Anima MCPサーバーガイド

Anima MCPサーバーは、AIコーディングアシスタントをAnima Playground、Figmaデザイン、およびチームのデザインシステムに直接接続します。これにより、PMのプロトタイプと本番コードの間のギャップを埋めることができます。

Anima MCPサーバーの完全なドキュメントについては、ヘルプドキュメントを参照してください。

✨ 主な機能

• Anima playgroundをコーディングエージェントに引き渡す

  任意のAnima Playgroundからコードをローカル環境に取り込みます。AIはプロジェクトをダウンロードし、関連するファイルを読み取り、パターンを理解し、コードベースに適応したバージョンを実装します。

• Figmaからコードへの変換

  AIコーディングエージェントを通じて、Figmaデザインを高い忠実度で直接コードに変換します。エージェントはAnima MCPを使用してデザインを取得し、本番環境で使用可能なコードを生成します。

• デザインシステムへのアクセス（エンタープライズ版）

  機能を実装する際に、チームのデザインシステムを直接参照することができます。AIはデザインシステムのドキュメントを取得し、チームが確立したコンポーネントとパターンを使用して構築します。

🚀 クイックスタート：Claude Codeプラグイン

/plugin install anima@claude-plugins-official

これによりAnimaプラグインがインストールされ、MCPサーバーが自動構成され、Animaスキルが追加されます。必要に応じて認証を行ってください。以上で完了です。

他のエディタ（VS Code、Cursor）の場合は、以下の手動設定を参照してください。

📦 インストールとセットアップ

必要条件

• MCP互換のAIコーディングツール：Claude Code、Cursor、VS Code、またはModel Context Protocolをサポートする他のツール
• Animaアカウント：プロジェクトを共有およびダウンロードするには、Anima Playgroundにアクセスする必要があります

ステップ1：MCPクライアントのセットアップ

異なるMCPクライアントには若干異なるセットアップが必要です。以下の指示に従って、特定のクライアントをセットアップしてください。

Claude Code

1. ターミナル（Claude Code内ではない）を開き、以下のコマンドを実行します。

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

2. Claude Codeを再起動します。
3. /mcp を入力してMCPメニューを開きます。
4. Animaを選択して認証します。これにより、Animaアカウントでサインインするためのブラウザウィンドウが開きます。
5. （オプション）認証中にFigmaアカウントを接続して、Figma URLフローを有効にします。

サーバーを管理するには、以下のコマンドを使用します。

• すべての構成済みサーバーをリストする：claude mcp list
• 特定のサーバーの詳細を取得する：claude mcp get anima
• サーバーを削除する：claude mcp remove anima

詳細については、Anthropicの公式ドキュメントを参照してください。

OpenAI Codex

1. ターミナルを開き、以下のコマンドを実行します。

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

または、~/.codex/config.toml に直接追加します。

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

2. Codexを再起動します。
3. 必要に応じて認証を行います。

Animaスキルをインストールすることをお勧めします。

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

詳細については、OpenAIのCodex MCPドキュメントを参照してください。

VS Code

1. ショートカット Cmd Shift P（Mac）または Ctrl Shift P（Windows）を使用して、MCP:Add Server を検索します。
2. HTTP を選択します。
3. サーバーURLを貼り付けます：https://public-api.animaapp.com/v1/mcp
4. サーバーIDを求められたら、anima を入力します。
5. このサーバーをグローバルに追加するか、現在のワークスペースにのみ追加するかを選択します。

mcp.json は以下のようになります。

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

⚠️ 重要提示

VS CodeでMCPを使用するには、GitHub Copilot をアカウントで有効にする必要があります。

詳細については、VS Codeの公式ドキュメントを参照してください。

Cursor

1. Cursor > Settings > Cursor Settings を開きます。
2. MCP タブに移動します。
3. + Add new global MCP server をクリックします。
4. 以下の構成を入力して保存します。

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

5. 保存後、「anima」が「Needs authentication」と表示された「Installed MCP Servers」の下に表示されます。
6. Connect をクリックして認証します。これにより、Animaアカウントでサインインするためのブラウザウィンドウが開きます。
7. （オプション）認証中にFigmaアカウントを接続して、Figma URLフローを有効にします。

詳細については、Cursorの公式ドキュメントを参照してください。

その他のエディタ

Streamable HTTPをサポートする他のコードエディタやツールも、Anima MCPサーバーに接続できます。

異なるエディタやツールを使用している場合は、そのドキュメントを確認して、Streamable HTTPベースの通信をサポートしていることを確認してください。サポートしている場合は、以下の構成を使用してAnima MCPサーバーを手動で追加できます。

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

ステップ2：認証

MCPサーバーを追加した後、Animaアカウントで認証します。

1. MCPクライアントが認証を求めるメッセージを表示します。
2. Animaアカウントでサインインするためのブラウザウィンドウが開きます。
3. （オプション）認証中にFigmaアカウントを接続して、Figma URLフローを有効にします。

💻 使用例

接続が完了したら、MCPクライアントに指示を出して、Anima PlaygroundのプロジェクトやFigmaデザインにアクセスすることができます。

Anima Playgroundからの引き渡し

Anima Playgroundのリンクをコピーして、エージェントに指示を出します。

"このプレイグラウンドのウェルカム画面を実装してください：https://dev.animaapp.com/chat/xyz"

起こること：

1. AIがプレイグラウンドプロジェクトをダウンロードします。
2. AIが関連するファイルを読み取り、パターンを理解します。
3. AIがコードベースに適応したバージョンを実装します。

💡 使用建议

欲しい機能を具体的に指定してください。AIは関連するファイルを見つけ、コードをプロジェクトのパターンに適合させます。

Figmaからコードへの変換

Figmaデザインのリンクをコピーして、エージェントに指示を出します。

"Anima MCPを使用してこのFigmaデザインを実装してください：https://figma.com/design/..."

AIエージェントはAnima MCPを使用してデザインを取得し、コードベースに本番環境で使用可能なコードを生成します。

デザインシステムへのアクセス（エンタープライズ版）

機能を実装する際に、チームのデザインシステムを直接参照します。

"私たちのデザインシステムに従ってログインフォームを実装し、Anima MCPとfigmaのURLを使用してください：..."

AIはデザインシステムのドキュメントを取得し、チームが確立したコンポーネントとパターンを使用して構築します。

始めるには：デザインシステムのセットアップはチームと一緒に行います。お問い合わせして設定を行ってください。

トラブルシューティング

プレイグラウンドにアクセスできない

プレイグラウンドにアクセスできることを確認してください。プライベートプレイグラウンドには、チームメンバーシップまたは直接共有が必要です。

MCPが認識されない

Anima MCPがAIコーディングツールに正しくインストールされ、構成されていることを確認してください。Animaの認証が正しく設定されていることを確認してください。

認証に問題がある

1. MCPサーバーを削除して再追加してみてください。
2. animaapp.comのブラウザクッキーをクリアしてください。
3. MCPクライアントを再起動してください。

ベストプラクティス

指示を具体的にする

「このプレイグラウンドを実装してください」ではなく、

「このプレイグラウンドのログインフォームコンポーネントを、既存のButtonとInputコンポーネントを使用して実装してください」と試してみてください。

既存のパターンを参照する

Animaから実装する際に、AIにコードベースのパターンを伝えます。

"src/components/uiの既存のコンポーネントを使用してこのデザインを実装し、Tailwindのスタイリングパターンに従ってください"

大きなデザインを分割する

複雑なプレイグラウンドやFigmaファイルの場合、特定のセクションを要求します。

1. 「まず、ヘッダーコンポーネントを実装してください」
2. 「次に、カードグリッドレイアウトを実装してください」
3. 「最後に、フッターを追加してください」

これにより、実装を集中的かつ正確に行うことができます。

追加リソース

• Anima MCPドキュメント
• Anima Playground
• エンタープライズ機能についてお問い合わせ