クイックスタート

IBM Bobを起動

コンピュータでIBM Bobアプリケーションを起動します。

Bobチャットインターフェースを開く

Bobチャットインターフェースが表示されていない場合は、ナビゲーションバーの横にあるBobアイコンをクリックするか、ショートカットOption + Command + B(Mac)またはCtrl + Alt + B(Windows)を使用して開きます。

入力フィールドに自然言語でリクエストを入力してBobと対話します。

チュートリアルリポジトリをクローン

次の手順でサンプルアプリケーションを含むリポジトリをクローンします:

1. Bob IDEパネルの左上隅にあるファイルアイコンをクリックします。
2. リポジトリをクローンをクリックし、次のリポジトリURLを貼り付けます。
3. Bobが保存場所を尋ねたら、好きな場所を選択します。

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

リポジトリを開く

Bobがクローンしたリポジトリを開くかどうか尋ねたら、開くをクリックします。Bobが「このフォルダ内のファイルの作成者を信頼しますか?」と尋ねた場合は、はい、作成者を信頼しますをクリックします。

エクスプローラーにプロジェクトファイルが表示され、Bobチャットパネルがサイドに開きます。 bob-get-started/express-todo-api-modernフォルダから作業します。

Agentモードに切り替える

モードセレクターでAgentを選択するか、チャットで/agentと入力します。Agentモードでは、Bobがコードの記述、変更、リファクタリングを行えます。Bobは各操作の前に引き続き許可を求めます。

自動承認を設定する

ウィンドウ右下のPermissionsメニューにある自動承認トグルを見つけます。自動承認ではReadだけが選択されていることを確認してください。Bobは読み取り専用コマンドを自動実行しますが、ファイルを変更するコマンドやターミナルで実行するコマンドについては承認を求めます。

プロジェクトでBobを初期化

BobチャットパネルでBobにルートAGENTS.mdファイルとルールAGENTS.mdファイルを作成させるために/initを実行します。

ルートAGENTS.mdファイルは、Bobにプロジェクトの全体的な構造、規則、目標を伝え、Bobがプロジェクトに適合するコードを書けるようにします。これがないと、Bobはstatelessなので毎回最初から始めます。

.bobのルールファイルは、Bobが各モード (Agent、Plan、Ask) 用にAGENTS.mdを作成する場所です。各モードには、そのモードでのBobの動作を導く異なるルールセットがあります。

/init

BobはAGENTS.mdファイルを作成する許可を求めます。ファイルを作成するにはApprove todo tools for taskをクリックします。BobがすべてのAGENTS.mdファイルを作成すると、次のファイルが表示されます:

DockerでAPIをビルドして実行

BobにDockerfileを作成してコンテナを起動するよう依頼します:

Node 22を使用してこのAPI用のDockerfileを作成し、ポート3000で実行してください。
依存関係をローカルにインストールしないでください。
Dockerfileがすべてのインストールを処理します。

Dockerfileを作成したら、イメージをビルドしてコンテナを起動してください。

Bobはイメージのビルドとコンテナの起動を承認するよう求めます。Approve todo tools for taskとApprove edit tools for taskをクリックします。

Readの自動承認だけを有効にしているため、BobはExecuteコマンドを実行する許可を求めます。I understand the risksをクリックしてからApproveをクリックし、Bobがコマンドを実行できるようにします。

Bobは次のようなNPMの問題を見つける可能性があります。Bobが提案する修正を承認します:

package-lock.jsonファイルがないため、ビルドが失敗しました。
npm ciの代わりにnpm installを使用するようにDockerfileを更新する必要があります:

APIが実行され、利用可能になりました。

ToDoリストにタスクを追加

APIをテストするには、次のコマンドをBobチャットパネルに直接貼り付けます。このコマンドは、APIへのPOSTリクエストを行ってToDoリストにタスクを追加します:

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

  2列の表形式でレスポンスを表示してください: Field と Value

Bobは応答を表示し、APIを使用してToDoリストにタスクを追加できることを確認します。Bobは次のような応答を表示します:

コンテナを停止して削除

Bobにコンテナを停止して削除するよう依頼します。次のセクションでWeb UIを含む新しいコンテナを構築します:

実行中のコンテナとDockerイメージを停止して削除してください。

新しい会話を開始する

チャットインターフェース上部のプラス記号をクリックして新しい会話を開始し、コンテキストウィンドウをクリアします。

新しい会話を開始するとコンテキストウィンドウがクリアされ、次の効果があります:

• 以前の計画に関する会話でtoken budgetが消費されるのを防ぎます。
• 実装コンテキストを承認済みプランに集中させます。
• Bobが計画と実装の指示を混同するリスクを減らします。

