Início Rápido

Inicie o IBM Bob

Inicie o aplicativo IBM Bob no seu computador.

Abra a interface de chat do Bob

Se a interface de chat do Bob não estiver visível, abra-a clicando no ícone Bob ao lado da barra de navegação ou use o atalho Option + Command + B (Mac) ou Ctrl + Alt + B (Windows).

Você interage com Bob digitando solicitações em linguagem natural no campo de entrada.

Clone o repositório do tutorial

Clone o repositório contendo o aplicativo de exemplo usando os seguintes passos:

1. Clique no ícone de arquivos no canto superior esquerdo do painel Bob IDE.
2. Clique em Clonar Repositório e cole o URL do repositório a seguir.
3. Quando Bob perguntar onde salvar o repositório, escolha qualquer local que preferir.

https://github.com/IBM/bob-demo.git

Abra o repositório

Quando Bob perguntar se você deseja abrir o repositório clonado, clique em Abrir. Se Bob perguntar "Você confia nos autores dos arquivos nesta pasta?", clique em Sim, confio nos autores.

O explorer mostra os arquivos do projeto e o painel de chat do Bob abre ao lado. Você trabalhará a partir da pasta bob-get-started/express-todo-api-modern.

Mude para o modo Agent

Selecione Agent no seletor de modo ou digite /agent no chat. O modo Agent permite que Bob escreva, modifique e refatore código. Bob ainda pede permissão antes de cada operação.

Configure a aprovação automática

Encontre o botão de aprovação automática no canto inferior direito da janela, no menu Permissions. Certifique-se de que apenas Read esteja selecionado para aprovação automática. Bob executa automaticamente comandos somente leitura, mas pede aprovação para qualquer comando que modifique arquivos ou seja executado no terminal.

Inicialize Bob no seu projeto

Execute /init no painel de chat do Bob para que Bob crie um arquivo AGENTS.md raiz e arquivos de regras AGENTS.md.

O arquivo AGENTS.md raiz informa ao Bob a estrutura geral do projeto, convenções e objetivos para que Bob possa escrever código que se ajuste ao seu projeto. Sem ele, Bob começa do início toda vez porque Bob é stateless.

Os arquivos de regras em .bob são onde Bob cria AGENTS.md para cada um de seus modos: Agent, Plan e Ask. Cada modo tem um conjunto diferente de regras que orientam o comportamento do Bob nesse modo.

/init

Bob pede permissão para criar os arquivos AGENTS.md. Clique em Approve todo tools for task para criar os arquivos. Depois que Bob criar todos os arquivos AGENTS.md, você verá os seguintes arquivos:

Compile e execute a API no Docker

Peça ao Bob para criar um Dockerfile e iniciar o contêiner:

Create a Dockerfile for this API using Node 22 and run it on port 3000.
Don't install dependencies locally.
The Dockerfile handles all installations.

Once you create the Dockerfile, build the image and start the container.

Bob pede que você aprove a compilação da imagem e o início do contêiner. Clique em Approve todo tools for task e Approve edit tools for task.

Como você deixou apenas a aprovação automática para Read ativada, Bob pede permissão para executar comandos Execute. Clique em I understand the risks e depois em Approve para permitir que Bob execute comandos para você.

Bob pode encontrar um problema de NPM, como o seguinte. Aprove as correções que Bob propõe:

A compilação falhou porque não há arquivo package-lock.json.
Preciso atualizar o Dockerfile para usar npm install em vez de npm ci:

A API está agora em execução e disponível.

Adicione uma tarefa à lista de tarefas

Para testar a API, cole o seguinte comando diretamente no painel de chat do Bob. Este comando adiciona uma tarefa à lista de tarefas fazendo uma solicitação POST para a API:

curl -X POST http://localhost:3000/api/todos \
  -H "Content-Type: application/json" \
  -d '{"title": "Build a web UI"}'

  Mostre a resposta em formato de tabela com duas colunas: Field e Value

Bob mostra a resposta, que confirma que você pode adicionar tarefas à lista de tarefas com a API. Bob mostra uma resposta semelhante à seguinte:

Pare e remova o contêiner

Peça ao Bob para parar e remover o contêiner. Você construirá um novo contêiner com a interface web na seção seguinte:

Pare e remova o contêiner em execução e a imagem Docker.

Inicie uma nova conversa

Clique no sinal de mais na parte superior da interface de chat para iniciar uma nova conversa e limpar a janela de contexto.

Iniciar uma nova conversa limpa a janela de contexto, o que:

