LobeChat Plugins SDK — Build UI Extensions for LobeChat

简介

LobeChat Plugins SDK 用 React 组件 + JSON schema（描述输入输出）给 LobeChat 桌面和网页版构建类型化 UI 扩展 —— 聊天面板、侧边组件、自定义工具渲染器。Plugin 通过 NPM 发布，从 LobeChat 插件市场安装。适合给 LobeChat 加自定义 UI（图表、仪表盘、内部工具界面）的开发者。兼容 LobeChat 1.x 桌面和自托管 web。装机时间 5 分钟。

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 组件

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>
  );
}

发布

npm run build
npm publish
# 提交 PR 到 https://github.com/lobehub/lobe-chat-plugins，附 manifest URL

FAQ

Q: LobeChat Plugins SDK 免费吗？ A: 免费 —— Apache-2.0 开源。LobeChat 本身和 plugin SDK 都免费，可以使用、fork、自托管。

Q: 跟 MCP server 啥区别？ A: MCP server 把工具暴露给任何 MCP 宿主（Claude Code / Cursor / 开 MCP 的 LobeChat）。LobeChat Plugin 是 LobeChat 专属带富 UI —— 在聊天里自定义 React 渲染。要跨工具可移植用 MCP；要 LobeChat 内定制 UI 用 Plugin。

Q: 用户从哪装我的 plugin？ A: 通过 PR 提交到 lobehub/lobe-chat-plugins 市场。审过的 plugin 出现在应用内 plugin store，所有用户可搜。