NVIDIA/elements — Elements Design System과 UI Agent Harness

개요

NVIDIA/elements는 AI/ML 팩토리, 로보틱스, 자율주행 도구를 위한 NVIDIA Design System과 UI Agent Harness를 함께 제공하는 공개 저장소다.[1][3]

저장소는 nve-* Web Components, 테마·CSS 유틸리티, starter 프로젝트, CLI, MCP server, agent skills를 하나의 개발 흐름으로 묶는다.[3][6][7]

이번 조사는 main의 고정 커밋 3fd90caa562cfc23f8d2fbfddd13ad8f7107d4b4를 기준으로 수행했다.[1][2]

GitHub API snapshot은 저장소를 public·비아카이브 상태, TypeScript, Apache-2.0 라이선스로 보고하며 조사 시점의 homepage는 https://nvidia.github.io/elements/다.[1]

무엇을 제공하는가

Elements의 핵심 UI 계층은 Lit 기반의 framework-agnostic Custom Elements이며 React, Angular, Vue, Svelte, Lit, plain HTML 등에서 사용할 수 있다.[3][5]

운영 화면의 대상은 AI/ML 인프라, autonomous vehicle tooling, robotics console처럼 상태·밀도·검증 가능성이 중요한 애플리케이션이다.[3][5]

공개 패키지는 작은 단위로 나뉘어 애플리케이션이 필요한 기능만 선택하도록 설계되어 있다.[18]

대표 패키지 버전은 고정 커밋 기준 @nvidia-elements/core 2.3.0, @nvidia-elements/themes 2.0.0, @nvidia-elements/styles 2.1.2다.[18][19][20]

core는 컴포넌트와 Custom Elements metadata를 제공하고, themes는 색상·타이포그래피·간격 테마를 제공하며, styles는 layout·typography·view-transition CSS 유틸리티를 제공한다.[18][19][20]

디자인 토큰과 컴포넌트 계약

공식 DESIGN.md는 Elements UI system 전용 문서이며 모든 NVIDIA 웹사이트의 시각 규칙을 설명하는 문서가 아니라고 명시한다.[5]

문서의 front matter는 nve-sys-* semantic token, Inter/Roboto Mono typography, radius·spacing scale의 기준값을 선언한다.[5]

애플리케이션은 resolved 색상값을 복사하기보다 --nve-sys-* CSS custom property를 사용해야 dark·high-contrast·사용자 테마가 유지된다.[5]

컴포넌트 API는 공개 properties, events, slots, CSS parts, accessibility behavior를 live API documentation의 규범으로 삼는다.[5]

예시는 nve-button, nve-input, nve-card, nve-dialog, data grid 등의 기존 컴포넌트를 우선 사용하고, shadow-root 내부나 undocumented internals에 의존하지 않도록 안내한다.[5]

core 패키지는 define.js entrypoint를 통한 명시적 등록과 side-effect-free export를 함께 제공한다.[18]

모노레포 구조와 개발 흐름

루트 workspace는 Node.js 26.4.0, pnpm 11.9.0, Wireit을 기준으로 하며 Go starter와 Git LFS·Playwright·Vale도 개발 환경에 포함한다.[4][6][7]

루트 ci는 format·lint·metadata·internal tooling과 각 프로젝트의 build/test를 Wireit dependency graph로 연결한다.[6][7]

저장소에는 core, forms, themes, styles, code, markdown, media, monaco, pages, site, internals, cli, create, starters 등의 workspace가 있다.[3][4][7]

npm create @nvidia-elements와 pnpm create @nvidia-elements는 실제 scaffolding을 @nvidia-elements/cli에 위임하는 얇은 wrapper다.[21]

starter 목록에는 React, Angular, Vue, Svelte 등 여러 프레임워크와 MCP App starter가 포함된다.[3][7][22]

CLI와 MCP agent harness

@nvidia-elements/cli는 대화형 nve CLI와 nve mcp stdio MCP server의 dual-mode 도구다.[8][9]

CLI는 API·예제·템플릿 validation·imports·tokens·icons·packages·projects·skills·changelog를 조회하고 프로젝트를 생성·설정·검증한다.[8][9]

동일한 tool registry가 CLI와 MCP에서 공유되므로 사람은 터미널 명령으로, AI assistant는 MCP tool로 같은 Elements metadata와 validation 계층을 사용할 수 있다.[13][14]

@tool() decorator는 JSON Schema input/output, support flags, annotations, command name을 runtime metadata로 만들고, 서비스명과 메서드명을 api_list 같은 CLI/MCP tool name으로 변환한다.[13]

API 계층은 component/attribute 목록과 상세 문서, HTML template validation, ESM imports, semantic CSS tokens, icon 목록을 제공한다.[15]

