AI Gateway Extension

A comprehensive VS Code extension for managing and monitoring Azure API Management instances that serve as AI Gateways for large language models and AI services.

Features

🔍 Analytics

• Real-time AI usage analytics with interactive charts
• Request trends and performance metrics
• Token usage tracking across models
• Error rate monitoring and latency analysis

📊 Usage Monitoring

• Token usage breakdown by subscription and model
• Request count and error tracking
• Performance metrics and duration analysis
• Cost analysis and resource utilization

📝 Logs Viewer

• Real-time request and response logs
• Detailed prompt and completion inspection
• Request filtering and search capabilities
• Log export functionality

🔑 API Key Management

• View and manage Azure API Management subscription keys
• Create new API keys with custom configurations
• Delete and regenerate existing keys
• Key status and creation date tracking

🔗 API Discovery

• Browse available AI APIs and models
• View API operations and endpoints
• Service URL and configuration details
• API documentation and schema information

🛠️ MCP Tools Integration

• Discover Model Context Protocol (MCP) tools
• View tool parameters and configurations
• Enable/disable tools as needed
• Integration status monitoring

Getting Started

Prerequisites

• VS Code 1.103.0 or higher
• Azure subscription with API Management service
• Azure authentication via one of the following:
  • Azure CLI: Run az login to authenticate
  • Azure Account Extension: Install and sign in through VS Code
  • Azure Service Principal: Set environment variables for service principal authentication
• Appropriate permissions to access Azure API Management (Reader role minimum, Contributor for key management)

Installation

1. Install the extension from the VS Code marketplace
2. Open the Command Palette (Ctrl+Shift+P)
3. Run "AI Gateway: Connect to Azure API Management"
4. Configure your Azure API Management settings

Configuration

The extension now features interactive configuration with real Azure API integration! No need to manually edit settings or work with mock data.

1. Click the AI Gateway icon in the Activity Bar
2. Click "Configure Azure Connection" in any view
3. Follow the guided setup:
   • Select Azure Tenant: Choose from your actual available tenants
   • Select Azure Subscription: Pick from your real subscriptions
   • Select API Management Service: Choose from discovered services in your subscription
4. The extension will test the connection and save your configuration
5. Click "Connect" to start using the extension

Note: The extension now uses the Azure SDK to discover real Azure resources in your account. Ensure you are authenticated via Azure CLI (az login) or the Azure Account extension in VS Code.

Alternative Manual Configuration (Advanced)

If you prefer manual configuration, you can still set these VS Code settings:

• ai-gateway.analytics.refreshInterval: Auto-refresh interval (seconds)
• ai-gateway.logs.maxEntries: Maximum log entries to display

Usage

Connecting to Azure API Management

1. Click the AI Gateway icon in the Activity Bar
2. Click "Configure Azure Connection" to set up your connection
3. Follow the interactive guided setup
4. Click "Connect" once configuration is complete

Viewing Analytics

• Navigate to the Analytics view to see overview metrics
• Click "Open Analytics Dashboard" for detailed charts and graphs
• Use the refresh button to update data

Managing API Keys

• Go to the API Keys view to see all subscription keys
• Click the "+" button to create new keys
• Right-click keys to delete or manage them

Viewing Logs

• The Logs view shows recent AI Gateway requests
• Click on any log entry to view detailed information
• Use "Export Logs" to save log data

Commands

• AI Gateway: Configure Azure Connection - Interactive setup for Azure resources
• AI Gateway: Connect - Connect to configured Azure API Management
• AI Gateway: Disconnect - Disconnect from the service
• AI Gateway: Refresh Analytics - Update analytics data
• AI Gateway: Open Analytics Dashboard - Open detailed dashboard
• AI Gateway: Create API Key - Create new subscription key
• AI Gateway: Export Logs - Export log data to file

Extension Settings

• ai-gateway.azureApiManagement.serviceName: Azure API Management service name
• ai-gateway.azureApiManagement.resourceGroup: Resource group containing the service
• ai-gateway.azureApiManagement.subscriptionId: Azure subscription ID
• ai-gateway.analytics.refreshInterval: Auto-refresh interval in seconds (default: 300)
• ai-gateway.logs.maxEntries: Maximum number of log entries (default: 1000)

Requirements

• Azure API Management service with AI/ML APIs configured
• Azure authentication setup (Azure CLI or Visual Studio Code Azure Account extension)
• Network access to Azure services

Known Issues

• Large log datasets may impact performance
• Authentication may require periodic renewal
• Some analytics features require Application Insights integration

Release Notes

0.0.1

• Initial release with interactive Azure configuration
• Guided setup for Azure tenant, subscription, and API Management selection
• Analytics dashboard with charts and real-time metrics
• API key management with create/delete functionality
• Comprehensive log viewing and export capabilities
• MCP tools discovery and management
• Auto-saving configuration across VS Code sessions

Contributing

This extension is open source. Please report issues and submit pull requests on our GitHub repository.

License

This extension is licensed under the MIT License.

Enjoy monitoring your AI Gateway with enhanced visibility and control! 🚀

Following extension guidelines

Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.

• Extension Guidelines

Working with Markdown

You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:

• Split the editor (Cmd+\ on macOS or Ctrl+\ on Windows and Linux).
• Toggle preview (Shift+Cmd+V on macOS or Shift+Ctrl+V on Windows and Linux).
• Press Ctrl+Space (Windows, Linux, macOS) to see a list of Markdown snippets.

For more information

• Visual Studio Code's Markdown Support
• Markdown Syntax Reference

Enjoy!