Schnellstart

Starten Sie IBM Bob

Starten Sie die IBM Bob-Anwendung auf Ihrem Computer.

Öffnen Sie die Bob-Chat-Oberfläche

Wenn die Bob-Chat-Oberfläche nicht sichtbar ist, öffnen Sie sie, indem Sie auf das Bob-Symbol neben der Navigationsleiste klicken oder die Tastenkombination Option + Command + B (Mac) oder Ctrl + Alt + B (Windows) verwenden.

Sie interagieren mit Bob, indem Sie Anfragen in natürlicher Sprache in das Eingabefeld eingeben.

Klonen Sie das Tutorial-Repository

Klonen Sie das Repository mit der Beispielanwendung mit den folgenden Schritten:

1. Klicken Sie auf das Dateisymbol in der oberen linken Ecke des Bob IDE-Panels.
2. Klicken Sie auf Repository klonen und fügen Sie die folgende Repository-URL ein.
3. Wenn Bob Sie fragt, wo das Repository gespeichert werden soll, wählen Sie einen beliebigen Speicherort.

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

Öffnen Sie das Repository

Wenn Bob Sie fragt, ob Sie das geklonte Repository öffnen möchten, klicken Sie auf Öffnen. Wenn Bob fragt "Vertrauen Sie den Autoren der Dateien in diesem Ordner?", klicken Sie auf Ja, ich vertraue den Autoren.

Der Explorer zeigt die Projektdateien an, und das Bob-Chat-Panel öffnet sich an der Seite. Sie arbeiten aus dem Ordner bob-get-started/express-todo-api-modern.

Wechseln Sie in den Agent-Modus

Wählen Sie Agent in der Modusauswahl oder geben Sie /agent im Chat ein. Der Agent-Modus ermöglicht es Bob, Code zu schreiben, zu ändern und zu refaktorisieren. Bob fragt weiterhin vor jeder Operation um Erlaubnis.

Konfigurieren Sie die automatische Genehmigung

Suchen Sie den Schalter für die automatische Genehmigung unten rechts im Fenster im Menü Permissions. Stellen Sie sicher, dass für die automatische Genehmigung nur Read ausgewählt ist. Bob führt schreibgeschützte Befehle automatisch aus, bittet aber bei jedem Befehl um Genehmigung, der Dateien ändert oder im Terminal ausgeführt wird.

Initialisieren Sie Bob in Ihrem Projekt

Führen Sie /init im Bob-Chat-Panel aus, damit Bob eine Root-AGENTS.md-Datei und Regel-AGENTS.md-Dateien erstellt.

Die Root-AGENTS.md-Datei teilt Bob die Gesamtstruktur, Konventionen und Ziele des Projekts mit, damit Bob Code schreiben kann, der zu Ihrem Projekt passt. Ohne sie beginnt Bob jedes Mal wieder von vorn, weil Bob zustandslos ist.

Die Regeldateien in .bob sind der Ort, an dem Bob AGENTS.md für jeden seiner Modi erstellt: Agent, Plan und Ask. Jeder Modus hat einen anderen Satz von Regeln, die Bobs Verhalten in diesem Modus leiten.

/init

Bob bittet um Erlaubnis, die AGENTS.md-Dateien zu erstellen. Klicken Sie auf Approve todo tools for task, um die Dateien zu erstellen. Sobald Bob alle AGENTS.md-Dateien erstellt hat, sehen Sie die folgenden Dateien:

Erstellen und führen Sie die API in Docker aus

Bitten Sie Bob, ein Dockerfile zu erstellen und den Container zu starten:

Erstelle ein Dockerfile für diese API mit Node 22 und führe es auf Port 3000 aus.
Installiere keine Abhängigkeiten lokal.
Das Dockerfile übernimmt alle Installationen.

Sobald du das Dockerfile erstellt hast, erstelle das Image und starte den Container.

Bob bittet Sie, das Erstellen des Images und das Starten des Containers zu genehmigen. Klicken Sie auf Approve todo tools for task und Approve edit tools for task.

