NVIDIA Elements

@nvidia-elements/cli

面向 AI/ML 工厂、机器人和自动驾驶汽车的 NVIDIA Design System 和 UI Agent Harness。

@nvidia-elements/cli 是一款双模式命令行工具，适用于 Elements Design System。它提供交互式 CLI 命令和用于 AI 助手集成的 Model Context Protocol（MCP）服务。

用途

此软件包提供两种主要模式：

1. 交互式 CLI（nve 命令） - 提供交互式提示的命令行界面，用于：

   • 发现和搜索组件 API
   • 浏览和搜索示例模板
   • 检查和验证模板
   • 搭建项目脚手架并检查项目健康状况
   • 查看变更日志和版本信息
   • 访问设计令牌
   • 查找图标名称
   • 访问内置的 Agent 技能

2. MCP 服务（nve mcp 命令） - Model Context Protocol 服务，可：

   • 向 AI 助手（Claude、Cursor 等）提供 MCP 支持的工具
   • 为常见任务提供上下文相关的提示词
   • 支持使用 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

对于 Agent 和 CI，可直接调用规范路径：macOS 和 Linux 上的 $HOME/.nve/bin/nve，或 Windows 上的 $env:LOCALAPPDATA\nve\bin\nve.exe。

也可以使用 Node.js 和 npm 安装。

npm install -g @nvidia-elements/cli

使用方法

命令	描述
nve	显示关于信息和帮助输出。
nve api.list [format]	获取所有可用 Elements（nve-*）API 和组件的列表。
nve api.get <names..> [--format <format>]	获取一个到五个已知组件或属性（nve-*）的文档。
nve api.validate [paths..]	使用 Elements lint 规则检查来自指定文件路径、glob 模式或标准输入（--stdin）的 HTML 和 JSON。
nve api.imports.get <template>	获取 HTML 模板使用 Elements API（nve-*）时所需的 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 Agent 技能。
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	/artifact 创建一个示例登录表单
/doctor	验证 Elements 设置和 MCP 配置	/doctor
/create-project	创建新的 Elements 入门项目	/create-project 创建一个待办应用
/migrate	从已弃用的 Elements API 迁移	/migrate 将此项目从已弃用的 Elements API 迁移

NVIDIA Elements 技能

Elements 提供了一个 elements 技能，其中包含用于创建 artifact、检查设置、集成项目和迁移的参考文件。在当前项目中安装完整目录：

nve skills.install

这会写入 .agents/skills/elements/ 和 .claude/skills/elements/。添加 --global，即可将其安装到当前用户的 ~/.agents/skills/elements/。此命令会替换所选目标位置中已有的 elements 目录，避免保留过时的参考文件。

或者，使用开源的 skills CLI 安装 Elements Agent 技能：

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

此方式不会安装 Elements CLI 或配置 MCP 服务。使用 nve project.setup 完成项目设置，并继续使用 CLI 或 MCP 工具进行确定性的 API 查询和模板验证。

MCP 工具

工具	描述
api_list	获取所有可用 Elements（nve-*）API 和组件的列表。
api_get	按名称获取已知组件或属性的文档（nve-*）。
api_validate	使用 Elements lint 规则检查 HTML 和 JSON 文件或提供的内容。
api_imports_get	获取使用 Elements API 的指定 HTML 模板的 esm 导入项（nve-*）。
api_tokens_list	获取可用于主题设置的语义 CSS 自定义属性／设计 token。
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 注册表