IBM watsonx Challenge 2026 — Path 2: Showcasing Previous Work
An interactive engineering productivity showcase that demonstrates how IBM Bob accelerates the complete frontend software development lifecycle — from a raw business requirement to a production-ready pull request — across 9 structured workflow stages.
Bob UI Accelerator is a production-quality React application that documents and visualises every stage of a real frontend SDLC as it is executed by IBM Bob. It is not an AI chatbot or a demo of an LLM product — it is a live, interactive record of how a developer uses Bob's built-in capabilities to build software faster, with higher quality and fewer errors.
A user types any feature requirement into the dashboard, then walks through 9 stages. At each stage, Bob's prompt is pre-filled from the requirement, the user runs it, and Bob's structured output — engineering briefs, requirements documents, architecture plans, Carbon component selections, production React code, code review findings, WCAG audit reports, test suites, and a full PR description — is rendered in a readable, structured format. Every piece of output is dynamically derived from the user's input — nothing is hardcoded.
| Capability | Stages used | What Bob does |
|---|---|---|
| Plan Mode | 1 · 2 · 3 | Structures requirements, produces FRs/NFRs/risks, designs architecture |
| Agent Mode | 5 · 7 · 8 · 9 | Generates React code, runs accessibility audits, writes test suites, drafts PRs |
| Carbon React MCP | 4 | Queries the live Carbon MCP server for correct component imports, props, and a11y notes |
| Code Reviewer | 6 | Reviews generated code, surfaces findings, applies fixes, scores quality |
Business Requirement → Requirement Analysis → Planning → Carbon React MCP
→ React Code Generation → Code Review → Accessibility Validation
→ Test Generation → Pull Request Ready
| # | Stage | Bob Capability | Output |
|---|---|---|---|
| 1 | Business Requirement | Plan Mode | Scoped engineering brief |
| 2 | Requirement Analysis | Plan Mode | FRs, NFRs, risks, acceptance criteria |
| 3 | Planning | Plan Mode | Folder structure, component hierarchy, roadmap |
| 4 | Carbon React MCP | Carbon React MCP | Verified component selections with import paths |
| 5 | React Code Generation | Agent Mode | Production React + TypeScript + SCSS |
| 6 | Code Review | Code Reviewer | Findings report, fixes applied, quality score |
| 7 | Accessibility Validation | Agent Mode | WCAG 2.2 AA audit, remediation, certification |
| 8 | Test Generation | Agent Mode | Vitest + RTL + jest-axe test suite |
| 9 | Pull Request Ready | Agent Mode | Full PR description with SDLC evidence trail |
| Layer | Choice | Why |
|---|---|---|
| UI framework | React 18 | Component model, concurrent features, lazy loading |
| Language | TypeScript 5 strict | Zero any, full type safety |
| Design system | @carbon/react v11 | IBM standard, WCAG 2.2 AA built in |
| Build tool | Vite 6 | Fast HMR, optimal code-splitting |
| Routing | React Router v6 | Lazy-loaded route chunks per stage |
| Styles | SCSS Modules + Carbon tokens | Scoped, zero hardcoded values |
| Icons | @carbon/icons-react | IBM icon library |
| State | React Context + useReducer | Lightweight, no external dependency |
src/
├── App.tsx # Root — wraps DemoProvider + AppShell + AppRoutes
├── main.tsx # Vite entry point
│
├── store/
│ └── demoStore.tsx # Global state: requirement, stage statuses, responses
│
├── routes/
│ └── index.tsx # React Router v6 config — 9 lazy-loaded stage routes
│
├── data/
│ ├── stagePrompts.ts # Per-stage prompt + response builders (all dynamic)
│ └── workflowStages.ts # Stage metadata: titles, paths, KPIs
│
├── components/
│ ├── BobSession/ # Core interactive session pattern (reused across all 9 stages)
│ │ ├── BobSessionShell.tsx # Orchestrator — prompt → run → processing → output → completion
│ │ ├── useBobSession.ts # State machine: idle → running → complete
│ │ ├── BobPromptEditor.tsx # Editable prompt textarea
│ │ ├── BobRunButton.tsx # Run / Reset CTA
│ │ ├── BobProcessing.tsx # Animated terminal showing processing steps
│ │ ├── BobOutputReveal.tsx # Fade-in output wrapper with "generated by Bob" badge
│ │ └── BobStageCompletion.tsx # Metrics panel + Accept & Continue CTA
│ │
│ ├── MarkdownRenderer/ # Parses Bob's markdown output into structured Carbon UI
│ │ └── MarkdownRenderer.tsx # h1/h2/h3, code blocks, tables, lists, inline code
│ │
│ ├── PageHeader/ # Stage page header: title, description, Bob capability badge
│ └── layout/ # AppShell, AppHeader, AppSideNav
│
└── pages/
├── Dashboard/ # Entry point — requirement textarea → start workflow
├── Requirement/ # Stage 1
├── RequirementAnalysis/ # Stage 2
├── Planning/ # Stage 3
├── CarbonMcp/ # Stage 4
├── CodeGeneration/ # Stage 5
├── CodeReview/ # Stage 6
├── Accessibility/ # Stage 7
├── Testing/ # Stage 8
└── PullRequest/ # Stage 9
All 9 stages use the same BobSessionShell component. The only thing that varies per stage is the StagePromptConfig object — which contains the prompt builder, response builder, processing steps, and completion metrics. This means the interactive Bob experience is identical in feel across every stage, and adding a new stage requires zero new UI code.
Every buildResponse(requirement) function derives all its content from the user's input string using a set of pure string-transformation helpers (componentName, pageTitle, cssId, branchName, subject). Two different requirements produce two completely different documents — different component names, file paths, code, test descriptions, ARIA labels, and PR branch names.
Stage session state (status, response) is stored in a global DemoStore (React Context + useReducer). Navigating away from a completed stage and returning restores the full output instantly — no re-run required.
Bob's response strings are parsed by a custom MarkdownRenderer component into proper structured HTML — headings, Carbon CodeSnippet blocks for code, semantic tables, bullet lists with inline bold/code. No raw markdown text is shown to the user.
- Node.js ≥ 18
- npm ≥ 9
npm installnpm run devOpens at http://localhost:5173
npm run buildOutput in dist/
npm run typechecknpm run preview- Open the app at
http://localhost:5173 - On the Dashboard, type a feature requirement — for example:
Build a patient records dashboard with search, filtering, and inline edit capabilities
- Click Start Bob Workflow
- On each stage page:
- Read the pre-filled Bob prompt (editable)
- Click Run with Bob
- Watch the animated processing terminal
- Read Bob's structured output (engineering brief, code, tests, etc.)
- Click Accept & Continue to advance to the next stage
- After all 9 stages, the Pull Request stage shows the complete SDLC evidence trail
| Stage | Metric |
|---|---|
| Requirement scoping | 73% faster |
| Rework reduction | 61% fewer requirement-related bugs |
| Sprint planning | 4× faster |
| Component lookup | −91% time via Carbon MCP |
| Code generation | 68% dev time reduction |
| Review cycle | −58% review iterations |
| Accessibility issues | −82% issues reaching PR |
| Test coverage baseline | 94% from first run |
| PR merge time | −44% |
| Command | Description |
|---|---|
npm run dev |
Start Vite dev server with HMR |
npm run build |
TypeScript compile + Vite production build |
npm run typecheck |
TypeScript strict check (no emit) |
npm run preview |
Serve the dist/ output locally |
npm run lint |
ESLint with zero-warning policy |
- TypeScript: strict mode — zero
any, zero suppressed errors - Carbon Design System: @carbon/react v11 exclusively — no custom UI primitives
- Accessibility: WCAG 2.2 AA —
aria-liveregions, semantic landmarks, keyboard navigation, focus management - Styles: SCSS Modules with Carbon design tokens only — no hardcoded pixel values or colours
- Performance: Lazy-loaded route chunks — each stage page loads independently
Challenge: IBM watsonx Challenge 2026
Path: Path 2 — Showcasing Previous Work
Team: Bob UI Accelerator
Application: IBM Bob (Plan Mode · Agent Mode · Carbon React MCP · Code Reviewer)
This application was itself built using IBM Bob — Plan Mode designed the architecture, Carbon React MCP sourced all component patterns, Agent Mode generated the implementation, and Code Reviewer validated the output before each commit.