Inicio rápido

Inicia IBM Bob

Inicia la aplicación IBM Bob en tu computadora.

Abre la interfaz de chat de Bob

Si la interfaz de chat de Bob no está visible, ábrela haciendo clic en el icono de Bob junto a la barra de navegación o usa el atajo Option + Command + B (Mac) o Ctrl + Alt + B (Windows).

Interactúas con Bob escribiendo solicitudes en lenguaje natural en el campo de entrada.

Clona el repositorio del tutorial

Clona el repositorio que contiene la aplicación de ejemplo usando los siguientes pasos:

1. Haz clic en el icono de archivos en la esquina superior izquierda del panel de Bob IDE.
2. Haz clic en Clonar repositorio y pega la siguiente URL del repositorio.
3. Cuando Bob te pregunte dónde deseas guardar el repositorio, elige cualquier ubicación que prefieras.

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

Abre el repositorio

Cuando Bob te pregunte si deseas abrir el repositorio clonado, haz clic en Abrir. Si Bob pregunta "¿Confías en los autores de los archivos en esta carpeta?", haz clic en Sí, confío en los autores.

El explorador muestra los archivos del proyecto y el panel de chat de Bob se abre en el lateral. Trabajarás desde la carpeta bob-get-started/express-todo-api-modern.

Cambia al modo Agent

Selecciona Agent en el selector de modo o escribe /agent en el chat. El modo Agent permite a Bob escribir, modificar y refactorizar código. Bob aún pide permiso antes de cada operación.

Configura la aprobación automática

Busca el interruptor de aprobación automática en la esquina inferior derecha de la ventana, dentro del menú Permissions. Asegúrate de que solo esté seleccionada la opción Read para la aprobación automática. Bob ejecuta automáticamente los comandos de solo lectura, pero pide aprobación para cualquier comando que modifique archivos o se ejecute en la terminal.

Inicializa Bob en tu proyecto

Ejecuta /init en el panel de chat de Bob para que Bob cree un archivo AGENTS.md raíz y archivos de reglas AGENTS.md.

El archivo AGENTS.md raíz le dice a Bob la estructura general del proyecto, las convenciones y los objetivos para que Bob pueda escribir código que se ajuste a tu proyecto. Sin él, Bob empieza desde el principio cada vez porque Bob es stateless.

Los archivos de reglas en .bob son donde Bob crea AGENTS.md para cada uno de sus modos: Agent, Plan y Ask. Cada modo tiene un conjunto diferente de reglas que guían el comportamiento de Bob en ese modo.

/init

Bob pide permiso para crear los archivos AGENTS.md. Haz clic en Approve todo tools for task para crear los archivos. Una vez que Bob crea todos los archivos AGENTS.md, verás los siguientes archivos:

Compila y ejecuta la API en Docker

Pídele a Bob que cree un Dockerfile e inicie el contenedor:

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 te pide que apruebes la compilación de la imagen y el inicio del contenedor. Haz clic en Approve todo tools for task y Approve edit tools for task.

Como solo tienes activada la aprobación automática para Read, Bob te pide permiso para ejecutar comandos Execute. Haz clic en I understand the risks y luego en Approve para permitir que Bob ejecute comandos por ti.

Bob podría encontrar un problema de NPM, como el siguiente. Aprueba las correcciones que Bob propone:

La compilación falló porque no hay un archivo package-lock.json.
Necesito actualizar el Dockerfile para usar npm install en lugar de npm ci:

La API ahora está en ejecución y disponible.

Agrega una tarea a la lista de tareas

Para probar la API, pega el siguiente comando directamente en el panel de chat de Bob. Este comando agrega una tarea a la lista de tareas haciendo una solicitud POST a la API:

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

  Dame la respuesta en formato de tabla con dos columnas: Field y Value

Bob te muestra la respuesta, que confirma que puedes agregar tareas a la lista de tareas con la API. Bob muestra una respuesta similar a la siguiente:

Detén y elimina el contenedor

Pídele a Bob que detenga y elimine el contenedor. Construirás un nuevo contenedor con la interfaz web en la siguiente sección:

Detén y elimina el contenedor en ejecución y la imagen Docker.

Inicia una nueva conversación

