Complemento de TypeScript para Nx

Genera un complemento completo de TypeScript Nx Plugin con un servidor integrado del Model Context Protocol (MCP). Este generador crea una base para construir generadores personalizados que pueden ser utilizados de forma transparente por asistentes de IA para generación automatizada de código y scaffolding de proyectos.

Uso

Generar un complemento de Nx

Puedes generar un complemento de Nx en TypeScript de dos formas:

VSCode

1. Instale el Nx Console VSCode Plugin si aún no lo ha hecho
2. Abra la consola Nx en VSCode
3. Haga clic en Generate (UI) en la sección "Common Nx Commands"
4. Busque @aws/nx-plugin - ts#nx-plugin
5. Complete los parámetros requeridos
6. Haga clic en Generate

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

También puede realizar una ejecución en seco para ver qué archivos se cambiarían

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

Opciones

Parámetro	Tipo	Predeterminado	Descripción
name Requerido	string	-	TypeScript project name
directory	string	packages	Parent directory where the library is placed.
subDirectory	string	-	The sub directory the lib is placed in. By default this is the library name.

Resultado del generador

El generador creará la siguiente estructura de proyecto:

• Directorioyour-plugin/

  • Directoriosrc/

    • index.ts Punto de entrada vacío para tu complemento
    • Directoriomcp-server/

      • index.ts Exporta tu servidor
      • server.ts Configuración principal del servidor MCP
      • stdio.ts Punto de entrada para el servidor MCP con transporte STDIO
      • http.ts Punto de entrada para el servidor MCP con transporte HTTP streamable
      • Directoriotools/

        • create-workspace-command.ts Herramienta para guía de creación de workspaces
        • general-guidance.ts Herramienta para orientación general sobre Nx y complementos
        • list-generators.ts Herramienta para listar generadores disponibles
        • generator-guide.ts Herramienta para información detallada de generadores
      • utils.ts Funciones utilitarias para el servidor MCP
  • generators.json Configuración de generadores Nx (inicialmente vacía)
  • package.json Configuración del paquete del complemento con binario del servidor MCP
  • tsconfig.json Configuración de TypeScript (CommonJS para compatibilidad con Nx)
  • project.json Configuración de proyecto Nx con objetivos de build y package

Trabajando con tu complemento Nx

Añadir generadores

Una vez tengas tu proyecto de complemento, puedes añadir generadores usando el generador ts#nx-generator:

VSCode

1. Instale el Nx Console VSCode Plugin si aún no lo ha hecho
2. Abra la consola Nx en VSCode
3. Haga clic en Generate (UI) en la sección "Common Nx Commands"
4. Busque @aws/nx-plugin - ts#nx-generator
5. Complete los parámetros requeridos
   • pluginProject: your-plugin
6. Haga clic en Generate

CLI

pnpm

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

yarn

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

npm

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

bun

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

También puede realizar una ejecución en seco para ver qué archivos se cambiarían

pnpm

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

yarn

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

npm

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

bun

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

Esto añadirá un nuevo generador a tu complemento.

Consejo

Lee la guía de ts#nx-generator para detalles sobre cómo implementar generadores.

Asegúrate de escribir un README.md detallado para tu generador, ya que este es utilizado por la herramienta generator-guide del servidor MCP.

Objetivos del proyecto

El complemento generado incluye varios objetivos importantes:

Objetivo de compilación

Compila tu código TypeScript y prepara el complemento para su uso:

pnpm

pnpm nx build your-plugin

yarn

yarn nx build your-plugin

npm

npx nx build your-plugin

bun

bunx nx build your-plugin

Objetivo de empaquetado

Crea un paquete distribuible listo para publicación en 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

El objetivo de empaquetado incluye todos los recursos necesarios:

• Archivos JavaScript compilados
• Archivos de declaración de TypeScript
• Archivos de configuración de generadores y ejecutores
• Documentación y archivos de licencia

Integración del servidor MCP

El complemento configura un servidor MCP usando el generador ts#mcp-server.

Herramientas

El complemento incluye un servidor MCP completo que provee a los asistentes de IA las siguientes herramientas:

• general-guidance: Obtén mejores prácticas para trabajar con Nx y tu complemento
• create-workspace-command: Aprende a crear nuevos workspaces que puedan usar tu complemento
• list-generators: Lista todos los generadores disponibles en tu complemento
• generator-guide: Obtén información detallada sobre generadores específicos incluyendo esquemas y uso

Configuración con asistentes de IA

Archivos de configuración

La mayoría de los asistentes de IA que admiten MCP utilizan un enfoque de configuración similar. Deberás crear o actualizar un archivo de configuración con los detalles de tu servidor MCP:

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

Precaución

Si recibes un error como ENOENT npx al conectarte a tu servidor, es posible que necesites especificar la ruta completa a npx, que puedes obtener ejecutando which npx en tu terminal.

Recarga en caliente

Durante el desarrollo de tu servidor MCP, puedes configurar el flag --watch para que el asistente de IA siempre vea las versiones más recientes de las herramientas/recursos:

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

Nota

Si agregas nuevas herramientas o recursos, es posible que necesites reiniciar tu servidor MCP en el asistente de IA.

Configuración específica del asistente

Consulta la siguiente documentación para configurar MCP con asistentes de IA específicos:

• Amazon Q Developer
• Cline
• Cursor
• Claude Code
• Roo Code

Consejo

Algunos asistentes de IA, como Amazon Q Developer, permiten especificar configuraciones de servidor MCP a nivel de espacio de trabajo, lo cual es especialmente útil para definir los servidores MCP relevantes para un proyecto particular.

Personalización del servidor MCP

Puedes extender el servidor MCP modificando server.ts para añadir herramientas adicionales o recursos específicos al dominio de tu complemento.

Para más detalles sobre cómo escribir servidores MCP, consulta la guía de ts#mcp-server.

Publicación de tu complemento

Preparación para publicación

1. Actualiza la información del paquete: Edita el package.json de tu complemento con nombre, versión, descripción e información del repositorio adecuados.

2. Empaqueta el complemento:

   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. Prueba localmente: Puedes probar tu complemento localmente instalándolo en otro workspace:

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

Publicación en NPM

Cuando tu complemento esté listo:

cd dist/your-plugin/package
npm publish

Uso de complementos publicados

Después de publicar, otros pueden instalar y usar tu complemento:

pnpm

pnpm add -w your-plugin-name

yarn

yarn add your-plugin-name

npm

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

bun

bun install your-plugin-name

Luego usa tus generadores:

VSCode

1. Instale el Nx Console VSCode Plugin si aún no lo ha hecho
2. Abra la consola Nx en VSCode
3. Haga clic en Generate (UI) en la sección "Common Nx Commands"
4. Busque your-plugin-name - your-generator-name
5. Complete los parámetros requeridos
6. Haga clic en Generate

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

También puede realizar una ejecución en seco para ver qué archivos se cambiarían

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

Configurar asistentes de IA con tu complemento publicado

El servidor MCP de tu complemento publicado puede configurarse así:

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