aicanvas

@aicanvas/mcp

AI Canvas 用の Model Context Protocol サーバーです。AI エディター（Claude Code、Cursor、Claude Desktop、Codex）からチャットを離れることなく AI Canvas のコンポーネントを検索してインストールできます。

You:   "find me an animated card stack"
AI:    [calls search_components → ranks matches → picks polaroid-stack]
       [calls get_install_command → returns: npx shadcn add @aicanvas/polaroid-stack]
       [runs the command — file lands in your project]
You:   "make the rotation more dramatic"
AI:    [edits the file directly]

提供する機能

ライブの aicanvas.me レジストリを基にした13個のツールを提供します。ウェブサイトにコンポーネントを追加すると、数分以内に MCP が自動更新されます。レジストリには80個以上の単体コンポーネントと、独自のコンポーネントおよびテンプレートを備えた Andromeda デザインシステムが含まれています。

ツール	目的
list_categories	コンポーネント数とともに、すべてのカテゴリを表示します。詳細を調べる前の全体像の把握に使います。
list_components	単体コンポーネントを閲覧します。カテゴリで絞り込むこともできます。ページネーションに対応しています。
search_components	単体コンポーネントとデザインシステムのコンポーネントの両方を、キーワードであいまい検索します（スラッグ、名前、説明、カテゴリ、タグ）。結果は関連度順に表示されます。
get_component	1つのコンポーネントの完全なメタデータと .tsx ソースコード全体を取得します。単体コンポーネントのスラッグとデザインシステムのコンポーネントのスラッグ（例：andromeda-heat-grid）の両方を解決します。
get_install_command	単体コンポーネントまたはデザインシステムのコンポーネントに対応する npx shadcn add @aicanvas/<slug> コマンドを取得します。
list_systems	利用可能なデザインシステム（例：Andromeda）を、コンポーネント数およびテンプレート数とともに一覧表示します。
get_system	デザインシステム全体のすべてのファイルと、共有トークン、コンポーネントのインストールコマンド、依存関係チェーンを取得します。
list_templates	すぐに使えるテンプレート（画面全体の完成例）を一覧表示します。デザインシステムで絞り込むこともできます。
get_template	1つのテンプレート（すぐに使える構成）のすべてのファイルと、そこから取り込まれるレジストリ依存関係を取得します。
get_component_props	1つのコンポーネントについて、ドキュメントに記載されたプロパティを取得します。名前、型、必須かどうか、デフォルト値、説明が含まれます。無料でアカウントも不要です。ソースコードよりはるかに小さい情報量です。
validate_usage	ファイル内の JSX を、インポートされている AI Canvas コンポーネントのドキュメント記載のプロパティと照合します。不明なプロパティ、必須プロパティの不足、プロパティの選択肢にない値を、それぞれ行番号とともに確認します。
compose_page	1行の要件をビルド計画に変換します。最も近いテンプレート、各パーツに対応するコンポーネントと代替案、インストール順序（トークンが先）、カバーできないパーツを提示します。計画のみを作成し、コードは生成しません。
get_audit_checklist	完成したページまたはコンポーネントを確認するためのチェックリストを取得します。インストールの完全性、プロパティ、両方のテーマ、320px のレイアウト、モーションの後処理、キーボード操作とコントラスト、構成を確認します。

すべてのツールは読み取り専用です。AI Canvas 側のデータは変更されません。

最後の4つのツールが想定するワークフローは、compose_page で計画を立て、JSX を記述する前に get_component_props で各 API を確認し、完成したファイルに validate_usage を実行して、完了とする前に get_audit_checklist を使うというものです。

単体コンポーネントとデザインシステムのコンポーネントは、別々のカテゴリで管理されています。list_components と list_categories が対象とするのは80個以上の単体コンポーネントのみなので、カタログをすっきり保てます。デザインシステムのコンポーネントには list_systems ／ get_system からアクセスできるほか、get_component、get_install_command、search_components ではスラッグからも検索できます。

セットアップ

Claude Desktop

claude_desktop_config.json を編集します。

• macOS： ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows： %APPDATA%\Claude\claude_desktop_config.json
• Linux： ~/.config/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "aicanvas": {
      "command": "npx",
      "args": ["-y", "@aicanvas/mcp"]
    }
  }
}

