Better_UIX

Your intelligent partner for accelerated UI/UX development! Generate HTML, CSS, JavaScript, React, Vue components, and more, directly within VS Code using powerful AI models via OpenRouter.

Stop wrestling with boilerplate and repetitive UI patterns. AI UI-UX Coder leverages the flexibility of OpenRouter.ai to bring cutting-edge AI assistance to your frontend workflow, helping you build beautiful and functional user interfaces faster.

Features

✨ Smart Code Generation: Describe the UI component you need (e.g., "a responsive card with an image, title, and button") and let the AI generate the HTML, CSS, and JavaScript for you. Supports streaming for instant feedback. ✨ Inline Suggestions (Ghost Text): Get intelligent code completions as you type, similar to GitHub Copilot, for HTML, CSS, JS, TS, React (JSX/TSX), Vue, and more. ✨ OpenRouter Powered: Access a wide variety of LLMs (GPT models, Claude, Gemini, Llama, etc.) through your OpenRouter.ai account. You choose the model that best fits your needs and budget. ✨ Secure API Key Handling: Your OpenRouter API key is stored securely using VS Code's native SecretStorage. ✨ Highly Configurable: * Select your preferred AI model. * Enable/disable inline suggestions. * Adjust the delay and context length for inline suggestions. ✨ Status Bar Integration: Always know the AI's current status (Ready, Thinking, Error, API Key Missing). ✨ Detailed Logging: Troubleshoot or understand behavior via the dedicated "AI UI-UX Coder" output channel. ✨ Quick Toggle: Easily enable or disable inline suggestions with a command.

Requirements

• Visual Studio Code v1.80.0 or newer.
• An OpenRouter API Key. You can get one by signing up at OpenRouter.ai. Note: Usage of models via OpenRouter may incur costs based on their pricing.

Getting Started

1. Install AI UI-UX Coder from the VS Code Marketplace.
2. Set Your API Key:
   • Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P).
   • Search for and run AI UI-UX: Set OpenRouter API Key.
   • Paste your OpenRouter API key and press Enter.
   • The status bar should update to "AI: Ready".
3. Configure (Optional):
   • Open VS Code Settings (Ctrl+, or Cmd+,).
   • Search for "AI UI-UX Coder" to customize model, inline suggestion behavior, etc. We recommend starting with a fast and affordable model like openai/gpt-4o-mini or anthropic/claude-3-haiku-20240307 for a good balance.

Usage

Generating UI Components

1. Open a file (e.g., .html, .jsx, .vue).
2. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P).
3. Run the command AI UI-UX: Generate UI Component/Code.
4. Describe the component you want in the input box (e.g., "a login form with email, password, and a submit button, styled with modern CSS").
5. The AI will generate and stream the code directly into your editor at the cursor position (or replacing selected text).

Inline Code Suggestions

1. Ensure inline suggestions are enabled (default is on). You can toggle them with AI UI-UX: Toggle Inline Code Suggestions.
2. Simply start typing in a supported file (HTML, CSS, JS, JSX, TSX, etc.).
3. After a brief pause (configurable by inlineSuggestionDelay), the AI will suggest a completion as "ghost text".
4. Press Tab to accept the suggestion.
5. Press Esc or continue typing to ignore it.

Prompting Tips for Best Results

The quality of AI-generated code heavily depends on your prompts!

• Be Specific: Instead of "make a button," try "create a primary action button with a blue background (#007bff), white text, 12px padding, 4px rounded corners, and a subtle box-shadow on hover."
• Mention Technologies/Frameworks: "Generate a React functional component for a user profile card that takes name, avatarUrl, and bio as props."
• Describe Structure and Content: "An HTML structure for a product page with a header, a main content area (product image gallery, product details, add to cart button), and a footer."
• For Multi-File Components: You can ask for HTML, CSS, and JS separately or together. If together, specify how you want them separated (e.g., "Provide HTML, then CSS in a <style> tag, then JS in a <script> tag").
• Iterate: If the first result isn't perfect, refine your prompt or select the generated code and ask the AI to modify it.

Supported Languages (for Inline Suggestions & Generation)

While the AI can attempt code for many languages, inline suggestions are explicitly registered for: HTML, CSS, SCSS, Less, JavaScript, TypeScript, JSX (React), TSX (React), Vue, Svelte, PHP, Python, Java, C#, Go, Ruby, Rust. Generation capabilities depend on the chosen OpenRouter model.

Data Handling and Security

• Your OpenRouter API Key is stored securely using VS Code's SecretStorage and is only accessed locally by the extension to make API calls to OpenRouter.
• Code and Prompts: To generate code, the text from your active editor (or selection), along with your prompts, is sent to the OpenRouter API, which then routes it to the AI model you've configured. This extension does not store your code or prompts on any third-party servers beyond this necessary API interaction. Please review OpenRouter's and the respective AI model provider's privacy policies.

Known Issues & Limitations

• AI-generated code may not always be perfect or optimal. Always review and test the code.
• The quality and speed of responses depend heavily on the chosen OpenRouter model and your internet connection.
• Inline suggestions are heuristic and might sometimes trigger unexpectedly or not at all. Adjusting the delay and context settings can help.
• Very large code generation requests might be slow or hit model context limits.

Release Notes

See the CHANGELOG.md file.

Contributing

Contributions, issues, and feature requests are welcome! Please check the issues page.

License

This extension is licensed under the MIT License. See the LICENSE file for details.

Happy Coding with AI! 🚀