Skip to content

Latest commit

 

History

History
233 lines (152 loc) · 7.35 KB

README.md

File metadata and controls

233 lines (152 loc) · 7.35 KB

Mistral Vibe Sidebar Extension for VS Code

This VS Code extension integrates Mistral Vibe CLI directly into your VS Code sidebar, allowing you to interact with Vibe without leaving your editor. The fist version 0.0.1 was based on Claude Code Sidebar by Rudi Wahyudi and was also using node-pty, xcode and xterm.js. Version 0.0.2 changed to use the default VSCode terminal which is a lot more lightweight and straightforward.

Features

  • UI Integration: Adds a Mistral Vibe icon above the VS Code editors, allowing you to open a Vibe session with a single click.
  • VSCode Terminal: Opens a standard VSCode shell terminal (zsh/bash/etc.) to the right of your current editor and loads the Vibe CLI.
  • Auto-start Vibe: Automatically runs the vibe command when the terminal opens
  • Auto Cleanup: Automatically closes the Vibe session when VS Code exits or restarts

Screenshot

Prerequisites

Before installing this extension, make sure you have:

  1. VS Code (v1.85.0 or higher) - Download here
  2. Mistral Vibe CLI installed and accessible in your PATH
    • Install with: curl -LsSf https://mistral.ai/vibe/install.sh | bash
    • You can verify this by running vibe --version in your terminal
    • For more information, see Mistral Vibe documentation

Installation

Simply install the extension from the VS Code Marketplace or directly from this repository (see below).

Development and local installation

Step 1: Clone or Download the Repository

git clone https://github.com/proud-commerce/VSCode-Mistral-Vibe-Sidebar
cd VSCode-Mistral-Vibe-Sidebar

Step 2: Install Dependencies

npm install
npm run rebuild

Step 3: Compile the Extension

npm run compile

This will compile the TypeScript code to JavaScript in the out directory.

Step 4: Install the Extension Locally

There are two ways to install the extension locally:

Option A: Using the Extension Development Host (Recommended for Testing)

  1. Open the extension folder in VS Code:

    code .

  2. Press F5 or go to Run > Start Debugging

  3. This will open a new VS Code window with the extension loaded

  4. In the new window, you should see the Mistral Vibe icon in the activity bar (sidebar)

Option B: Package and Install (Recommended for Regular Use)

  1. Install the vsce tool if you haven't already:

    npm install -g @vscode/vsce

  2. Package the extension:

    vsce package

    This creates a .vsix file (e.g., devstral-vibe-sidebar-0.0.2.vsix)

  3. Install the packaged extension:

    • Open VS Code
    • Go to Extensions view (Ctrl+Shift+X or Cmd+Shift+X)
    • Click the ... menu at the top
    • Select Install from VSIX...
    • Choose the .vsix file you just created

  4. Reload VS Code when prompted

Usage

Opening Mistral Vibe

  1. Click the Mistral Vibe icon above your current editor window
  2. A terminal will open in the sidebar (your default shell: zsh, bash, etc.)
  3. The extension automatically runs vibe command for you
  4. You can now interact with Mistral Vibe directly in the terminal

Keyboard Shortcut

  • Windows/Linux: Ctrl+Alt+V
  • macOS: Cmd+Alt+V

Interacting with Vibe

  • Type directly in the terminal - it's a real terminal with full functionality
  • Use all Vibe commands and features as you normally would
  • Use slash commands for configuration adjustments
  • The terminal supports all standard terminal operations (copy, paste, keyboard shortcuts, etc.)

Closing Mistral Vibe

The terminal and Vibe session will automatically close when:

  • You close VS Code
  • You reload VS Code window (Ctrl+R or Cmd+R)
  • The extension is deactivated

You can also manually exit Vibe by typing exit or pressing Ctrl+D, then close the sidebar panel.

Troubleshooting

Extension doesn't appear in the sidebar

  • Make sure the extension is installed correctly
  • Try reloading VS Code (Ctrl+R or Cmd+R)
  • Check the Output panel (View > Output) and select "Mistral Vibe Sidebar" for error messages

"vibe is not found" or similar error

  • Ensure the vibe command is in your system PATH
  • Try running vibe --version in your regular terminal
  • If it doesn't work, reinstall Vibe CLI: curl -LsSf https://mistral.ai/vibe/install.sh | bash

Terminal shows errors or doesn't respond

  • Check if Vibe CLI is working correctly outside VS Code
  • Look at the VS Code Developer Console (Help > Toggle Developer Tools) for error messages
  • Make sure you have the latest version of Vibe installed

Vibe process doesn't close properly

  • The extension tries to clean up automatically, but if you notice lingering processes:
    • Check running processes: ps aux | grep vibe
    • Manually kill if needed: kill <process-id>

Configuration

The extension supports the following settings:

Setting Default Description
devstralVibeSidebar.command vibe The command to run in the terminal
devstralVibeSidebar.additionalArgs `` Additional arguments to pass to the Vibe command

Development

Project Structure

sidebar-devstral-vibe-vscode-extension/
├── src/
│   └── extension.ts          # Main extension code
├── resources/
│   └── devstral-logo.svg     # Extension icon
├── out/                       # Compiled JavaScript (generated)
├── package.json               # Extension manifest
├── tsconfig.json             # TypeScript configuration
└── README.md                 # This file

Making Changes

  1. Edit the TypeScript files in src/
  2. Compile: npm run compile
  3. Test using F5 (Extension Development Host)
  4. Package and install for production use

Watch Mode

For active development, you can use watch mode to automatically recompile on changes:

npm run watch

How It Works

The extension:

  1. Creates a webview in the VS Code sidebar
  2. Launches a new VSCode terminal in the webview
  3. Automatically sends the vibe command to the terminal after it starts
  4. Provides full terminal functionality with proper input/output handling

About Mistral Vibe

Mistral Vibe is an open-source command-line coding assistant powered by Mistral / Devstral from Mistral AI. It allows you to explore, modify, and execute changes across your codebase using natural language.

Key features:

  • Project Awareness: Automatically scans file structure and Git status
  • Smart References: Reference files with @, execute shell commands with !
  • Multi-file Orchestration: Understands entire codebases for architecture-level reasoning
  • Persistence: Persistent history, autocompletion, and customizable themes

For more information, visit Mistral AI.

License

MIT

Contributing

Contributions are welcome! Please feel free to submit issues or pull requests.

Support

If you encounter any issues or have questions:

  1. Check the Troubleshooting section above
  2. Open an issue on GitHub
  3. Check the Devstral Vibe documentation