Criar um assistente de código de IA com o agente do Pipet Code

Escrever códigos pode ser recompensador e satisfatório, mas conseguir que ele funcione para apresentável para colegas muitas vezes é uma tarefa árdua. Os modelos generativos de inteligência artificial podem ajudar você a adicionar comentários de código, encontrar erros antes dos revisores humanos e realizar uma série de outras tarefas para facilitar o fluxo de trabalho da programação.

Neste tutorial, mostramos como estender o Pipet Code Agent, uma ferramenta de assistência de código com tecnologia de IA criada pela equipe de relações com desenvolvedores de IA do Google. Esse projeto de código aberto é uma extensão do Visual Studio Code (VS Code) da Microsoft que ajuda a cuidar de algumas tarefas de programação importantes, mas menos divertidas, como comentar o código, encontrar erros e sugerir melhorias. A extensão envia solicitações de assistência de programação para a API Gemini e incorpora as respostas na janela de edição de código.

É possível modificar o Pipet para que essas funções atuais funcionem melhor ou criar novos comandos para melhorar o suporte ao fluxo de trabalho de desenvolvimento.

Para ter uma visão geral em vídeo do projeto e como estendê-lo, incluindo insights das pessoas que o criaram, confira Assistente de código de IA: criar com IA do Google. Caso contrário, comece a estender o projeto seguindo as instruções abaixo.

Configuração do projeto

As instruções a seguir orientam você na configuração do projeto do agente do código Pipet para desenvolvimento e teste. As etapas gerais são instalar um software de pré-requisito, definir algumas variáveis de ambiente, clonar o projeto do repositório de código e executar a instalação da configuração.

Instale os pré-requisitos

O projeto Pipet Code Agent é executado como uma extensão do Visual Studio Code da Microsoft e usa o Node.js e a ferramenta npm para gerenciar os pacotes e executar o aplicativo. As instruções de instalação a seguir são para uma máquina host Linux.

Para instalar o software necessário:

  1. Instale o Visual Studio Code da sua plataforma.
  2. Instale node e npm seguindo as instruções de instalação da sua plataforma.

Clonar e configurar o projeto

Faça o download do código do projeto e use o comando de instalação npm para fazer o download das dependências necessárias e configurar o projeto. Você precisa do software de controle de origem git para recuperar o código-fonte do projeto.

Para fazer o download e configurar o código do projeto:

  1. Clone o repositório git usando o comando a seguir.
    git clone https://github.com/google/generative-ai-docs
  2. Como opção, configure seu repositório git local para usar a finalização da compra esparsa para que você tenha apenas os arquivos para o projeto do agente do Documentos. 
    cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/pipet-code-agent/
  3. Navegue até o diretório raiz do projeto do agente do Pipet Code. 
    cd generative-ai-docs/examples/gemini/node/pipet-code-agent/
  4. Execute o comando de instalação para fazer o download de dependências e configurar o projeto: 
    npm install

Configurar e testar a extensão

Agora você pode testar sua instalação executando o Pipet Code Agent como uma extensão de desenvolvimento no VS Code no seu dispositivo. O teste abre uma janela separada Extension Development Host do VS Code em que a nova extensão está disponível. Nessa nova janela, você configura a chave de API que a extensão usa para acessar a API Google Gemini.

Agente do código Pipet em execução na janela "Host de desenvolvimento de extensões" Figura 1. Janela do host de desenvolvimento da extensão do VS Code com os comandos de extensão Pipet.

Para configurar e testar sua configuração:

  1. Inicie o aplicativo VS Code.
  2. No VS Code, crie uma nova janela selecionando File > New Window.
  3. Abra o projeto do agente do código Pipet selecionando File > Open Folder e a pasta pipet-code-agent/.
  4. Abra o arquivo pipet-code-agent/package.json.
  5. Para executar a extensão no modo de depuração, selecione Run > Start Debugging. Esta etapa abre uma janela separada Extension Development Host do VS Code.
  6. Abra as configurações do VS Code selecionando Code > Settings > Settings.
  7. Receba uma chave de API do Google Gemini no site para desenvolvedores de IA generativa e copie a string da chave.
  8. Definir a chave de API como configuração. No campo Configurações de pesquisa, digite pipet, selecione a guia Usuário e, na configuração Google > Gemini: chave de API, clique no link Editar em settings.json e adicione sua chave de API do Gemini:
    "google.gemini.apiKey": "your-api-key-here"
  9. Salve as mudanças no arquivo settings.json e feche as guias de configurações.

Para testar os comandos de extensão:

  1. Na janela Extension Development Host do VS Code, selecione qualquer código na janela do editor.
  2. Abra a Paleta de comandos selecionando Visualizar > Paleta de comandos.
  3. No Paleta de comandos, digite Pipet e selecione um dos comandos com esse prefixo.

Modificar comando atual

Modificar os comandos fornecidos no agente de código do Pipet é a maneira mais simples de alterar o comportamento e os recursos da extensão. Os comandos de comentário e revisão usam uma abordagem de comandos de shot com exemplos de código e comentários referentes a ele, bem como algumas instruções gerais para o modelo generativo de IA. Essas informações de contexto do comando orientam o modelo generativo do Gemini na formação de uma resposta. É possível alterar o comportamento de cada um dos comandos existentes ao alterar as instruções do prompt, os exemplos ou ambos nos comandos de comentário ou revisão.

