NVIDIA Elements

@nvidia-elements/cli

AI/ML ファクトリー、ロボティクス、自動運転車向けの NVIDIA Design System および UI エージェントハーネスです。

@nvidia-elements/cli は、Elements Design System 用のデュアルモードのコマンドラインツールです。対話型 CLI コマンドと、AI アシスタント連携のための Model Context Protocol（MCP）サーバーを提供します。

目的

このパッケージは、主に次の 2 つのモードで動作します。

1. 対話型 CLI（nve コマンド） - 次の機能を備えた対話型プロンプト付きコマンドラインインターフェースです。

   • コンポーネント API の検索と確認
   • サンプルテンプレートの閲覧と検索
   • テンプレートのリントと検証
   • プロジェクトのひな形作成とヘルスチェック
   • 変更履歴とバージョン情報
   • デザイントークンへのアクセス
   • アイコン名の検索
   • 同梱されたエージェントスキルへのアクセス

2. MCP サーバー（nve mcp コマンド） - Model Context Protocol サーバーで、次の機能を提供します。

   • MCP 対応ツールを AI アシスタント（Claude、Cursor など）に公開します
   • 一般的なタスク向けに、コンテキストに応じたプロンプトを提供します
   • Elements コンポーネントを使った AI 支援開発を可能にします
   • Elements の知識を AI ワークフローに直接統合します

はじめに

最も簡単に始めるには、インストールスクリプトを実行してください。

curl -fsSL https://nvidia.github.io/elements/install.sh | bash

Windows では、PowerShell インストーラーを実行してください。

irm https://nvidia.github.io/elements/install.ps1 | iex

エージェントおよび CI では、macOS と Linux では $HOME/.nve/bin/nve を、Windows では $env:LOCALAPPDATA\nve\bin\nve.exe を直接呼び出してください。

または、Node.js と npm を使ってインストールすることもできます。

npm install -g @nvidia-elements/cli

使用方法

コマンド	説明
nve	About とヘルプを表示します。
nve api.list [format]	利用可能なすべての Elements（nve-*）API とコンポーネントの一覧を取得します。
nve api.get <names..> [--format <format>]	既知のコンポーネントまたは属性（nve-*）1～5 件のドキュメントを取得します。
nve api.validate [paths..]	明示的なファイルパス、glob パターン、または Elements の lint ルールを使用して標準入力（--stdin）から HTML と JSON をチェックします。
nve api.imports.get <template>	Elements API（nve-*）を使用して、HTML テンプレートの ESM インポートを取得します。
nve api.tokens.list [format] [query]	テーマ設定に利用できるセマンティック CSS カスタムプロパティとデザイントークンを取得します。
nve api.icons.list [format]	nve-icon と nve-icon-button で利用できるアイコン名を取得します。
nve examples.list [format]	利用可能な Elements（nve-*）のスターターテンプレート、パターン、サンプルを取得します。
nve examples.get <id> [format]	ID で指定した既知のサンプルまたはパターンの完全なテンプレートを取得します。
nve project.create <type> [cwd] [start]	新しいスタータープロジェクトを作成します。
nve project.setup [cwd]	Elements を使用するようにプロジェクトをセットアップまたは更新します。
nve project.validate <type> [cwd]	プロジェクトの設定と依存関係をチェックします。
nve packages.list	すべての Elements パッケージの最新公開バージョンを取得します。
nve packages.get <name>	指定した Elements パッケージの詳細を取得します。
nve packages.changelogs.get <name> [format] [limit]	パッケージ名で変更履歴の詳細を取得します。
nve skills.install [--global]	プロジェクトまたは現在のユーザー向けに Elements エージェントスキルをインストールします。
nve mcp	MCP サーバーを起動します。

グローバルオプション

オプション	説明
--help	ヘルプを表示します。
--version	バージョン番号を表示します。
--upgrade	Elements CLI（nve）を最新バージョンにアップグレードします。
--debug	ツールのデバッグ出力を有効にします。

MCP

クイックセットアップ

MCP を設定する最も簡単な方法は、project.setup コマンドを使用することです。

nve project.setup

