Aider SideView seamlessly integrates the Aider AI pairing GUI and custom web applications or documentation directly into your Visual Studio Code sidebar. It provides live theme adaptation, an embedded reverse proxy for custom CSS/JS injection, smart bidirectional text (RTL/LTR) handling, fast workspace model management, and multi-profile URL switching.
Integrated Sidebar Webview: Run and interact with the Aider GUI right inside your editor sidebar without switching windows.
Universal Web Viewer & Profile Switching: Easily switch between predefined host URLs or open any custom web service, local development preview, or documentation page directly inside the sidebar using profiles.
Smart Bidirectional (RTL/LTR) Support:
Automatic script detection for Persian, Arabic, and other RTL languages.
Dynamic alignment on input fields and text areas based on the initial character typed.
Font stack prioritization (Vazirmatn, Segoe UI, system fallbacks) for RTL text.
Code snippets, inline code, and preformatted blocks remain strictly LTR and isolated.
Automatic Streamlit Configuration: Synchronizes editor dark/light theme tokens and generates .streamlit/config.toml automatically on workspace launch.
Model Discovery & Switching:
Quick access command to switch models on the fly.
Automatically reads and merges custom configurations from .aider.model.settings.yml and .aider.model.metadata.json in your workspace root.
Custom Injection Engine: Built-in local reverse proxy allows custom CSS and JS injection without cross-origin policy issues.
Quick Navigation: Directly open .aider.conf.yml or extension settings straight from the sidebar interface.
Commands
Command
Description
Aider SideView: Focus
Opens or focuses the Aider SideView sidebar panel.
Refresh SideView
Reloads the sidebar webview frame.
Start Aider Server
Launches the configured Aider terminal command with active environment variables.
Stop Aider Server
Gracefully stops the active Aider terminal server and resets the sidebar state.
Select Aider Model
Quickly switches the active model from workspace presets or defaults.
Open .aider.conf.yml
Opens or creates the .aider.conf.yml configuration file in the active workspace.
Extension Settings
Opens the settings panel for Aider SideView.
Open in Browser
Launches the active Aider web UI in your default external browser.
Switch Profile
Toggles between predefined host URL profiles.
Extension Settings
This extension contributes the following settings through VS Code configuration:
aiderSideview.url: The target Streamlit / Aider URL (Default: http://localhost:8501).
aiderSideview.aiderCommand: Terminal command used to start Aider (Default: aider --gui).
aiderSideview.models: Predefined list of models available in the selection palette.
aiderSideview.selectedModel: Active model applied via --model flag on start.
aiderSideview.rtl: Enable or disable automatic RTL text alignment (Default: true).
aiderSideview.autoEmbed: Appends ?embed=true to URL parameters to remove Streamlit frame chrome (Default: true).
aiderSideview.enableProxy: Enables the internal proxy server for runtime code injection and RTL processing (Default: true).
aiderSideview.customCss: Custom CSS injected directly into the iframe documents.
aiderSideview.customJs: Custom JavaScript executed inside the iframe documents.
aiderSideview.profiles: Preset array of URL profiles for fast switching.
Requirements
VS Code ^1.74.0 or higher.
Aider installed and accessible from your system PATH:
pip install aider-chat
License
Distributed under the MIT License. See LICENSE for more information.
