How KaTiAn IDE Extends VS Code’s Plugin Model for Custom UI Integration

Plugin Model

Since its launch in 2015, VS Code has become popular among front‑end developers because its plugin architecture runs each extension in a separate Node.js process, isolating the plugin from the main UI process and preserving stability.

The plugin host manages the lifecycle of extensions and communicates with them via inter‑process RPC.

When a VS Code extension is written, it imports the vscode module, which is only a type‑declaration file. The host injects a concrete API implementation at runtime, overriding the default require for the vscode module.

// VS Code plugin process source
function defineAPI(factory: IExtensionApiFactory, extensionPaths: TernarySearchTree<IExtensionDescription>, extensionRegistry: ExtensionDescriptionRegistry): void {
    // ...implementation details
}

At runtime the host loads the extension module, creates a VS Code extension context, and calls activate:

const extModule = require('path/to/extension.js');
const extContext = createVSCodeExtensionContext();
await extModule.activate(extContext);

Compatibility with VS Code Plugin System

Many IDEs already inherit VS Code’s plugin ecosystem (e.g., Theia, veonim, coc.nvim). KaTiAn IDE treats the vscode module as a protocol: the front‑end implements the API, while the back‑end runs the plugin process and forwards calls over WebSocket.

Challenges

VS Code’s UI customization is limited to a few buttons and menus, which is insufficient for complex business tools such as Alipay or WeChat mini‑program IDEs that require extensive toolbar, side‑panel, and preview components.

Extension Strategies

Component Injection

Plugins expose a browser module that registers React components into predefined UI slots.

export const ToolBarComponent = (props) => {
  props.service.alert('hello world.');
  return <button>click me</button>;
};
export default {
  toolBar: { position: POSITION.LEFT, component: ToolBarComponent }
};

The IDE provides a service interface for the component to call back into the Node.js side.

Slot Container / Consumer Model

A container plugin declares a slot and registers a set of component configurations. Consumer plugins register their UI elements by providing configuration objects; the container renders them and forwards events through a serialized RPC mechanism.

kaitian.registerSlotContainer({
  position: kaitian.POSITION.LEFT,
  container: Slot,
  components: [
    { type: 'input-basic', contributions: [{ name: 'onchange', type: 'function' }], component: InputBasic },
    { type: 'button-basic', contributions: [{ name: 'onclick', type: 'function' }], component: ButtonBasic }
  ]
});

Consumer plugin example:

export function activate(context) {
  const container = kaitian.getSlotContainer('basic-slot-container');
  container.activate(context).then(registry => {
    registry.registerComponents([
      { type: 'button-basic', onclick: () => kaitian.window.showInformationMessage('Hello World'), icon: 'basic btn', label: '按钮', position: 0 }
    ]);
  });
}

Future

The goal is to build a cloud‑native, full‑link development platform where the IDE serves as the foundation for end‑to‑end cloud development, continuously improving UI extensibility and developer productivity.