Cronus UI

cronus-ui-mcp

Cronus UI 向けの Model Context Protocol（MCP）サーバーです。MCP 対応の AI エージェントとアシスタントが、レジストリから Cronus UI のコンポーネントやブロックを見つけて取得し、インストールできます。さらに、アプリ全体の構成、ページの追加、テーマの設定、インストール済みコンポーネントや構成済みページのアップグレードも行えます。エージェントは利用可能なものを一覧表示して検索し、必要なソースファイルを取得して、単に add button するだけでなく、製品のループ（compose → add-page → theme → upgrade）に沿って作業中のプロジェクトを拡張できます。

この MCP サーバーは新しいアプリのスキャフォールディングを行いません。新規プロジェクトは npx create-cronus-app で開始し、その後、書き込みツールを初期化済みのプロジェクト内で実行します。

MCP は stdio（ローカル IDE、読み取り・書き込みの両方に対応）および https://aicronus.com/mcp の Streamable HTTP（ホスティング環境、読み取り専用のカタログ。クラウドビルダーではローカル CLI を起動できません）で提供されます。どちらのインターフェイスも、cronus-ui CLI がインストールに使用するものと同じレジストリを読み込みます。

公式 MCP レジストリ名：io.github.pedrogbraz/cronus-ui（stdio npm パッケージとホスト型リモートの両方）。各クライアントのセットアップ方法は aicronus.com/docs/mcp にあります。

提供する機能

読み取り専用ツール

ツール	入力	戻り値
list_components	—	インストール可能なすべてのコンポーネント（registry:ui）：名前、タイトル、タグ、依存関係、インストールコマンド。
list_blocks	—	インストール可能なすべてのブロック（registry:block）：ヒーロー、価格設定、ログイン、ダッシュボードなど、組み合わせ済みのセクション。
list_catalog	{ kind?: component|block|variant|template }	Hydra 対応のコンパクトなカード（説明、デザインスタイル、パレット、モーション、インテント）。ソースファイルは含まれません。
match_catalog	{ query?, intent?, style?, palette?, motion?, kind?, limit? }	コンテキストが限られたエージェント向けの2段階検索。query: "login page with smooth animation" はインテントとモーションを推定し、pick／intent／motion の検索結果を返します。
search_registry	{ query: string }	名前（または読みやすいタイトル）に query が含まれるコンポーネントとブロック（大文字・小文字を区別しない部分一致）。
get_component	{ name: string }	1つのコンポーネントまたはブロックの詳細情報：ソースのfiles（パスと内容）、npm のdependencies、registryDependencies、インストールコマンド。
get_install_command	{ names: string[] }	1つ以上の項目に対する npx cronus-ui add ... コマンド。
get_design_context	{ theme?: aurora|neutral|midnight|sunset|emerald, look?: default|brutalist|glass, format?: compact|extended }	Cronus のビジュアルスタイル（DESIGN.md）。UI を生成する前に読み込んでください。

これらには readOnlyHint: true の注釈が付いており、プロジェクトに変更を加えることはありません。

書き込みツール

ツール	入力	説明
compose_app	{ template: "saas"|"store"|"landing"|"landing-*"|"mail"|"chat"|"finance", brand?: string, dryRun?: boolean, yes?: boolean, skipInstall?: boolean, overwrite?: boolean, variant?: string[] }	プロジェクト内で cronus-ui compose <template> -y を実行します（エージェントはデフォルトで -y を指定します。テンプレートが指定されていない場合は saas を構成します）。--brand、--dry-run、--skip-install、--overwrite、および variant の各エントリに対する --variant <slug=id> を指定できます。ユーザーが検証済みテンプレートから複数ページのアプリ全体を作成したい場合は、ページを手書きするよりこちらを優先してください。新しいリポジトリのひな形は作成しません。
add_page	{ route: string, blocks: string, nav?: string, title?: string, chrome?: string, dryRun?: boolean, skipInstall?: boolean, overwrite?: boolean, manifest?: string, app?: string }	cronus-ui add-page --route <route> --blocks <blocks> を実行して、すでに構成済みのアプリにページを1つ追加します（ブロックをインストールし、積み重ねた <main> ページを書き込み、ナビゲーションを更新します）。--skip-install、--overwrite、--manifest（カスタム構成アプリ用）、および --app（プロジェクトに構成済みアプリが複数ある場合は必須）を指定できます。
set_theme	{ name: "aurora"|"neutral"|"midnight"|"sunset"|"emerald", mode?: "dark"|"light" }	組み込みプリセットを切り替えるため、cronus-ui theme set <name>（必要に応じて --mode）を実行します。Create Studio のパーマリンクには apply_theme を使用してください。
install_component	{ names: string[], overwrite?: boolean, skipInstall?: boolean }	プロジェクト内で cronus-ui add <names...> を実行します。コンポーネント／ブロックのソースファイルを書き込み、レジストリの依存関係を解決し、プロジェクトのパッケージマネージャーで npm 依存関係をインストールします。既存ファイルは overwrite が設定されていない限りスキップされます。ファイルがすでに存在し、ローカルの編集を破棄せずに上流の変更を取り込みたい場合は、upgrade_components を優先してください。
upgrade_components	{ names?: string[], all?: boolean, dryRun?: boolean, yes?: boolean, manifest?: string }	names が省略された場合はデフォルトで cronus-ui upgrade --all を、指定された場合は cronus-ui upgrade <names...> を実行します。インストール済みのコンポーネントと構成済みのページ／レイアウトを3方向マージし、ローカルの編集を保持します。install_component での上書きや compose --overwrite よりもこちらを優先してください。まず dryRun（--dry-run）を実行することを推奨します。-y は yes が true の場合にのみ指定します。カスタム構成アプリでは manifest（--manifest）を指定できます。
apply_theme	{ source: string, dryRun?: boolean }	プロジェクト内で cronus-ui theme add <source> を実行します。アプリのレイアウトのテーマ属性を更新し、グローバルスタイルシートにテーマのオーバーライドブロックを書き込み、cronus-ui.json にテーマを記録します。source には、Create Studio のパーマリンク、単独の c= ペイロード、またはエクスポートしたテーマ JSON ファイルを指定します。dryRun を指定すると、書き込みを行わずにプレビューします。

