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 obtener tu código de trabajar para presentarlo a tus colegas suele ser una tarea tediosa. Artificial los modelos generativos de inteligencia pueden ayudarte a agregar comentarios de código, encontrar errores antes que los revisores humanos y realizar muchas otras tareas para facilitan el flujo de trabajo de programación.

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

Puedes modificar la canalización para que las funciones existentes te den mejores resultados o crea nuevos comandos para para respaldar mejor el flujo de trabajo de desarrollo.

Para ver una descripción general en video del proyecto y cómo extenderlo, incluidas las estadísticas de la gente que lo creó, mira AI Code Assistant: Compila con la IA de Google. De lo contrario, puedes seguir las instrucciones para extender el proyecto a continuación.

Configura el proyecto

Estas instrucciones te permitirán configurar el proyecto del agente de código de pipas. para el desarrollo y las pruebas. Los pasos generales son instalar algunos requisitos configurar algunas variables de entorno, clonar el proyecto a partir del código en el repositorio de código abierto y ejecuta la instalación de la configuración.

Instala los requisitos previos

El proyecto del agente de código de canalización se ejecuta como una extensión de Microsoft Visual Studio. el código y los usos Node.js y la herramienta de npm para administrar 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 para tu plataforma.
  2. Instala node y npm siguiendo la instalación instrucciones para tu plataforma.

Clona y configura el proyecto

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

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

  1. Clona el repositorio de Git con el siguiente comando.
    git clone https://github.com/google/generative-ai-docs
    
  2. Opcionalmente, configura tu repositorio de Git local para usar el resultado escaso. Así, solo tendrá los archivos del 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 canalización.
    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 código de pipas como una extensión de desarrollo en VS Code en tu dispositivo. La prueba abre un VS independiente Ventana de código Extension Development Host donde la nueva extensión está disponible. 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 extensiones de VS Code con la canalización de comandos de extensión.

Para establecer y probar tu configuración, sigue estos pasos:

  1. Inicia la aplicación de VS Code.
  2. En VS Code, selecciona File > para crear una ventana nueva Nueva ventana.
  3. Para abrir el proyecto del agente de código de canalización, selecciona Archivo > Abrir carpeta y seleccionando 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 > Inicia la depuración. En este paso, se abre una ventana separada del Host de desarrollo de extensión de VS Code.
  6. Abre la configuración de VS Code. Para ello, selecciona Code > Configuración > Configuración.
  7. Obtén una clave de API de Google Gemini desde la 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 Configuración de búsqueda escribe pipet, selecciona la pestaña Usuario y en la pestaña Google > Gemini: clave de API, haz clic en el vínculo Editar en settings.json y agrega Clave de la 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 la 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

La forma más sencilla de cambiar el comportamiento y las capacidades de la extensión. Tanto el comentario como revisar los comandos usan un instrucción breve con ejemplos de código y comentarios para ese código, así como algunas instrucciones generales para el modelo generativo de IA. Contexto de esta instrucción guía al modelo generativo de Gemini para elaborar una respuesta. De cambiar las instrucciones, los ejemplos o ambos en el comentario o revisar los comandos, puedes cambiar el comportamiento de cada uno de los existentes.

En este conjunto de instrucciones, se explica cómo modificar el comando review.ts cambiar el texto del símbolo del sistema.

Prepárate para editar el comando review.ts:

  1. Inicia la aplicación de VS Code.
  2. En VS Code, selecciona File > para crear una ventana nueva Nueva ventana.
  3. Para abrir el proyecto del agente de código de canalización, selecciona Archivo > Abrir carpeta y seleccionando 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 comienzo de PROMPT constante a diferentes instrucciones.
    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 al lista de códigos y ejemplos de revisión de 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 VS Code Pipet, reinicia el depurador. Para ello, haz lo siguiente: selecciona Ejecutar > Reinicia la depuración
  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 Canalización: Revisar el comando seleccionado.

Crear comando nuevo

Puedes extender Pipet creando comandos nuevos que realicen tareas completamente nuevas. con la API de Gemini. Cada archivo de comando (comment.ts y review.ts) es, en su mayoría, independiente e incluye código para recopilar texto del editor activo, redactar una instrucción, conectarte a la API de Gemini, enviar una instrucción y manejarla la respuesta.

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

Este conjunto de instrucciones explica cómo crear un nuevo comando usando el código de un comando existente, comment.ts, como plantilla.

Con el fin de crear un comando que recomiende nombres para las funciones, haz lo siguiente:

  1. Crea una copia del archivo pipet-code-agent/src/comment.ts llamada name.ts en el directorio src/.
  2. En VS Code, abre el archivo src/name.ts.
  3. Cambia las instrucciones de las instrucciones en el archivo name.ts de la siguiente manera: editando 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 de comando y su mensaje de información.
    export async function generateName() {
      vscode.window.showInformationMessage('Generating function name...');
    
  5. Actualiza el código de ensamblado del mensaje para incluir solo el 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 se está generando.
        // 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 nuevo comando, debes integrarlo con el resto de la extensión. Actualiza los archivos extension.ts y package.json a hacer que el nuevo comando forme parte de la extensión y permitir que VS Code invoque el nuevo comando.

Para integrar el comando name al 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 incorporando una nueva importación. declaración.
    import { generateName } from './name';
    
  3. Registra el comando nuevo agregando el siguiente código al 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 en el paquete de la extensión, 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 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 hayas terminado de programar el comando e integrarlo con el puedes probarla. Tu nuevo comando solo está disponible en VS Code Host de desarrollo de extensión y no en la ventana de VS Code en la que editó 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. Para ello, haz lo siguiente: selecciona Ejecutar > Restart Debugging, que reinicia una instancia Ventana Extension Development Host.
  2. En la ventana Extension Development Host de VS Code, selecciona parte del 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 Canalización: Asigna un nombre al el comando de la función seleccionada.

Recursos adicionales

Para obtener más información sobre el proyecto del agente de código de pipa, consulta la repositorio de código. Si necesitas ayuda para compilar la aplicación o buscas un desarrollador colaboradores, consulta la Discordia de la comunidad de Google Developers servidor.

Aplicaciones de producción

Si planeas implementar el Agente de Documentos para un público amplio, ten en cuenta que el uso de la API de Google Gemini puede estar sujeta al límite 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 Agente de Documentos, consulta Vertex AI de Google Cloud y servicios para aumentar la escalabilidad y confiabilidad de tu app.