Contextualizando editores e foco em IA
Vamos começar abrindo o Cursor.
Estamos com o Visual Studio Code aberto, inclusive no projeto que demonstramos em sequências anteriores deste vídeo. Temos um Visual Studio Code com várias personalizações: cores específicas configuradas ao longo de anos desenvolvendo. Quando olhamos para essa tela, vemos nossa trajetória como pessoas desenvolvedoras que utilizaram essa ferramenta e a personalizaram de acordo com as necessidades.
O mesmo vale para o Visual Studio Code - Insiders. A interface é bastante semelhante, apesar de pequenas diferenças. Existem variações entre uma versão e outra, principalmente em algumas cores que deixamos de propósito para visualizarmos a diferença entre as versões. Ainda assim, ambas funcionam de forma muito próxima atualmente, tanto o Visual Studio Code - Insiders quanto a versão padrão do Visual Studio Code.
Esta plataforma evoluiu substancialmente. No início, não havia, por exemplo, uma janela dedicada para Agents (Agentes), nem uma seção direcionada ao desenvolvimento AI First (IA em primeiro lugar), isto é, utilizando IAs como a principal forma de desenvolver software, que é nosso objetivo aqui, independentemente da linguagem. Não estamos falando especificamente de React, TypeScript, JavaScript ou qualquer outra; falamos de maneira independente de linguagem.
Quando utilizamos uma ferramenta que ainda não foca tanto em IA e surge outra como o Cursor, que já existe há bastante tempo — utilizamos o Cursor há mais de um ano, quase dois, como ferramenta paralela —, vale notar que o Visual Studio Code e o Visual Studio Code - Insiders, por serem ferramentas de código aberto, permitem que qualquer pessoa desenvolva um plugin (extensão), publique algo no Marketplace (loja de extensões) e disponibilize para a comunidade. Por isso, foram amplamente adotados. É claro que existem outras variações: há o Quiro, há o Sublime Text, que também evoluiu bastante após o avanço do Visual Studio Code. Temos diversas ferramentas para editar código, e até pessoas mais “raiz” utilizam o Vim. Utilizamos o Vim por muito tempo no início, quando trabalhávamos com PHP e scripts, acessando via terminal e editando diretamente no terminal. Hoje, porém, contamos com ferramentas que facilitam ainda mais o trabalho. O Cursor nasceu nesse contexto: prioriza o desenvolvimento com IA e, a partir disso, adiciona os demais recursos, sem desconsiderar sua importância. O Cursor já nasce com o pensamento AI First (IA em primeiro lugar), diferentemente do Visual Studio Code e de outras ferramentas que passaram a adotar esses recursos posteriormente.
No Visual Studio Code, podemos ver várias extensões instaladas — são 47 no total. Elas refletem nosso período trabalhando com .NET, Docker, Go e muitos outros itens. Mantemos uma infinidade de extensões que contam nossa história como pessoas desenvolvedoras, além das nossas configurações de keybindings (atalhos de teclado), que ajustamos conforme necessário e não gostaríamos de perder.
Abrindo o Cursor e ajustando a interface
Visto isso, vamos fechar ambos, pois não vamos utilizá-los agora, e abrir o Cursor. Estamos utilizando um Mac e recorremos a uma ferramenta de busca para abrir as aplicações. Você, estudante, ao realizar a instalação, provavelmente terá um ícone criado em algum local do sistema para iniciar o Cursor. Caso ainda não tenha feito a instalação, quando fizer, verifique se foi criado um ícone na área de trabalho ou em outro local de inicialização para facilitar o acesso ao Cursor.
Ao abrir o Cursor, vamos maximizar a janela para ocupar todo o espaço da tela e aumentar o zoom para ampliar a fonte, tornando a visualização mais confortável para você e para nós também. A partir daqui, seguimos para os pontos mais relevantes.
Configurando conta e integrações
Com o Cursor aberto, na tela inicial, no canto inferior esquerdo, onde ficam as informações de usuário, encontramos as opções de Settings (configurações) e o botão de Logout (sair). Ao clicar em Settings (configurações), acessamos a área de configuração da ferramenta em si. Percebemos que a sessão não estava sendo reconhecida, então validamos o login pela primeira opção, General (geral). A primeira seção é Cursor Account (conta do Cursor). Ao clicar em Open (abrir), somos redirecionados para o Dashboard (painel) na web. Na web, em Overview (visão geral), visualizamos a conta.
Nesta área, é possível configurar a conexão com o GitHub (GitHub) ou GitLab (GitLab), e também conectar ao Slack (Slack), que é um aplicativo de mensagens amplamente utilizado no ambiente corporativo. Há a seção de extensão do Cursor com plugins (extensões), que deixamos desabilitada, pois a intenção é realizar essas alterações gradualmente, testando cada uma na prática para entender como funcionam. Também estão disponíveis as configurações de assinatura. No nosso caso, utilizamos o Plano Pro, com valor de 20 dólares por mês. Em histórico de edições, o sistema exibe as últimas edições realizadas, o número de linhas editadas e outras métricas, além das conexões e integrações associadas ao Cursor.
Em Settings (configurações), conseguimos alterar o perfil: trocar e-mail, foto e nome, vincular contas como X (X), GitHub (GitHub), LinkedIn (LinkedIn) e site, e habilitar o perfil como privado ou não. Também é possível ajustar o tema. Todas essas configurações refletem no Cursor em execução no aplicativo, não apenas na interface web. Ao acessar Profile (perfil) e, em seguida, Appearance (aparência), controlamos a aparência da ferramenta. Essas informações ficam associadas à nossa conta.
Há opções específicas do Mac (Mac), como contraste do sistema operacional. Podemos escolher utilizar o contraste do sistema em vez do contraste definido no próprio Cursor. Existe uma ampla gama de conexões e configurações que diferem de outras ferramentas, oferecendo uma interatividade superior.
Acessando repositórios e alternando visualizações
Antes de avançarmos para como importar configurações e migrar recursos, vamos acessar o repositório do projeto "Merge Conf". Retornamos à área principal da aplicação. No topo da aplicação, à direita, há o ícone da IDE (ambiente de desenvolvimento) com uma seta apontando na diagonal para cima, o menu de três pontos e um seletor de visualizações, incluindo o browser (navegador) embutido e a área de mudanças. Clicamos em IDE (ambiente de desenvolvimento) para alterar a visualização atual.
Ao instalar e abrir o Cursor, por padrão ele inicia em Agents (agentes), a visualização que estamos analisando. Assim como na interface web, há uma seleção de repositórios locais, e também é possível selecionar repositórios remotos a partir das contas vinculadas, como GitLab (GitLab) ou GitHub (GitHub). Posteriormente, vamos demonstrar na prática como realizar essa vinculação ao GitHub (GitHub), embora nossa conta já esteja vinculada.
Conseguimos iniciar projetos do zero e criar pastas diretamente nesse modo de Agents (agentes). Antes, no Visual Studio Code, especialmente antes das mudanças para atender à necessidade de AI Search (busca com IA), era preciso criar a pasta manualmente e abri-la separadamente na ferramenta para que aparecesse. Aqui, o Cursor já realiza um search (busca) local e coleta essas informações automaticamente.
Vamos abrir o projeto "Merge Conf". Como ainda não o abrimos no Mac (Mac) e o repositório não foi identificado, vamos buscá-lo localmente. Selecionamos a pasta "Repos" e pesquisamos por "Merge Conf". Caso não seja encontrado, clicamos em Open Folder (abrir pasta), pois o repositório pode estar em uma pasta sem permissão de acesso. Em Open Folder (abrir pasta), é exibida a janela do sistema para seleção. Selecionamos a localização do repositório, dentro da pasta "Alura" e, em seguida, a pasta "Merge Conf". Clicamos em Open (abrir) e o Cursor passa a ter acesso ao projeto "Merge Conf".
A ferramenta identifica as branches; por exemplo, exibe a branch Master. Também é possível selecionar o ambiente de execução: local no Mac (Mac) ou, como terceira opção, criar uma máquina remota para executar o projeto. Não utilizaremos execução remota neste momento. O importante é que o projeto foi identificado na tela inicial da aplicação.
Gerenciando workspaces e autenticação
Se quisermos criar um Workspace (espaço de trabalho) para este repositório e facilitar o acesso no modo IDE (ambiente de desenvolvimento), basta abrir o menu lateral esquerdo em Workspace (espaço de trabalho), clicar no segundo ícone, Open Workspace (abrir espaço de trabalho), e selecionar "Merge Conf". Ele passa a aparecer na identificação do Cursor como um Workspace (espaço de trabalho) existente. Ao selecionar, o projeto abre; porém, não ficou salvo na lista de Workspace (espaço de trabalho), possivelmente devido a uma instabilidade na conta.
Diante disso, clicamos em Logout (sair) para encerrar a sessão no Cursor. Isso também permite observar como a aplicação inicia ao primeiro acesso. Quando estamos deslogados, a aplicação exibe os botões Login (entrar) e Sign Up (cadastrar). Clicamos em Login (entrar) e somos redirecionados para o navegador. O Cursor oferece SSO (login único), isto é, Single Sign-On (login único), e já lista a opção de autenticação pela conta vinculada, no nosso caso, a conta do GitHub (GitHub). Após realizar o Login (entrar), notamos que, em Workspace (espaço de trabalho), o "Merge Conf" ainda não aparece como favoritado; portanto, ainda não está marcado como favorito.
Favorito: ao acessarmos a parte lateral esquerda, o sistema exibe nossa conta. As informações agora estão apresentadas de forma mais agradável, o que nos permite uma visão mais clara em comparação ao que víamos anteriormente.
Explorando a interface da IDE
Ao clicarmos na parte de IDE (Ambiente de Desenvolvimento Integrado), percebemos que ela é bastante parecida com o que temos no nosso Visual Studio Code (editor Visual Studio Code). As interações para criar um novo arquivo, adicionar um emulador e toda a visualização da janela de edição de texto são muito semelhantes às de outros editores, pois se trata, de fato, de uma janela de IDE (Ambiente de Desenvolvimento Integrado) para manipularmos o código.
Fechamos a página inicial e vemos a aparência inicial do Cursor (Cursor). Mesmo sendo um projeto AI First (prioridade em IA), ele iniciou com a interface de IDE (Ambiente de Desenvolvimento Integrado). Nessa tela, temos as opções de abrir um projeto, clonar um repositório, executar via SSH (Secure Shell) e até realizar esse controle via iOS (iOS), pois essa configuração já está vinculada à nossa conta.
O que importa aqui é abrir um projeto. Podemos clicar em Abrir projeto, seguir o mesmo caminho para localizar o diretório, entrar na pasta 'Alura' e, em seguida, na pasta 'Merge Conf'. O projeto é aberto como se estivéssemos trabalhando localmente. A organização da interface pode estar invertida em relação ao padrão, porque preferimos manter o controle de IA à esquerda, o código ao centro e as pastas à direita; é uma configuração que adotamos. Ainda assim, a visualização permanece muito semelhante ao nosso Visual Studio Code (editor Visual Studio Code).
Por exemplo, na lateral esquerda, vemos os arquivos do projeto. Podemos abrir um componente, como grade horários. Observamos que não há aquelas cores, ícones e configurações avançadas que utilizávamos no Visual Studio Code (editor Visual Studio Code); no Cursor (Cursor) isso ainda não foi migrado e também não contamos com todo o conjunto de ferramentas e extensões disponíveis lá. Ainda assim, temos toda a visualização necessária: a área central do código e, à direita, o modo Agents (agentes).
Configurando agents e modelos
No modo Agents (agentes), conseguimos acionar quantos agentes quisermos para trabalhar no código. Nessa área, há um botão de +, um ícone de relógio que exibe o histórico e um botão de ... (três pontos), no qual fazemos configurações do editor, como a visibilidade dos ícones. Podemos, por exemplo, habilitar o Cloud Code (código em nuvem) para deixá-lo como padrão, sempre visível, caso optemos por utilizá-lo em lugar de outro agent (agente). O Cloud Code (código em nuvem) apresenta um inconveniente: em vez de aparecer na janela esquerda, onde ficam os agents (agentes), ele surge na lateral direita, abaixo da visualização de pastas. Conseguimos alterar isso, mas, sendo bem sinceros, não gostamos de usar o Cloud Code (código em nuvem) embutido no Cursor (Cursor); quando utilizamos o Cloud Code (código em nuvem), preferimos o terminal integrado ou o próprio modo Agents (agentes).
Dentro das ferramentas, podemos selecionar qual será o modelo. Temos acesso ao Grok 4.6 (Grok 4.6), Opus 5 (Opus 5), GPT Sol (GPT Sol) e conseguimos adicionar outros modelos. Estamos apenas apresentando por alto para irmos nos familiarizando; posteriormente, vamos detalhar cada um desses pontos, configurar, vincular contas e explorar como funciona essa visualização central da aplicação.
O que já sabemos até agora? O Cloud Code (código em nuvem) funciona integrado aqui, se quisermos. Existem dois tipos de visualização: o modo Agents (agentes) e o modo IDE (Ambiente de Desenvolvimento Integrado), mostrado anteriormente. No modo Agents (agentes), temos uma tela com chat (bate-papo) para interagir com os agentes, solicitar alterações e acompanhar o trabalho. A partir dessas visualizações, conseguimos interagir com projetos rodando localmente ou na Cloud (nuvem).
Personalizando as visualizações
E como personalizamos essas visualizações agora, Pedro?
Veremos isso na sequência. Passamos um tempo considerável entendendo o funcionamento da aplicação, suas configurações e diferenças. Agora, sim, vamos aplicar as configurações desejadas e personalizar de forma que a aplicação adote um padrão.
Se não quisermos trazer nada, não há problema: podemos começar do zero. Caso queiramos importar configurações, isso também é possível. Veremos tudo na sequência, estudante.