Adobe Commerce App Builder용 AI 코딩 개발자 도구

전체적으로 최신 Adobe I/O CLI를 설치합니다.

npm install -g @adobe/aio-cli

다음 플러그인을 설치합니다.

• Adobe I/O CLI Commerce
• Adobe I/O CLI 런타임
• App Builder CLI

aio plugins:install https://github.com/adobe-commerce/aio-cli-plugin-commerce @adobe/aio-cli-plugin-app-dev @adobe/aio-cli-plugin-runtime

다음 중 하나를 복제합니다.

• Commerce 통합 시작 키트 - 백 오피스 통합 구축용.

  code language-bash
  git clone git@github.com:adobe/commerce-integration-starter-kit.git

• 결제, 배송 및 세금을 포함한 체크아웃 환경을 구축하거나 확장하기 위한 Commerce 체크아웃 스타터 키트.

  code language-bash
  git clone git@github.com:adobe/commerce-checkout-starter-kit.git

Starter Kit 디렉토리로 이동합니다.

cd commerce-integration-starter-kit

다음 대화형 설치 명령을 실행하여 Commerce AI 확장성 도구를 설치합니다.

aio commerce extensibility tools-setup

설정 프로세스에서는 구성 옵션을 묻는 메시지가 표시됩니다. 화면의 지침에 따라 설치를 완료합니다. 선택한 디렉터리에 도구가 설치됩니다.

• 프로젝트에 사용할 스타터 키트를 선택합니다.

  code language-shell-session
  ? Which starter kit would you like to use? ❯ Integration starter kit Checkout starter kit

• 선호하는 코딩 에이전트를 선택합니다. 40개 이상의 코딩 에이전트가 지원되지만 기본 에이전트가 표시되지 않으면 Other 옵션을 사용하여 모든 코딩 에이전트에 기술을 설치할 수 있습니다. 기술을 구성하는 방법에 대한 지침은 코딩 에이전트의 설명서를 참조하십시오.

  code language-shell-session
  ? Which coding agent would you like to install skills for? ❯ Cursor Claude Code GithubCopilot Windsurf Gemini CLI OpenAI Codex Cline ...

• 설치 프로그램이 NPM 또는 Yarn이 설치되어 있는지 감지하고 자동으로 적절한 선택을 수행합니다. Adobe 패키지 관리자를 설치하지 않은 경우 패키지 관리자를 선택하라는 메시지가 표시됩니다. 일관성을 위해 npm을(를) 사용하는 것이 좋습니다.

  code language-shell-session
  ? Which package manager would you like to use? ❯ npm yarn

코딩 도구를 성공적으로 설치한 후 설치 프로세스는 다음을 구성합니다.

• Adobe Commerce 개발을 위한 MCP 서버 통합
• 향상된 개발 환경을 위한 에이전트 기술
• Commerce 전용 개발 도구 및 워크플로

이제 스킬 및 MCP 도구가 설치되었습니다. 기술과 MCP 도구가 보이지 않는다면 코딩 에이전트를 다시 시작하십시오.

Cursor IDE를 다시 시작하여 새 MCP 도구 및 구성을 로드합니다.

.cursor/skills/ 폴더 아래에 스킬이 있는지 확인하여 설치를 확인합니다.

MCP 서버 활성화:

• Cmd+Shift+P(macOS) 또는 Ctrl+Shift+P(Windows 및 Linux)을 사용하여 커서 MCP 설정을 엽니다.
• 유형 보기: MCP 설정 열기
• 목록에서 commerce-extensibility MCP 서버​를 찾습니다.
• 코딩 도구를 사용하려면 서버 ON​을(를) 전환하십시오.

서버 상태 확인 - Commerce 확장성 MCP 서버가 다음과 같이 표시되어야 합니다.

Status: Connected/Active
Server: commerce-extensibility
Configuration: Automatically configured via .cursor/mcp.json

다음 프롬프트를 사용하여 에이전트가 MCP 서버를 사용하는지 확인하십시오. 그렇지 않은 경우, 에이전트에게 사용 가능한 MCP 도구를 사용하도록 명시적으로 요청하십시오.

What are the differences between Adobe Commerce PaaS and Adobe Commerce as a Cloud Service when configuring a webhook that activates an App Builder runtime action?

Visual Studio 코드를 다시 시작하여 새 MCP 도구 및 구성을 로드합니다.

copilot-instructions.md 파일이 .github 폴더에 있는지 확인하여 설치를 확인합니다.

MCP 서버 활성화:

• 왼쪽 사이드바의 활동 표시줄에서 확장 아이콘을 클릭하거나 Cmd+Shift+X(macOs) 또는 Ctrl+Shift+X(Windows 및 Linux)를 사용하여 확장 패널을 엽니다.
• MCP 서버 - 설치됨​을 클릭합니다.
• commerce-extensibility MCP 서버 옆에 있는 톱니바퀴 아이콘을 클릭하고 서버가 중지된 경우 서버 시작​을 선택합니다.
• 톱니바퀴 아이콘을 다시 클릭하고 출력 표시​를 선택합니다.

서버 상태를 확인합니다. MCP:commerce-extensibility 출력은 다음과 일치해야 합니다.

2025-11-13 12:58:50.652 [info] Starting server commerce-extensibility
2025-11-13 12:58:50.652 [info] Connection state: Starting
2025-11-13 12:58:50.652 [info] Starting server from LocalProcess extension host
2025-11-13 12:58:50.657 [info] Connection state: Starting
2025-11-13 12:58:50.657 [info] Connection state: Running

(...)

2025-11-13 12:58:50.753 [info] Discovered 10 tools

다음 프롬프트를 사용하여 에이전트가 MCP 서버를 사용하는지 확인하십시오. 그렇지 않은 경우, 에이전트에게 사용 가능한 MCP 도구를 사용하도록 명시적으로 요청하십시오.

What are the differences between Adobe Commerce PaaS and SaaS when configuring a webhook that activates an App Builder runtime action?

로컬 개발 서버 시작:

aio-app-dev

로컬에서 작업 테스트:

aio-dev-invoke action-name --parameters '{"test": "data"}'

런타임에 배포:

aio-app-deploy

배포된 작업 테스트

웹 브라우저 또는 직접 HTTP 요청 사용

디버깅에 대한 활성화 로그 확인

에이전트에 /feedback을(를) 입력하고 commerce-extensibility/feedback 명령을 선택합니다.

IDE의 맨 위에 표시되는 피드백 필드에 도구 모음에 대한 피드백을 제공하고 Enter 키를 누릅니다.

{width="600" modal="regular"}

로컬로 저장 필드에 yes 또는 no을(를) 입력하고 Enter​를 눌러 로그의 로컬 복사본을 저장할지 여부를 표시합니다.

{width="600" modal="regular"}

예​를 선택한 경우 피드백을 보낸 후 chats 폴더의 로그를 검토할 수 있습니다.

commerce-extensibility/feedback 명령이 에이전트의 채팅 입력 필드에 나타납니다. Enter​를 누르거나 보내기​를 클릭하여 Adobe으로 피드백을 보냅니다.