Elements MCP

The NVIDIA Elements MCP server connects AI coding assistants to the Elements design system. It gives tools like Claude Code, Cursor, and Codex direct access to component APIs, design tokens, skills, template validation, project scaffolding, and interactive MCP Apps views so your AI assistant can build with Elements effectively

Install CLI

Install the Elements CLI to your system. This creates a canonical executable path and adds the nve command to your path when possible.

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

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

# install the CLI
npm install -g @nvidia-elements/cli

Quick Setup

After you install the CLI, the fastest way to configure the Elements MCP uses the setup command. This detects your package manager, configures the MCP server for Cursor, Claude Code, and Codex, and adds Elements core dependencies to the project.

nve project.setup

Manual Setup

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

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

# .codex/config.toml
[mcp_servers.elements]
description = "NVIDIA Elements UI Design System (nve-*), custom element schemas, APIs and examples"
command = "nve"
args = ["mcp"]

Usage

Prompts

Skills

Elements provides one elements skill for persistent authoring context. Install its complete directory, including task-specific reference files, from the project root:

nve skills.install

Use nve skills.install --global to install the skill for the current user. The MCP server does not expose skill listing or retrieval tools. Its four prompts load the matching artifact, doctor, integration, and migration references from the same skill source.

Tools

Call api_validate with { "paths": ["src/app.html"] } or supplied content such as { "template": "<nve-button></nve-button>", "format": "json" }; supplied content defaults to HTML. Set lang to json and provide filename for JSON content. JSON results contain ok, a complete summary, and diagnostics with locations, severity, rule, suggestion, and whether a fix is available.

MCP Apps UI

The Elements MCP server supports MCP Apps for hosts that implement the io.modelcontextprotocol/ui extension. The same nve mcp command advertises the text/html;profile=mcp-app MIME type, registers ui://elements/* resources, and attaches _meta.ui.resourceUri metadata to tools that have an app view. You do not need separate setup.

Hosts with MCP Apps support can render these views inline in the conversation. Hosts without Apps support still receive the normal text and structured tool output.

Each app resource is a self-contained HTML document that includes Elements components, theme CSS, typography CSS, layout CSS, and a small MCP Apps client. The client initializes the app, reports size changes, receives tool input and result notifications, and calls server tools through the MCP Apps message channel when it needs more data. Message handling validates the parent origin before reading inbound JSON-RPC payloads.

Client support for MCP Apps is host-specific. Check the MCP extension support matrix before relying on inline Apps behavior in a specific assistant.

Troubleshooting

403 Forbidden

A 403 Forbidden error means your token has expired. Re-authenticate to resolve it.

npm config set registry https://registry.npmjs.org && npm login --auth-type=legacy

Unsupported Engine

An Unsupported engine warning means your Node.js version is out of date. The CLI requires Node.js v20 or later. Update Node.js and try again.

Links

• MCP Registry