TypeScript Nx Plugin

통합된 Model Context Protocol (MCP) 서버가 포함된 완전한 TypeScript Nx Plugin을 생성합니다. 이 제너레이터는 AI 어시스턴트가 자동화된 코드 생성 및 프로젝트 스캐폴딩에 원활하게 사용할 수 있는 커스텀 제너레이터를 빌드하기 위한 기반을 만듭니다.

사용법

Nx Plugin 생성하기

TypeScript Nx Plugin은 두 가지 방법으로 생성할 수 있습니다:

CLI

pnpm

pnpm nx g @aws/nx-plugin:ts#nx-plugin

yarn

yarn nx g @aws/nx-plugin:ts#nx-plugin

npm

npx nx g @aws/nx-plugin:ts#nx-plugin

bun

bunx nx g @aws/nx-plugin:ts#nx-plugin

어떤 파일이 변경될지 확인하기 위해 드라이 런을 수행할 수도 있습니다

pnpm

pnpm nx g @aws/nx-plugin:ts#nx-plugin --dry-run

yarn

yarn nx g @aws/nx-plugin:ts#nx-plugin --dry-run

npm

npx nx g @aws/nx-plugin:ts#nx-plugin --dry-run

bun

bunx nx g @aws/nx-plugin:ts#nx-plugin --dry-run

VSCode

1. 설치 Nx Console VSCode Plugin 아직 설치하지 않았다면
2. VSCode에서 Nx 콘솔 열기
3. 클릭 Generate (UI) "Common Nx Commands" 섹션에서
4. 검색 @aws/nx-plugin - ts#nx-plugin
5. 필수 매개변수 입력
6. 클릭 Generate

옵션

매개변수	타입	기본값	설명
name 필수	string	-	TypeScript 프로젝트 이름
directory	string	packages	라이브러리가 배치될 상위 디렉토리입니다.
subDirectory	string	-	라이브러리가 배치될 하위 디렉토리입니다. 기본값은 라이브러리 이름입니다.
preferInstallDependencies	boolean	true	생성기 실행 후 의존성 설치를 선호할지 여부입니다. 여러 생성기를 일괄 처리할 때 설치를 연기하려면 false로 설정하세요(후속 생성기가 Nx 프로젝트 그래프를 계산할 수 있도록 필요한 경우 설치는 여전히 실행됩니다). 마지막에 한 번만 설치하세요.

제너레이터 출력

제너레이터는 다음과 같은 프로젝트 구조를 생성합니다:

• 디렉터리your-plugin/

  • 디렉터리src/

    • index.ts Empty entry point for your plugin
    • 디렉터리mcp-server/

      • index.ts Exports your server
      • server.ts Main MCP server configuration
      • stdio.ts Entry point for your MCP server with STDIO transport
      • http.ts Entry point for your MCP server with Streamable HTTP transport
      • 디렉터리tools/

        • create-workspace-command.ts Tool for workspace creation guidance
        • general-guidance.ts Tool for general Nx and plugin guidance
        • list-generators.ts Tool to list available generators
        • generator-guide.ts Tool for detailed generator information
      • utils.ts Utility functions for the MCP server
  • generators.json Nx generator configuration (initially empty)
  • package.json Plugin package configuration
  • tsconfig.json TypeScript configuration (CommonJS for Nx compatibility)
  • project.json Nx project configuration with build and package targets

Nx Plugin 작업하기

제너레이터 추가하기

플러그인 프로젝트가 생성되면 ts#nx-generator 제너레이터를 사용하여 제너레이터를 추가할 수 있습니다:

CLI

pnpm

pnpm nx g @aws/nx-plugin:ts#nx-generator --project=your-plugin

yarn

yarn nx g @aws/nx-plugin:ts#nx-generator --project=your-plugin

npm

npx nx g @aws/nx-plugin:ts#nx-generator --project=your-plugin

bun

bunx nx g @aws/nx-plugin:ts#nx-generator --project=your-plugin

어떤 파일이 변경될지 확인하기 위해 드라이 런을 수행할 수도 있습니다

pnpm

pnpm nx g @aws/nx-plugin:ts#nx-generator --project=your-plugin --dry-run

yarn

yarn nx g @aws/nx-plugin:ts#nx-generator --project=your-plugin --dry-run

npm

npx nx g @aws/nx-plugin:ts#nx-generator --project=your-plugin --dry-run

bun

bunx nx g @aws/nx-plugin:ts#nx-generator --project=your-plugin --dry-run

VSCode

1. 설치 Nx Console VSCode Plugin 아직 설치하지 않았다면
2. VSCode에서 Nx 콘솔 열기
3. 클릭 Generate (UI) "Common Nx Commands" 섹션에서
4. 검색 @aws/nx-plugin - ts#nx-generator
5. 필수 매개변수 입력
   • project: your-plugin
6. 클릭 Generate

이렇게 하면 플러그인에 새로운 제너레이터가 추가됩니다.

제너레이터 문서

제너레이터 구현 방법에 대한 자세한 내용은 ts#nx-generator 가이드를 읽어보세요.

MCP Server의 generator-guide 도구에서 사용되므로 제너레이터에 대한 자세한 README.md를 작성해야 합니다.

프로젝트 타겟

생성된 플러그인에는 몇 가지 중요한 타겟이 포함되어 있습니다:

Build 타겟

TypeScript 코드를 컴파일하고 플러그인을 사용할 수 있도록 준비합니다:

pnpm

pnpm nx build your-plugin

yarn

yarn nx build your-plugin

npm

npx nx build your-plugin

bun

bunx nx build your-plugin

Package 타겟

