빠른 시작

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 채팅 패널에서 /init을 실행하여 Bob이 루트 AGENTS.md 파일과 규칙 AGENTS.md 파일을 생성하도록 합니다.

루트 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가 실행되고 사용 가능합니다.

할 일 목록에 작업 추가

API를 테스트하려면 다음 명령을 Bob 채팅 패널에 직접 붙여넣습니다. 이 명령은 API에 POST 요청을 하여 할 일 목록에 작업을 추가합니다:

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

  응답을 두 개의 열(Field, Value)이 있는 표 형식으로 보여주세요

Bob은 API를 사용하여 할 일 목록에 작업을 추가할 수 있음을 확인하는 응답을 표시합니다. Bob은 다음과 유사한 응답을 표시합니다:

컨테이너 중지 및 제거

Bob에게 컨테이너를 중지하고 제거하도록 요청합니다. 다음 섹션에서 웹 UI가 포함된 새 컨테이너를 빌드합니다:

실행 중인 컨테이너와 Docker 이미지를 중지하고 제거하세요.

새 대화 시작

채팅 인터페이스 상단의 더하기 기호를 클릭하여 새 대화를 시작하고 컨텍스트 창을 비웁니다.

새 대화를 시작하면 컨텍스트 창이 비워지며, 이는 다음과 같은 효과가 있습니다:

• 이전 계획 논의가 token budget을 소모하지 않도록 합니다.
• 구현 컨텍스트를 승인된 계획에 집중시킵니다.
• Bob이 계획 지침과 구현 지침을 혼동할 위험을 줄입니다.

웹 UI 계획

코드를 수정하기 전에 Plan 모드로 전환하여 Bob이 웹 UI를 구축하는 방법에 대한 계획을 생성할 수 있도록 합니다. 모드 선택 드롭다운을 클릭하고 Plan을 선택하거나 채팅에서 /plan을 입력합니다.

Bob에게 express-todo-api-modern 프로젝트 디렉토리의 ui-plan.md로 웹 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 웹 UI를 추가하는 계획을 세워주세요.

UI 요구사항:
- GET /api/todos 에서 가져온 기존 작업을 모두 표시
- POST /api/todos 를 사용해 새 작업 추가
- PUT /api/todos/:id 를 사용해 작업을 완료 또는 미완료로 표시

제약 조건:
- 기존 Express API 또는 해당 엔드포인트는 수정하지 않기
- multi-stage build를 사용해 단일 Docker 컨테이너에서 API와 React 프런트엔드를 모두 제공하기
- 구현은 단순하게 유지하기: 인증 없음, client-side routing 없음, 외부 state management library 없음
- Dockerfile 안에서 `npm install` 실행하기

계획을 express-todo-api-modern 프로젝트 디렉토리의 `ui-plan.md`라는 파일에 저장하세요.

Bob은 요구사항을 더 잘 이해하기 위해 확인 질문을 할 수 있습니다. 질문에 답하거나 Bob의 권장 사항대로 진행하라고 말할 수 있습니다.

Bob에게 실행하도록 지시하기 전에 계획을 검토합니다. 탐색기에서 ui-plan.md를 클릭하여 엽니다.

Bob에게 웹 UI를 구축하도록 요청

모드 선택 드롭다운을 클릭하고 Agent를 선택하거나 채팅에서 /agent를 입력하여 Bob을 Agent 모드로 전환합니다.

Bob에게 UI를 구축하고 컨테이너화하고 실행하도록 요청합니다:

웹 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는 루트에 있을 것으로 예상한다는 것입니다. 올바른 위치로 이동하겠습니다.

브라우저에서 웹 UI 열기

컨테이너가 실행되면 Bob은 완료한 작업의 요약을 제공합니다.

브라우저에서 http://localhost:3000/index.html을 엽니다. 입력 필드를 사용하여 새 작업을 추가해 API가 올바르게 작동하는지 확인합니다.

Bob에게 스타일 업데이트 요청

원하는 글꼴, 글꼴 색상 및 배경색을 Bob에게 알려 UI를 개인화합니다. 다음은 선택할 수 있는 몇 가지 글꼴입니다:

• Inter: 웹 앱에 인기 있는 선택
• Georgia: 따뜻하고 읽기 쉬운 클래식 세리프 글꼴
• JetBrains Mono: 개발자 도구 느낌의 고정 폭 글꼴

글꼴 색상과 배경색을 선택합니다. Bob 채팅 패널에서 자연어를 사용하여 선택 사항을 설명합니다. 다음은 사용자 지정 예입니다:

웹 UI의 스타일을 업데이트하세요.
Inter 글꼴을 사용하세요.
진한 네이비 배경.
흰색 텍스트.

Bob은 React 컴포넌트 스타일에 대한 편집을 제안합니다. 차이점을 검토하고 저장을 클릭하여 변경 사항을 수락합니다.

컨테이너를 다시 빌드하고 변경 사항 보기

실행 중인 컨테이너는 여전히 이전 스타일을 제공합니다. Bob에게 다시 빌드하고 재시작하도록 요청하여 변경 사항을 볼 수 있도록 합니다:

업데이트된 스타일로 Docker 이미지를 다시 빌드하고 컨테이너를 재시작하세요.

브라우저에서 http://localhost:3000/index.html을 새로 고쳐 업데이트된 디자인을 확인합니다.