AI Coding Agent - VS Code Extension

A powerful AI-powered coding assistant extension for Visual Studio Code that provides intelligent code suggestions, explanations, refactoring, and code reviews.

✨ Features

🤖 AI Chat Panel

• Interactive chat interface in the sidebar
• Ask questions about your code
• Get code generation assistance
• Receive explanations and suggestions
• Apply code directly to your editor

⚡ Inline Code Completions

• GitHub Copilot-style ghost text suggestions
• Context-aware completions
• Accept with Tab, reject with Esc
• Configurable suggestion delay

🔄 Diff Preview

• Visual side-by-side comparison of original and AI-suggested code
• Accept, reject, or edit suggestions before applying
• Built-in VS Code diff editor integration

🛠️ Code Actions

• Explain Code: Get detailed explanations of selected code
• Refactor Code: Receive refactoring suggestions with diff preview
• Review Code: Get code quality reviews and best practice suggestions

📋 Context Menu Integration

• Right-click on selected code to access AI features
• Quick access to explain, refactor, and review commands

⌨️ Keyboard Shortcuts

• Ctrl+Shift+A (Mac: Cmd+Shift+A) - Open AI Chat
• Tab - Accept inline suggestion
• Esc - Reject inline suggestion

🚀 Getting Started

Installation

1. Clone this repository:

git clone <repository-url>
cd vscode-ai-agent

2. Install dependencies:

npm install

3. Compile the extension:

npm run compile

4. Open in VS Code:

code .

5. Press F5 to launch the extension in a new VS Code window

Development

• Watch mode: npm run watch - Automatically recompile on file changes
• Lint: npm run lint - Check code quality

📖 Usage

Opening the Chat Panel

1. Click the AI Agent icon in the Activity Bar (left sidebar)
2. Or press Ctrl+Shift+A (Mac: Cmd+Shift+A)
3. Or use Command Palette: AI Agent: Open Chat

Using Inline Completions

1. Start typing code in any file
2. Wait for ghost text suggestions to appear
3. Press Tab to accept or Esc to reject

Code Actions

1. Select code in the editor
2. Right-click to open context menu
3. Choose from AI Agent options:
   • ✨ AI: Explain this code
   • 🔧 AI: Refactor this code
   • 📋 AI: Review this code

Diff Preview Workflow

1. Request a code modification (refactor, generate, etc.)
2. Diff editor opens showing original vs. modified code
3. Choose an action:
   • ✓ Accept Changes - Apply to your file
   • ✗ Reject Changes - Discard suggestion
   • ✎ Edit Before Applying - Open in editor to modify

⚙️ Configuration

Access settings via File > Preferences > Settings and search for "AI Agent":

🏗️ Architecture

Folder Structure

vscode-ai-agent/
├── src/
│   ├── extension.ts              # Extension entry point
│   ├── commands/                 # Command handlers
│   │   └── index.ts
│   ├── providers/                # VS Code providers
│   │   ├── inlineCompletionProvider.ts
│   │   └── codeActionProvider.ts
│   ├── webview/                  # Webview controllers
│   │   ├── chatPanel.ts
│   │   └── diffPreview.ts
│   ├── statusBar/                # Status bar integration
│   │   └── aiStatusBar.ts
│   └── utils/                    # Utilities
├── media/                        # Static assets
│   ├── icons/
│   └── styles/
├── package.json                  # Extension manifest
└── tsconfig.json                 # TypeScript config

Key Components

Extension Entry Point (extension.ts)

• Activates the extension
• Registers all providers and commands
• Initializes status bar

Chat Panel (webview/chatPanel.ts)

• Webview-based chat interface
• Message handling between extension and UI
• Code application and diff preview triggers

Inline Completion Provider (providers/inlineCompletionProvider.ts)

• Provides ghost text suggestions
• Context-aware completions
• Configurable delay and behavior

Diff Preview (webview/diffPreview.ts)

• Uses VS Code's built-in diff editor
• Action handling (accept/reject/edit)
• Temporary document management

Code Action Provider (providers/codeActionProvider.ts)

• Quick fixes and refactoring suggestions
• Context menu integration
• Lightbulb actions

Status Bar (statusBar/aiStatusBar.ts)

• Shows AI agent status
• Click to open chat
• Visual feedback for AI operations

🔌 Backend Integration

This extension is designed as a frontend-only layer. To connect to an AI backend:

1. Locate TODO comments in the code:

   • src/webview/chatPanel.ts - handleUserMessage()
   • src/providers/inlineCompletionProvider.ts - getAISuggestion()
   • src/commands/index.ts - Various command handlers

2. Implement API calls to your AI service:

// Example integration
async function callAIBackend(prompt: string): Promise<string> {
    const response = await fetch('YOUR_API_ENDPOINT', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ prompt })
    });
    return await response.json();
}

3. Replace mock responses with real AI responses

🎨 UI Design Principles

• Native VS Code Integration: Uses built-in VS Code components and theme variables
• Theme-Aware: Automatically adapts to user's selected theme (light/dark/high contrast)
• Minimal & Clean: Follows VS Code's design language
• Keyboard-First: Full keyboard navigation support
• Accessible: Proper ARIA labels and semantic HTML

📝 Commands

🧪 Testing

To test the extension:

1. Press F5 in VS Code to launch Extension Development Host
2. Open a code file in the new window
3. Try the following:
   • Press Ctrl+Shift+A to open chat
   • Type code and wait for inline suggestions
   • Select code and right-click for AI actions
   • Use Command Palette to access all commands

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

MIT License - See LICENSE file for details

🔗 Resources

• VS Code Extension API
• VS Code Extension Guidelines
• Webview API
• Inline Completion Provider

📞 Support

For issues, questions, or suggestions:

• Open an issue on GitHub
• Check existing documentation
• Review the code comments

Built with ❤️ for the VS Code community