Ai Canvas Mcp (@aicanvas/mcp)

AI Canvas

ヘッドレスプリミティブではなく、完成済みのコンポーネント

アニメーション付きの React コンポーネントや、組み合わせて構成したページブロックを集めたコレクションです。依存パッケージとしてではなく、実際のソースコードとしてプロジェクトにインストールできます。

         

_{インストール · コンポーネント · ブロック · MCP · リポジトリ構成 · よくある質問 · ライセンス}

インストール

次のコマンドで、任意のコンポーネントをプロジェクトに追加できます。

npx shadcn@latest add @aicanvas/task-cards

新しいプロジェクトを始めますか？ 先に初期化してから追加してください。

npx shadcn@latest init        # new projects only
npx shadcn@latest add @aicanvas/task-cards

インストールには無料の AI Canvas アカウントが必要です。サインアウトした状態では、CLI はコンポーネントの代わりに小さなプレースホルダーファイルを書き込みます。まず一度認証してください。

1. 無料で登録し、アカウント設定からトークンをコピーします。
2. .env.local に AICANVAS_TOKEN として設定します。
3. プロジェクトの components.json にレジストリを一度だけ追加します。

{ "registries": { "@aicanvas": { "url": "https://aicanvas.me/r/{name}.json", "params": { "token": "${AICANVAS_TOKEN}" } } } }

その後は、すべての npx shadcn@latest add @aicanvas/<slug> が認証済みで実行されます。サインインしている場合、各コンポーネントのページにはトークン入りのコマンドも表示されます。

コードを読むのにアカウントは必要ありません。各コンポーネントのページにはソースコード全体が表示され、自由に読んでコピーできます。

要件

Tailwind CSS v4、React 19、Framer Motion が必要です。コンポーネントは Tailwind v4 のトークンを前提に記述されているため、v3 では正しく表示されません。デフォルトの対象は Next.js App Router ですが、必須ではありません。

使用方法は 3 通り

方法	コマンドまたは操作	おすすめの用途
shadcn CLI	npx shadcn@latest add @aicanvas/<slug>	完成済みのオープンソースコードをリポジトリに直接追加する
AI Canvas MCP	npx -y @aicanvas/mcp	AI エディターにコンポーネントを検索・インストールさせる
AI でリミックス	無料の各コンポーネントページからプロンプト全体をコピー	任意の AI コーディングツールで、独自の方法でコンポーネントを作り直す

カタログ全体を閲覧し、任意のコンポーネントの正確なコマンドを aicanvas.me でコピーできます。pnpm dlx、yarn dlx、bunx も使用できます。

AI Canvas を選ぶ理由

• MIT ライセンス。 無料ライブラリは MIT ライセンスのため、個人プロジェクトや商用プロジェクトで使用でき、自由に変更して、クレジット表記なしで公開できます。プレミアムコンポーネント、デザインシステム、テンプレートはプロプライエタリです。
• ソースコードはすべて手元に。 各コンポーネントはブラックボックスの依存関係ではなく、実際の React および TypeScript のコードとしてコードベースに追加されます。スタイルを変更したり、機能を拡張したり、そのまま公開したりできます。すべてご自身のものです。
• AI ワークフロー向けに構築。 shadcn CLI でインストールするか、MCP を接続してエージェントにインストールさせるか、あらゆる AI コーディングツールで使えるリミックス用プロンプトを渡してください。
• デフォルトでアニメーション付き。 Framer Motion と Tailwind CSS で構築されており、Next.js App Router や最新の React 環境ですぐに使えます。3D コンポーネントには Three.js を使用しています。

コンポーネント

_{aicanvas.me ですべてのコンポーネントを見る}

ブロック

カードデッキ、タスクボード、ギャラリーなど、複数のコンポーネントを組み合わせたページセクションです。インストール方法も MIT ライセンスも同じですが、単一のコンポーネントより大きな単位で構成されています。

_{aicanvas.me ですべてのブロックを見る}

## AI エディターで使う（MCP）

