Introdução ao Modo Agent para Desenvolvimento de Aplicações

Este artigo examina o Modo Agent, uma abordagem autônoma para o desenvolvimento de aplicações assistidas por inteligência artificial. Com o Modo Agent, é possível planejar, criar pastas, arquivos e escrever código de maneira interativa e eficiente, abrindo possibilidades de automação no desenvolvimento de software. O artigo também enfatiza a importância da especificação (spec) para definir e organizar o projeto antes do início da programação

Assista à demonstração em vídeo

---

O que é o Modo Agent?

O Modo Agent é um modo inovador em ferramentas de desenvolvimento que, diferente dos métodos tradicionais baseados em prompts, permite à IA agir de forma autônoma. Ao invés de responder a comandos isolados, o Modo Agent planeja, organiza, cria pastas, arquivos, instala dependências e escreve códigos automaticamente a partir de uma descrição do projeto fornecida pelo usuário.

Autonomia com supervisão

Embora o Modo Agent seja autônomo, o acompanhamento do usuário é crucial. A IA pode pedir permissões para executar comandos, e o usuário pode revisar, pausar ou alterar o fluxo durante o processo. Isso garante que os resultados estejam alinhados com o objetivo do projeto e com as expectativas do desenvolvedor.

Limpeza de contexto e chats

Dentro do ambiente de desenvolvimento (como o VS Code), é possível iniciar novos chats ou limpar o contexto anterior. Criar um novo chat permite começar um projeto do zero, sem influências do histórico anterior, sendo útil para separar ideias e projetos diferentes.

A importância da especificação (spec)

Antes de usar o Modo Agent, o primeiro passo é criar uma especificação do projeto (spec). A spec atua como guia detalhado, descrevendo funcionalidades, requisitos e comportamentos do sistema, ajudando a economizar contexto e foco da IA ao longo do desenvolvimento.

Por que planejar antes?

Por exemplo, ao tentar replicar uma plataforma complexa como o Rocket City sem uma spec clara, a IA pode se perder ou consumir muitos tokens sem chegar a um produto funcional. Já com a spec, o projeto tem uma direção definida, torna-se mais fácil de manter alinhado e eficiente, com menos retrabalho.

Como criar uma spec

Uma spec pode ser criada em um arquivo markdown, como spec.md. Considere a seguinte abordagem para um Todo App:

• O que faz: Permite ao usuário adicionar, visualizar e remover tarefas usando o navegador.
• Interface: Uma única página HTML (index.html), responsiva, com campo de texto para tarefas, botão de adicionar e lista de tarefas com botões para remover.
• API (Back-end):
  • Rota GET /tasks: retorna todas as tarefas.
  • Rota POST /tasks: cria uma nova tarefa.
  • Rota DELETE /tasks/:id: remove uma tarefa pelo ID.

• Regras:
  • O título da tarefa não pode ser vazio.
  • As tarefas são salvas em memória.
  • Cada tarefa possui id, title e created (data de criação).

Quando a tecnologia escolhida é informada (por exemplo, Node.js para o back-end e HTML para o front-end), a IA pode criar toda a arquitetura do projeto de forma coerente, pronta para execução.

Exemplo prático: Todo App com Modo Agent

Vamos exemplificar o uso do Modo Agent para criar um Todo App. Suponha que você queira realizar todos os passos de planejamento e implementação na mesma ferramenta:

Passos práticos

1. Crie a spec: Em spec.md, registre o escopo, requisitos e regras do seu Todo App, conforme descrito acima.
2. Configure o ambiente:
   • Certifique-se de ter o Node.js instalado (disponível em nodejs.org).
   • No VS Code, abra o terminal (Terminal > Novo Terminal) e execute npm init -y para criar o arquivo package.json.
   • Instale o Express: npm install express. Ele será usado para criar as rotas da API.

1. Inicie o Modo Agent:
   • Solicite: "Leia o spec e crie o projeto completo (comece pelo backend)".
   • O Modo Agent irá ler a spec, interpretar os requisitos e criar os arquivos necessários, como server.js, utilizando Express para o backend e HTML para o frontend.

Como funciona o código gerado

O Modo Agent irá criar três principais rotas na API:

• GET /tasks: Retorna uma lista de tarefas em formato JSON.
• POST /tasks: Adiciona uma tarefa (com validação de título não vazio, retornando erro 400 caso a regra não seja seguida).
• DELETE /tasks/:id: Remove a tarefa pelo ID, retornando erro caso não encontre a tarefa.

Os dados são armazenados em memória, ou seja, serão perdidos ao reiniciar o servidor. Para evoluir o app e usar um banco de dados persistente, como MongoDB ou PostgreSQL, basta especificar tal requisito adicionalmente na sua spec.

Exemplo de trecho funcional (Express - back-end em Node.js)

const express = require('express');
const app = express();
app.use(express.json());

let tasks = [];
let nextId = 1;

app.get('/tasks', (req, res) => res.json(tasks));

app.post('/tasks', (req, res) => {
  const { title } = req.body;
  if (!title || !title.trim()) {
    return res.status(400).json({ error: 'O título não pode ser vazio.' });
  }
  const task = {
    id: nextId++,
    title: title.trim(),
    created: new Date().toISOString(),
  };
  tasks.push(task);
  res.status(201).json(task);
});

app.delete('/tasks/:id', (req, res) => {
  const id = Number(req.params.id);
  const idx = tasks.findIndex(task => task.id === id);
  if (idx === -1) {
    return res.status(404).json({ error: 'Tarefa não encontrada.' });
  }
  tasks.splice(idx, 1);
  res.status(200).json({ success: true });
});

app.listen(4000, () => console.log('Servidor rodando na porta 4000'));

Considerações e dicas práticas

• Valide as ações sugeridas pelo agent: Sempre revise comandos e código antes de aprovar execuções automáticas, garantindo segurança e alinhamento.
• Armazenamento em memória é temporário: Considere migrar para um banco de dados (MongoDB, PostgreSQL) caso queira persistência dos dados além do ciclo de vida do servidor.
• Recursos e integração: O Modo Agent pode trabalhar com Node Modules, JSON, APIs REST, HTML e outras tecnologias informadas na spec. O uso de ZSH, Node ES e outras ferramentas pode otimizar a integração no terminal.

Tecnologias e termos presentes

• Node.js: Back-end do Todo App.
• Express: Framework para rotas e API.
• HTML: Front-end da aplicação.
• MongoDB/PostgreSQL: Alternativas futuras para persistência.
• VS Code: Ambiente de desenvolvimento usado no exemplo do vídeo.
• Terminal/ZSH: Para execução de comandos (npm init, npm install, etc).
• JSON: Formato de troca de dados na API.
• Rocket City: Plataforma mencionada como exemplo de especificação para projetos mais complexos.
• Agent Grock Code Fash: Nome do agente usado como exemplo no vídeo.

---

O Modo Agent representa um avanço poderoso em automação no desenvolvimento de software, acelerando fluxos de trabalho desde que o contexto seja bem planejado a partir de uma especificação clara. Experimente com sua própria spec e descubra novas formas de criar aplicações do zero de maneira interativa e inteligente.

Assista ao vídeo original explicando na prática