このコマンドは、パッケージマネージャーを検出し、Cursor、Codex、Claude Code 用に MCP サーバーを設定して、Elements のコア依存関係をプロジェクトに追加します。

Claude Code

.mcp.json ファイルに設定を追加して、Claude Code にインストールします。このファイルは通常、~/.config/claude-code/.mcp.json または Windows の %APPDATA%\claude-code\.mcp.json にあります。

{
  "mcpServers": {
    "nvidia_elements": {
      "description": "NVIDIA Elements UI Design System (nve-*), custom element schemas, APIs and examples",
      "command": "nve",
      "args": ["mcp"]
    }
  }
}

設定を追加したら、変更を反映するために Claude Code を再起動します。これで、会話内で Elements MCP ツールを使用できるようになります。

Cursor

以下の MCP 設定を使用して、Cursor にインストールします。

// .cursor/mcp.json
{
  "mcpServers": {
    "nvidia_elements": {
      "description": "NVIDIA Elements UI Design System (nve-*), custom element schemas, APIs and examples",
      "command": "nve",
      "args": ["mcp"]
    }
  }
}

Codex

以下の MCP 設定を使用して、Codex にインストールします。

[mcp_servers.nvidia_elements]
description = "NVIDIA Elements UI Design System (nve-*), custom element schemas, APIs and examples"
command = "nve"
args = ["mcp"]

プロンプト

プロンプト	説明	プロンプトの例
/artifact	スタンドアロンの Elements UI アーティファクトを作成します	/artifact ログインフォームの例を作成してください
/doctor	Elements のセットアップと MCP の設定を確認します	/doctor
/create-project	新しい Elements スタータープロジェクトを作成します	/create-project ToDo アプリを作成してください
/migrate	非推奨の Elements API から移行します	/migrate このプロジェクトを非推奨の Elements API から移行してください

NVIDIA Elements スキル

Elements には、アーティファクトの作成、セットアップの確認、プロジェクトへの統合、移行に関するリファレンスファイルを備えた elements スキルが 1 つあります。現在のプロジェクトにディレクトリ全体をインストールします。

nve skills.install

これにより、.agents/skills/elements/ と .claude/skills/elements/ が書き込まれます。--global を追加すると、代わりに現在のユーザーの ~/.agents/skills/elements/ にインストールできます。このコマンドは、選択した保存先にある既存の elements ディレクトリを置き換えるため、古いリファレンスが残りません。

または、オープンソースの skills CLI で Elements エージェントスキルをインストールできます。

npx skills add https://github.com/nvidia/elements --skill elements

この方法では、Elements CLI はインストールされず、MCP サーバーも設定されません。プロジェクトを完全にセットアップするには nve project.setup を使用し、決定論的な API 検索とテンプレートの検証には引き続き CLI または MCP ツールを使用してください。

MCP ツール

ツール	説明
api_list	利用可能なすべての Elements（nve-*）API とコンポーネントの一覧を取得します。
api_get	名前（nve-*）で指定した既知のコンポーネントまたは属性のドキュメントを取得します。
api_validate	Elements の lint ルールを使って、HTML ファイル、JSON ファイル、または指定されたコンテンツをチェックします。
api_imports_get	Elements API（nve-*）を使用する指定の HTML テンプレートの ESM インポートを取得します。
api_tokens_list	テーマ設定に使用できるセマンティック CSS カスタムプロパティ／デザイントークンを取得します。
packages_list	公開済みのすべての Elements パッケージの最新バージョンを取得します。
packages_get	指定した Elements パッケージの詳細を取得します。
packages_changelogs_get	パッケージ名で変更履歴の詳細を取得します。
examples_list	利用可能な Elements（nve-*）のパターンと例の一覧を取得します。
examples_get	ID で指定した既知の例またはパターンの完全なテンプレートを取得します。
project_create	新しいスタータープロジェクトを作成します。
project_validate	設定の問題と依存関係がないかプロジェクトを確認します。
project_setup	Elements を使用するようにプロジェクトをセットアップまたは更新します。

リンク

• ドキュメント
• 変更履歴
• GitHub リポジトリ
• npm
• MCP レジストリ