Saltearse al contenido

Complemento de TypeScript para Nx

Genera un plugin completo de TypeScript para Nx con un servidor integrado del Model Context Protocol (MCP). Este generador crea una base para construir generadores personalizados que pueden ser usados directamente por asistentes de IA para generación automática de código y scaffolding de proyectos.

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

  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
    • Haga clic en Generate
    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.

    El generador creará la siguiente estructura de proyecto:

    • Directoryyour-plugin/
      • Directorysrc/
        • index.ts Punto de entrada vacío para tu plugin
        • Directorymcp-server/
          • index.ts Punto de entrada del servidor MCP
          • server.ts Configuración principal del servidor MCP
          • Directorytools/
            • create-workspace-command.ts Herramienta para guiar la creación de workspaces
            • general-guidance.ts Herramienta con mejores prácticas para Nx y el plugin
            • list-generators.ts Herramienta para listar generadores disponibles
            • generator-guide.ts Herramienta con información detallada de generadores
          • utils.ts Funciones utilitarias para el servidor MCP
      • generators.json Configuración de generadores de Nx (inicialmente vacío)
      • package.json Configuración del paquete del plugin con binario del servidor MCP
      • tsconfig.json Configuración de TypeScript (CommonJS para compatibilidad con Nx)
      • project.json Configuración de proyecto Nx con targets de build y package

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

    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

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

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

    El plugin generado incluye varios targets importantes:

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

    Terminal window
    pnpm nx build your-plugin

    Crea un paquete distribuible listo para publicar en NPM:

    Terminal window
    pnpm nx package your-plugin

    El target de empaquetado incluye todos los assets necesarios:

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

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

    El plugin 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 plugin
    • create-workspace-command: Aprende a crear nuevos workspaces que puedan usar tu plugin
    • list-generators: Lista todos los generadores disponibles en tu plugin
    • generator-guide: Obtén información detallada sobre generadores específicos incluyendo esquemas y uso

    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/index.ts"]
    }
    }
    }

    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/index.ts"]
    }
    }
    }

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

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

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

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

    2. Empaqueta el plugin:

      Terminal window
      pnpm nx package your-plugin
    3. Prueba localmente: Puedes probar tu plugin localmente instalándolo en otro workspace:

      Ventana de terminal
      npm install /ruta/a/tu/workspace/dist/your-plugin/package

    Cuando tu plugin esté listo:

    Ventana de terminal
    cd dist/your-plugin/package
    npm publish

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

    Terminal window
    pnpm add -w your-plugin-name

    Luego usa tus generadores:

    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
      • Haga clic en Generate

      Configurar asistentes de IA con tu plugin publicado

      Sección titulada «Configurar asistentes de IA con tu plugin publicado»

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

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