Compila un asistente de código de IA con el agente de código de Pipet

Escribir código puede ser gratificante y satisfactorio, pero conseguir que tu código pase de funcionar a presentable para colegas suele ser una tarea tediosa. Los modelos generativos de inteligencia artificial pueden ayudarte a agregar comentarios de código, encontrar errores antes que los revisores manuales y realizar muchas otras tareas para facilitar el flujo de trabajo de programación.

En este instructivo, se muestra cómo extender el agente de Pipet Code, una herramienta de asistencia para código potenciada por IA que creó el equipo de Relaciones con Desarrolladores de IA de Google. Este proyecto de código abierto es una extensión de Microsoft Visual Studio Code (VS Code) que te ayuda a encarar algunas de las tareas de codificación importantes pero menos divertidas, como comentar el código, encontrar errores y sugerir mejoras. La extensión envía solicitudes de asistencia para programación a la API de Gemini y, luego, incorpora las respuestas a tu ventana de edición de código.

Puedes modificar Pipet para que estas funciones existentes te resulten más útiles o compilar comandos nuevos para respaldar mejor tu flujo de trabajo de desarrollo.

Para obtener una descripción general en video del proyecto y cómo extenderlo, incluidas las estadísticas de los creadores, consulta AI Code Assistant: Build with Google AI. De lo contrario, puedes comenzar a extender el proyecto siguiendo las instrucciones que se indican a continuación.

Configuración del proyecto

En estas instrucciones, se explica cómo configurar el proyecto del agente de código de Pipet para el desarrollo y las pruebas. Los pasos generales son instalar un software de requisitos previos, configurar algunas variables de entorno, clonar el proyecto desde el repositorio de código y ejecutar la instalación de la configuración.

Instala los requisitos previos

El proyecto del agente de código Pipet se ejecuta como una extensión de Microsoft Visual Studio Code y usa Node.js y la herramienta npm para administrar los paquetes y ejecutar la aplicación. Las siguientes instrucciones de instalación son para una máquina anfitrión de Linux.

Para instalar el software requerido, sigue estos pasos:

  1. Instala Visual Studio Code en tu plataforma.
  2. Instala node y npm según las instrucciones de instalación para tu plataforma.

Clona y configura el proyecto

Descarga el código del proyecto y usa el comando de instalación npm para descargar las dependencias necesarias y configurar el proyecto. Necesitas el software de control de fuente git para recuperar el código fuente del proyecto.

Para descargar y configurar el código del proyecto, haz lo siguiente:

  1. Usa el siguiente comando para clonar el repositorio de Git.
    git clone https://github.com/google/generative-ai-docs
  2. De manera opcional, configura tu repositorio de Git local para usar la confirmación de compra dispersa, de modo que solo tengas los archivos para el proyecto del agente de Documentos. 
    cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/pipet-code-agent/
  3. Navega al directorio raíz del proyecto del agente de código de Pipet. 
    cd generative-ai-docs/examples/gemini/node/pipet-code-agent/
  4. Ejecuta el comando de instalación para descargar dependencias y configurar el proyecto: 
    npm install

Configura y prueba la extensión

Ahora deberías poder probar tu instalación ejecutando el agente de Pipet Code como una extensión de desarrollo en VS Code en tu dispositivo. La prueba abrirá una ventana independiente del Extension Development Host de VS Code en la que está disponible la extensión nueva. En esta ventana nueva, configurarás la clave de API que usa la extensión para acceder a la API de Google Gemini.

Agente de código de canalización que se ejecuta en la ventana Extension Development Host Figura 1: Ventana del host de desarrollo de VS Code Extension con los comandos de extensión de Pipet