Web UIを計画する

コードを変更する前に、Planモードに切り替えて、BobがWeb UIの構築方法に関するプランを作成できるようにします。モード選択ドロップダウンをクリックしてPlanを選択するか、チャットで/planと入力します。

Bobにexpress-todo-api-modernプロジェクトディレクトリのui-plan.mdとしてWeb UIを計画するよう依頼します。Bobはプラン作成のためにskill toolsとsubagentsを使う許可を求めます。Bobがskill toolsを使えるようにApprove skill tools for task、subagentsを使えるようにApprove subagent tools for task、プランを保存するためにApprove edit tools for taskをクリックします。

Viteを使って、このtodoアプリにReact TypeScript Web UIを追加する計画を作成してください。

UIで必要なこと:
- GET /api/todos から取得した既存タスクをすべて表示する
- POST /api/todos を使って新しいタスクを追加する
- PUT /api/todos/:id を使ってタスクを完了または未完了にする

制約:
- 既存のExpress APIやそのエンドポイントは変更しない
- APIとReactフロントエンドの両方を、multi-stage buildを使った単一のDockerコンテナから提供する
- 実装はシンプルに保つ: 認証なし、client-side routingなし、外部state management libraryなし
- Dockerfile内で `npm install` を実行する

プランをexpress-todo-api-modernプロジェクトディレクトリの`ui-plan.md`という名前のファイルに保存してください。

Bobは要件をよりよく理解するために確認の質問をすることがあります。質問に答えることも、Bobの提案どおりに進めるよう伝えることもできます。

Bobに実行を指示する前にプランを確認します。エクスプローラーでui-plan.mdをクリックして開きます。

BobにWeb UIを構築するよう依頼

モード選択ドロップダウンをクリックしてAgentを選択するか、チャットで/agentと入力して、BobをAgentモードに切り替えます。

BobにUIを構築し、コンテナ化して実行するよう依頼します:

Web UIを構築し、Dockerでアプリケーションをコンテナ化して実行するために、
概説した`ui-plan.md`プランを実装してください。
依存関係をローカルにインストールしないでください。Dockerfileがすべてのインストールを処理します。

Bobはui-plan.mdを読み取り、作成または変更するファイルを表示してから、コンテナをビルドして起動します。BobのツールリクエストでApproveをクリックします。

Readの自動承認だけを有効にしているため、BobはExecuteコマンドを実行する許可を求めます。I understand the risksをクリックしてからApproveをクリックし、Bobがコマンドを実行できるようにします。

ビルドの失敗を修正

BobがUIとコンテナを構築する最初の試みは、コードまたはDockerfileのエラーにより失敗する場合があります。Bobはエラーメッセージを表示し、修正を提案します。開発の反復は、Bobでコードを書くことの一部です。

遭遇する可能性のあるエラーと修正の例を次に示します:

`npm ci`にはpackage-lock.jsonファイルが必要なため、ビルドが失敗しました。
代わりに`npm install`を使用するようにDockerfileを更新させてください。

Viteがindex.htmlを見つけられません。問題は、index.htmlが`public`ディレクトリにあるが、
Viteはルートにあることを期待していることです。正しい場所に移動させてください。

ブラウザでWeb UIを開く

コンテナが実行されると、Bobは完了した内容の要約を提供します。

ブラウザでhttp://localhost:3000/index.htmlを開きます。入力フィールドを使用して新しいタスクを追加し、APIが正しく機能していることを確認してください。

Bobにスタイルを更新するよう依頼

希望するフォント、フォントカラー、背景色をBobに伝えてUIをパーソナライズします。選択できるフォントの例を次に示します:

• Inter: Webアプリの人気の選択肢
• Georgia: 温かみがあり読みやすいクラシックなセリフフォント
• JetBrains Mono: 開発者ツールの雰囲気を持つ等幅フォント

フォントカラーと背景色を選択します。Bobチャットパネルで、自然言語を使用して選択を説明します。次はカスタマイズの例です:

Web UIのスタイルを更新してください。
Interフォントを使用してください。
ダークネイビーの背景。
白いテキスト。

BobはReactコンポーネントのスタイルへの編集を提案します。差分を確認し、保存をクリックして変更を受け入れます。

コンテナを再ビルドして変更を表示

実行中のコンテナはまだ古いスタイルを提供しています。Bobに再ビルドして再起動するよう依頼して、変更を確認できるようにします:

更新されたスタイルでDockerイメージを再ビルドし、コンテナを再起動してください。

ブラウザでhttp://localhost:3000/index.htmlを更新して、更新されたデザインを確認します。