UI Copilot

UI Copilot is a VS Code extension that helps developers understand, review, and improve code directly inside the editor. It uses OpenRouter-backed AI models to provide instant explanations, code reviews, improvement suggestions, and chat-based assistance for selected code.

What the Extension Does

UI Copilot brings AI-powered coding support into your editor workflow. You can:

• Highlight code and ask for an explanation
• Request a quick review of quality, correctness, and maintainability
• Get actionable improvement suggestions
• Continue the conversation with a chat-style assistant using the selected code as context

Features

• Explain selected code in a clear, structured way
• Review code for risks, bugs, and maintainability issues
• Suggest refactors and best-practice improvements
• Stream AI responses in real time
• Securely store the OpenRouter API key using VS Code secrets
• Customize the model and response length through extension settings

Installation

1. Clone or download this repository.
2. Open the folder in VS Code.
3. Install dependencies:

npm install

4. Run the extension in a new Extension Development Host:
   • Press F5, or
   • Run the VS Code extension launch configuration

Configuration

API Key

Set your OpenRouter API key using the command:

• Command Palette → UI Copilot: Set OpenRouter API Key

You can also use a local .env file during development:

OPENROUTER_API_KEY=your_openrouter_api_key_here

Settings

The extension contributes the following settings:

• ui-copilot.model: Choose the OpenRouter model to use
• ui-copilot.maxTokens: Set the maximum response size

Example:

{
  "ui-copilot.model": "openai/gpt-4o-mini",
  "ui-copilot.maxTokens": 2048
}

Screenshots

Add screenshots of the extension in action here:

Demo GIF

A short demo GIF can be added here to show the workflow:

Supported Models

UI Copilot works with any model supported by OpenRouter. Common examples include:

• openai/gpt-4o-mini
• anthropic/claude-3.5-sonnet
• google/gemini-2.0-flash-exp
• meta-llama/llama-3.1-8b-instruct

You can change the active model from the extension settings.

Example Workflow

1. Open a file in VS Code.
2. Select a block of code.
3. Run one of the UI Copilot commands:
   • Explain Code
   • Review Code
   • Suggest Improvements
4. Review the streamed AI response in the panel.
5. Continue the conversation with the chat prompt if needed.

Roadmap

Planned improvements include:

• Better conversation history and context memory
• Support for additional AI providers
• Exportable review summaries
• UI refinements for a smoother workflow
• More customization for prompts and output styles

License

This project is licensed under the MIT License.

Built with VS Code extension APIs and OpenRouter.