当前位置：首页 > news >正文

自定义插件开发入门：为LobeChat添加新功能

news 2026/7/1 22:36:14

为 LobeChat 开发自定义插件：从零构建可扩展的 AI 助手

在今天，AI 对话系统早已不再是简单的“你问我答”。无论是企业内部的知识助手、智能客服，还是个人使用的自动化工具，用户期待的是一个能真正“做事”的 AI——不仅能聊天，还能查天气、读文件、调接口、生成图表，甚至控制其他应用。

但通用的大模型本身并不具备这些能力。它们擅长理解语言和生成内容，却不直接访问外部数据或执行操作。这就引出了一个关键问题：如何让 AI “连接世界”？

开源项目 LobeChat 给出了优雅的答案：通过插件系统，将大模型的能力与现实世界的 API 和服务打通。而更令人兴奋的是，这个过程对开发者极其友好——你不需要重构整个应用，只需写一个模块，就能为你的 AI 助手新增一项实用功能。

那么，这个插件系统到底是怎么工作的？我们又该如何动手开发一个属于自己的插件？让我们从一个实际场景开始讲起。

设想你在开发一款面向旅行用户的 AI 助手。用户问：“上海现在天气怎么样？” 你当然可以让大模型“猜”答案，但这显然不可靠。理想的情况是：AI 能实时查询权威天气服务，并以结构化卡片的形式返回气温、湿度、天气状况等信息。

这正是 LobeChat 插件系统的用武之地。它允许你封装外部 API 调用逻辑，将其注册为一个可被自然语言触发的功能模块。整个过程无需修改主应用代码，真正做到“即插即用”。

它的核心机制可以概括为一句话：声明式注册 + 运行时调用。

你只需要定义一个符合规范的对象，描述这个插件叫什么、长什么样、需要哪些参数、如何执行，LobeChat 就能在用户输入/weather 上海时自动识别并调用它。响应结果会以富媒体形式嵌入聊天流，体验丝滑自然。

来看一个最简实现：

import { Plugin } from 'lobe-chat-plugin'; const WeatherPlugin: Plugin = { name: 'weather', displayName: '天气查询', description: '获取指定城市的实时天气信息', icon: 'https://example.com/icons/weather.png', keywords: ['天气', 'temperature', 'forecast'], parameters: [ { name: 'city', type: 'string', required: true, description: '城市名称', }, ], invoke: async (input) => { const { city } = input; const response = await fetch( `https://api.weather.example.com/v1/current?city=${encodeURIComponent(city)}&key=YOUR_API_KEY` ); const data = await response.json(); if (!data.success) { return { type: 'text', content: '无法获取天气信息，请检查城市名称是否正确。' }; } const { temperature, condition, humidity } = data.result; return { type: 'card', title: `${city} 当前天气`, contents: [ { label: '气温', value: `${temperature}°C` }, { label: '天气状况', value: condition }, { label: '湿度', value: `${humidity}%` }, ], actions: [ { type: 'button', text: '查看预报', url: `https://weather.example.com/detail?city=${city}`, }, ], }; }, }; export default WeatherPlugin;

这段代码虽然不长，却完整表达了插件的核心要素：

name是唯一标识，用于命令路由匹配；
displayName和icon决定了它在 UI 中的展示样式；
parameters定义了输入结构，可用于自动生成提示或配置表单；
最关键的是invoke函数，它是真正的执行体，接收参数并返回标准化响应。

值得注意的是，这里的invoke并非直接调用第三方 API。出于安全考虑（如避免暴露 API Key），更推荐的做法是通过 Next.js 的 API Routes 做一层代理转发。

这也正是 LobeChat 架构设计的精妙之处——它基于Next.js构建，天然支持前后端一体化开发。你可以把每个插件的后端逻辑放在pages/api/plugins/[pluginId]/route.ts中，形成统一的/api/plugins/*接口网关。

例如，对应的 API 实现如下：

// pages/api/plugins/weather/route.ts import { NextRequest, NextResponse } from 'next/server'; import { z } from 'zod'; const QuerySchema = z.object({ city: z.string().min(1), }); export async function GET(request: NextRequest) { const { searchParams } = new URL(request.url); const parseResult = QuerySchema.safeParse(Object.fromEntries(searchParams)); if (!parseResult.success) { return NextResponse.json( { error: 'Invalid parameters', details: parseResult.error.format() }, { status: 400 } ); } const { city } = parseResult.data; try { const res = await fetch( `https://api.weather.example.com/v1/current?city=${encodeURIComponent(city)}&key=${process.env.WEATHER_API_KEY}` ); const data = await res.json(); return NextResponse.json({ success: true, result: { city, temperature: data.main.temp, condition: data.weather[0].main, humidity: data.main.humidity, }, }); } catch (error) { return NextResponse.json({ success: false, message: 'Failed to fetch weather' }, { status: 500 }); } }

这里有几个工程上的细节值得强调：