SkillAtlasSkill 详情

ui

A reference implementation of the Agentic Commerce Protocol (ACP) and Universal Commerce Protoco...

审核状态:已审核Quality 72Security 70

复制安装命令

用 Codex 或 Claude 安装复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它先审查 Skill 页面再帮你安装。

复制前请先查看来源、License 和安全提示。

项目 README

来源文件:README.md

抓取于 2026年7月29日

NVIDIA AI Blueprint: Retail Agentic Commerce

License Python 3.12+ Node.js 20.9+

Banner

A reference implementation of the Agentic Commerce Protocol (ACP) and Universal Commerce Protocol (UCP), built for merchant-controlled checkout, payments, and agent orchestration.

Architecture

Agentic Commerce Diagram

What You Get

  • Merchant API (ACP + UCP discovery/A2A)
  • PSP service for delegated payment flows
  • Apps SDK MCP server + widget
  • NAT agents for promotion, recommendations, search, and post-purchase messaging
  • Demo UI with protocol and agent activity panels

Architecture (Default Deployment)

flowchart TB
    subgraph Client["Client Layer"]
        CA[🤖 Client Agent]
        subgraph Webhooks["UI Webhook Receivers"]
            WH_ACP["/api/webhooks/acp"]
            WH_UCP["/api/webhooks/ucp"]
            BRIDGE["Webhook → Agent Activity Bridge"]
        end
    end

    subgraph Integration["Integration Options"]
        direction LR
        subgraph SDK["Apps SDK Layer"]
            MCP["📦 Apps SDK MCP Server<br/>(Port 2091)"]
            subgraph tools["Entry Point"]
                T1["search-products<br/>(returns widget)"]
            end
            WIDGET["🛒 Autonomous Widget<br/>(cart, checkout, recs)"]
        end

        subgraph Native["Native Protocol Layer"]
            ACP["🔗 ACP REST Transport"]
            UCP["🔗 UCP A2A Transport"]
            subgraph endpoints["Protocol Endpoints"]
                E1["ACP: /checkout_sessions/*"]
                E2["UCP: /.well-known/ucp"]
                E3["UCP: /.well-known/agent-card.json"]
                E4["UCP: /a2a (message/send)"]
            end
        end
    end

    subgraph Backend["Backend Services"]
        MERCHANT["🏪 Merchant API<br/>(Port 8000)"]
        PSP["💳 PSP Service<br/>(Port 8001)"]
        
        subgraph merchant_features["Merchant Features"]
            M1[Products & Sessions]
            M2[Checkout & Promotions]
            M3[Orders & Recommendations]
        end
        
        subgraph psp_features["PSP Features"]
            P1[Payment Delegation]
            P2[Vault Tokens]
            P3[Idempotency]
        end
    end

    subgraph Agents["NAT Agents"]
        PROMO["🎯 Promotion Agent<br/>(Port 8002)"]
        POST["📨 Post-Purchase Agent<br/>(Port 8003)"]
        RECS["🔍 Recommendation Agent<br/>(Port 8004)"]
        SEARCH["🔎 Search Agent<br/>(Port 8005)"]
    end

    subgraph NIMs["NVIDIA NIMs"]
        LLM["🧠 Nemotron Nano LLM<br/>(Port 8010)"]
        EMBED["📐 NV-EmbedQA-E5<br/>(Port 8011)"]
    end

    subgraph Data["Data Stores"]
        SQLITE[("🗄️ SQLite<br/>Application DB")]
        MILVUS[("🧠 Milvus<br/>Vector DB")]
    end

    CA -->|MCP| MCP
    CA -->|REST| ACP
    CA -->|A2A JSON-RPC| UCP
    MCP -.->|loads| WIDGET
    WIDGET -->|MCP tools| MCP
    MCP --> MERCHANT
    ACP --> E1
    UCP --> E2
    UCP --> E3
    UCP --> E4
    E1 --> MERCHANT
    E4 --> MERCHANT
    MERCHANT --> PSP
    MERCHANT --> PROMO
    MERCHANT --> POST
    MERCHANT --> RECS
    MERCHANT --> SEARCH
    MERCHANT --> SQLITE
    MERCHANT -->|ACP post-purchase webhook| WH_ACP
    MERCHANT -->|UCP order webhook| WH_UCP
    WH_ACP --> BRIDGE
    WH_UCP --> BRIDGE
    BRIDGE --> CA
    PROMO --> LLM
    POST --> LLM
    RECS --> LLM
    RECS --> EMBED
    SEARCH --> LLM
    SEARCH --> EMBED
    EMBED --> MILVUS
    RECS --> MILVUS
    SEARCH --> MILVUS