Para configurar y probar tu configuración, haz lo siguiente:

  1. Inicia la aplicación de VS Code.
  2. En VS Code, selecciona File > New Window para crear una ventana nueva.
  3. Abre el proyecto del agente de código de Pipet. Para ello, selecciona Archivo > Abrir carpeta (File > Open Folder) y, luego, elige la carpeta pipet-code-agent/.
  4. Abre el archivo pipet-code-agent/package.json.
  5. Para ejecutar la extensión en modo de depuración, selecciona Run > Start Debugging. En este paso, se abrirá una ventana independiente de Extension Development Host de VS Code.
  6. Abre la configuración de VS Code. Para ello, selecciona Code > Settings > Settings.
  7. Obtén una clave de API de Google Gemini del sitio para desarrolladores de IA generativa y copia la cadena de clave.
  8. Establece la clave de API como un parámetro de configuración. En el campo Configuración de búsqueda, escribe pipet, selecciona la pestaña Usuario y, en el parámetro de configuración Google > Gemini: Clave de API, haz clic en el vínculo Editar en settings.json y agrega tu clave de API de Gemini:
    "google.gemini.apiKey": "your-api-key-here"
  9. Guarda los cambios en el archivo settings.json y cierra las pestañas de configuración.

Para probar los comandos de extensión, haz lo siguiente:

  1. En la ventana Extension Development Host de VS Code, selecciona cualquier código en la ventana del editor.
  2. Abre la paleta de comandos seleccionando Ver > Paleta de comandos.
  3. En la paleta de comandos, escribe Pipet y selecciona uno de los comandos con ese prefijo.

Modificar comando existente

Modificar los comandos proporcionados en el agente de código de Pipet es la forma más sencilla de cambiar el comportamiento y las capacidades de la extensión. Los comandos de comentarios y revisión usan un enfoque de instrucciones con pocas pruebas con ejemplos de código y comentarios para ese código, así como algunas instrucciones generales para el modelo generativo de IA. Esta información contextual de la instrucción guía al modelo generativo de Gemini para formar una respuesta. Si cambias las instrucciones del mensaje, los ejemplos o ambos en los comandos de comentario o de revisión, puedes cambiar el comportamiento de cada uno de los comandos existentes.

En este conjunto de instrucciones, se explica cómo modificar el comando review.ts con el cambio del texto del mensaje del comando.

A fin de prepararte para editar el comando review.ts, haz lo siguiente:

  1. Inicia la aplicación de VS Code.
  2. En VS Code, selecciona File > New Window para crear una ventana nueva.
  3. Abre el proyecto del agente de código de Pipet. Para ello, selecciona Archivo > Abrir carpeta (File > Open Folder) y, luego, elige la carpeta pipet-code-agent/.
  4. Abre el archivo pipet-code-agent/src/review.ts.

Para modificar el comportamiento del comando review.ts, haz lo siguiente:

  1. En el archivo review.ts, cambia el inicio de la constante PROMPT por instrucciones diferentes. 
    const PROMPT = '
Write review comments for following code, identifying bugs and ways to improve code quality. Examples of bugs are syntax errors or typos, out of memory errors, and boundary value errors. Examples of improving code quality are reducing complexity of code, eliminating duplicate code, and ensuring other developers
are able to understand the code.
${CODE_LABEL}
...
  2. De manera opcional, en el archivo review.ts, agrega otro ejemplo a la lista de ejemplos de revisión de código y código. 
    ...
${REVIEW_LABEL}
There are duplicate lines of code in this control structure.
${CODE_LABEL}
const fixed_value = 128;
${REVIEW_LABEL}
Make sure constant names are in all capitals (FIXED_VALUE) for clarity.
';
  3. Guarda los cambios en el archivo review.ts.

Para probar el comando modificado, sigue estos pasos:

  1. En la ventana del proyecto de la extensión de Pipet de VS Code, reinicia el depurador seleccionando Run > Restart Debugging.
  2. En la ventana Extension Development Host de VS Code, selecciona cualquier código en la ventana del editor.
  3. Abre la paleta de comandos seleccionando Ver > Paleta de comandos.
  4. En la paleta de comandos, escribe Pipet y selecciona el comando Pipet: Revisa el código seleccionado.

Crear comando nuevo

Para extender Pipet, crea comandos nuevos que realicen tareas completamente nuevas con la API de Gemini. La mayoría de los archivos de comandos (comment.ts y review.ts) son independientes y contienen código para recopilar texto del editor activo, redactar un mensaje, conectarse a la API de Gemini, enviar un mensaje y administrar la respuesta.

Agente de código de canalización con el nombre de la función de selección que se muestra Figura 2: Comando de recomendación de nombre de función nuevo en la ventana Host de desarrollo de la extensión de VS Code.

