c2n Web Components

@c2n/mcp

AI エージェントに c2n の Web コンポーネントを公開するModel Context Protocolサーバーです。コンポーネント API（属性、スロット、イベント、ネイティブ CSS パーツ、テーマトークンを含む CSS 変数）、使用例とギャラリーの例、厳選されたプリセット、@c2n/theme のトークン、バリアントのコード生成、アプリケーションのワークフローガイドを提供します。すべてが data/registry.json にバンドルされているため、どのプロジェクトでもオフラインで動作します。

使用方法

このサーバーは stdio を使用し、任意の MCP ホストから起動できます。

npx -y @c2n/mcp

Claude Code のプロジェクト .mcp.json：

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

Codex のプロジェクト .codex/config.toml：

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

Google Antigravity のプロジェクト .agents/mcp_config.json では、Claude の例と同じ mcpServers の command/args 構造を使用します。@c2n/skill パッケージを使うと、スキルをインストールし、これらの設定を自動的に統合できます。

プロジェクトのディレクトリからサーバーを実行すると、インストールされている @c2n/* パッケージが通知され、インストール済みのバージョンが異なる場合はバンドルされた API が提供されます。レジストリはローカルにパッケージ化されているため、インストール後のツール呼び出しにネットワークアクセスは必要ありません。

インストール済みのサーバーのバージョンを確認するには c2n-mcp --version を、CLI の使い方を確認するには c2n-mcp --help を使用してください。

MCP サーバーは構造化されたコンポーネント情報を提供しますが、コンポーネントパッケージのインストールや、アプリケーションの編集を単独で行うことはありません。エージェントにも c2n のアプリケーション、テーマ、バリアントの規約に従わせたい場合は、@c2n/skill と併用してください。完全なセットアップ手順とプロンプトの例については、AI ツールガイドをご覧ください。

接続の確認

MCP 設定を追加した後、エージェントを再起動し、c2n MCP サーバーを使ってコンポーネントを一覧表示するか、c2-button を調べるよう依頼してください。接続されたクライアントには以下のツールが表示され、現在のプロジェクトにインストールされている @c2n/* パッケージが報告されます。サーバーを起動できない場合は、そのプロジェクトで npx -y @c2n/mcp --version を実行して、npm／ランタイムの問題か MCP クライアント設定の問題かを切り分けてください。

ツール

ツール	目的
list_components	タグ、パッケージ、カテゴリ、説明、インストール済みバージョンを含むすべてのコンポーネントを一覧表示します
search_components	名前、説明、属性、スロット、イベント、使用例、アイコンを横断してフリーテキスト検索します
get_component	1 つのコンポーネントの完全な API と、パーツ／状態ごとにグループ化され、テーマトークンが付いた CSS 変数を取得します
get_examples	使用例の行とギャラリーカードを取得します。view: "index" ではすべてのデザイン（概要、スクリーンショット）を一覧表示します
search_examples	すべてのコンポーネントのギャラリーからデザイン（「glass」、「pill」、「underline」）を検索します
get_presets	CSS 変数の値として厳選されたプリセットを取得します
get_theme	--c2-theme--* トークン、インストール／マッピング用のスニペットを取得します。コンポーネントごとのマッピングには tag が含まれます
generate_variant	オーバーライド、プリセット、またはギャラリーカードを基に、CSS クラス／HTML + style／Lit サブクラス／JSON を生成します
validate_markup	作成したマークアップ／CSS を検証します。置き換え対象のネイティブコントロール、未知のタグ／属性／スロット／イベント／変数を確認します
get_workflow_guide	workflow、theming、variant-components、frameworks

ギャラリーカードには、変更内容を説明する生成済みの概要と、リテラル値がトークンの値と一致する箇所で色が --c2-theme--* トークン（var(--c2-theme--color-outline, #d4d4d8)）に従う CSS が含まれます。そのため、カードをコピーするとアプリケーションのテーマとダークモードが反映されます。各カードには、ドキュメントサイトでホストされるライトモードとダークモードの PNG キャプチャ（gallery-shots/<component>/<slug>.<theme>.png。Pages のデプロイ時に apps/ui/scripts/gallery-shots.mjs が書き込みます）へのリンクもあります。

コマンドラインから検証する

validate_markup は CI やエディターフック向けの CLI としても利用できます。HTML、JSX/TSX、Vue、Svelte、Astro、Angular、Lit のテンプレートと CSS を読み込み、プロジェクトにインストールされている @c2n/* パッケージの API と照合します。

npx -y @c2n/mcp validate src            # exit 1 on errors
npx -y @c2n/mcp validate src --strict   # warnings fail too (native controls, box styling on a c2 host)
npx -y @c2n/mcp validate --hook         # Claude Code PostToolUse hook: reads the payload on stdin

置き換え対象となるネイティブの <button>／<input>／<select>／<textarea>／<dialog>／<details>／<progress> 要素、未知の c2-* タグ、属性、スロット、--c2-* 変数（「もしかして」の候補付き）、c2-* 要素が発火しないイベント（イベント一覧付き）、要素が無視する静的なキャメルケース属性（row-key に対する rowKey）、c2-* ホストのボックススタイル（border、padding、background、box-shadow、outline。角丸のみなら問題ありません）を報告します。c2n-ignore を含む行、またはその文字列を含むコメントの次の行はスキップされます。フックモードでは、検出結果が標準エラー出力に出力され、終了コード 2 が返されます。Claude Code はこれをエージェントに返します。npx -y @c2n/skill install は .claude/settings.json にそのフックを登録します。

リソース：c2n://components、c2n://components/{tag}、c2n://theme、c2n://guide/{topic}。

開発

• data/registry.json は無視対象のビルド成果物です。npm run build:tools（リポジトリのルート）を実行すると、コンポーネントマニフェスト、ドキュメントのコンテンツ、プリセット、テーマから再生成し、dist/ をコンパイルして、コミット済みのスキルフォールバックを更新します。
• dev、inspect、smoke、npm pack は、必要に応じてレジストリを自動的にビルドします。
• npm run smoke -w packages/tools/mcp は stdio 経由でサーバーを起動し、すべてのツールをチェックします。
• npm run inspect -w packages/tools/mcp はソースエントリー（node src/cli.ts、Node 24 の型ストリッピング）を対象に MCP Inspector を起動します。