AgentGrid.io (by Anima)

Agent Grid MCP サーバーガイド

Agent Grid は Anima が提供するガバナンスの効いたハブで、AI エージェントがウェブアプリを構築、ホスト、公開、共有できます。このリポジトリには MCP サーバーのガイドと、コーディングエージェントにその使い方を教えるスキルが含まれています。Claude Code プラグイン、Codex スキル、または通常の MCP サーバーとしてインストールできます。

Agent Grid は app.agentgrid.io で利用できます。ドキュメントの全文については、ヘルプドキュメントをご覧ください。

エージェントでできること

• プロンプト、ウェブサイト、または Figma デザインからアプリを構築する — 内容を説明するか、URL を複製するか、Figma のフレームを渡すと、稼働中のアプリが公開 URL で返されます。
• 既存のコードをホストする — プロジェクトをインポートするか、空のリポジトリを作成して、そこにプッシュできます。
• Git 経由であらゆる成果物を編集する — すべての成果物は実際の Git リポジトリです。クローン、コミット、プッシュできます。
• 公開 URL に公開する — また、公開を取り消すこともできます。
• デザインを考慮したコードを独自のコードベースに生成する — Figma のフレームをリポジトリ内のファイルに変換し、使用中の技術スタックに合わせます。

すべてが成果物です。チームのワークスペースにある 1 つの Git リポジトリで、sessionId によって指定されます。

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

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

これにより MCP サーバーが設定され、スキルがインストールされます。プロンプトが表示されたら認証してください。これで完了です。

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

要件

• MCP 対応の AI コーディングツール — Claude Code、Codex、Cursor、VS Code、またはストリーミング可能な HTTP を使用するツール
• Agent Grid アカウント

サーバー URL： https://api.agentgrid.io/v1/mcp · トランスポート： ストリーミング可能な HTTP

Claude Code（手動）

1. ターミナルで（Claude Code の外で）次を実行します。

claude mcp add --transport http anima https://api.agentgrid.io/v1/mcp

2. Claude Code を再起動します
3. /mcp を実行し、anima を選択して、ブラウザーで認証します
4. （任意）認証中に Figma を接続すると、Figma のフローを利用できます

claude mcp list、claude mcp get anima、claude mcp remove anima でサーバーを管理できます。Anthropic の MCP ドキュメントをご覧ください。

OpenAI Codex

codex mcp add anima --url https://api.agentgrid.io/v1/mcp

または、~/.codex/config.toml に次を記述します。

[mcp_servers.anima]
url = "https://api.agentgrid.io/v1/mcp"

次に、スキルをインストールします（推奨）。

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

OpenAI の Codex MCP ドキュメントをご覧ください。

VS Code

1. Cmd Shift P / Ctrl Shift P → MCP: Add Server
2. HTTP を選択します
3. URL：https://api.agentgrid.io/v1/mcp
4. サーバー ID：anima
5. グローバルまたはワークスペースのスコープを選択します

{
  "servers": {
    "anima": {
      "type": "http",
      "url": "https://api.agentgrid.io/v1/mcp"
    }
  }
}

メモ

VS Code で MCP を使用するには、GitHub Copilot が必要です。VS Code のドキュメントをご覧ください。

Cursor

Cursor > Settings > Cursor Settings > MCP > + Add new global MCP server：

{
  "mcpServers": {
    "anima": {
      "url": "https://api.agentgrid.io/v1/mcp"
    }
  }
}

認証するには、Connect をクリックします。Cursor のドキュメントをご覧ください。

その他のクライアント

{
  "mcpServers": {
    "anima": {
      "url": "https://api.agentgrid.io/v1/mcp"
    }
  }
}

MCP を使用しない場合：CLI を使う

Anima CLI はシェルから同じツールを実行できます。設定する MCP サーバーは必要ありません。

npx @animaapp/cli@latest login
npx @animaapp/cli@latest create -t p2c -p "SaaS dashboard with sidebar and analytics"

エージェントへのプロンプト

新しいものを作成する

「サイドバー、KPI カード、アクティビティフィードを備えた SaaS 分析ダッシュボードを作ってください。」

エージェントが成果物を作成し、ビルドの完了を待ってから、ライブプレビューの URL を返します。バリエーションを依頼すると、複数の案を並行して生成して比較できます。

サイトを複製する、または Figma のデザインをライブアプリとして実装する

「stripe.com/payments をアプリとして複製してください。」 「この Figma フレームを動作するサイトにしてください：https://figma.com/design/...」

既存の成果物を編集する

「https://app.agentgrid.io/artifacts/xyz のヘッダーがモバイルで崩れています。修正してください。」

エージェントが成果物の git リポジトリを複製して修正し、プッシュします。コンテンツの変更は必ず git を通じて行われます。

Figma のデザインを自分のコードベースに実装する

「この Figma デザインを自分のプロジェクトに実装してください：https://figma.com/design/...」

エージェントは使用している技術スタックに合わせたコードを生成し、返されたデザインスナップショットを視覚的な参照として使用します。

公開する

「公開してください。」

公開するとアプリが一般公開されます。成果物の URL はすでに表示できるため、共有するだけなら公開は不要です。

デザインシステムへのアクセス（Enterprise）

「次の Figma URL を使用して、当社のデザインシステムに従ったログインフォームを実装してください：...」

デザインシステムのセットアップは当社チームが行います。設定をご希望の場合は、お問い合わせください。

ベストプラクティス

CSS ではなく、目的を説明してください。 Agent Grid はデザインを理解するため、プロンプトに 16 進数の値やピクセル単位の寸法を指定すると、その特性が損なわれ、ありきたりな結果になります。用途、対象ユーザー、重要な機能を 3～5 個伝えてください。

実装時は具体的に指定してください。「既存の src/components/ui にある Button コンポーネントと Input コンポーネントを使ってログインフォームを実装してください」は、「このデザインを実装してください」よりも効果的です。

大規模なデザインは分割してください。 まずヘッダー、次にカードグリッド、最後にフッターの順に進めます。対象を絞った依頼のほうが、より正確な結果を得られます。

トラブルシューティング

非同期生成、create タイプの検証、git トークンの有効期限切れ、公開の仕様など、よくある問題についてはスキルのトラブルシューティングリファレンスで説明しています。

MCP が認識されない場合： サーバーがツールで設定されていることと、認証が完了していることを確認してください。 認証に関する問題： サーバーを削除して再追加し、Cookie をクリアして、クライアントを再起動してください。

このリポジトリの内容

パス	用途
skills/anima/SKILL.md	エージェントが読み込むスキル
skills/anima/references/	ツールリファレンス、セットアップ、git ワークフロー、例、トラブルシューティング
.claude-plugin/	Claude Code プラグインとマーケットプレイスのマニフェスト
.mcp.json	プラグインがインストールする MCP サーバー
server.json	MCP Registry のエントリー
anima/SKILL.md	スキルのミラー。CI によって同期されます

その他のリソース

• Agent Grid
• Anima MCP のドキュメント
• Anima CLI
• Enterprise 機能についてのお問い合わせ