An AI Agent Chat Assistant extension for Visual Studio Code.
Features
- Top-Right Icon: Click the sparkle icon in the editor title bar (top-right) to open the chat panel
- Right-Side Panel: Chat panel opens on the right side of the editor, similar to Claude Code
- Keyboard Shortcut: Press
Ctrl+Shift+L(orCmd+Shift+Lon Mac) to toggle the panel - Command Palette: Access via "Lumos Code: Lumos Code" in the command palette
- Chat Interface: Clean, modern chat UI with message history
- Message Input: Send messages with Enter key (Shift+Enter for new lines)
- Ask Before Edits: Toggle to control whether the AI asks before making code edits
Installation & Development
Prerequisites
- Node.js (v20 or higher)
- Visual Studio Code
Setup
-
Install dependencies:
npm install -
Compile the extension:
npm run compile -
Run the extension:
- Press
F5in VS Code to open the Extension Development Host - Or use the "Run Extension" launch configuration
- Press
Testing
- Once the Extension Development Host opens, look for the sparkle icon in the top-right corner of the editor title bar
- Click the icon (or press
Ctrl+Shift+L) to open the chat panel on the right side - Type a message and press Enter to send
- The extension will echo your message back (this is a demo response)
Configuration
The extension can be configured through VS Code settings. Go to File > Preferences > Settings (or Code > Preferences > Settings on Mac) and search for "Lumos".
Available Settings
-
API Base URL (
lumos-code.apiBaseUrl): The HTTP endpoint for the Lumos backend- Default:
http://localhost:8085 - Example:
http://192.168.1.100:8085
- Default:
-
WebSocket Server URL (
lumos-code.serverUrl): The WebSocket endpoint for real-time communication- Default:
ws://localhost:8081 - Example:
ws://192.168.1.100:8081
- Default:
-
Default AI Model (
lumos-code.defaultModel): Default AI model to use- Default:
gpt-4
- Default:
-
Default Execution Mode (
lumos-code.defaultMode): Default execution mode- Options:
manual,automatic,agent - Default:
manual
- Options:
-
Other Repositories (
lumos-code.otherRepositories): Additional repository folders for context- Default:
[]
- Default:
-
User Prompt (
lumos-code.userPrompt): Custom prompt instructions sent with every message- Default:
""
- Default:
Setting the API Base URL
To change the backend API URL:
- Open VS Code Settings (
Ctrl+,orCmd+,) - Search for "Lumos API Base URL"
- Update the value to your backend URL (e.g.,
http://your-server:8085)
Alternatively, you can edit your settings.json directly:
{
"lumos-code.apiBaseUrl": "http://your-server:8085",
"lumos-code.serverUrl": "ws://your-server:8081"
}
Project Structure
vscode-extention/
├── src/
│ ├── extension.ts # Extension entry point
│ └── chatPanel.ts # Chat panel webview provider
├── resources/
│ └── icon.svg # Activity bar icon
├── out/ # Compiled JavaScript (generated)
├── package.json # Extension manifest
└── tsconfig.json # TypeScript configuration
Development
Watch Mode
Run TypeScript in watch mode for automatic compilation:
npm run watch
Building
Compile the extension:
npm run compile
Next Steps
To integrate with an AI backend:
- Update the
_handleUserMessagemethod inchatPanel.tsto connect to your AI service - Add WebSocket or HTTP client for backend communication
- Implement proper message handling and response streaming
License
MIT