VTEX CLI GUI

A powerful and intuitive graphical interface for VTEX CLI, bringing all essential VTEX IO commands to your VS Code sidebar with enhanced productivity features.

📸 Preview

Sidebar Interface

Bottom Panel Interface

🎯 Features

📋 Account Management

• Quick Account Switching: Manage multiple VTEX accounts with ease
• Smart Login: Automatically uses vtex switch for recent logins (< 23h), vtex login for expired sessions
• Visual Status: See your active account in the sidebar and status bar
• One-Click Access: Click the account in the status bar to instantly switch between accounts

🔧 Workspace Management

• Multiple Workspaces: Save and switch between development workspaces quickly
• Quick Picker: Click the workspace in the status bar to change workspaces
• Visual Indicators: Active workspace highlighted in both sidebar and status bar
• Fast Switching: Execute vtex use commands with a single click

🔄 Auto-Sync with vtex whoami

• Refresh Button: Update account and workspace information instantly
• Auto-Detection: Automatically adds new accounts/workspaces from whoami output
• Real-time Sync: Keep your interface in sync with your current VTEX CLI session
• Status Bar Integration: Refresh icon always available in the bottom status bar

⚡ Quick Commands

Pre-configured buttons for common VTEX CLI operations:

• vtex whoami - Check current account and workspace
• vtex list - List installed apps
• vtex link - Link your app for development
• vtex workspace list - List available workspaces
• vtex workspace reset - Reset workspace to master

💻 Integrated Terminal

• Live Output: See command results in real-time within the sidebar
• Command History: Track all executed commands
• Error Handling: Clear error messages with visual indicators
• Auto-scroll: Terminal automatically scrolls to show latest output

📊 Status Bar Integration

Display current VTEX account and workspace directly in VS Code's status bar:

• 📋 Account - Click to switch accounts
• 🔧 Workspace - Click to change workspaces
• 🔄 Refresh - Update information from VTEX CLI

🚀 Getting Started

Prerequisites

• VS Code 1.108.1 or higher
• VTEX CLI installed globally (Installation Guide)
• Node.js 14.x or higher

Installation

From VS Code Marketplace

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "VTEX CLI GUI"
4. Click Install

From VSIX File

1. Download the .vsix file from releases
2. Open VS Code
3. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
4. Click "..." menu → Install from VSIX
5. Select the downloaded file

📖 Usage

Opening the Sidebar

1. Click the VTEX icon in the Activity Bar (left sidebar)
2. Or use the command palette: Ctrl+Shift+P → "VTEX: Abrir Interface CLI"

Managing Accounts

1. Add Account: Click "+ Adicionar Account" button
2. Login/Switch: Click the account name or use the Login button
3. Quick Switch: Click the account in the status bar (bottom)
4. Remove: Click the ✕ button next to the account name

Managing Workspaces

1. Add Workspace: Click "+ Adicionar Workspace" button
2. Switch: Click "Use" button or click the workspace name in the status bar
3. Remove: Click the ✕ button next to the workspace name

Refresh Current Session

• Sidebar: Click the 🔄 Refresh button next to "Accounts"
• Status Bar: Click the 🔄 icon in the bottom bar
• Command Palette: Ctrl+Shift+P → "VTEX: Refresh Whoami"

This will:

• Execute vtex whoami
• Auto-detect and add current account/workspace
• Update all displays with current information

Executing Commands

• Quick Commands: Click any pre-configured command button
• Custom: Type your command in the terminal section (future feature)
• Terminal: All outputs are displayed in the integrated terminal

⌨️ Commands

The extension provides the following commands (access via Command Palette):

⚙️ Extension Settings

This extension does not require any configuration. All settings are managed through the interface.

🗺️ Roadmap

• [ ] Custom command input field
• [ ] Command history with search
• [ ] Workspace creation from GUI
• [ ] App publish wizard
• [ ] Builder status monitoring
• [ ] Log viewer for linked apps
• [ ] Settings sync across VS Code instances

🐛 Known Issues

• Interactive commands (like vtex login) open in the VS Code integrated terminal
• Commands requiring user input may need manual terminal interaction

📝 Release Notes

0.0.1 (Initial Release)

Features:

• ✨ Account management with smart login/switch
• 🔧 Workspace management with quick switching
• 🔄 Auto-sync with vtex whoami
• 📊 Status bar integration with click actions
• ⚡ Pre-configured quick commands
• 💻 Integrated terminal with live output
• 🎨 Clean and intuitive UI following VS Code design guidelines

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

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

📄 License

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

🙏 Acknowledgments

• Built with ❤️ for the VTEX developer community
• Inspired by the need for a better VTEX CLI experience
• Not officially affiliated with VTEX

📧 Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions

👨‍💻 Author

Gabriel Strieder Ten Caten

• GitHub: @gabrielstc
• LinkedIn: Gabriel Strieder Ten Caten
• Email: gabrielcc.tc@hotmail.com

Made with ❤️ for the VTEX community | Report Bug | Request Feature

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!