codeMonster 👾
A powerful AI coding assistant that lives in your CLI and IDE, designed to enhance your development workflow with intelligent code assistance, automated tasks, and seamless integration with VS Code.
*you could install the extension package manually by code --install-extension ./vscode/code-monster-0.0.1.vsix (git clone this repo first and enter the directory for executing the installation command or build it from source following the session development below)
**codeMonster is more than a coding assistant/agent, it can execute command to check your system clock, etc., and fetch web data via many open APIs, i.e., tell me the weather in SF today; you will get the correct answer in that case
Overview
codeMonster is a VS Code extension that brings advanced AI capabilities directly into your development environment. It provides an intelligent chat interface for code assistance, automated code generation, and integration with external tools through MCP (Model Context Protocol) and LSP (Language Server Protocol).
Features
- AI-Powered Code Assistance: Natural language interaction with your codebase
- VS Code Integration: Sidebar interface with real-time progress reporting
- Tool Execution: Execute various tools (file operations, web searches, etc.) with progress feedback
- MCP Integration: Connect to external AI services and tools
- LSP Support: Language server protocol integration for enhanced code analysis
- Progress Tracking: Real-time visual feedback for tool execution
- Multi-Mode Support: Normal, Plan, and Auto-accept modes for different workflows
Architecture
The extension follows a well-defined architecture with clear separation of concerns:
Data Flow Diagram
┌─────────────────────────────────────────────────────────────────┐
│ TOOL LAYER │
├─────────────────────────────────────────────────────────────────┤
│ │
│ execute-bash.ts web-search.ts read-file.ts │
│ write-file.ts string-replace.ts etc... │
│ │
│ Each tool: │
│ • Sends 'toolStart' message │
│ • May send 'toolProgress' messages │
│ • Sends 'toolEnd' message │
│ │
└────────────────────────┬────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ PROGRESS SERVICE │
│ (Singleton Pattern) │
├─────────────────────────────────────────────────────────────────┤
│ │
│ - Maintains list of listeners │
│ - Broadcasts messages to all subscribers │
│ - Provides cleanup functionality │
│ │
│ Methods: │
│ • report(message: string) │
│ • onProgress(callback: Function): UnsubscribeFn │
│ • clearListeners() │
│ │
└────────────────────────┬────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ SIDEBAR PROVIDER │
│ (Extension Backend) │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Constructor subscribes to ProgressService: │
│ │
│ this._progressUnsubscribe = progressService.onProgress( │
│ (message) => { │
│ this._view.webview.postMessage({ │
│ type: 'toolProgress', │
│ value: message │
│ }); │
│ } │
│ ); │
│ │
│ Also sends: │
│ • 'toolStart' message │
│ • 'toolEnd' message │
│ │
└────────────────────────┬────────────────────────────────────────┘
│
│ (postMessage)
▼
┌─────────────────────────────────────────────────────────────────┐
│ WEBVIEW UI │
│ (React Frontend) │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ChatView.tsx │
│ ├─ Listens for 'toolStart', 'toolEnd', and 'toolProgress' │
│ ├─ Updates toolStatus state: │
│ │ { isRunning, toolName, progressMessage } │
│ └─ Passes to MessageList component │
│ │
│ MessageList.tsx │
│ ├─ Displays tool name │
│ ├─ Shows progress message (italic, muted) │
│ └─ Renders animated loading bar │
│ │
└─────────────────────────────────────────────────────────────────┘
Component Responsibilities
ProgressService (src/services/progress.ts)
- Single Source of Truth for all progress updates
- Decoupled Design: Tools don't need to know about UI
- Flexible: Easy to add new subscribers (e.g., status bar, notifications)
Tools (src/services/tools/*.ts)
- Send Tool Messages: Send 'toolStart', 'toolProgress', and 'toolEnd' messages
- No UI Coupling: Don't need to know about webview or React
- Granular Updates: Report different phases of execution
- Progress Reporting: Use progressService.report() for intermediate updates
SidebarProvider (src/SidebarProvider.ts)
- Bridge: Connects backend (ProgressService) to frontend (Webview)
- Message Forwarding: Translates progress events to webview messages
- Lifecycle Management: Subscribes on creation, cleans up on disposal
- Tool Lifecycle: Sends 'toolStart' and 'toolEnd' messages for each tool
ChatView (webview-ui/src/components/Chat/ChatView.tsx)
- State Management: Maintains toolStatus with progress info
- Message Handling: Processes 'toolStart', 'toolEnd', and 'toolProgress' messages from extension
- Props Passing: Sends toolStatus to MessageList
MessageList (webview-ui/src/components/Chat/MessageList.tsx)
- Visual Rendering: Displays tool status and progress
- User Feedback: Shows loading bar and status text
- Real-time Updates: Re-renders on toolStatus changes
Message Types
Extension → Webview
{
type: 'toolProgress',
value: string // Progress message
}
{
type: 'toolStart',
value: string // Tool name
}
{
type: 'toolEnd',
value: string // Result
}
{
type: 'streamEnd'
}
Project Structure
codeMonster/
├── src/
│ ├── SidebarProvider.ts # Webview provider for the sidebar
│ ├── extension.ts # Extension activation and setup
│ ├── CoderPanel.ts # Coder panel management
│ ├── services/ # Core service implementations
│ │ ├── progress.ts # Progress reporting service
│ │ ├── mcp/ # MCP service implementation
│ │ ├── lsp/ # LSP service implementation
│ │ ├── ai/ # AI client implementations
│ │ ├── tools/ # Tool implementations
│ │ └── config.ts # Configuration management
│ ├── types/ # TypeScript type definitions
│ ├── utils/ # Utility functions
│ └── constants.ts # Constant values
├── webview-ui/ # React webview frontend
│ ├── src/
│ │ ├── components/ # React components
│ │ ├── main.tsx # Entry point
│ │ └── types.ts # Shared types
│ └── index.html # Webview HTML
├── assets/ # Extension assets
│ └── images/ # Icons and images
├── package.json # Extension metadata and dependencies
├── README.md # This file
├── ARCHITECTURE.md # Architecture documentation
└── CHANGELOG.md # Version history
Installation
- Install the extension from the VS Code Marketplace (not yet deployed right away)
- Open VS Code
- The extension will activate automatically when VS Code starts
Usage
Opening the Sidebar
- The sidebar will automatically appear in the activity bar
- Alternatively, use the command palette (
Ctrl+Shift+P) and run "Open Code"
Modes
The extension supports three operating modes:
- Normal Mode: Standard AI assistance with permission prompts for tool execution
- Plan Mode: AI generates plans and responses without executing actions
- Auto-Accept Mode: AI automatically executes safe tools without prompts
Chat Interface
- Type your coding question or request in the chat input
- The AI will process your request and may execute tools if needed
- Progress updates will be displayed in real-time
- Tool execution results will be shown in the chat interface
Development
Prerequisites
- Node.js (v16 or higher)
- VS Code
- npm or pnpm
Building
# Install dependencies
npm install
# Build the extension
npm run build
# Build the webview
npm run build:webview
# Watch mode for development
npm run watch
Scripts
npm run build: Build for productionnpm run watch: Watch for changes and rebuildnpm run build:webview: Build the webview UInpm run watch:webview: Watch webview for changesnpm run lint: Run ESLint
Contributing
Contributions are welcome! Please read our contributing guidelines before submitting pull requests.
License
MIT License - see the LICENSE file for details
Acknowledgments
- Powered by AI technologies
- Built with VS Code extension API
- Uses
Model Context Protocol (MCP)for external tool integration - Integrates with
Language Server Protocol (LSP)for enhanced code analysis CodeRabbitfor code review and analysisDaytonafor inference and API testing
Log in or sign up for Devpost to join the conversation.