🤖 CodeSage VS Code Extension

AI-powered chat assistant for VS Code with custom API integration

🚀 Overview

CodeSage is a VS Code extension that provides an AI-powered chat interface similar to GitHub Copilot, designed to connect to your custom AI API endpoint. Transform your coding experience with an intelligent assistant that understands your codebase and provides contextual help.

✨ Features

• 🤖 AI Chat Interface: Clean, integrated chat panel in VS Code sidebar
• 🔌 Custom API Integration: Connects to your AI API endpoint
• ⚡ Real-time Responses: Instant communication with loading indicators
• 🎨 VS Code Integration: Seamlessly integrates with VS Code themes
• 🔧 Error Handling: Graceful error handling with user-friendly messages
• ⌨️ Keyboard Shortcuts: Enter to send, Shift+Enter for new lines
• 📱 Responsive Design: Adapts to different VS Code layouts

📦 Installation

From VS Code Marketplace

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "CodeSage Chat"
4. Click Install

From VSIX Package

code --install-extension codesage-chat-1.0.0.vsix

Development Installation

git clone https://github.com/yourusername/codesage-extension.git
cd codesage-extension
npm install
npm run compile
# Press F5 in VS Code to run in development mode

🔧 Configuration

API Endpoint Setup

Your API should accept POST requests with the following format:

Endpoint: http://localhost:8000/process-prompt

Request Body:

{
  "prompt": "How do I implement a binary search tree?"
}

Response Body:

{
  "result": "To implement a binary search tree, you'll need..."
}

Custom API URL

To use a different API endpoint:

1. Open src/chatProvider.ts
2. Modify line 47:

   const response = await axios.post('YOUR_API_ENDPOINT', {
       prompt: message
   });
   

🚀 Quick Start

1. Install the Extension from the VS Code Marketplace
2. Set Up Your API server on http://localhost:8000
3. Click the Robot Icon 🤖 in the VS Code activity bar
4. Start Chatting with your AI assistant!

🛠 Development

Prerequisites

• Node.js 16.x or higher
• VS Code 1.74.0 or higher
• TypeScript

Build from Source

# Clone the repository
```bash
git clone https://github.com/yourusername/codesage-extension.git
cd codesage-extension

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Package extension
npm run package

# Run in development mode
# Open in VS Code and press F5

Available Scripts

npm run compile      # Compile TypeScript
npm run watch        # Watch for changes and compile
npm run package      # Create VSIX package
npm run publish      # Publish to marketplace

📋 Project Structure

codesage-plugin/
├── src/
│   ├── extension.ts          # Main extension entry point
│   └── chatProvider.ts       # Chat interface and API integration
├── out/                      # Compiled JavaScript
├── images/                   # Extension assets
├── .vscode/                  # VS Code configuration
│   ├── launch.json          # Debug configuration
│   └── tasks.json           # Build tasks
├── package.json              # Extension manifest
├── tsconfig.json            # TypeScript configuration
├── test_api_server.py       # Test API server
└── README.md                # This file

🧪 Testing

Test API Server

A simple Python test server is included:

python test_api_server.py

This starts a test server on http://localhost:8000 that echoes your prompts.

Manual Testing

1. Open the project in VS Code
2. Press F5 to launch Extension Development Host
3. Look for the robot icon 🤖 in the activity bar
4. Test the chat interface

📖 API Documentation

Request Format

interface APIRequest {
  prompt: string;  // User's chat message
}

Response Format

interface APIResponse {
  result: string;  // AI assistant's response
}

Error Handling

The extension handles various error scenarios:

• Connection timeouts (30 seconds)
• API server unavailable
• Invalid response formats
• Network connectivity issues

🎯 Use Cases

• Code Assistance: Get help with syntax, debugging, and best practices
• Learning: Ask questions about programming concepts
• Code Review: Get suggestions for code improvements
• Documentation: Generate documentation for your code
• Debugging: Get help troubleshooting errors

🔧 Configuration Options

Timeout Settings

Default API timeout: 30 seconds (configurable in chatProvider.ts)

UI Customization

The extension automatically adapts to VS Code themes using CSS variables.

📝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes
4. Commit your changes: git commit -m 'Add amazing feature'
5. Push to the branch: git push origin feature/amazing-feature
6. Open a Pull Request

🐛 Known Issues

• API timeout is fixed at 30 seconds
• Currently supports only localhost API endpoints
• No built-in API key management

🗺 Roadmap

• [ ] Configurable API endpoints through VS Code settings
• [ ] API key management
• [ ] Message history persistence
• [ ] Code snippet formatting in chat
• [ ] File context sharing with AI
• [ ] Multiple AI provider support
• [ ] Custom themes and styling options

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Inspired by GitHub Copilot's chat interface
• Built with VS Code Extension API
• Uses Axios for HTTP requests
• TypeScript for type safety

📞 Support

• Issues: GitHub Issues
• Documentation: README.md
• Marketplace: CodeSage Chat

Made with ❤️ for the VS Code community

Transform your coding experience with AI-powered assistance! 🚀