Extensibility: Creating Custom Plugins

LobeChat's plugin system provides a powerful mechanism for extending the application's core functionality. By creating custom plugins, developers can integrate third-party services, add new tools for the AI to use, and embed custom user interfaces directly within the chat. This allows for a highly customizable and versatile user experience, enabling the AI to perform actions beyond simple text generation.

The system is designed to be flexible, supporting several plugin types, including standard LobeChat plugins, OpenAI-compatible plugins, and the advanced Meta-Controller Protocol (MCP) plugins for more complex, stateful integrations. The development process is centered around a manifest file, which describes the plugin's metadata, capabilities, and settings.

Plugin Architecture Overview

The plugin system consists of three main parts: the plugin manifest, the development/installation UI, and the execution runtime.

1. Manifest: A JSON file that serves as the blueprint for the plugin. It defines everything from the plugin's name and icon to its API endpoints and UI rendering instructions.
2. Development UI: A modal within LobeChat (PluginDevModal) allows developers to add and configure custom plugins by providing a URL to a manifest or by configuring it manually, especially for MCP plugins.
3. Execution Runtime: This includes a backend gateway for securely proxying API calls to the plugin's server and a frontend component for rendering the plugin's custom UI in an iframe.

This diagram illustrates the high-level flow of installing and using a custom plugin.

The Plugin Manifest

The core of every plugin is its manifest file. This JSON file defines the plugin's properties and capabilities. LobeChat fetches this file during installation to understand how to interact with the plugin.

Sources: packages/types/src/plugins/protocol.ts, locales/en-US/plugin.json

Manifest Structure

The diagram below shows the main components of the LobeChatPluginManifest.

graph TD
    Manifest(LobeChatPluginManifest) --> Meta(meta: LobePluginMeta);
    Manifest --> API(api: LobePluginApi[]);
    Manifest --> UI(ui: LobePluginUI);
    Manifest --> Settings(settings: JSONSchema);
    Manifest --> SystemRole(systemRole: string);
    Manifest --> Type(type: 'standalone' | 'builtin');
    Manifest --> Identifier(identifier: string);
    Manifest --> Version(version: string);

    Meta --> Title(title: string);
    Meta --> Description(description: string);
    Meta-<ctrl63>