How to Customize the Open-Code-Review Interface: A Developer's Guide

You can customize the open-code-review interface by modifying React components in the VS Code extension webview, registering custom LLM providers via CLI configuration, authoring YAML rule files for domain-specific reviews, or building plugins that inject new UI panels and commands.

The alibaba/open-code-review repository ships with a modular architecture that separates the core review engine from its presentation layer. Whether you need to integrate a private LLM endpoint, rebrand the UI, or add specialized review categories, the codebase offers specific extension points that let you customize the open-code-review interface without maintaining a fork.

Modifying the VS Code Extension Webview

The primary user interface lives in the VS Code extension as a React webview. The source files reside under extensions/vscode/src/webview/ and expose several high-level components you can extend.

ConfigView.tsx and Provider Management

The ConfigView.tsx file renders the configuration screen where users switch between built-in and custom LLM providers. It imports CustomProviderManager.tsx to handle the list, edit, and activation flows for user-defined endpoints.

To change how providers are displayed or add new configuration fields, edit these components:

• extensions/vscode/src/webview/views/ConfigView.tsx — Controls the layout of the settings page and provider selection tabs.
• extensions/vscode/src/webview/components/CustomProviderManager.tsx — Manages the CRUD operations for custom providers and their UI state.

Root Component and Theming

App.tsx serves as the root of the webview application. It initializes the React context and provides the useTheme hook, which synchronizes the interface with the host VS Code theme.

To force a specific appearance or inject global styles, modify extensions/vscode/src/webview/App.tsx and the CSS-in-JS definitions imported there.

Configuring Custom LLM Providers and Models

You can register private or third-party LLM endpoints without touching the React source. The CLI writes to a user-scoped configuration file that the UI reads at runtime.

Use the following commands to add a custom provider:

# Register a new endpoint

ocr config provider

# Select "custom" when prompted, then enter:

#   • name: my-local-llm

#   • url: http://localhost:1234/v1/chat/completions

#   • apiKey: (optional)

# Assign a model to the new provider

ocr config model

# Enter a friendly name such as "gpt-4-local"

The data persists in ~/.ocr/config.json:

{
  "customProviders": {
    "my-local-llm": {
      "url": "http://localhost:1234/v1/chat/completions",
      "apiKey": "",
      "model": "gpt-4-local"
    }
  }
}

The CustomProviderManager component automatically detects entries in this file and renders them in the provider list.

Customizing Review Rules and Templates

The deterministic review engine reads rule definitions from internal/config/rules/. Adding or editing files here changes which files the UI highlights and which suggestions appear in the comment threads.

Create a domain-specific rule by adding a YAML file:

rule:
  name: markdown-tips
  files: ["*.md"]
  description: "Check for common markdown style issues"
  checks:
    - id: heading-order
      level: warning
      pattern: "^#{1,6} "

Place this file in internal/config/rules/custom_markdown.yaml. The review runner loads it automatically, and the webview displays violations under the "Rules" tab without requiring a rebuild of the extension.

Extending Functionality with Plugins

Open-code-review supports a plugin architecture under the plugins/ directory. Each plugin contains a SKILL.md manifest that describes its commands and entry points.

To add a new sidebar panel or command palette entry:

1. Create a directory: plugins/my-stats/
2. Add a manifest:

# My Stats Plugin

Provides a `/stats` command that prints file-type statistics.

3. Implement the plugin logic in the same folder following the Skill interface defined in the core.

The App.tsx router dynamically imports registered plugins, allowing you to inject new routes or panels into the existing navigation structure.

Theming and Visual Settings

The interface respects the VS Code workbench theme by default. To override this behavior or expose theme toggles to users, adjust the useTheme hook in App.tsx.

Users can also force a specific mode by setting ocr.theme in their VS Code settings.json:

{
  "ocr.theme": "dark"
}

Summary

• React Components: Edit ConfigView.tsx, CustomProviderManager.tsx, and App.tsx to change layouts, provider UIs, and themes.
• CLI Configuration: Run ocr config provider to add custom LLM endpoints stored in ~/.ocr/config.json; the UI updates automatically.
• Rule Files: Drop YAML definitions into internal/config/rules/ to customize which issues the interface highlights.
• Plugin System: Create folders under plugins/ with a SKILL.md manifest to register new commands and UI panels.

Frequently Asked Questions

Where are the React source files for the VS Code interface located?

The components live in extensions/vscode/src/webview/. Key files include App.tsx (root), views/ConfigView.tsx (settings), and components/CustomProviderManager.tsx (provider lists). Modifying these changes the appearance and behavior of the configuration screens.

Can I add a custom LLM provider without modifying the source code?

Yes. Use the ocr config provider CLI command to register any HTTP-compatible endpoint. The data is written to ~/.ocr/config.json, and the CustomProviderManager component reads this file to populate the UI. No rebuild of the extension is required.

How do I create a custom review category that appears in the interface?

Add a YAML rule file to internal/config/rules/. Define the files glob pattern and checks array; the review engine loads it automatically. The webview will display violations from your new rule alongside built-in checks.

Is it possible to force a specific color theme in the open-code-review interface?

Yes. The App.tsx component uses the useTheme hook to detect the host VS Code theme. Users can override this by setting "ocr.theme": "light" or "dark" in their VS Code settings.json, or you can hard-code a theme in the React components directly.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}