AI Canvas を AI エディターに接続すると、エージェントがコンポーネントを検索、確認、インストールできるようになります。トークンを節約できます。ゼロから始める必要はありません。

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

または、MCP 設定に追加します。

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

Claude Code、Codex、Cursor など、MCP 互換のエディターで使用できます。サーバーは読み取り専用で、実行時に最新のレジストリを取得するため、新しいコンポーネントが公開されると、まもなくエージェントから利用できるようになります。公開済みコンポーネントのメタデータとソースを返します。

リポジトリの構成

このリポジトリには AI Canvas のソースが含まれています。ウェブサイトと無料のコンポーネントライブラリの両方です。コンポーネントのソースはサイトだけでなく、ここにあります。

パス	内容
components-workspace/<slug>/	各無料コンポーネントの index.tsx ソースと prompts.ts のリミックス用プロンプト、および多くの場合は spec.md
design-systems/andromeda/	無料の Andromeda デザインシステムのソース：トークン、コンポーネント、ユーティリティ
app/	aicanvas.me ウェブサイト（Next.js App Router）
scripts/generate-registry.mjs	上記のソースから shadcn レジストリ JSON を生成します

/r/*.json で配信される @aicanvas レジストリファイルは、components-workspace/ と design-systems/ からビルド時に生成されるため、チェックイン済みの registry/ フォルダーはありません。node scripts/generate-registry.mjs を実行すると、ローカルで生成できます。

技術スタック

React と TypeScript、Tailwind CSS、Framer Motion を使用しています。Next.js App Router 向けに構築されており、最新の React 環境であればどれでも動作します。3D コンポーネントでは Three.js を使用しています。

よくある質問

アカウントは必要ですか？ コードを読むだけなら必要ありません。すべてのコンポーネントページでソース全体を確認でき、自由に読んだりコピーしたりできます。無料ライブラリの大半は、このリポジトリにもあります。サインアウト中にプレースホルダーファイルを書き込む、ワンコマンドの npx shadcn add インストールを利用する場合のみ、無料アカウントが必要です。

Next.js 以外でも動作しますか？ はい。コンポーネントは Tailwind と Framer Motion を使った通常の React および TypeScript です。App Router は標準の対象ですが、必須ではありません。一部のコンポーネントは next/font/google で表示フォントを読み込みます。Next.js 以外では、このインポートを独自のフォントローダーに置き換えてください。

依存関係が追加されますか、それとも実際のコードが使えますか？ 実際のコードを使えます。インストールするとソースがプロジェクトにコピーされるため、自分のものとして自由に変更できます。同期を続ける必要のある AI Canvas パッケージはありません。

商用利用できますか？ はい。無料ライブラリは MIT ライセンスです。商用プロジェクトでの使用、変更、クレジット表記なしでの公開が可能です。Premium は別途ライセンスされています。詳しくはライセンスをご覧ください。

リミックス用プロンプトとは何ですか？ 各コンポーネントには、プラットフォームに依存しない包括的なプロンプトが付属しています。これを任意の AI コーディングツールに貼り付けると、そのままコピーするのではなく、好みに合わせてコンポーネントを再構築できます。

コンポーネントを最新の状態に保つにはどうすればよいですか？ 何もする必要はありません。インストールしたコードは自分のものになり、勝手に変更されることはありません。コンポーネントの最新版を使いたい場合は、インストールコマンドを再実行してください。

コントリビューション

AI Canvas は積極的にメンテナンスされており、新しいコンポーネントが定期的に公開されています。イシュー、アイデア、プルリクエストを歓迎します。コンポーネントの提案やバグの報告は、イシューを作成してください。

AI Canvas によって時間を節約できたら、スターを付けていただくと、より多くの開発者に見つけてもらいやすくなります。

ライセンス

無料ライブラリは MIT ライセンスです。個人プロジェクトや商用プロジェクトでの使用、自由な変更、クレジット表記なしでの公開が可能です。LICENSEをご覧ください。Premium コンポーネント、デザインシステム、テンプレートは、AI Canvas Premium License に基づくプロプライエタリな製品です。