LobeChat Plugins SDK — Build UI Extensions for LobeChat

Quick Use

1. npx @lobehub/cli plugin create my-plugin
2. Edit manifest.json + write your React UI component
3. npm run build && npm publish, then PR to lobehub/lobe-chat-plugins

Intro

The LobeChat Plugins SDK builds typed UI extensions for LobeChat — chat panels, side widgets, custom tool renderers — using React components plus a JSON schema describing inputs and outputs. Plugins ship via NPM and are installable from LobeChat's plugin marketplace. Best for: developers extending LobeChat with custom UIs (charts, dashboards, internal tool surfaces). Works with: LobeChat 1.x desktop and self-hosted web. Setup time: 5 minutes.

Plugin manifest

{
  "$schema": "https://lobehub.com/schema/plugin.json",
  "api": [
    {
      "name": "fetchStockPrice",
      "description": "Get current stock price",
      "parameters": {
        "type": "object",
        "properties": { "ticker": { "type": "string" } },
        "required": ["ticker"]
      }
    }
  ],
  "ui": "https://yourcdn.com/plugin-ui.js",
  "identifier": "stock-tracker",
  "meta": { "title": "Stock Tracker", "avatar": "📈", "description": "..." },
  "version": "1.0.0"
}

React UI component

import { lobeChat } from "@lobehub/chat-plugin-sdk/client";

export default function StockTrackerUI({ arguments: args, content }) {
  const { ticker } = args;
  const { price, change } = JSON.parse(content);
  return (
    <div className="rounded-lg border p-4">
      <h3>{ticker}</h3>
      <p className="text-2xl">${price}</p>
      <p className={change > 0 ? "text-green-500" : "text-red-500"}>
        {change > 0 ? "+" : ""}{change}%
      </p>
      <button onClick={() => lobeChat.fillContent(`Tell me more about ${ticker}`)}>
        Ask AI
      </button>
    </div>
  );
}

Publish

npm run build
npm publish
# Submit to https://github.com/lobehub/lobe-chat-plugins via PR with manifest URL

FAQ

Q: Is the LobeChat Plugins SDK free? A: Yes — Apache-2.0 open-source. Both LobeChat itself and the plugin SDK are free to use, fork, and self-host.

Q: How is this different from MCP servers? A: MCP servers expose tools to any MCP host (Claude Code, Cursor, LobeChat with MCP enabled). LobeChat Plugins are LobeChat-specific with rich UI — custom React rendering inside the chat. Use MCP for cross-tool portability; use Plugins when you need a tailored UI inside LobeChat.

Q: Where can users install my plugin? A: Submit to the LobeChat plugin marketplace via PR to lobehub/lobe-chat-plugins. Approved plugins appear in the in-app plugin store searchable by all users.

Source & Thanks

Built by LobeHub. Licensed under Apache-2.0.

lobehub/chat-plugin-sdk — ⭐ 50,000+ (parent project)