Claude Desktop を再起動します。ツール一覧に aicanvas ツールが表示されます。

Cursor

プロジェクト単位（リポジトリ内の .cursor/mcp.json）またはグローバル（~/.cursor/mcp.json）に設定できます。

{
  "mcpServers": {
    "aicanvas": {
      "command": "npx",
      "args": ["-y", "@aicanvas/mcp"]
    }
  }
}

Claude Code

プロジェクト単位の .mcp.json（コードと一緒にコミットします）。

{
  "mcpServers": {
    "aicanvas": {
      "command": "npx",
      "args": ["-y", "@aicanvas/mcp"]
    }
  }
}

または CLI から設定します。

claude mcp add aicanvas -- npx -y @aicanvas/mcp

Codex

~/.codex/config.toml：

[mcp_servers.aicanvas]
command = "npx"
args = ["-y", "@aicanvas/mcp"]

動作を確認する

上記のいずれかの AI エディターで、次のように尋ねます。

「AI Canvas にはどのカテゴリのコンポーネントがありますか？」

11 個すべてのカテゴリと件数が表示されます。表示されない場合は、ホストの MCP ログを確認してください。通常、「Failed to spawn process」やネットワークエラーは、npx がパッケージを取得できなかったか、設定を編集した後にホストが再起動されていないことを意味します。

エディターを使わずにサーバーを調べるには、次を実行します。

npx -y @modelcontextprotocol/inspector npx -y @aicanvas/mcp

ブラウザー UI が開き、各ツールを手動で呼び出せます。

設定

環境変数	デフォルト	説明
AICANVAS_REGISTRY_BASE	https://aicanvas.me/r	レジストリのルート URL です。セルフホスト可能なミラーを使ったローカル開発の場合にのみ上書きしてください。
AICANVAS_TOKEN	(なし)	アカウントごとの任意のトークンです。ウェブサイトが提供する MCP 設定に埋め込まれます。AI Canvas アカウントを識別するため、ソースの取得が認証され、所有しているプレミアムコンテンツのロックが解除されます。すべてのレジストリリクエストで Bearer トークンとして送信されます。トークンがない場合は匿名となります。メタデータの閲覧は引き続き可能ですが、コンポーネントのソースを取得すると、コードの代わりに「無料アカウントを作成してください」という簡単な案内が返されます。

アカウントとプレミアムコンテンツ

メタデータの閲覧（list_categories、list_components、search_components、list_systems、list_templates、get_install_command）は無料で、アカウントは不要です。実際のソースの取得（get_component、get_system、get_template）には無料の AI Canvas アカウントが必要です。アカウントから AICANVAS_TOKEN を設定すると、ウェブサイトから設定済みの構成を取得できます。トークンがない場合、無料コンポーネントのソースを取得するとコードの代わりに「無料アカウントを作成してください」という簡単な案内が返され、プレミアムコンテンツ（完全なデザインシステムやテンプレート）を取得すると、アップグレードリンク aicanvas.me/pricing を含む HTTP 402 が返されます。npx @aicanvas/mcp@latest を実行すれば、いつでも更新できます。

レジストリの最新状態が保たれる仕組み

MCP は初回使用時に https://aicanvas.me/r/aicanvas-mcp.json を取得し、5 分間キャッシュします。AI Canvas に新しいコンポーネントが追加されると、パッケージを更新しなくても MCP に自動的に反映されます。

各コンポーネントの完全なソースコードは、必要に応じて /r/<slug>.json から取得されます（CLI がインストールするものと同じ shadcn レジストリアイテムです）。

プロパティの表は https://aicanvas.me/r/aicanvas-props.json から取得します。各コンポーネントの JSDoc を基にビルド時に解析されるため、ソースとのずれは生じません。こちらもキャッシュ期間は 5 分です。

ローカル開発

git clone https://github.com/aicanvas-me/aicanvas.git
cd aicanvas/mcp
npm install
npm run build

# Smoke-test against the deployed registry:
npm run inspect

# Or point at a locally running aicanvas dev server:
AICANVAS_REGISTRY_BASE=http://localhost:3000/r node dist/index.js

src/index.ts を編集し、npm run build を実行して、AI エディターを再起動してください。

ライセンス

MIT。AI Canvas プロジェクトと同じです。