Skip to content

Repository files navigation

IBM Bob React Vite Tailwind

DevBoost AI

The AI-Powered Code Analysis Platform Built Entirely on IBM Bob

"Paste code. Bob explains it, tests it, and fixes it — all in one workflow."

IBM Bob Dev Day Hackathon — May 2026


Table of Contents

  1. The Problem
  2. Our Solution
  3. How IBM Bob Powers Everything
  4. Core Features
  5. Architecture & Technical Design
  6. IBM Bob Prompt Engineering
  7. User Experience & Design Philosophy
  8. Real-World Impact & Scalability
  9. Getting Started
  10. Project Structure
  11. Tech Stack

🎯 The Problem

Software engineering teams face three persistent, costly challenges that have remained unsolved despite decades of tooling:

1. Code Understanding Is Slow Developers spend significant time reading and comprehending existing code rather than writing new code. When onboarding to a new codebase, developers need months to reach full productivity. Every hour spent deciphering unfamiliar logic is an hour not spent shipping features.

2. Test Coverage Is Often Incomplete Many production codebases lack adequate test coverage. Writing comprehensive tests is tedious and time-consuming, and often gets skipped under deadline pressure. The consequence: bugs ship to production that could have been caught earlier.

3. Security Vulnerabilities Hide in Plain Sight Many data breaches originate from known, preventable code vulnerabilities — SQL injection, hardcoded credentials, weak hashing, broken access control. Static analysis tools generate too many false positives, and manual code review doesn't scale. Critical vulnerabilities can sit in production for extended periods before discovery.

These three problems share a common root: developers lack a unified, intelligent tool that can read their code with engineering-level depth and provide structured, actionable analysis in real time.


💡 Our Solution — DevBoost AI

DevBoost AI is a structured, AI-powered code analysis platform that transforms IBM Bob from a conversational agent into a purpose-built engineering workflow tool. It delivers three distinct capabilities through a single, unified interface:

Capability What Bob Does Output Format
🔍 Explain Reads the code and produces a structured engineering explanation TL;DR → Architecture → Execution Flow → Design Decisions → Gotchas
🧪 Test Analyzes the code, creates a test strategy, then generates a complete test suite Test Plan → Runnable Test Code → Risk Analysis
🛡️ Fix Performs a full security and logic audit with severity classification Severity Cards → Root Cause → Problematic Code → Fixed Code → Health Score

What Makes This Different From "Just Asking a Chatbot"?

DevBoost AI is not a wrapper around a chat API. It is a structured engineering workflow with these critical differentiators:

  • Deterministic Output Contracts — Every Bob response follows a strict, pre-defined format. The output is never conversational. It is structured data, engineered for developer consumption.
  • Prompt Engineering, Not Prompt Typing — Each mode uses a carefully designed multi-section prompt with persona definition, format contracts, grounding rules, and anti-hallucination safeguards. This is production-grade prompt engineering.
  • Quantified Results — Bug detection doesn't just list issues. It classifies them by severity (Critical / High / Medium / Low), computes a Code Health Score (0–100), and presents results as a visual dashboard.
  • Session Persistence — Every Bob interaction is tracked, timestamped, and exportable as JSON or Markdown. This creates an auditable record of AI-assisted analysis — something no chatbot provides.
  • One Input, Three Workflows — A developer pastes code once and gets comprehensive understanding, testing, and bug detection from the same interface. No context switching. No re-explaining the code.

🤖 How IBM Bob Powers Everything

IBM Bob is not a feature of DevBoost AI. IBM Bob IS DevBoost AI. Every capability, every output, every insight comes directly from Bob's intelligence. The application is a structured interface through which Bob's AI capabilities are focused and delivered.

Bob as the Core Intelligence Engine

DevBoost AI integrates directly with IBM Bob's API as the sole AI intelligence layer. Through carefully crafted system prompts, Bob is configured as a principal-level software engineering agent — not a general-purpose assistant. Bob is given:

  1. A specific professional identity — Bob operates as "an elite AI software engineering agent embedded inside DevBoost AI." This persona framing produces significantly more precise, engineering-grade output compared to generic instructions.

  2. Strict output format contracts — For each mode (Explain, Tests, Fix), Bob receives exact formatting instructions: section headers, expected content per section, and constraints on length and style. This eliminates the "wall of text" problem common in LLM applications.

  3. Anti-hallucination grounding rules — Every prompt includes:

    • "Every claim must be traceable to the provided code"
    • "Prefix uncertain points with 'Assumption:' and state what you assumed"
    • "If no bugs found, do not fabricate issues"
  4. Business-context awareness — Bob is instructed to explain issues in terms of production impact: "Explain what breaks in production if this is missing." This transforms Bob's output from academic observations into actionable engineering intelligence.

