VS Code using with Open WebUI (OwlChat)

Overview

This guide explains how to connect Visual Studio Code to FAU Research Computing’s OpenWeb UI host (https://chat.hpc.fau.edu). This integration provides AI-assisted code completion, inline refactoring, and real-time chat directly within your VS Code sidebar using FAU's hosted open-source models.

 

Visual Studio Code provides built-in AI chat functionality that can work with language models beyond the models normally provided through GitHub Copilot. This article explains how Florida Atlantic users can connect models available through OwlChat directly to the AI features in Visual Studio Code using FAU's self-hosted, OpenAI compatible API endpoint. Rather than configuring a commercial cloud model provider such as OpenAI, Anthropic, or Azure OpenAI, users will configure VS Code's Custom Endpoint provider and authenticate using their own OwlChat API key. VS Code specifically supports custom endpoints for self-hosted models, enterprise gateways, and other compatible APIs, making this the appropriate configuration method for OwlChat. Once configured, an OwlChat model can be selected from the language model picker and used directly from the VS Code Chat interface.

 

This article is intended for FAU students, developers, researchers, IT staff, and other technical users who want to use OwlChat hosted LLMs while developing software in Visual Studio Code. You will learn how to add OwlChat as a custom model provider, supply your individual API key, configure an available model, and select that model from VS Code Chat. The OwlChat API provides an OpenAI compatible interface, with the base URL https://chat.hpc.fau.edu/openai. VS Code's Bring Your Own Key functionality allows compatible models to be used for the chat experience without requiring the model itself to be supplied by the normal Copilot service. Some VS Code AI capabilities, including inline suggestions, semantic search, and embedding-dependent functionality, may still require GitHub Copilot services even when a custom model is being used for chat.

 

This article will also cover setting up another coding assistant tool, Continue.dev. Continue.dev is available in the VS Code extensions and offers much of the same functionality as Github Copilot. The decision on which tool to use comes down to use preference, so try them both.

 

Quick Start

If you are already familiar with OpenAI compatible APIs and VS Code custom model configuration, these are the important connection details:

 

Prerequisites

1. Active FAU Account with access to chat.hpc.fau.edu.

2. Visual Studio Code (v1.80 or higher installed locally).

Setup Instructions

Step 1: Generate an API Key in OpenWeb UI

1. Open your browser and log in to chat.hpc.fau.edu.

2. Click on your User Profile Icon in the bottom-left corner and select Settings.

3. Select Account from the side menu.

4. Scroll to the API Keys section and click Generate New Key.

5. Copy and save the generated API key securely. (Note: You will not be able to view this full key again after leaving the screen.)

 

Set up GitHub Copilot

See Set up GitHub Copilot in VS Code for Microsoft's general Copilot setup documentation.

Prerequisites

Before beginning, you need:

• A current installation of Visual Studio Code.
• Access to the VS Code AI Chat interface.
• A valid personal OwlChat API key.
• Access to at least one OwlChat model that you want to use.

Microsoft's current VS Code documentation states that BYOK models can be used for chat without signing into GitHub or having a Copilot plan, although some other AI features still depend on GitHub Copilot services.

 

Add OwlChat as a Custom Endpoint

VS Code includes a Language Models editor for managing the models available to Chat.

 

Open the Language Models editor

From VS Code:

1. Open the Chat view.
2. Select the language model picker in the Chat input area.
3. Select Manage Language Models.

 

You can also open the Command Palette and run:

Chat: Manage Language Models

 

Add a model provider

In Manage Language Models:

1. Select Add Models.
2. Select Custom Endpoint.
3. Enter a group name, such as OwlChat

The group name is simply the label under which the models will be displayed in the VS Code model picker.

 

Configure authentication

When prompted for an API key, enter your personal OwlChat API key.

For the purposes of this documentation, we refer to this value as:

OWLCHAT_API_KEY

 

Do not place another user's key into your configuration or share your key with another user.

VS Code's Custom Endpoint implementation supports storing the API key through an input variable rather than embedding the actual credential directly in the configuration file. Microsoft specifically recommends this approach rather than committing a raw API key.

 

Select the API type

Select: Chat Completions

VS Code's Custom Endpoint provider supports Chat Completions, Responses, and Messages APIs. OwlChat should be configured using the Chat Completions API type for this integration.

 

Configure the OwlChat Model

 

After creating the Custom Endpoint provider, VS Code opens:

chatLanguageModels.json

 

This file defines the custom provider and the models exposed through it.

Use vendor: "customendpoint"` for the provider and apiType: "chat-completions" for the API type.

A representative OwlChat configuration looks like this:
 

json
[
{
"name": "OwlChat",
"vendor": "customendpoint",
"apiKey": "${input:OWLCHAT_API_KEY}",
"apiType": "chat-completions",
"models": [
{
"id": "YOUR_MODEL_ID",
"name": "YOUR_MODEL_NAME",
"url": "https://chat.hpc.fau.edu/openai/chat/completions",
"toolCalling": true
}
]
}
]

 

 

Replace the following:

YOUR_MODEL_ID with the exact OwlChat model ID you are authorized to use. Model names can be retrieved from chat.hpc.fau.edu/openai/models

YOUR_MODEL_NAME with the display name you want VS Code to show.

Note: Model capabilities vary. Do not automatically enable capabilities such as vision or tool calling unless the selected OwlChat model supports them. VS Code requires tool-calling support for a model to be available for agent use.

 

Understanding the Base URL

 

The OwlChat OpenAI-compatible base URL is:

https://chat.hpc.fau.edu/openai

 

For OpenAI-compatible Chat Completions, the chat operation is:

/chat/completions

 

Important VS Code URL behavior

 

There is one important difference between applications that ask for a base URL and VS Code's Custom Endpoint configuration.

If the model URL already contains /chat/completions, VS Code uses that URL as-is. If an explicit API path is not supplied, VS Code resolves the path based on the selected API type and can insert /v1/ before the operation path. To avoid ambiguity, supply the complete endpoint URL.

For OwlChat, use the complete model URL in chatLanguageModels.json:

https://chat.hpc.fau.edu/openai/chat/completions

 

In other applications that explicitly ask for an OpenAI compatible base URL, use:

https://chat.hpc.fau.edu/openai

 

This distinction prevents VS Code from performing URL resolution differently than intended.

 

How the API Key Is Used

 

Your OwlChat API key authenticates requests sent from VS Code to the OwlChat endpoint.

For this Custom Endpoint, VS Code uses bearer authentication in the following form:

Authorization: Bearer <API_KEY>

 

The resulting logical request is therefore equivalent to:

POST /openai/chat/completions

Authorization: Bearer OWLCHAT_API_KEY

Content-Type: application/json

 

You should allow VS Code to store the key securely through its input-variable mechanism rather than inserting the actual key directly into version-controlled configuration.

 

Select the OwlChat Model

 

After saving chatLanguageModels.json:

1. Open Chat in VS Code.
2. Open the language model picker in the Chat input area.
3. Locate the OwlChat group.
4. Select your configured model.
5. Begin a new conversation.

 

You can select the provider and model from the chat window in the bottom right of the IDE. We are using a Bring Your Own Key (BYOK) set up, which shows your connections as local. You do not need to sign in to make this feature work. Click on the model name, then select the desired model or a different provider. Providers are shown along the top tab with icons that look like 2 diamonds. See screen shot below.

 

If a newly added model does not appear immediately, restart VS Code.

If using agent functionality, remember that VS Code only exposes a model for agent use when that model supports tool calling.

 

 

 

Using OwlChat in VS Code Chat

 

Once an OwlChat model is selected, interaction works through the normal VS Code Chat interface. The Chat view lets you work with an AI model alongside the code in your current project.

 

You can ask general development questions:

Explain what this Python function does.

 

You can ask for help understanding code:

Find the cause of this exception and explain the fix.

 

Or ask for implementation assistance:

Create a Python function that validates this API response and handles missing fields.

 

When using agent-capable models, VS Code can also work on coding tasks involving project files and tools. Review proposed actions, generated code, and file changes before relying on them
 

Agent Permissions

Agents are given permissions ranging from the user being required to approve each action to the agent being free to modify the file system as it sees fit. Use this wisely as the agent could cause significant damage to a project if it decides to erase existing files.

 

 

Agent Modes

The LLM can run in Ask, Plan, or Agent mode. The table below explains each. It's always recommended to have the LLM plan first then execute. These modes are also available from the chat interface.

 

 

Chat vs. Other Copilot Features

 

Connecting an OwlChat model through BYOK primarily provides the model for the VS Code chat experience and supported utility tasks. It does not automatically replace every service normally supplied by GitHub Copilot.

Features including inline suggestions, semantic search, and embedding-dependent functionality can still require the GitHub Copilot service.

For users who simply want OwlChat available as their conversational or agentic coding model, the Custom Endpoint integration is the relevant configuration.

 

Troubleshooting

 

The OwlChat model does not appear

 

First save `chatLanguageModels.json` and restart VS Code.

 

The model appears in Chat but not for Agent use

 

Verify that the model supports tool calling. VS Code requires tool-calling support for models used by agents.

 

Authentication fails

 

Verify that you entered your OwlChat API key, not the placeholder:

OWLCHAT_API_KEY

 

The expected authentication mechanism for this custom endpoint is bearer authentication.

 

Requests are going to the wrong URL

 

Verify the complete model URL in chatLanguageModels.json:

https://chat.hpc.fau.edu/openai/chat/completions

 

Supplying the explicit /chat/completions path is important because VS Code otherwise performs endpoint URL resolution and may insert a /v1/ version segment.

 

Additional Resources for GitHub Copilot in VS Code

• Set up GitHub Copilot in VS Code
• VS Code AI and Agent Quickstart
• Choose and Use an Agent Harness
• Configure Language Models and Custom Endpoints in VS Code

 

 

Install the Continue Extension in VS Code

1. Open Visual Studio Code.

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

3. Search for Continue (publisher: Continue Dev).

4. Click Install.

Step 3: Configure Continue to Use FAU OpenWeb UI

Because OpenWeb UI exposes an OpenAI-compatible API endpoint, Continue can communicate with chat.hpc.fau.edu using the openai provider format.

1. Click the Continue icon (a right-facing arrow logo) in the VS Code Activity Bar on the left.

2. Click the Gear icon (⚙️) at the bottom right of the Continue panel to open the configuration file (config.yaml or config.json).

3. Add or update your model configuration in config.yaml using the template below:

YAML

name: FAU OpenWeb UI
version: 1.0.0
schema: v1
models:
  - name: FAU LLM Assistant
    provider: openai
    model: llama3:latest # Replace with your preferred model ID from chat.hpc.fau.edu
    apiBase: https://chat.hpc.fau.edu/api
    apiKey: YOUR_COPIED_API_KEY_HERE
    roles:
      - chat
      - edit

Note on Model Names:

To find the exact model identifier string (e.g., llama3:latest, mistral:7b, qwen2.5-coder), log in to chat.hpc.fau.edu, start a chat, or check the model selection dropdown menu.

Step 4: Verify the Integration

1. In VS Code, click the Continue icon in the activity bar.

2. From the model dropdown at the top of the Continue pane, select FAU LLM Assistant.

3. Send a test message (e.g., "Write a Python function to split a string by delimiter").

4. Verify that the responseStreams successfully back from the HPC OpenWeb UI server.

Key Features & Shortcuts

Action	Shortcut (Win/Linux)	Shortcut (macOS)	Description
Open Chat	Ctrl + L	Cmd + L	Opens the sidebar chat with highlighted code attached.
Inline Edit	Ctrl + I	Cmd + I	Prompts the AI to edit selected code directly in the editor window.
Add Context	Type @code or @docs	Type @code or @docs	Pulls workspace files or terminal logs into the chat context.

Troubleshooting & Common Issues

1. 401 Unauthorized Error

• Cause: The API Key is invalid or expired.

• Resolution: Re-generate a key in chat.hpc.fau.edu > Settings > Account and update apiKey in your config.yaml.

2. Connection Timeout / Connection Refused

• Cause: You may be off-campus without an active VPN connection, or the endpoint URL is incorrect.

• Resolution: Ensure the apiBase is set exactly to [https://chat.hpc.fau.edu/api](https://chat.hpc.fau.edu/api) (including the /api suffix) and confirm you are connected to the FAU VPN if off-campus.

3. Model Not Found Error

• Cause: The model field in config.yaml does not match an available model hosted on HPC OpenWeb UI.

• Resolution: Double-check available model names inside the chat.hpc.fau.edu web interface.

Need Further Assistance?

• HPC Support: Open a ticket via the FAU IT Helpdesk portal.

• HPC Service Status: Check server availability at the HPC Status page.