NVIDIA Elements — Claude Code MCP server: how to install
Connects the NVIDIA Elements design system to coding assistants. Helps generate and validate UI interfaces for robotics and autonomous vehicles.
claude mcp add elements -- npx -y @nvidia-elements/cliWhat NVIDIA Elements does
The @nvidia-elements/cli package operates in two modes. It acts as an interactive terminal command and runs as an MCP server via nve mcp. This gives coding agents direct access to the Elements design system.
The server exposes nve-* custom elements schemas. Assistants can fetch component APIs, retrieve icons, or test templates against design rules via api.validate.
Running nve project.setup automates MCP configuration in Claude Code and Cursor. In headless CI environments, agents must call $HOME/.nve/bin/nve directly. Otherwise, the command will fail.
What it helps with
- inspect documentation for nve-* UI components and attributes
- validate templates and HTML files against design system rules
- look up semantic tokens and custom CSS properties for styling
- scaffold initial project structures using Elements starters
Example prompts for the agent
- Check if my markup follows Elements guidelines with api.validate
- Find the documentation and properties for nve-card
- Generate a sample dashboard screen using /artifact
How to install NVIDIA Elements
Platform CLI
claude mcp add elements -- npx -y @nvidia-elements/cliPlatform CLI
codex mcp add cli -- npx -y @nvidia-elements/cliConfig file
{
"mcpServers": {
"cli": {
"command": "npx",
"args": [
"-y",
"@nvidia-elements/cli"
]
}
}
}Config file
{
"servers": {
"cli": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@nvidia-elements/cli"
]
}
}
}Platform CLI
gemini mcp add cli npx -y @nvidia-elements/cliStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about NVIDIA Elements
How to install NVIDIA Elements in Claude Code?
Run claude mcp add elements -- npx -y @nvidia-elements/cli in your terminal. Restart Claude Code after installation to load the new tools.
What does NVIDIA Elements do?
It exposes nve-* custom element specifications, semantic CSS variables, and icons to your AI agent. It also lets assistants validate markup templates against official design guidelines.
How to automatically configure the MCP server for a project?
Execute nve project.setup in your project directory. The CLI detects your package manager and writes configuration files for Claude Code, Cursor, or Codex.