書き込みツールは構造化 JSON の結果を返します。結果には、status（success／failed／timeout）、検出された projectRoot、実行された正確な command、解析済みレポート（書き込み／スキップされたファイル、依存関係の状態、テーマの変更、CLI の注記など）、および CLI の stdout／stderr がそのまま含まれます。これらのツールには読み取り専用ではないことを示す注釈が付いています（destructiveHint: true、idempotentHint: true）。

書き込みの仕組み（セキュリティ）

サーバー自体がファイルを書き込むことはありません。書き込みツールは、バージョンが固定された cronus-ui CLI（bunx --bun cronus-ui@<the server's own version>。利用できない場合は npx -y にフォールバック）のみを起動します。そのため、プロジェクトに変更を加えるコードは、サーバーと一致する公開済み CLI リリースであり、読み取りツールが示すものと同じ固定レジストリから解決されます。子プロセスは検出されたプロジェクトルート（サーバーの作業ディレクトリから上方向にたどり、最も近い cronus-ui.json を含むディレクトリ。なければ最も近い package.json を含むディレクトリ）で、120 秒のタイムアウト付きで実行されます。項目名はレジストリのスラッグとして検証され、compose／add-page／theme／variant の引数はフラグのように見える値を指定できません。また、ブロック指定では -- や余分なスペースが拒否されるため、ツールの引数を使って CLI オプションを紛れ込ませることはできません。プロジェクトはすでに作成・初期化されている必要があります（npx create-cronus-app my-app --template saas、または既存のアプリ内で npx cronus-ui init）。そうでない場合、CLI は明確なエラーを表示して、何も書き込みません。MCP の書き込みツールが新しいリポジトリを作成することはありません。

リソース

リソース	URI	説明
registry-index	cronus-ui://registry/index	依存関係を含む、レジストリの全リスト（すべてのコンポーネントとブロック）を JSON 形式で提供します。
catalog-tags	cronus-ui://catalog/tags	Hydra が順位付けに使用する、タグ付きの簡潔なカタログです（ソースファイルは含みません）。

セットアップ

トランスポートは 2 種類あります。どちらかを選択してください。

トランスポート	URL／コマンド	ツール	使用する場合
Streamable HTTP（ホスト型）	https://aicronus.com/mcp	読み取り専用カタログ	v0、Lovable、Replit、Bolt、Base44、または URL を指定するクライアント
stdio（ローカル）	npx -y cronus-ui-mcp	読み取り＋書き込み（compose、add-page、install、theme、upgrade）	Claude Code、Cursor、VS Code、Codex、Grok CLI、OpenCode、Zed

1 つのコマンドで、プロジェクトのすべてのファイルを書き込みます。

npx cronus-ui mcp init

一部のクライアントだけを対象にするには --client cursor,vscode を指定します。--force は既存のファイルを上書きします。create-cronus-app と cronus-ui ai も同じファイルを生成します。コードスニペットは aicronus.com/docs/mcp をご覧ください。

stdio サーバーは npx で実行されるため、グローバルインストールは不要です。

Claude Code

claude mcp add cronus-ui -- npx -y cronus-ui-mcp

ホスト型（読み取り専用）：

claude mcp add --transport http cronus-ui https://aicronus.com/mcp