• evita que discussões anteriores de planejamento consumam seu token budget.
• mantém o contexto de implementação focado no plano aprovado.
• reduz o risco de Bob confundir instruções de planejamento e implementação.

Planeje a interface web

Antes de modificar o código, mude para o modo Plan para que Bob possa criar um plano sobre como construir a interface web. Clique no menu suspenso de seleção de modo e selecione Plan, ou digite /plan no chat.

Peça ao Bob para planejar a interface web ui-plan.md no diretório do projeto express-todo-api-modern. Bob pede para usar skill tools e subagents para criar o plano. Clique em Approve skill tools for task para permitir que Bob use as skill tools, em Approve subagent tools for task para permitir que Bob use subagents e em Approve edit tools for task para salvar o plano.

Make a plan to add a React TypeScript web UI to this todo app using Vite.

The UI needs to:
- Display all existing tasks fetched from GET /api/todos
- Add new tasks using POST /api/todos
- Mark tasks as complete or incomplete using PUT /api/todos/:id

Constraints:
- Do not modify the existing Express API or its endpoints
- Serve both the API and React frontend from a single Docker container using a multi-stage build
- Keep the implementation simple: no authentication, no client-side routing, no external state management library
- run `npm install` inside the Dockerfile

Save the plan to a file named `ui-plan.md` in the express-todo-api-modern project directory.

Bob pode fazer perguntas de esclarecimento para entender melhor os requisitos. Você pode responder às perguntas ou dizer ao Bob para fazer o que ele recomendar.

Revise o plano antes de dizer ao Bob para executá-lo. Clique em ui-plan.md no explorer para abri-lo.

Peça ao Bob para construir a interface web

Mude Bob para o modo Agent clicando no menu suspenso de seleção de modo e selecionando Agent, ou digite /agent no chat.

Peça ao Bob para construir a interface, containerizá-la e executá-la:

Implemente o plano `ui-plan.md` que você delineou para construir a interface web,
containerizar o aplicativo com Docker e executá-lo.
Não instale dependências localmente. O Dockerfile cuida de todas as instalações.

Bob lê o ui-plan.md, mostra os arquivos que criará ou alterará e, em seguida, compila e inicia o contêiner. Clique em Approve nas solicitações de ferramentas do Bob.

Como você deixou apenas a aprovação automática para Read ativada, Bob pede permissão para executar comandos Execute. Clique em I understand the risks e depois em Approve para permitir que Bob execute comandos para você.

Corrija falhas de compilação

Às vezes, a primeira tentativa do Bob de construir a interface e o contêiner pode falhar devido a erros no código ou Dockerfile. Bob mostra a mensagem de erro e propõe uma correção. A iteração de desenvolvimento faz parte da escrita de código com Bob.

A seguir estão alguns possíveis erros e correções que você pode encontrar:

A compilação falhou porque `npm ci` requer um arquivo package-lock.json.
Deixe-me atualizar o Dockerfile para usar `npm install` em vez disso.

Vite não consegue encontrar index.html. O problema é que index.html está no diretório `public`
mas Vite espera que esteja na raiz. Deixe-me movê-lo para o local correto.

Abra a interface web no seu navegador

Depois que o contêiner estiver em execução, Bob fornece um resumo do que foi concluído.

Abra http://localhost:3000/index.html no seu navegador. Tente adicionar uma nova tarefa usando o campo de entrada para confirmar que a API está funcionando corretamente.

Peça ao Bob para atualizar os estilos

Personalize a interface dizendo ao Bob qual fonte, cor da fonte e cor de fundo você deseja. A seguir estão algumas fontes que você pode escolher:

• Inter: Uma escolha popular para aplicativos web
• Georgia: Uma fonte serif clássica, acolhedora e legível
• JetBrains Mono: Uma fonte monoespaçada com sensação de ferramenta de desenvolvedor

Escolha uma cor de fonte e cor de fundo. No painel de chat do Bob, descreva suas escolhas usando linguagem natural. A seguir está um exemplo de personalização:

Atualize os estilos da interface web.
Use a fonte Inter.
Fundo azul-marinho escuro.
Texto branco.

Bob propõe edições nos estilos dos componentes React. Revise o diff e clique em Salvar para aceitar as alterações.

Recompile o contêiner e veja suas alterações

O contêiner em execução ainda está servindo os estilos antigos. Peça ao Bob para recompilá-lo e reiniciá-lo para que você possa ver suas alterações:

Recompile a imagem Docker e reinicie o contêiner com os estilos atualizados.

Atualize http://localhost:3000/index.html no seu navegador para ver o design atualizado.