Bob's Three Operational Modes

Mode 1: EXPLAIN — Code Understanding Agent

Bob receives the source code and produces a six-section structured explanation:

  • TL;DR — One sentence that captures the code's purpose
  • What it does — Purpose, inputs, outputs, side effects with actual function/class names
  • How it is structured — Architecture, component relationships, class responsibilities
  • Execution flow — Step-by-step walkthrough referencing real function names and variables
  • Key decisions — 2–4 design decisions with trade-off analysis
  • Watch out for — Hidden dependencies, non-obvious behaviors, embedded assumptions

Mode 2: TESTS — Test Generation Agent

Bob first creates a strategic test plan, then generates the complete test suite:

  • Test plan — Five minimum categories: happy path, boundary values, invalid inputs, error handling, plus one domain-specific category
  • Test suite — Complete, immediately runnable test file with all imports, setup, teardown — minimum 8 tests, every test name reads as a sentence, every assertion checks a specific expected value
  • Why these tests matter — Per-category explanation of what breaks in production without each category

Mode 3: FIX — Security & Bug Detection Agent

Bob performs a structured engineering audit:

  • For each issue: Severity (Critical/High/Medium/Low) → TitleLocationRoot causeImpactProblematic codeFixed codeWhy this fix works
  • Audit summary — Severity count table, overall assessment, top priority fix
  • Results are parsed client-side to generate visual severity cards and a Code Health Score (weighted: Critical = -25, High = -15, Medium = -8, Low = -3)

Bob's Streaming Intelligence

DevBoost AI connects to IBM Bob's streaming API endpoint. As Bob generates each token, it appears instantly in the UI — creating a real-time experience where users can watch Bob think through the code analysis. This isn't just a cosmetic choice; it provides immediate value:

  • Users can see Bob identifying issues before the full analysis completes
  • The streaming output demonstrates that Bob is performing genuine analysis, not returning cached responses
  • For complex code, streaming keeps users engaged during longer analysis times

✨ Core Features

📊 Severity Dashboard & Code Health Score

When Bob detects bugs in Fix mode, the results are automatically parsed and displayed as:

  • Four color-coded severity cards — Critical (red), High (orange), Medium (yellow), Low (gray) — each showing the count of issues at that severity level
  • Code Health Score — A 0–100 metric calculated from Bob's findings, displayed as an animated progress bar with color coding (red < 40, yellow 40–70, green > 70)
  • This transforms raw AI output into a quantified, dashboard-like experience that feels like a professional code analysis tool

⚡ Real-Time Streaming with Visual Indicators

  • "Bob is analyzing your code..." — Animated pulsing indicator during analysis
  • Token counter — Live count of tokens generated, visible in the header
  • Blinking cursor — Appears at the end of streaming output, mimicking a terminal experience

📝 Rich Markdown Rendering

  • All output renders as fully formatted Markdown — headers, bold text, lists, tables
  • Code blocks use react-syntax-highlighter with VS Code Dark+ theme for professional syntax highlighting
  • Per-block copy buttons — Appear on hover over any code block, allowing developers to copy fixed code or test suites directly

📁 File Upload

  • Users can upload .py, .js, .ts, .java, .go, .rb, .php and more
  • File extension is auto-detected and the language selector updates automatically
  • Eliminates friction — no need to manually copy-paste from editor to browser

🕐 Session History

  • Every Bob interaction is recorded with mode, language, timestamp, input code, and output
  • Clickable history entries in the sidebar allow instant recall of any past session
  • Visual badges (EXP / TST / FIX) make it easy to distinguish session types at a glance

💾 Structured Export

  • Export JSON — Machine-readable format with full session metadata, suitable for CI/CD integration
  • Export Markdown — Human-readable format with formatted input/output, suitable for documentation and code review records
  • Both formats include tool name, model identifier, and timestamps for auditability