Da Sie nur die automatische Genehmigung für Read aktiviert haben, bittet Bob Sie um Erlaubnis, Execute-Befehle auszuführen. Klicken Sie auf I understand the risks und dann auf Approve, damit Bob Befehle für Sie ausführen kann.

Bob könnte ein NPM-Problem finden, wie das folgende. Genehmigen Sie die Korrekturen, die Bob vorschlägt:

Der Build ist fehlgeschlagen, weil es keine package-lock.json-Datei gibt.
Ich muss das Dockerfile aktualisieren, um npm install anstelle von npm ci zu verwenden:

Die API läuft jetzt und ist verfügbar.

Fügen Sie eine Aufgabe zur To-Do-Liste hinzu

Um die API zu testen, fügen Sie den folgenden Befehl direkt in das Bob-Chat-Panel ein. Dieser Befehl fügt eine Aufgabe zur To-Do-Liste hinzu, indem er eine POST-Anfrage an die API sendet:

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

  Gib mir die Antwort im Tabellenformat mit zwei Spalten: Feld und Wert

Bob zeigt Ihnen die Antwort, die bestätigt, dass Sie Aufgaben mit der API zur To-Do-Liste hinzufügen können. Bob zeigt eine Antwort ähnlich der folgenden:

Stoppen und entfernen Sie den Container

Bitten Sie Bob, den Container zu stoppen und zu entfernen. Sie erstellen im folgenden Abschnitt einen neuen Container mit der Web-UI:

Stoppe und entferne den laufenden Container und das Docker-Image.

Starten Sie eine neue Unterhaltung

Klicken Sie oben in der Chat-Oberfläche auf das Pluszeichen, um eine neue Unterhaltung zu starten und das Kontextfenster zu leeren.

Das Starten einer neuen Unterhaltung leert das Kontextfenster, was:

• verhindert, dass frühere Planungsdiskussionen Ihr Token-Budget verbrauchen.
• den Implementierungskontext auf den genehmigten Plan fokussiert hält.
• das Risiko verringert, dass Bob Planungs- und Implementierungsanweisungen vermischt.

Planen Sie die Web-UI

Bevor Sie Code ändern, wechseln Sie in den Plan-Modus, damit Bob einen Plan erstellen kann, wie es die Web-UI erstellt. Klicken Sie auf das Dropdown-Menü zur Modusauswahl und wählen Sie Plan, oder geben Sie /plan im Chat ein.

Bitten Sie Bob, die Web-UI ui-plan.md im Projektverzeichnis express-todo-api-modern zu planen. Bob bittet darum, Skill-Tools und Subagents zu verwenden, um den Plan zu erstellen. Klicken Sie auf Approve skill tools for task, damit Bob die Skill-Tools verwenden kann, auf Approve subagent tools for task, damit Bob Subagents verwenden kann, und auf Approve edit tools for task, um den Plan zu speichern.

Erstelle einen Plan, um dieser Todo-App eine React TypeScript-Web-UI mit Vite hinzuzufügen.

Die UI muss:
- alle vorhandenen Aufgaben anzeigen, die von GET /api/todos abgerufen werden
- neue Aufgaben mit POST /api/todos hinzufügen
- Aufgaben mit PUT /api/todos/:id als erledigt oder nicht erledigt markieren

Einschränkungen:
- Ändere nicht die bestehende Express API oder ihre Endpunkte
- Stelle sowohl die API als auch das React-Frontend aus einem einzigen Docker-Container mit einem Multi-Stage-Build bereit
- Halte die Implementierung einfach: keine Authentifizierung, kein clientseitiges Routing, keine externe State-Management-Bibliothek
- führe `npm install` im Dockerfile aus

Speichere den Plan in einer Datei namens `ui-plan.md` im Projektverzeichnis express-todo-api-modern.

Bob könnte Rückfragen stellen, um die Anforderungen besser zu verstehen. Sie können die Fragen entweder beantworten oder Bob sagen, dass es seine Empfehlung umsetzen soll.

