# LobeChat Plugins SDK — Build UI Extensions for LobeChat

> LobeChat Plugins SDK lets you build typed UI extensions for the LobeChat desktop and web apps. React components + JSON schema. Publish to the marketplace.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

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

```json
{
  "$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

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

```bash
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](https://github.com/lobehub). Licensed under Apache-2.0.
>
> [lobehub/chat-plugin-sdk](https://github.com/lobehub/chat-plugin-sdk) — ⭐ 50,000+ (parent project)

---

<!-- ZH -->

## 快速使用

1. `npx @lobehub/cli plugin create my-plugin`
2. 编辑 `manifest.json` + 写 React UI 组件
3. `npm run build && npm publish`，PR 到 lobehub/lobe-chat-plugins

---

## 简介

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

---

### Plugin manifest

```json
{
  "$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 组件

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

### 发布

```bash
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，所有用户可搜。

---

## 来源与感谢

> Built by [LobeHub](https://github.com/lobehub). Licensed under Apache-2.0.
>
> [lobehub/chat-plugin-sdk](https://github.com/lobehub/chat-plugin-sdk) — ⭐ 50,000+ (parent project)


---
Source: https://tokrepo.com/en/workflows/lobechat-plugins-sdk-build-ui-extensions-for-lobechat
Author: LobeHub