🛡️ Error Handling

  • Friendly error cards with clear messaging — no raw stack traces shown to users
  • Retry button — One click to re-run the analysis after a transient failure
  • Graceful handling of API connection issues, authentication errors, and malformed responses

🔄 Clean Reset

  • Clear button — Resets code input, output, and session history for a fresh start
  • Essential for demo scenarios where multiple analyses need to be shown sequentially

🏗️ Architecture

IBM Bob is the core intelligence layer of DevBoost AI. All code analysis, test generation, and bug detection is performed by IBM Bob through structured prompt engineering.

The application connects to IBM Bob through its API endpoint. When a developer submits code, DevBoost AI constructs a structured prompt using engineered format contracts and sends it to IBM Bob. Bob processes the code and streams the response back to the UI.

Data Flow

Developer submits code
↓
DevBoost AI builds structured prompt
↓
IBM Bob processes and responds
↓
UI renders structured output
↓
Session exported as JSON + Markdown

No external AI services are used. IBM Bob is the only AI engine.

Technical Implementation

The bobClient.js module handles all IBM Bob communication:

  1. Native API Priority — Attempts to use IBM Bob's VS Code extension API (window.__bob_api__) if available
  2. HTTP Fallback — Falls back to configured HTTP endpoint for broader compatibility
  3. Streaming Support — Handles real-time token-by-token response delivery
  4. Error Handling — Graceful handling of connection issues and API errors

All AI processing happens through IBM Bob. The application sends structured prompts and receives streaming responses.


🧠 IBM Bob Prompt Engineering

The prompts are the intellectual core of DevBoost AI. Each prompt is meticulously engineered to produce consistent, structured, professional output. Here is the design philosophy:

Prompt Design Principles

Principle Implementation Why It Matters
Persona First "You are IBM Bob, an elite AI software engineering agent" Produces engineering-grade output, not casual conversation
Format Contracts "Use this exact format, do not deviate" with section headers Ensures machine-parseable, consistent output across runs
Grounding Rules "Every claim must be traceable to the provided code" Eliminates hallucination — every statement maps to real code
Anti-Fabrication "If no bugs found, do not fabricate issues" Prevents false positives that would undermine trust
Business Framing "Explain what breaks in production if this is missing" Makes output actionable for real engineering decisions
Precision Language "One precise sentence" / "Name actual functions" Eliminates filler, forces specific, useful statements

Prompt Files

  • src/prompts/explain.jsbuildExplainPrompt(code, language) — 6-section explanation format
  • src/prompts/tests.jsbuildTestsPrompt(code, language, framework) — Test plan + suite + rationale
  • src/prompts/fix.jsbuildFixPrompt(code, language) — Per-issue format + audit summary

Each prompt is a function that takes code and language as inputs and returns a complete, self-contained instruction set for Bob. No system messages, no multi-turn conversation — each call is a single, dense, high-quality prompt.


🎨 User Experience & Design Philosophy

Design System

DevBoost AI uses a custom-built CSS design system inspired by IBM's Carbon Design Language:

Token Value Usage
Primary Accent #0062ff (IBM Blue) Buttons, active tabs, focus rings, branding
Background #0a0e1a#0f1420#151b2e Three-layer depth system for visual hierarchy
Critical #da1e28 Critical severity indicators
Success #24a148 Healthy code score, test generation
Typography Inter (UI) + JetBrains Mono (Code) Professional, readable, developer-friendly
Borders rgba(255,255,255, 0.06–0.16) Subtle glassmorphism effect
Radius 6px → 10px → 14px → 20px Consistent corner rounding system

Micro-Interactions

  • Animated stat cards — Fade-in-up with staggered delays when Fix results appear
  • Health score bar — Animated fill with shimmer effect
  • Pulsing dots — "Bob is analyzing..." indicator uses CSS keyframe animation
  • Hover effects — Stat cards lift on hover, session items highlight
  • Blinking cursor — Streams alongside output for terminal-like feel
  • Fade transitions — Smooth entry animations on all dynamic content

Accessibility

  • High contrast text on dark backgrounds (WCAG AA compliant)
  • Focus rings on all interactive elements
  • Semantic HTML structure
  • Keyboard-navigable tabs and buttons

🌍 Real-World Impact & Scalability

