Lumos Code - VS Code Extension

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 (or Cmd+Shift+L on 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

1. Install dependencies:

   npm install
   

2. Compile the extension:

   npm run compile
   

3. Run the extension:

   • Press F5 in VS Code to open the Extension Development Host
   • Or use the "Run Extension" launch configuration

Testing

1. Once the Extension Development Host opens, look for the sparkle icon in the top-right corner of the editor title bar
2. Click the icon (or press Ctrl+Shift+L) to open the chat panel on the right side
3. Type a message and press Enter to send
4. 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

• 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 AI Model (lumos-code.defaultModel): Default AI model to use

  • Default: gpt-4

• Default Execution Mode (lumos-code.defaultMode): Default execution mode

  • Options: manual, automatic, agent
  • Default: manual

• Other Repositories (lumos-code.otherRepositories): Additional repository folders for context

  • Default: []

• User Prompt (lumos-code.userPrompt): Custom prompt instructions sent with every message

  • Default: ""

Setting the API Base URL

To change the backend API URL:

1. Open VS Code Settings (Ctrl+, or Cmd+,)
2. Search for "Lumos API Base URL"
3. 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:

1. Update the _handleUserMessage method in chatPanel.ts to connect to your AI service
2. Add WebSocket or HTTP client for backend communication
3. Implement proper message handling and response streaming

License

MIT