Quick Start (Codex, Claude Code)

This is the recommended path. It does not require local NIM containers.

Prerequisites

1. Clone and Configure

git clone https://github.com/NVIDIA/Retail-Agentic-Commerce.git
cd Retail-Agentic-Commerce
cp env.example .env

Update .env:

NVIDIA_API_KEY=nvapi-xxx

In Codex or Claude Code, simply run: /setup

Manual Deployment Options

ModeDescriptionGuide
Docker (recommended)Full stack in containers via Docker ComposeDocker Deployment
Local DevelopmentServices on host, automated via install.shLocal Development

Quick local start:

./install.sh   # install deps + start all 8 services
./stop.sh      # stop everything

Hardware Requirements (Local NIM Deployment)

Local NIM deployment requires NVIDIA GPUs to host the inference models. The following table summarizes the models and their GPU requirements:

ModelPurposeMinimum GPURecommended GPU
Nemotron-Nano-30B-A3BLLM — prompt planning, recommendations, search, promotions1× A100 (80 GB)1× H100 (80 GB)
NV-EmbedQA-E5-v5Embedding — semantic search and product retrieval1× A100 (80 GB)1× H100 (80 GB)

Total: 2× A100 (80 GB) minimum, 2× H100 (80 GB) recommended for best performance.

Note: These requirements apply only to self-hosted local NIM deployment. The default deployment uses public NVIDIA API endpoints and does not require any GPU hardware.

Optional: Local NIM Deployment (GPU)

Only needed for self-hosted local inference. The default deployment already works with public endpoints.

For step-by-step instructions (prerequisites, GPU setup, NIM containers, validation), see the Local NIM Deployment Notebook.

Project Structure

src/
├── merchant/      # Merchant API (FastAPI)
├── payment/       # PSP service (FastAPI)
├── apps_sdk/      # MCP server + widget
├── agents/        # NAT agents and configs
└── ui/            # Next.js demo UI

deploy/
├── docker-deployment.md
├── local-development.md
└── 1_Deploy_Agentic_Commerce.ipynb

docs/
├── architecture.md
├── features/
└── specs/

Documentation

License

GOVERNING TERMS: The Blueprint scripts are governed by Apache License, Version 2.0, and enables use of separate open source and proprietary software governed by their respective licenses: Nemotron-Nano-V3, (ii) MIT license for NV-EmbedQA-E5-v5. The sample data is governed by the NVIDIA Data License for Retail Agentic Commerce.

This project will download and install additional third-party open source software projects. Review the license terms of these open source projects before use, found in License-3rd-party.txt.

开发与工程浏览器与自动化商业与运营

中风险

  • 来源需自行核对维护者身份。
  • 包含脚本或命令调用,安装前请复核。
  • 可能需要外部 token、网络权限或第三方服务。
  • 未检测到高风险命令。
  • 扫描发现:1 条。

Codex — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库:git clone https://github.com/NVIDIA-AI-Blueprints/Retail-Agentic-Commerce.git
  3. 将 "skills/ui" 文件夹复制到 Codex 的 skills 目录中。
  4. 重启 Codex 让新的 skill 生效。

Codex — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 Codex 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 Codex 让新的 skill 生效。

Claude Code — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库:git clone https://github.com/NVIDIA-AI-Blueprints/Retail-Agentic-Commerce.git
  3. 将 "skills/ui" 文件夹复制到 Claude Code 的 skills 目录中。
  4. 重启 Claude Code 让新的 skill 生效。

