kg6-codex
Core Concepts

Output Formatting & Themes

Learn how to customize AI Developer Assistant output formatting and themes

Output Formatting & Themes

AI Developer Assistant provides flexible output formatting options that allow you to customize how results are displayed and presented. This guide covers all available output formats, themes, and customization options.

Output Formats

Console Output (Default)

The default console output provides colorized, structured feedback directly in your terminal:

# Default console output
ai-dev review

# Console with verbose mode
ai-dev review --verbose

Features:

  • Colorized output with syntax highlighting
  • Structured sections for different types of feedback
  • Severity indicators with color coding
  • Progress indicators for long operations
  • Interactive elements for user input

Markdown Output

Generate markdown reports for documentation and sharing:

# Markdown output
ai-dev review --format markdown --output-path review.md

# Markdown with custom styling
ai-dev review --format markdown --output-path review.md --style technical

Features:

  • Structured sections with headers and subheaders
  • Code blocks with syntax highlighting
  • Tables for organized data presentation
  • Links to relevant resources
  • Emojis for visual appeal

Example Markdown Output:

# Code Review Report

## Summary
- **Files Reviewed**: 5
- **Issues Found**: 12
- **Critical**: 0
- **High**: 2
- **Medium**: 5
- **Low**: 5

## Issues by File

### src/utils/helper.ts
- **Line 15**: Consider adding null check for user input
- **Line 23**: Function could be simplified
- **Line 31**: Missing JSDoc documentation

## Recommendations
1. Add input validation
2. Simplify complex functions
3. Add comprehensive documentation

JSON Output

Generate structured JSON for programmatic use and integration:

# JSON output
ai-dev review --format json --output-path review.json

# JSON with metadata
ai-dev review --format json --output-path review.json --verbose

Features:

  • Structured data for easy parsing
  • Metadata including timestamps and configuration
  • Nested objects for hierarchical data
  • Arrays for multiple items
  • Type information for validation

Example JSON Output:

{
  "metadata": {
    "timestamp": "2024-01-15T10:30:00Z",
    "version": "1.0.0",
    "configuration": {
      "llm_provider": "gemini",
      "model": "gemini-2.0-flash"
    }
  },
  "summary": {
    "files_reviewed": 5,
    "issues_found": 12,
    "severity": {
      "critical": 0,
      "high": 2,
      "medium": 5,
      "low": 5
    }
  },
  "issues": [
    {
      "file": "src/utils/helper.ts",
      "line": 15,
      "severity": "medium",
      "category": "logic",
      "message": "Consider adding null check for user input",
      "suggestion": "Add null check before processing user data",
      "code": "const result = processData(userInput);"
    }
  ]
}

HTML Output

Generate HTML reports for web viewing and sharing:

# HTML output
ai-dev review --format html --output-path review.html

# HTML with custom theme
ai-dev review --format html --output-path review.html --theme dark

Features:

  • Responsive design for different screen sizes
  • Interactive elements like collapsible sections
  • Syntax highlighting for code blocks
  • Custom CSS for branding
  • Print-friendly layouts

File Output

Save output to plain text files:

# Plain text output
ai-dev review --format file --output-path review.txt

# Text with custom formatting
ai-dev review --format file --output-path review.txt --style simple

Output Themes

Light Theme (Default)

Clean, professional appearance suitable for most environments:

# Light theme (default)
ai-dev review --theme light

# Light theme with custom colors
ai-dev review --theme light --color-scheme professional

Characteristics:

  • High contrast for readability
  • Professional colors (blues, grays)
  • Clean typography with good spacing
  • Subtle accents for important information

Dark Theme

Modern dark appearance for low-light environments:

# Dark theme
ai-dev review --theme dark

# Dark theme with custom colors
ai-dev review --theme dark --color-scheme neon

Characteristics:

  • Dark backgrounds with light text
  • Vibrant accents for highlights
  • Reduced eye strain in low light
  • Modern aesthetic with bold colors

High Contrast Theme

Enhanced accessibility for users with visual impairments:

# High contrast theme
ai-dev review --theme high-contrast

# High contrast with large text
ai-dev review --theme high-contrast --font-size large

Characteristics:

  • Maximum contrast between text and background
  • Large, clear fonts for readability
  • Bold borders and separators
  • Accessible color combinations

Minimal Theme

Clean, distraction-free output:

# Minimal theme
ai-dev review --theme minimal

# Minimal with custom styling
ai-dev review --theme minimal --style clean

Characteristics:

  • Minimal visual elements for focus
  • Simple typography without decorations
  • Essential information only for clarity
  • Fast rendering with reduced complexity

Customization Options

Color Schemes

Professional Color Scheme

# Professional colors
ai-dev review --color-scheme professional

Colors:

  • Primary: Deep blue (#1e40af)
  • Secondary: Gray (#6b7280)
  • Success: Green (#059669)
  • Warning: Orange (#d97706)
  • Error: Red (#dc2626)
  • Info: Blue (#0284c7)

Vibrant Color Scheme

# Vibrant colors
ai-dev review --color-scheme vibrant

Colors:

  • Primary: Purple (#7c3aed)
  • Secondary: Pink (#ec4899)
  • Success: Emerald (#10b981)
  • Warning: Amber (#f59e0b)
  • Error: Rose (#f43f5e)
  • Info: Cyan (#06b6d4)

Monochrome Color Scheme

# Monochrome colors
ai-dev review --color-scheme monochrome

Colors:

  • Primary: Black (#000000)
  • Secondary: Dark gray (#374151)
  • Success: Dark green (#065f46)
  • Warning: Dark orange (#92400e)
  • Error: Dark red (#991b1b)
  • Info: Dark blue (#1e3a8a)

Typography Options

Font Sizes

# Small font
ai-dev review --font-size small

# Medium font (default)
ai-dev review --font-size medium

# Large font
ai-dev review --font-size large

# Extra large font
ai-dev review --font-size xlarge

Font Families

# Monospace font
ai-dev review --font-family monospace

# Sans-serif font (default)
ai-dev review --font-family sans-serif

# Serif font
ai-dev review --font-family serif

Layout Options

Compact Layout

# Compact layout
ai-dev review --layout compact

Features:

  • Reduced spacing between elements
  • Condensed information display
  • Efficient use of screen space
  • Quick scanning of results

Spacious Layout

# Spacious layout
ai-dev review --layout spacious

Features:

  • Generous spacing between elements
  • Clear separation of sections
  • Easy reading with breathing room
  • Professional appearance

Grid Layout

# Grid layout
ai-dev review --layout grid

Features:

  • Organized columns for information
  • Structured presentation of data
  • Easy comparison of items
  • Modern design aesthetic

Output Styles

Technical Style

# Technical style
ai-dev review --style technical

Characteristics:

  • Detailed explanations with technical terms
  • Code examples and snippets
  • Comprehensive analysis of issues
  • Professional documentation format

Casual Style

# Casual style
ai-dev review --style casual

Characteristics:

  • Friendly tone with conversational language
  • Simple explanations without jargon
  • Encouraging feedback and suggestions
  • Approachable presentation

Formal Style

# Formal style
ai-dev review --style formal

Characteristics:

  • Professional language and terminology
  • Structured format with clear sections
  • Comprehensive coverage of all aspects
  • Business-appropriate presentation

Beginner Style

# Beginner style
ai-dev review --style beginner

Characteristics:

  • Simple language with explanations
  • Step-by-step guidance for improvements
  • Educational content with examples
  • Learning-focused approach

Advanced Customization

Custom CSS

For HTML output, you can provide custom CSS:

# Custom CSS file
ai-dev review --format html --css-file custom.css --output-path review.html

Example custom.css:

/* Custom styling for AI Developer Assistant output */
.review-container {
  font-family: 'Inter', sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.issue-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
  background: #f9fafb;
}

.severity-high {
  border-left: 4px solid #dc2626;
}

.severity-medium {
  border-left: 4px solid #d97706;
}

.severity-low {
  border-left: 4px solid #059669;
}

Custom Templates

For advanced users, you can create custom output templates:

# Custom template
ai-dev review --format custom --template-file my-template.hbs --output-path review.html

Example template.hbs:

<!DOCTYPE html>
<html>
<head>
  <title>Code Review Report</title>
  <style>
    /* Your custom styles */
  </style>
</head>
<body>
  <h1>Code Review Report</h1>
  
  <div class="summary">
    <h2>Summary</h2>
    <p>Files Reviewed: {{summary.files_reviewed}}</p>
    <p>Issues Found: {{summary.issues_found}}</p>
  </div>
  
  <div class="issues">
    <h2>Issues</h2>
    {{#each issues}}
    <div class="issue severity-{{severity}}">
      <h3>{{file}}:{{line}}</h3>
      <p>{{message}}</p>
      <p><strong>Suggestion:</strong> {{suggestion}}</p>
    </div>
    {{/each}}
  </div>
</body>
</html>

Configuration

Global Output Settings

Set default output preferences in your configuration:

# ai-dev.config.local.yaml
output:
  format: "console"
  theme: "light"
  colorScheme: "professional"
  fontSize: "medium"
  fontFamily: "sans-serif"
  layout: "spacious"
  style: "technical"
  colorize: true
  verbose: false

Environment Variables

Override settings with environment variables:

# Set output preferences
export AI_DEV_OUTPUT_FORMAT="markdown"
export AI_DEV_OUTPUT_THEME="dark"
export AI_DEV_OUTPUT_COLOR_SCHEME="vibrant"
export AI_DEV_OUTPUT_FONT_SIZE="large"
export AI_DEV_OUTPUT_VERBOSE="true"

Best Practices

Choose Appropriate Format

# Console for quick reviews
ai-dev review

# Markdown for documentation
ai-dev review --format markdown --output-path review.md

# JSON for automation
ai-dev review --format json --output-path review.json

# HTML for sharing
ai-dev review --format html --output-path review.html

Match Theme to Environment

# Light theme for bright environments
ai-dev review --theme light

# Dark theme for low-light environments
ai-dev review --theme dark

# High contrast for accessibility
ai-dev review --theme high-contrast

Optimize for Use Case

# Technical style for developers
ai-dev review --style technical

# Casual style for learning
ai-dev review --style casual

# Formal style for business
ai-dev review --style formal
Experiment with different output formats and themes to find what works best for your workflow. You can always override settings with command-line options for specific use cases.

Configuration

Learn how to configure AI Developer Assistant for your needs

Customization & Extensibility

Learn how to customize and extend AI Developer Assistant for your specific needs