NPM 게시를 위한 배포 가능한 패키지를 생성합니다:

pnpm

pnpm nx package your-plugin

yarn

yarn nx package your-plugin

npm

npx nx package your-plugin

bun

bunx nx package your-plugin

package 타겟에는 다음과 같은 필요한 모든 에셋이 포함됩니다:

• 컴파일된 JavaScript 파일
• TypeScript 선언 파일
• 제너레이터 및 executor 구성 파일
• 문서 및 라이선스 파일

MCP Server 통합

플러그인은 ts#mcp-server 제너레이터를 사용하여 MCP 서버를 구성합니다.

도구

플러그인에는 AI 어시스턴트에게 다음 도구를 제공하는 완전한 MCP 서버가 포함되어 있습니다:

• general-guidance: Nx 및 플러그인 작업을 위한 모범 사례 얻기
• create-workspace-command: 플러그인을 사용할 수 있는 새 워크스페이스를 만드는 방법 알아보기
• list-generators: 플러그인에서 사용 가능한 모든 제너레이터 나열
• generator-guide: 스키마 및 사용법을 포함한 특정 제너레이터에 대한 자세한 정보 얻기

AI 어시스턴트 구성하기

구성 파일

MCP를 지원하는 대부분의 AI 어시스턴트는 유사한 구성 방식을 사용합니다. MCP 서버 세부 정보로 구성 파일을 생성하거나 업데이트해야 합니다:

{
  "mcpServers": {
    "your-mcp-server": {
      "command": "npx",
      "args": ["tsx", "/path/to/your-mcp-server/stdio.ts"]
    }
  }
}

경로 해석

서버에 연결할 때 ENOENT npx와 같은 오류가 발생하면 npx의 전체 경로를 지정해야 할 수 있습니다. 터미널에서 which npx를 실행하여 경로를 얻을 수 있습니다.

핫 리로드

MCP 서버를 개발하는 동안 AI 어시스턴트가 항상 최신 버전의 도구/리소스를 볼 수 있도록 --watch 플래그를 구성할 수 있습니다:

{
  "mcpServers": {
    "your-mcp-server": {
      "command": "npx",
      "args": ["tsx", "--watch", "/path/to/your-mcp-server/stdio.ts"]
    }
  }
}

도구 새로고침

새로운 도구나 리소스를 추가하는 경우 AI 어시스턴트에서 MCP 서버를 새로고침해야 할 수 있습니다.

어시스턴트별 구성

특정 AI 어시스턴트로 MCP를 구성하는 방법은 다음 문서를 참조하세요:

• Kiro
• Kiro CLI
• Claude Code
• Cursor
• Codex
• Cline
• Roo Code

워크스페이스 구성

Kiro와 같은 일부 AI 어시스턴트는 워크스페이스 수준의 MCP 서버 구성을 지정할 수 있으며, 이는 특정 프로젝트에 관련된 MCP 서버를 정의하는 데 특히 유용합니다.

MCP Server 커스터마이징

server.ts를 수정하여 플러그인 도메인에 특화된 추가 도구나 리소스를 추가함으로써 MCP 서버를 확장할 수 있습니다.

MCP Server 작성에 대한 자세한 내용은 ts#mcp-server 가이드를 참조하세요.

플러그인 게시하기

게시 준비

1. 패키지 정보 업데이트: 플러그인의 package.json을 적절한 이름, 버전, 설명 및 저장소 정보로 편집합니다.

2. 패키지 빌드:

   pnpm

   pnpm nx package your-plugin

   yarn

   yarn nx package your-plugin

   npm

   npx nx package your-plugin

   bun

   bunx nx package your-plugin

3. 로컬 테스트: 다른 워크스페이스에 설치하여 플러그인을 로컬에서 테스트할 수 있습니다:

   npm install /path/to/your/workspace/dist/your-plugin/package

NPM에 게시하기

플러그인이 준비되면:

cd dist/your-plugin/package
npm publish

게시된 플러그인 사용하기

게시 후 다른 사람들이 플러그인을 설치하고 사용할 수 있습니다:

pnpm

pnpm add -w your-plugin-name

yarn

yarn add your-plugin-name

npm

npm install --legacy-peer-deps your-plugin-name

bun

bun add your-plugin-name

그런 다음 제너레이터를 사용합니다:

CLI

pnpm

pnpm nx g your-plugin-name:your-generator-name

yarn

yarn nx g your-plugin-name:your-generator-name

npm

npx nx g your-plugin-name:your-generator-name

bun

bunx nx g your-plugin-name:your-generator-name

어떤 파일이 변경될지 확인하기 위해 드라이 런을 수행할 수도 있습니다

pnpm

pnpm nx g your-plugin-name:your-generator-name --dry-run

yarn

yarn nx g your-plugin-name:your-generator-name --dry-run

npm

npx nx g your-plugin-name:your-generator-name --dry-run

bun

bunx nx g your-plugin-name:your-generator-name --dry-run

VSCode

1. 설치 Nx Console VSCode Plugin 아직 설치하지 않았다면
2. VSCode에서 Nx 콘솔 열기
3. 클릭 Generate (UI) "Common Nx Commands" 섹션에서
4. 검색 your-plugin-name - your-generator-name
5. 필수 매개변수 입력
6. 클릭 Generate

게시된 플러그인으로 AI 어시스턴트 구성하기

게시된 플러그인의 MCP 서버는 다음과 같이 구성할 수 있습니다:

{
  "mcpServers": {
    "aws-nx-mcp": {
      "command": "npx",
      "args": ["-y", "-p", "your-plugin-name", "your-plugin-name-mcp-server"]
    }
  }
}