Gemini AI TypeScript Helper

A VS Code extension that enhances TypeScript error tooltips with AI-powered explanations using Google's Gemini API.

Features

Core Functionality

• AI-Powered Error Explanations: Get intelligent explanations for TypeScript errors using Gemini AI
• Smart Caching: Cache error explanations to avoid redundant API calls
• Real-time Status: Visual indicators showing AI processing status
• Comprehensive Logging: Detailed logging of all API requests and responses

User Experience

• Seamless Integration: Works automatically with existing TypeScript error tooltips
• Loading Indicators: Shows "⏳ Gemini is summarizing..." while processing
• Beautiful Formatting: AI responses are formatted with Markdown for better readability
• Visual Icons: Uses emojis (🧠, 💡, ✨) to distinguish AI content

Configuration Options

• API Key Management: Secure API key storage via VS Code settings
• Language Support: Choose between Vietnamese and English for explanations
• Customizable Prompts: Modify the AI prompt template to suit your needs
• Timeout Control: Adjust API request timeout settings
• Summary Length: Limit the length of AI explanations

Installation

1. Install the extension from the VS Code Marketplace
2. Open the Command Palette (Ctrl+Shift+P)
3. Run "Gemini: Set API Key"
4. Enter your Gemini API key (starts with "AIza...")

Requirements

• VS Code 1.74.0 or higher
• A valid Gemini API key from Google AI Studio

Usage

Automatic Mode

1. Open a TypeScript file with errors
2. Hover over any TypeScript error
3. The AI explanation will appear below the original error tooltip

Manual Mode

• Gemini: Summarize Current Error - Manually trigger AI explanation for the error at cursor position
• Gemini: Set API Key - Configure your Gemini API key
• Gemini: Clear API Key - Remove stored API key
• Gemini: Show Output - View detailed logs and debugging information
• Gemini: Reload - Reload the extension

Configuration

The extension can be configured through VS Code settings:

{
  "gemini-diagnostics.apiKey": "your-gemini-api-key",
  "gemini-diagnostics.timeout": 3000,
  "gemini-diagnostics.maxSummaryLength": 500,
  "gemini-diagnostics.language": "vi",
  "gemini-diagnostics.customPrompt": "Explain this TypeScript error in simple terms"
}

Settings Description

• gemini-diagnostics.apiKey: Your Gemini API key (required)
• gemini-diagnostics.timeout: API request timeout in milliseconds (default: 3000)
• gemini-diagnostics.maxSummaryLength: Maximum length of AI summary in characters (default: 500)
• gemini-diagnostics.language: Language for AI summaries ("vi" or "en", default: "vi")
• gemini-diagnostics.customPrompt: Custom prompt template for AI explanations

API Key Setup

1. Go to Google AI Studio to get your API key
2. In VS Code, open Command Palette (Ctrl+Shift+P)
3. Run "Gemini: Set API Key"
4. Paste your API key when prompted
5. The key will be securely stored in VS Code's secret storage

Troubleshooting

Common Issues

Q: The extension shows "API key not configured" A: Run "Gemini: Set API Key" command and provide your Gemini API key

Q: AI explanations are not appearing A: Check if you have TypeScript errors in your file and hover over them

Q: API requests are timing out A: Increase the timeout value in settings or check your internet connection

Q: The extension is not working A: Try reloading the extension with "Gemini: Reload" command

Debug Information

1. Open the Output panel (View → Output)
2. Select "Gemini AI Diagnostics" from the dropdown
3. View detailed logs of all API requests and responses
4. Check the status bar for connection status indicators

Development

Building the Extension

# Install dependencies
yarn install

# Compile TypeScript
yarn run compile

# Watch for changes during development
yarn run watch

Project Structure

src/
├── extension.ts      # Extension entry point
├── hover.ts          # Hover provider implementation
├── gemini.ts         # Gemini API client
├── cache.ts          # Error caching system
├── output.ts         # Output channel management
├── statusbar.ts      # Status bar management
└── config.ts         # Configuration management

License

MIT License

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

Support

If you encounter any issues or have questions, please:

1. Check the troubleshooting section
2. View the output logs for detailed error information
3. Open an issue on the GitHub repository