Kodio Studio - VS Code Extension
Browse, view, and save AI-generated code from Kodio Studio directly in Visual Studio Code. Stay in your IDE while accessing your collaborative workspaces, sessions, and documents.
✨ Features
🌳 Workspace Browser
- Hierarchical TreeView - Navigate through workspaces → sessions → documents
- Real-time Sync - Auto-refresh when you log in or generate new code
- Quick Access - Click any document to open it instantly in VS Code
🔐 Secure Authentication
- JWT Token Storage - Securely stores credentials in VS Code's secret storage
- Status Bar Integration - See your login status at a glance (✓/✗ Kodio)
- One-Click Login - Sign in with your Kodio credentials directly from VS Code
📄 Document Management
- Syntax Highlighting - Automatic language detection (Python, JavaScript, Java, C++, etc.)
- Save to Workspace - Right-click any document to save it to your local file system
- Read-Only Viewing - Browse code safely without accidental edits
🚀 Productivity Boosters
- Command Palette - Quick access via
Ctrl+Shift+P → "Kodio"
- Refresh On-Demand - Manual refresh button when you need the latest updates
- Context Menus - Right-click actions for common tasks
📦 Installation
From VS Code Marketplace
- Open VS Code
- Press
Ctrl+Shift+X to open Extensions panel
- Search for "Kodio Studio"
- Click Install
From .vsix File
- Download
kodio-vscode-extension-0.0.1.vsix
- Open VS Code
- Press
Ctrl+Shift+P → type "Install from VSIX"
- Select the downloaded
.vsix file
🚀 Getting Started
1. Login to Kodio
- Click the Kodio item in the Activity Bar (left sidebar)
- Click "Login to Kodio" in the TreeView
- Enter your Kodio username and password
- Status bar shows ✓ Kodio when connected
2. Browse Your Workspaces
- Expand workspace folders to see sessions
- Expand sessions to see documents
- Click Refresh icon (top-right) to sync latest changes
3. View Documents
- Click any document name to open it in the editor
- Syntax highlighting automatically applied based on file type
- Documents open in read-only mode (view-only)
4. Save to Workspace
- Right-click any document → "Save to Workspace"
- Choose a location on your local file system
- File is downloaded with correct extension and content
⚙️ Configuration
The extension uses production URLs by default and works out-of-the-box. No configuration needed for most users.
Configure via VS Code settings (Ctrl+, → search "Kodio"):
| Setting |
Description |
Production Default |
kodio.backendBaseUrl |
Kodio backend API URL |
https://kodio-backend.purplefield-13215ae2.westus.azurecontainerapps.io |
kodio.webAppUrl |
Kodio web app URL |
https://kodio.ai |
kodio.enableTelemetry |
Send anonymous usage data |
false |
🔧 Development Mode (Localhost)
If you're running Kodio backend locally for development, configure these settings:
Option 1: Via Settings UI
- Press
Ctrl+, to open Settings
- Search for "Kodio"
- Set
Backend Base URL to http://localhost:5000
- Set
Web App URL to http://localhost:3001
Option 2: Via settings.json
{
"kodio.backendBaseUrl": "http://localhost:5000",
"kodio.webAppUrl": "http://localhost:3001"
}
Option 3: Workspace-specific settings
Create .vscode/settings.json in your project root:
{
"kodio.backendBaseUrl": "http://localhost:5000",
"kodio.webAppUrl": "http://localhost:3001"
}
🌐 Production Mode (Default)
Extension connects to production servers by default. No configuration needed:
🎯 Use Cases
Scenario 1: Code Review
Generate code in Kodio Studio (web) → Open in VS Code extension → Review with full IDE features → Save to local project
Scenario 2: Learning
Browse AI-generated examples → Open in VS Code → Use IntelliSense to explore APIs → Save snippets for later
Scenario 3: Team Collaboration
Team member generates code → You receive notification → Open in VS Code → Download and integrate into your project
📋 Requirements
- VS Code Version: 1.60.0 or higher
- Kodio Account: Active account on Kodio Studio platform
- Backend Access: Kodio backend must be accessible (local or cloud)
🐛 Known Issues
- WebSocket Support: Real-time document updates not yet implemented (manual refresh required)
- Editing Limitations: Documents are read-only; edit in Kodio Studio web app
- Large Files: Documents over 10MB may load slowly
🔒 Privacy & Security
- Credentials: Stored securely using VS Code's
SecretStorage API (encrypted)
- JWT Tokens: Automatically refreshed, never logged or transmitted insecurely
- Telemetry: Disabled by default; opt-in via settings if you want to help improve the extension
🛠️ Troubleshooting
"Failed to fetch workspaces"
- Solution: Check
kodio.backendBaseUrl points to correct backend URL
- Verify you're logged in (status bar shows ✓ Kodio)
- Ensure backend is running and accessible
"Login failed"
- Solution: Verify username/password are correct
- Check backend URL is correct
- Try logging out and logging back in
Documents not showing
- Solution: Click the Refresh icon in TreeView header
- Verify session contains documents in Kodio web app
- Try logging out and back in to refresh token
Cannot save to workspace
- Solution: Ensure you have write permissions to selected folder
- Check file doesn't already exist (will prompt to overwrite)
- Verify document content is not empty
🗺️ Roadmap
Coming Soon
- ✅ TreeView navigation (Completed)
- ✅ Authentication & secure storage (Completed)
- ✅ Document viewing (Completed)
- ✅ Save to workspace (Completed)
- 🔄 Real-time document updates via WebSocket
- 🔄 In-editor collaboration (locks, presence)
- 🔄 Search & filter documents
- 🔄 Language-specific file icons
- 🔄 Document preview on hover
🤝 Contributing
We welcome contributions! Here's how to help:
- Report Bugs: Open an issue on GitHub with reproduction steps
- Suggest Features: Create a feature request issue
- Submit PRs: Fork the repo, make changes, submit pull request
📄 License
This extension is licensed under the MIT License.
🔗 Links
❤️ Acknowledgments
Built with:
Made with ❤️ by the Kodio Team
Empowering developers with AI-powered collaborative coding