Cursor／Windsurf（および mcpServers JSON を使用するその他のクライアント）

MCP 設定に以下を追加します（例：~/.cursor/mcp.json、またはプロジェクト内の .cursor/mcp.json）。

{
  "mcpServers": {
    "cronus-ui": {
      "command": "npx",
      "args": ["-y", "cronus-ui-mcp"]
    }
  }
}

ホスト型（読み取り専用）：

{
  "mcpServers": {
    "cronus-ui": {
      "url": "https://aicronus.com/mcp"
    }
  }
}

別のレジストリを指定するには、env ブロックを追加します（以下を参照）。

{
  "mcpServers": {
    "cronus-ui": {
      "command": "npx",
      "args": ["-y", "cronus-ui-mcp"],
      "env": { "CRONUS_UI_REGISTRY": "/absolute/path/to/registry" }
    }
  }
}

設定

環境変数	デフォルト	説明
CRONUS_UI_REGISTRY	固定バージョン用の公開 Cronus UI レジストリ。	レジストリソースの上書きに使用します。http(s) のベース URL またはローカルディレクトリのパスを指定できます。フォークのテストや、未公開のレジストリをローカルで試す場合に便利です。また、install_component、compose_app、add_page、upgrade_components（--registry）によって CLI にも渡されます。
CRONUS_MCP_CLI_CMD	bunx --bun cronus-ui@<version>、次に npx -y cronus-ui@<version>	書き込みツール用の起動コマンドを上書きします（空白で分割）。例：ローカルの CLI チェックアウトを実行するには bun /repo/packages/cli/src/index.ts を指定します。
CRONUS_MCP_CLI_TIMEOUT_MS	120000	書き込みツールが実行する 1 回の CLI 実行に許される実時間の上限です。

サーバーは一覧表示用に index.json を、項目の詳細用に <name>.json を取得し、プロセスの存続期間中、両方をメモリにキャッシュします。診断情報はすべて stderr に書き込まれ、stdout には MCP プロトコルのみが出力されます。

エージェントのフロー例

Greenfield は MCP ツールではありません。 まず新しいアプリをスキャフォールドしてから、そのプロジェクトを MCP サーバーに指定してください。

npx create-cronus-app my-app --template saas

MCP の書き込みツールを実行できるのは、初期化済みのプロジェクト（cronus-ui.json または少なくとも package.json があるプロジェクト）内だけです。次の手順で進めます。

1. compose_app { "template": "saas", "brand": "Acme" } → SaaS テンプレートのブロックをインストールし、それらを <main> 内に配置するページを生成して書き込みます。省略可能なオプションは variant: ["login=split"]、skipInstall、overwrite です。
2. add_page { "route": "/pricing", "blocks": "pricing,cta", "nav": "Pricing" } → 合成済みのアプリにルートを 1 つ追加します。省略可能なオプションは skipInstall、overwrite、manifest（カスタムの合成アプリ）です。
3. set_theme { "name": "sunset", "mode": "dark" } → 組み込みのプリセットを切り替えます。（Studio のパーマリンクの適用には、代わりに apply_theme を使用します。）
4. upgrade_components { "dryRun": true } → インストール済みのコンポーネントと合成済みのページ／レイアウトを、現在のレジストリと比較した 3 ウェイマージのプレビューを表示します（upgrade --all --dry-run）。ローカルの編集を保持するため、overwrite を指定した install_component（および compose --overwrite）よりこちらを優先してください。アプリをカスタムの --manifest から合成した場合は、manifest を指定できます。

ドキュメントを読んでいない Hydra／エージェント向けの、少ないコンテキストでの選び方：

1. match_catalog { "query": "login page with smooth animation" } → 2 つの検索（intent=login、motion=smooth）を実行し、簡潔なカード（説明、デザインスタイル、パレット、モーション、インテント）から選びます。ソースコードは出力されません。
2. get_component { "name": "<picked name>" } → 選択後にのみソースコードを取得します。
3. install_component { "names": ["<picked name>"] } → プロジェクトに書き込みます。

名前を指定して単一のプリミティブを使う場合は、引き続きレジストリツールを使用してください。

1. search_registry { "query": "table" } → data-table、table、filter-bar を検索します。
2. get_component { "name": "data-table" } → .tsx のソース、npm 依存関係（@tanstack/react-table など）、レジストリ依存関係、npx cronus-ui add data-table を返します。
3. install_component { "names": ["data-table"] } → 固定された CLI がプロジェクトにファイルを書き込み、レジストリ依存関係を取得して npm パッケージをインストールします。結果には書き込まれたすべてのファイルが記載されます。

開発

bun run build      # tsc -> dist
bun run typecheck  # tsc --noEmit
bun run test       # vitest (tool logic, no network)

ライセンス

MIT