Examples 계층은 starter·pattern 목록과 full template을 제공하고 MCP App preview에서는 lint를 통과한 custom template을 inline render할 수 있다.[8][22]

Packages 계층은 published package version, package detail, changelog를 조회한다.[8][16]

Skills 계층은 about, authoring, doctor, artifact, integration, migration, search, elements 등의 bundled context를 설치 없이 반환한다.[8][17]

MCP server는 MCP 지원 tool만 등록하고 JSON Schema를 Zod로 변환하며 structured output, progress notification, MCP UI resource를 지원한다.[12][13]

기본 MCP tool annotation은 read-only·idempotent·non-destructive 방향이지만, project.create와 project.setup은 파일·의존성·MCP 설정을 바꾸므로 destructive/idempotent 특성을 별도로 선언한다.[12][16]

MCP server manifest는 io.github.NVIDIA/elements, @nvidia-elements/cli 2.1.10, nve mcp, stdio transport를 선언한다.[10]

Claude Code, Cursor, Codex는 모두 command = nve, args = [mcp] 형태로 연결할 수 있다.[8][10][11]

프로젝트 설정과 MCP App

nve project.setup은 package manager를 감지하고 MCP 설정·core dependencies·package update를 한 번에 구성하는 경로다.[8][16]

project.create는 starter를 만들고 agent config를 설치한 뒤 의존성 setup/update를 수행하며 선택적으로 starter process를 시작한다.[16]

MCP App starter는 TypeScript·Vite·NVIDIA Elements로 single-file app resource와 stdio MCP server를 만들고 MCP Inspector로 확인한다.[22]

Playground tool은 ELEMENTS_PLAYGROUND_BASE_URL이 있을 때만 service registry에 추가되며, 없는 환경에서는 playground 생성 도구가 노출되지 않는다.[14]

Elements의 공식 MCP 문서와 npm package도 CLI/MCP 설치 경로를 별도로 제공하므로, hosted skill endpoint만으로 CLI 설치와 MCP 설정이 완료된다고 이해하면 안 된다.[8][23][24]

검증·관찰

고정 checkout에서 git diff --check와 JSON manifest/package parsing을 수행했고, raw capture body SHA-256은 d0543a2f27d8429e6b8595a4b7968b752bd4d3345f47fbcf78f252dafe86a5de로 기록했다.

이 조사 환경의 Node.js는 24.19.0이며 저장소가 요구하는 Node.js 26.4.0과 다르다.[4][6]

이 환경에는 pnpm, mise, go가 없어 pnpm install --frozen-lockfile과 전체 pnpm run ci는 실행하지 않았다.[4][6]

따라서 이번 문서는 고정 소스 구조·설계·MCP 계약을 검증한 조사이며, 이 환경에서 전체 빌드·브라우저 accessibility/visual/Lighthouse suite가 통과했다는 의미는 아니다.

강점

컴포넌트 metadata에서 API docs·imports·examples·tokens·validation을 생성하므로 LLM이 임의의 nve-* property나 token을 발명할 가능성을 줄인다.[5][13][15]

CLI와 MCP가 같은 schema-driven tool registry를 사용해 사람용 terminal workflow와 agent workflow의 계약을 일치시킨다.[8][12][13]

Design System, lint, accessibility·visual·SSR·Lighthouse 테스트, starter와 MCP App을 같은 monorepo에서 관리하는 점이 운영 UI 표준화에 유리하다.[4][18]

주의점

전체 CI는 Node·pnpm·mise·Go·Git LFS·Playwright·Vale와 수많은 workspace dependency를 요구하므로 단순 npm package 설치보다 repository 개발 환경의 무게가 크다.[4][6][7]

project.create와 project.setup은 실제 파일·package manifest·MCP 설정을 변경하므로 agent가 자동 호출할 때 작업 디렉터리와 변경 범위를 먼저 확인해야 한다.[16]

MCP는 stdio 프로세스와 local filesystem/project context를 전제로 하므로 remote hosted MCP처럼 무조건 무상태·read-only인 시스템으로 분류하면 안 된다.[10][12][16]

CLI source의 VERSION = '0.0.0'과 package/server manifest의 2.1.10이 분리되어 있어, 소스 checkout을 직접 실행할 때는 release build가 version injection을 수행하는지 확인해야 한다.[9][10][12]

Sources

description	AI/ML·로보틱스·자율주행용 Web Components, 디자인 토큰, CLI/MCP agent harness를 묶은 NVIDIA의 TypeScript 모노레포.
tags	ai-agents, dev-tools, open-source, typescript, cli

LLM Wiki

탐색기