VS Code using with Open WebUI (OwlChat)

Setting Up VS Code to Use Open OnDemand AI Endpoints (gemma4-vibe)

Overview

This guide provides step-by-step instructions for connecting Visual Studio Code to high-performance local computing cluster AI endpoints managed through Open OnDemand (OOD).

By following this setup using the open-source Continue extension, you can leverage the gemma4-vibe model directly inside VS Code for code generation, inline edits, chat assistance, and context-aware debugging.

Prerequisites

Before starting, ensure you have:

  1. VS Code installed on your machine (or access to an active VS Code Server session via Open OnDemand).

  2. Your cluster API Key or Open OnDemand access token (generated via your institution's Open OnDemand user portal).

  3. The Open Web UI for AI Endpoints (e.g., [https://chat.hpc.fau.edu/api/v1]).

Installation & Configuration

1. Install the Continue Extension:

Available in VS Code Marketplace.

  1. Open VS Code.

  2. Open the Extensions view (Ctrl+Shift+X on Windows/Linux or Cmd+Shift+X on macOS).

  3. Search for Continue.

  4. Click Install.

2. Open the Configuration File: Access config.json.

  1. Click the Continue icon in the Left Activity Bar to open the panel.

  2. Click the gear icon ($\mathbf{\dots}$ / Settings) at the bottom right of the Continue panel.

  3. Select Open config.json.

3. Configure the gemma4-vibe Endpoint:Add model definition.

Replace or update the models array in config.json with the Open OnDemand OpenAI-compatible configuration below:

JSON

{
  "models": [
    {
      "title": "Open OnDemand Gemma 4 Vibe",
      "model": "gemma4-vibe",
      "provider": "openai",
      "apiBase": "https://ood.your-institution.edu/api/v1",
      "apiKey": "YOUR_OOD_API_KEY",
      "roles": ["chat", "edit"]
    }
  ],
  "tabAutocompleteModel": {
    "title": "Gemma 4 Vibe Autocomplete",
    "model": "gemma4-vibe",
    "provider": "openai",
    "apiBase": "https://ood.your-institution.edu/api/v1",
    "apiKey": "YOUR_OOD_API_KEY"
  }
}

Note: Replace [https://chat.hpc.fau.edu/api/v1] with your organization's actual Open WebUI endpoint URL and insert your personal key into apiKey.

4. Verify the Connection:Test the model response.

  1. Open the Continue side panel (Ctrl+L or Cmd+L).

  2. Select Open WebUI Gemma 4 Vibe from the model dropdown at the bottom of the chat interface.

  3. Type a test prompt (e.g., "Write a Python script to sort a list using quicksort") and press Enter.

Features & Usage

Feature Shortcut Description
Chat Interface Ctrl + L / Cmd + L Opens the sidebar chat to ask questions or analyze code files.
Inline Code Edit Ctrl + I / Cmd + I Highlights code in the editor to refactor, document, or rewrite.
Codebase Indexing @codebase Prefixes prompt to query across your entire workspace context.
Terminal Debugging Ctrl + Shift + R Sends terminal error output directly to gemma4-vibe for troubleshooting.

Troubleshooting & Common Issues

  • 401 Unauthorized Error:

    • Verify that your apiKey in config.json is active and hasn't expired.

  • Model Not Found (gemma4-vibe):

    • Confirm that the exact string gemma4-vibe is passed in the "model" field. Model identifiers are case-sensitive.

Print Article