Claude Code — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 Claude Code 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 Claude Code 让新的 skill 生效。

Cursor — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库:git clone https://github.com/NVIDIA-AI-Blueprints/Retail-Agentic-Commerce.git
  3. 将 "skills/ui" 文件夹复制到 Cursor 的 skills 目录中。
  4. 重启 Cursor 让新的 skill 生效。

Cursor — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 Cursor 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 Cursor 让新的 skill 生效。

GitHub Copilot — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库:git clone https://github.com/NVIDIA-AI-Blueprints/Retail-Agentic-Commerce.git
  3. 将 "skills/ui" 文件夹复制到 GitHub Copilot 的 skills 目录中。
  4. 重启 GitHub Copilot 让新的 skill 生效。

GitHub Copilot — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 GitHub Copilot 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 GitHub Copilot 让新的 skill 生效。

Windsurf — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库:git clone https://github.com/NVIDIA-AI-Blueprints/Retail-Agentic-Commerce.git
  3. 将 "skills/ui" 文件夹复制到 Windsurf 的 skills 目录中。
  4. 重启 Windsurf 让新的 skill 生效。

Windsurf — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 Windsurf 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 Windsurf 让新的 skill 生效。
查看 SKILL.md 原文
name: ui
description: React and Next.js frontend development standards for Retail-Agentic-Commerce. Use when creating or modifying UI pages, components, hooks, styling, tests, or Apps SDK widget browser behavior in src/ui or related frontend surfaces.

UI Development

Use this skill for frontend changes in src/ui/ and related UI surfaces.

Stack

  • Next.js 15+ with the App Router.
  • React 19+.
  • TypeScript with strict typing.
  • Tailwind CSS and the repo's Kaizen UI conventions.
  • Vitest, React Testing Library, and browser validation when behavior changes.

Workflow

  1. Read AGENTS.md before coding.
  2. Read scoped docs or AGENTS files when the changed path has one.
  3. Implement the smallest spec-aligned change.
  4. Add or update tests for new behavior, regressions, and edge cases.
  5. Validate linting, formatting, type checking, tests, and browser behavior where relevant.

CI Parity

Run these commands from src/ui before committing UI-related changes:

pnpm lint
pnpm format:check
pnpm typecheck
pnpm test:run

If the change also touches backend code, run the backend CI parity commands in skills/features/SKILL.md.

Browser Validation

Use browser automation tools when available for:

  • New or changed user flows.
  • UI regressions.
  • Component interactions and state transitions.
  • Console or network behavior that matters to the change.

Validation should prove the real UI path works. Prefer snapshots or screenshots, interaction evidence, and console checks over assumptions.

React Standards

  • Use functional components and hooks.
  • Prefer Server Components where possible.
  • Use 'use client' only when interactivity or browser APIs require it.
  • Follow Next.js file conventions such as page.tsx, layout.tsx, loading.tsx, and error.tsx.
  • Use Next.js Image and Link where appropriate.
  • Avoid unnecessary client-side JavaScript.

TypeScript Standards

  • Type public props, hooks, and non-trivial functions explicitly.
  • Avoid any; justify unavoidable uses in a short comment.
  • Prefer local types that match API schemas and existing project patterns.
  • Do not leave unused imports, unreachable code, or production console.log calls.

Styling Standards

  • Use Tailwind utilities and existing design tokens.
  • Follow mobile-first responsive design.
  • Keep components accessible and keyboard usable.
  • Use semantic HTML and ARIA only where it improves accessibility.
  • Avoid inline styles unless a dynamic value cannot reasonably be expressed with the existing styling system.

Testing Standards

  • Name tests *.test.tsx or *.spec.tsx.
  • Test user-visible behavior, not implementation details.
  • Prefer getByRole and accessible queries over getByTestId.
  • Keep tests deterministic and independent of external services.

Completion Criteria

The work is incomplete if relevant tests or checks were skipped without an explicit reason, if the browser path was changed but not verified, or if the implementation does not match the repo docs and architecture.

发现问题?提交给管理员复核

评分:

评论 (0)

暂无评论,成为第一个评论者吧!