Este conjunto de instruções explica como modificar o comando review.ts alterando o texto do prompt.

Para se preparar para editar o comando review.ts:

  1. Inicie o aplicativo VS Code.
  2. No VS Code, crie uma nova janela selecionando File > New Window.
  3. Abra o projeto do agente do código Pipet selecionando File > Open Folder e a pasta pipet-code-agent/.
  4. Abra pipet-code-agent/src/review.ts.

Para modificar o comportamento do comando review.ts:

  1. No arquivo review.ts, altere o início da constante PROMPT para instruções 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. Se quiser, no arquivo review.ts, adicione outro exemplo à lista de exemplos de código e revisão 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. Salve as mudanças no arquivo review.ts.

Para testar o comando modificado:

  1. Na janela do projeto de extensão do VS Code Pipet, reinicie o depurador selecionando Run > Restart Debugging.
  2. Na janela Extension Development Host do VS Code, selecione qualquer código na janela do editor.
  3. Abra a Paleta de comandos selecionando Visualizar > Paleta de comandos.
  4. No Paleta de comandos, digite Pipet e selecione o comando Pipet: Review the selected code.

Criar novo comando

Você pode estender o Pipet criando novos comandos que executam tarefas completamente novas com a API Gemini. Na maioria das vezes, cada arquivo de comando (comment.ts e review.ts) é independente e inclui código para coletar texto do editor ativo, compor um comando, conectar-se à API Gemini, enviar um prompt e processar a resposta.

Agente do código pipe com o nome da função de seleção mostrada Figura 2. Novo comando de recomendação de nome de função na janela Host de desenvolvimento da extensão do VS Code.

Neste conjunto de instruções, explicamos como criar um novo comando usando o código de um comando já existente, comment.ts, como modelo.

Para criar um comando que recomenda nomes para funções, siga estas etapas:

  1. Faça uma cópia do arquivo pipet-code-agent/src/comment.ts chamado name.ts no diretório src/.
  2. No VS Code, abra o arquivo src/name.ts.
  3. Mude as instruções de solicitação no arquivo name.ts editando o 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. Altere o nome e a mensagem informativa da função de comando. 
    export async function generateName() {
  vscode.window.showInformationMessage('Generating function name...');
  5. Atualize o código Assembly do prompt para incluir apenas o valor PROMPT e o texto selecionado no editor. 
      // Build the full prompt using the template.
  const fullPrompt = `${PROMPT}
"
${selectedCode}
"
`;
  6. Mude a saída da resposta para descrever o que ela está gerando. 
        // update prefix to describe output
    let commentIntro = padding + commentPrefix + "Recommended name: (generated)\n";
    editBuilder.insert(selection.start, commentIntro);
    editBuilder.insert(selection.start, pyComment);
  7. Salve as mudanças no arquivo review.ts.

Integrar o novo comando

Depois de concluir o código do novo comando, você precisa integrá-lo ao restante da extensão. Atualize os arquivos extension.ts e package.json para criar a nova parte do comando da extensão e permitir que o VS Code invoque o novo comando.

Para integrar o comando name ao código da extensão:

  1. No VS Code, abra o arquivo pipet-code-agent/src/extension.ts.
  2. Adicione o novo arquivo de código à extensão incluindo uma nova instrução de importação. 
    import { generateName } from './name';
  3. Registre o novo comando adicionando o seguinte código à função activate(). 
    export function activate(context: vscode.ExtensionContext) {
    ...
    vscode.commands.registerCommand('pipet-code-agent.nameFunction', generateName);
}
  4. Salve as mudanças no arquivo extension.ts.

Para integrar o comando name ao pacote de extensões:

  1. No VS Code, abra o arquivo pipet-code-agent/package.json.
  2. Adicione o novo comando à seção commands do arquivo do pacote. 
      "contributes": {
    "commands": [
      ...
      {
        "command": "pipet-code-agent.nameFunction",
        "title": "Pipet: Name the selected function."
      }
    ],
  3. Salve as mudanças no arquivo package.json.

Testar o novo comando

Depois de concluir a codificação do comando e a integração à extensão, você poderá testá-la. Seu novo comando só está disponível na janela Extension Development Host do VS Code, e não na janela do VS Code em que você editou o código da extensão.

Para testar o comando modificado:

  1. Na janela do projeto de extensão do VS Code Pipet, reinicie o depurador selecionando Run > Restart Debugging, que reinicia outra janela Extension Development Host.
  2. Na janela Extension Development Host do VS Code, selecione um código na janela do editor.
  3. Abra a Paleta de comandos selecionando Visualizar > Paleta de comandos.
  4. No Paleta de comandos, digite Pipet e selecione o comando Pipet: Name the selected function.

Outros recursos

Para mais informações sobre o projeto do agente do Pipet Code, consulte o repositório de códigos. Se você precisar de ajuda para criar o aplicativo ou estiver procurando colaboradores desenvolvedores, confira o servidor da Comunidade de desenvolvedores do Google no Discord.

Aplicativos de produção

Se você planeja implantar o agente do Docs para um público grande, observe que o uso da API Google Gemini pode estar sujeito a limitação de taxa e outras restrições de uso. Se estiver pensando em criar um aplicativo de produção com a API Gemini, como o Docs Agent, confira os serviços da Vertex AI do Google Cloud para aumentar a escalonabilidade e a confiabilidade do seu app.