Immediate Impact

  • Code Reviews — DevBoost AI can pre-analyze code before human review, flagging issues that reviewers should focus on
  • Onboarding — New team members can paste unfamiliar code and get instant, structured explanations
  • Security Audits — Automated detection of common vulnerabilities before they reach production
  • Test-Driven Development — Generate comprehensive test suites as a starting point, then customize

Scalability Path

Phase Scope Bob Capability
v1 (Current) Single-file analysis Explain + Test + Fix
v2 Multi-file repository analysis Bob's repository context awareness
v3 CI/CD integration Automated analysis on every pull request
v4 Team dashboards Aggregated code health metrics across repos

Measurable Value

  • Reduces code review time by providing pre-analysis with severity classification
  • Increases test coverage by generating comprehensive test suites as a baseline
  • Catches security issues early — shifting vulnerability detection left in the development cycle
  • Standardizes analysis output — every team member gets the same structured format

🚀 Getting Started

Prerequisites

Requirement Version Purpose
Node.js 18+ React application runtime
IBM Bob API Access Latest AI intelligence engine

Installation

# 1. Clone the repository
git clone https://github.com/your-username/devboost-ai.git
cd devboost-ai

# 2. Install dependencies
npm install

# 3. Configure IBM Bob API credentials
cp .env.example .env
# Edit .env with your credentials if needed

# 5. Start development server
npm run dev

The application will be available at http://localhost:5174/

Environment Configuration

Create a .env file with your IBM Bob API credentials:

VITE_BOB_API_URL=https://your-bob-api-endpoint.com/v1/chat/completions
VITE_BOB_API_KEY=your-ibm-bob-api-key
VITE_BOB_MODEL=your-bob-model-identifier

Important: Never commit your .env file to version control. The .gitignore file is pre-configured to protect your credentials.


📂 Project Structure

devboost-ai/
│
├── src/
│   ├── App.jsx                    # Main application — state, routing, layout
│   ├── index.css                  # IBM-inspired design system (custom CSS tokens)
│   ├── main.jsx                   # React entry point
│   │
│   ├── components/
│   │   ├── CodeInput.jsx          # Code editor, language selector, file upload
│   │   ├── TabPanel.jsx           # Mode tabs (Explain/Tests/Fix) + Run button
│   │   └── ExportButton.jsx       # JSON and Markdown export actions
│   │
│   ├── prompts/                   # IBM Bob prompt engineering
│   │   ├── explain.js             # Structured explanation prompt
│   │   ├── tests.js               # Test generation prompt
│   │   └── fix.js                 # Bug detection and fix prompt
│   │
│   └── utils/
│       ├── bobClient.js           # IBM Bob streaming API client
│       └── exportSession.js       # Session export (JSON + Markdown)
│
├── sample-inputs/
│   ├── buggy_auth.py              # Demo: Auth module with security vulnerabilities
│   └── data_pipeline.js           # Demo: Data pipeline with logic errors
│
├── .env.example                   # Environment template (safe, no secrets)
├── index.html                     # HTML entry with Google Fonts + SEO meta
├── vite.config.js                 # Vite configuration
├── tailwind.config.js             # TailwindCSS configuration
├── package.json                   # Dependencies and scripts
└── README.md                      # This file

🔧 Tech Stack

Layer Technology Role
AI Engine IBM Bob API All code analysis, test generation, and bug detection
Frontend React 18 Component-based UI with state management
Build Tool Vite 5 Fast development server with built-in proxy
Styling TailwindCSS 3 + Custom CSS Design System IBM Carbon-inspired dark theme
Markdown react-markdown 9 Rich output rendering
Code Highlighting react-syntax-highlighter 15 VS Code Dark+ theme for code blocks
Typography Inter + JetBrains Mono (Google Fonts) Professional UI and code fonts

DevBoost AI

Understand code better. Generate tests efficiently. Catch bugs earlier.

Powered entirely by IBM Bob.


Built with IBM Bob · IBM Bob Dev Day Hackathon · May 2026

About

AI-powered code analysis tool built with React + Vite for IBM Bob Dev Day Hackathon. Features three analysis modes: Explain (detailed code breakdowns), Tests (auto-generate test suites), and Fix (security & bug detection with severity scoring). Real-time streaming, session history, file upload, and export to JSON/Markdown. Supports 12+ languages.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages