Platform Components

Detailed overview of HedgeAI's modular architecture and key platform components that power the AI-driven security automation ecosystem.

Core Component Architecture

🎨 Frontend Components

• AI Agent Workspace (AgentWorkspace.tsx)
• Chat Interface (ChatInterface.tsx)
• Code Editor (CodeEditor.tsx)
• Marketplace Browser (MarketplaceBrowser.tsx)
• Template Gallery (TemplateGallery.tsx)
• Output Terminal (OutputTerminal.tsx)

⚙️ Backend Components

• API Route Handlers (/api/*)
• AI Model Integrations (OpenRouter)
• State Management (Zustand stores)
• Utility Functions (/lib/utils/*)
• Type Definitions (/lib/types/*)
• Configuration Management

Frontend Components

AgentWorkspace Component

Features:

• Responsive layout with collapsible sidebar
• Language selection (Python, JS, Rust, YAML, Bash)
• Real-time code generation
• Integrated chat interface
• Template gallery integration
• Preview and execution modes

Props Interface:

interface AgentWorkspaceProps {
  sidebarCollapsed: boolean;
  activeTab: "code" | "preview";
  code: string;
  language: SupportedLanguage;
}

ChatInterface Component

Features:

• Streaming message display
• Message history management
• Auto-scroll functionality
• Loading states and indicators
• Error handling and retry logic
• Markdown rendering support

Message Types:

type MessageType =
  | "user"
  | "assistant"
  | "system"
  | "error";

CodeEditor Component

Features:

• Syntax highlighting for multiple languages
• Code completion and suggestions
• Error detection and linting
• Vim keybindings support
• Theme customization
• Real-time collaboration ready

CodeMirror Extensions:

• javascript()
• python()
• rust()
• yaml()
• oneDark theme
• autocompletion
• bracketMatching
• foldGutter

Backend Components

API Route Handlers

/api/openrouter/chat

Handles conversational AI interactions with context management

/api/openrouter/stream

Manages real-time streaming responses for live chat

/api/openrouter/vibe-coder

Specialized endpoint for code generation requests

State Management

Agent Store:

interface AgentState {
  code: string;
  language: SupportedLanguage;
  messages: ConversationMessage[];
  isLoading: boolean;
  setCode: (code: string) => void;
  addMessage: (msg) => void;
}

Marketplace Store:

interface MarketplaceState {
  tools: SecurityTool[];
  categories: Category[];
  filters: FilterState;
  loading: boolean;
  searchQuery: string;
}

Utility Components

Code Extraction

Intelligent parsing of AI responses to extract clean, executable code.

extractCodeFromJson(response: string)
extractCodeFromMarkdown(text: string)
validateCodeSyntax(code: string, lang: string)

Template System

Pre-built security script templates for rapid development.

• Vulnerability scanners
• Network reconnaissance
• Log analysis tools
• Automation scripts
• Compliance checkers

Error Handling

Comprehensive error management across all components.

• API failure recovery
• Network timeout handling
• Graceful degradation
• User-friendly error messages
• Automatic retry logic

Performance Optimization

Built-in optimizations for speed and efficiency.

• Code splitting
• Lazy loading
• Response caching
• Bundle optimization
• Memory management

Component Statistics

15+

React Components

API Endpoints

State Stores

20+

Utility Functions