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

> Customize the open-code-review interface by modifying React components, registering LLM providers, authoring YAML rules, or building plugins. Enhance your developer workflow with alibaba open-code-review.

- Repository: [Alibaba/open-code-review](https://github.com/alibaba/open-code-review)
- Tags: how-to-guide
- Published: 2026-08-04

---

**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`](https://github.com/alibaba/open-code-review/blob/main/ConfigView.tsx) file renders the configuration screen where users switch between built-in and custom LLM providers. It imports [`CustomProviderManager.tsx`](https://github.com/alibaba/open-code-review/blob/main/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`](https://github.com/alibaba/open-code-review/blob/main/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`](https://github.com/alibaba/open-code-review/blob/main/extensions/vscode/src/webview/components/CustomProviderManager.tsx) — Manages the CRUD operations for custom providers and their UI state.

### Root Component and Theming

[`App.tsx`](https://github.com/alibaba/open-code-review/blob/main/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`](https://github.com/alibaba/open-code-review/blob/main/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:

```bash

# 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`:

```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:

```yaml
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`](https://github.com/alibaba/open-code-review/blob/main/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`](https://github.com/alibaba/open-code-review/blob/main/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:

```markdown

# 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`](https://github.com/alibaba/open-code-review/blob/main/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`](https://github.com/alibaba/open-code-review/blob/main/App.tsx).

Users can also force a specific mode by setting `ocr.theme` in their VS Code [`settings.json`](https://github.com/alibaba/open-code-review/blob/main/settings.json):

```json
{
  "ocr.theme": "dark"
}

```

## Summary

- **React Components**: Edit [`ConfigView.tsx`](https://github.com/alibaba/open-code-review/blob/main/ConfigView.tsx), [`CustomProviderManager.tsx`](https://github.com/alibaba/open-code-review/blob/main/CustomProviderManager.tsx), and [`App.tsx`](https://github.com/alibaba/open-code-review/blob/main/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`](https://github.com/alibaba/open-code-review/blob/main/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`](https://github.com/alibaba/open-code-review/blob/main/App.tsx) (root), [`views/ConfigView.tsx`](https://github.com/alibaba/open-code-review/blob/main/views/ConfigView.tsx) (settings), and [`components/CustomProviderManager.tsx`](https://github.com/alibaba/open-code-review/blob/main/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`](https://github.com/alibaba/open-code-review/blob/main/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`](https://github.com/alibaba/open-code-review/blob/main/settings.json), or you can hard-code a theme in the React components directly.