VS Code Extension: Add Custom OpenAI-Compatible Provider UI

[markijbema]

Problem

The VS Code extension currently lacks a UI for adding custom OpenAI-compatible providers, even though this functionality exists in the web/TUI application (packages/app).

Users must manually edit their opencode.json configuration file to add OpenAI-compatible providers, which creates a poor user experience and friction for users who want to:

• Connect to local models (Ollama, LM Studio)
• Use custom API endpoints
• Connect to enterprise/self-hosted deployments
• Use lesser-known OpenAI-compatible providers

Current State

Web/TUI App (packages/app) ✅

Has full UI support for custom providers:

• dialog-custom-provider.tsx - Full form dialog with validation
• settings-providers.tsx - Settings section with "Custom provider" button (line 212-234)

Features:

• Provider ID input with validation
• Provider name input
• Base URL input with format validation
• API Key input (supports both direct keys and {env:VAR} format)
• Multiple model entries (ID + name)
• Custom headers support
• Full form validation
• Integration with global config updates

VS Code Extension (packages/kilo-vscode) ❌

Missing the custom provider UI:

• ProvidersTab.tsx only shows:
  • Default model selector
  • Small model selector
  • Disabled providers list
  • Enabled providers list
• No UI to add/configure custom providers

Current Workaround

Users must manually create/edit opencode.json:

{
  "provider": {
    "my-custom-provider": {
      "name": "My Custom Provider",
      "api": "https://api.example.com/v1",
      "npm": "@ai-sdk/openai-compatible",
      "options": {
        "apiKey": "key-here",
        "baseURL": "https://api.example.com/v1"
      },
      "models": {
        "model-id": {
          "id": "model-id",
          "name": "Model Name",
          "temperature": true,
          "tool_call": true,
          "cost": {
            "input": 0.0001,
            "output": 0.0002
          },
          "limit": {
            "context": 128000,
            "output": 4096
          }
        }
      }
    }
  }
}

Proposed Solution

Port the custom provider UI from packages/app to packages/kilo-vscode/webview-ui:

1. Add DialogCustomProvider component - Port from packages/app/src/components/dialog-custom-provider.tsx
2. Update ProvidersTab - Add a "Custom Provider" section similar to the web app
3. Add necessary translations - Ensure all i18n keys exist in the VSCode webview translations
4. Add backend integration - Use existing handleUpdateConfig and auth endpoints

Implementation Notes

• The VSCode extension already has the necessary backend plumbing via KiloProvider.handleUpdateConfig()
• The backend /global/config endpoint supports updating provider configurations
• Auth can be set via the /global/auth/set endpoint
• The UI should follow the same validation logic as the web app

Related Documentation

• OpenAI Compatible Providers docs
• Provider system implementation in packages/opencode/src/provider/provider.ts
• Config schema in packages/opencode/src/config/config.ts

User Impact

High - This is a frequently requested feature that significantly improves the user experience for developers using:

• Local LLM setups
• Custom API gateways
• Enterprise deployments
• Self-hosted solutions

[kilo-code-bot]

Investigation Summary: Current State of Custom Provider UI in VS Code Extension

After a thorough investigation of the codebase, the core feature requested in this issue has been fully implemented and merged to main. Here's the detailed breakdown:

---

What Has Been Done (Merged to main)

1. Custom Provider Dialog — CustomProviderDialog.tsx (842 lines)

Introduced in: PR #7295 (feat(vscode): multi-provider selection with connect/disconnect/OAuth flows, merged 2026-03-20)
File: packages/kilo-vscode/webview-ui/src/components/settings/CustomProviderDialog.tsx

Full form dialog supporting:

• Provider ID input with regex validation (/^[a-z0-9][a-z0-9-_]*$/) and duplicate detection
• Display Name input
• Base URL input with http:///https:// format validation
• API Key input supporting both direct keys and {env:VAR_NAME} syntax, with masked display in edit mode
• Models section with manual add/remove rows (ID + Name fields)
• Custom headers support (key/value pairs)
• Edit mode for existing custom providers (provider ID locked, fields pre-populated)
• Full client-side + server-side (Zod schema) validation

2. Auto-Detect Models from /models Endpoint

Introduced in: PR #7793 (feat(vscode): auto-detect models for custom OpenAI-compatible providers, merged 2026-03-27)
File: packages/kilo-vscode/src/shared/fetch-models.ts

• Debounced fetch from OpenAI-compatible /models endpoint when base URL/API key changes
• Searchable model picker with select/deselect all
• Falls back to manual model entry

3. Preserve Custom Provider Keys on Edit

Fix in: PR #8089 (fix(vscode): preserve custom provider keys on edit, merged 2026-04-02)

• Correctly preserves API key and env var references when editing existing custom providers

4. ProvidersTab Integration

File: packages/kilo-vscode/webview-ui/src/components/settings/ProvidersTab.tsx

• Connected custom providers show an Edit button that opens CustomProviderDialog in edit mode
• "Custom provider" entry at the bottom of the Popular providers section with a "Connect" button
• Source tagging: shows "Custom", "Environment", "API Key", "Config" tags on connected providers
• Disconnect support for custom providers

5. Backend Plumbing (Complete)

• packages/kilo-vscode/src/provider-actions.ts — saveCustomProvider action handler: validates, sanitizes config, updates global config via CLI backend, sets/clears auth, refreshes provider list
• packages/kilo-vscode/src/shared/custom-provider.ts — Zod validation schemas, config sanitization, auth resolution helpers
• Full message-passing protocol between webview ↔ extension host ↔ CLI backend (saveCustomProvider, fetchCustomProviderModels, etc.)

6. Translations (Complete)

• All provider.custom.* i18n keys defined in packages/kilo-vscode/webview-ui/src/i18n/en.ts (lines 738-787)
• Covers field labels, placeholders, descriptions, validation errors, fetch states, and more

---

What Is Still In Progress (Open PRs)

PR	Title	Status
#8099	fix(vscode): support custom provider model pricing	Open
#8507	feat(vscode): add reasoning flag toggle for custom provider models	Open
#8486	feat(ui): add extra body configuration for custom OpenAI-compatible providers	Open
#8339	feat(vscode): implement exponential backoff for 429 model fetch retries	Open

These are enhancements to the already-working custom provider UI — they add pricing configuration, reasoning model flags, extra body properties, and retry logic for model fetching.

---

Key Observations

1. The original PR feat(vscode): add custom OpenAI-compatible provider UI #6166 (mark/vsext-custom-provider-ui) was closed without merge on 2026-03-11. The functionality was ultimately delivered through PR feat(vscode): multi-provider selection with connect/disconnect/OAuth flows #7295 as part of a broader multi-provider selection feature.

2. Feature parity with the web app (packages/app): The VS Code implementation covers all the same fields and validation logic as dialog-custom-provider.tsx in the web app. The VS Code version additionally supports auto-detection of models from the /models endpoint (PR feat(vscode): auto-detect models for custom OpenAI-compatible providers #7793), which the web app also has.

3. Architecture difference: The web app communicates directly with the CLI server via SDK, while the VS Code extension uses an extra indirection layer (webview ↔ extension host ↔ CLI backend) with dedicated message types for custom provider operations.

4. This issue can likely be closed, as the core feature request — a UI for adding custom OpenAI-compatible providers in the VS Code extension — has been fully implemented and merged. The remaining open PRs are incremental enhancements, not blockers for the base functionality.