En este conjunto de instrucciones, se explica cómo compilar un comando nuevo mediante el uso del código de un comando existente, comment.ts, como plantilla.

Si deseas crear un comando que recomiende nombres para las funciones, haz lo siguiente:

  1. Haz una copia del archivo pipet-code-agent/src/comment.ts llamado name.ts en el directorio src/.
  2. En VS Code, abre el archivo src/name.ts.
  3. Para cambiar las instrucciones del mensaje en el archivo name.ts, edita el valor PROMPT. 
    // Provide instructions for the AI generative model
const PROMPT = `Recommend a name for this function. Explain your
reasoning in 3 sentences or less:`;
  4. Cambia el nombre de la función del comando y su mensaje de información. 
    export async function generateName() {
  vscode.window.showInformationMessage('Generating function name...');
  5. Actualiza el código de ensamblado de instrucciones para incluir solo el valor PROMPT y el texto seleccionado en el editor. 
      // Build the full prompt using the template.
  const fullPrompt = `${PROMPT}
"
${selectedCode}
"
`;
  6. Cambia el resultado de la respuesta para describir lo que genera. 
        // update prefix to describe output
    let commentIntro = padding + commentPrefix + "Recommended name: (generated)\n";
    editBuilder.insert(selection.start, commentIntro);
    editBuilder.insert(selection.start, pyComment);
  7. Guarda los cambios en el archivo review.ts.

Integra el comando nuevo

Después de completar el código del comando nuevo, debes integrarlo al resto de la extensión. Actualiza los archivos extension.ts y package.json para que el comando nuevo forme parte de la extensión y habilita VS Code para invocar el comando nuevo.

Para integrar el comando name con el código de la extensión, haz lo siguiente:

  1. En VS Code, abre el archivo pipet-code-agent/src/extension.ts.
  2. Agrega el nuevo archivo de código a la extensión incluyendo una nueva sentencia de importación. 
    import { generateName } from './name';
  3. Registra el comando nuevo. Para ello, agrega el siguiente código a la función activate(). 
    export function activate(context: vscode.ExtensionContext) {
    ...
    vscode.commands.registerCommand('pipet-code-agent.nameFunction', generateName);
}
  4. Guarda los cambios en el archivo extension.ts.

Para integrar el comando name con el paquete de extensiones, haz lo siguiente:

  1. En VS Code, abre el archivo pipet-code-agent/package.json.
  2. Agrega el comando nuevo a la sección commands del archivo del paquete. 
      "contributes": {
    "commands": [
      ...
      {
        "command": "pipet-code-agent.nameFunction",
        "title": "Pipet: Name the selected function."
      }
    ],
  3. Guarda los cambios en el archivo package.json.

Prueba el comando nuevo

Una vez que termines de programar el comando y de integrarlo a la extensión, puedes probarlo. Tu nuevo comando solo está disponible en la ventana Extension Development Host de VS Code y no en la ventana de VS Code, en la que editaste el código de la extensión.

Para probar el comando modificado, sigue estos pasos:

  1. En la ventana del proyecto de la extensión de VS Code Pipet, reinicia el depurador seleccionando Run > Restart Debugging, lo que reinicia otra ventana Extension Development Host.
  2. En la ventana Extension Development Host de VS Code, selecciona código en la ventana del editor.
  3. Abre la paleta de comandos seleccionando Ver > Paleta de comandos.
  4. En la paleta de comandos, escribe Pipet y selecciona el comando Pipet: Asigna un nombre a la función seleccionada.

Recursos adicionales

Para obtener más información sobre el proyecto del agente de código de Pipet, consulta el repositorio de código. Si necesitas ayuda para compilar la aplicación o buscas colaboradores desarrolladores, consulta el servidor de Google Developers Community Discord.

Aplicaciones de producción

Si planeas implementar el Agente de Documentos para un público grande, ten en cuenta que el uso de la API de Google Gemini puede estar sujeto a límites de frecuencia y a otras restricciones de uso. Si estás considerando compilar una aplicación de producción con la API de Gemini, como el Agente de Documentos, consulta los servicios de Vertex AI de Google Cloud para aumentar la escalabilidad y la confiabilidad de tu app.