Haz clic en el signo más en la parte superior de la interfaz de chat para iniciar una nueva conversación y limpiar la ventana de contexto.

Iniciar una nueva conversación limpia la ventana de contexto, lo que:

• evita que las discusiones previas de planificación consuman tu token budget.
• mantiene el contexto de implementación enfocado en el plan aprobado.
• reduce el riesgo de que Bob mezcle instrucciones de planificación e implementación.

Planifica la interfaz web

Antes de modificar el código, cambia al modo Plan para que Bob pueda crear un plan sobre cómo construir la interfaz web. Haz clic en el menú desplegable de selección de modo y selecciona Plan, o escribe /plan en el chat.

Pídele a Bob que planifique la interfaz web ui-plan.md en el directorio del proyecto express-todo-api-modern. Bob pide usar skill tools y subagents para crear el plan. Haz clic en Approve skill tools for task para permitir que Bob use las skill tools, en Approve subagent tools for task para permitir que Bob use subagents y en Approve edit tools for task para guardar el plan.

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 puede hacer preguntas de aclaración para entender mejor los requisitos. Puedes responderlas o decirle a Bob que haga lo que recomienda.

Revisa el plan antes de decirle a Bob que lo ejecute. Haz clic en ui-plan.md en el explorador para abrirlo.

Pídele a Bob que construya la interfaz web

Cambia Bob al modo Agent haciendo clic en el menú desplegable de selección de modo y seleccionando Agent, o escribe /agent en el chat.

Pídele a Bob que construya la interfaz, la containerice y la ejecute:

Implementa el plan `ui-plan.md` que esbozaste para construir la interfaz web,
containerizar la aplicación con Docker y ejecutarla.
No instales dependencias localmente. El Dockerfile maneja todas las instalaciones.

Bob lee el ui-plan.md, te muestra los archivos que creará o cambiará y luego compila e inicia el contenedor. Haz clic en Approve en las solicitudes de herramientas de Bob.

Como solo tienes activada la aprobación automática para Read, Bob te pide permiso para ejecutar comandos Execute. Haz clic en I understand the risks y luego en Approve para permitir que Bob ejecute comandos por ti.

Corrige fallos de compilación

A veces el primer intento de Bob de construir la interfaz y el contenedor puede fallar debido a errores en el código o Dockerfile. Bob te muestra el mensaje de error y propone una corrección. La iteración de desarrollo es parte de escribir código con Bob.

Los siguientes son algunos posibles errores y correcciones que podrías encontrar:

La compilación falló porque `npm ci` requiere un archivo package-lock.json.
Déjame actualizar el Dockerfile para usar `npm install` en su lugar.

Vite no puede encontrar index.html. El problema es que index.html está en el directorio `public`
pero Vite lo espera en la raíz. Déjame moverlo a la ubicación correcta.

Abre la interfaz web en tu navegador

Una vez que el contenedor esté en ejecución, Bob te da un resumen de lo que completó.

Abre http://localhost:3000/index.html en tu navegador. Intenta agregar una nueva tarea usando el campo de entrada para confirmar que la API funciona correctamente.

Pídele a Bob que actualice los estilos

Personaliza la interfaz diciéndole a Bob qué fuente, color de fuente y color de fondo deseas. Las siguientes son algunas fuentes que puedes elegir:

• Inter: Una opción popular para aplicaciones web
• Georgia: Una fuente serif clásica, cálida y legible
• JetBrains Mono: Una fuente monoespaciada con sensación de herramienta de desarrollador

Elige un color de fuente y color de fondo. En el panel de chat de Bob, describe tus elecciones usando lenguaje natural. El siguiente es un ejemplo de personalización:

Actualiza los estilos de la interfaz web.
Usa la fuente Inter.
Fondo azul marino oscuro.
Texto blanco.

Bob propone ediciones a los estilos de los componentes React. Revisa el diff y haz clic en Guardar para aceptar los cambios.

Recompila el contenedor y ve tus cambios

El contenedor en ejecución todavía sirve los estilos antiguos. Pídele a Bob que lo recompile y reinicie para que puedas ver tus cambios:

Recompila la imagen Docker y reinicia el contenedor con los estilos actualizados.

Actualiza http://localhost:3000/index.html en tu navegador para ver el diseño actualizado.