Überprüfen Sie den Plan, bevor Sie Bob bitten, ihn auszuführen. Klicken Sie auf ui-plan.md im Explorer, um ihn zu öffnen.

Bitten Sie Bob, die Web-UI zu erstellen

Wechseln Sie Bob in den Agent-Modus, indem Sie auf das Dropdown-Menü zur Modusauswahl klicken und Agent auswählen, oder geben Sie /agent im Chat ein.

Bitten Sie Bob, die UI zu erstellen, zu containerisieren und auszuführen:

Implementiere den Plan `ui-plan.md`, den du skizziert hast, um die Web-UI zu erstellen,
die Anwendung mit Docker zu containerisieren und sie auszuführen.
Installiere keine Abhängigkeiten lokal. Das Dockerfile übernimmt alle Installationen.

Bob liest die ui-plan.md, zeigt Ihnen die Dateien, die es erstellen oder ändern wird, und erstellt und startet dann den Container. Klicken Sie bei Bobs Tool-Anfragen auf Approve.

Da Sie nur die automatische Genehmigung für Read aktiviert haben, bittet Bob Sie um Erlaubnis, Execute-Befehle auszuführen. Klicken Sie auf I understand the risks und dann auf Approve, damit Bob Befehle für Sie ausführen kann.

Beheben Sie Build-Fehler

Manchmal schlägt Bobs erster Versuch, die UI und den Container zu erstellen, aufgrund von Fehlern im Code oder Dockerfile fehl. Bob zeigt Ihnen die Fehlermeldung und schlägt eine Korrektur vor. Entwicklungsiteration ist Teil des Schreibens von Code mit Bob.

Die folgenden sind einige mögliche Fehler und Korrekturen, auf die Sie stoßen könnten:

Der Build ist fehlgeschlagen, weil `npm ci` eine package-lock.json-Datei erfordert.
Lass mich das Dockerfile aktualisieren, um stattdessen `npm install` zu verwenden.

Vite kann index.html nicht finden. Das Problem ist, dass index.html im `public`-Verzeichnis ist,
aber Vite erwartet es im Root. Lass mich es an den richtigen Ort verschieben.

Öffnen Sie die Web-UI in Ihrem Browser

Sobald der Container läuft, gibt Bob Ihnen eine Zusammenfassung dessen, was es abgeschlossen hat.

Öffnen Sie http://localhost:3000/index.html in Ihrem Browser. Versuchen Sie, eine neue Aufgabe mit dem Eingabefeld hinzuzufügen, um zu bestätigen, dass die API korrekt funktioniert.

Bitten Sie Bob, die Stile zu aktualisieren

Personalisieren Sie die UI, indem Sie Bob mitteilen, welche Schriftart, Schriftfarbe und Hintergrundfarbe Sie möchten. Die folgenden sind einige Schriftarten, aus denen Sie wählen können:

• Inter: Eine beliebte Wahl für Web-Apps
• Georgia: Eine klassische Serifenschrift, die warm und lesbar ist
• JetBrains Mono: Eine Monospace-Schrift mit einem Entwickler-Tool-Feeling

Wählen Sie eine Schriftfarbe und Hintergrundfarbe. Beschreiben Sie im Bob-Chat-Panel Ihre Auswahl in natürlicher Sprache. Das Folgende ist ein Anpassungsbeispiel:

Aktualisiere die Stile der Web-UI.
Verwende die Schriftart Inter.
Dunkler Navy-Hintergrund.
Weißer Text.

Bob schlägt Bearbeitungen der React-Komponentenstile vor. Überprüfen Sie das Diff und klicken Sie auf Speichern, um die Änderungen zu akzeptieren.

Erstellen Sie den Container neu und sehen Sie Ihre Änderungen

Der laufende Container bedient immer noch die alten Stile. Bitten Sie Bob, ihn neu zu erstellen und neu zu starten, damit Sie Ihre Änderungen sehen können:

Erstelle das Docker-Image neu und starte den Container mit den aktualisierten Stilen neu.

Aktualisieren Sie http://localhost:3000/index.html in Ihrem Browser, um das aktualisierte Design zu sehen.