引言:当AI浪潮席卷而来,你还在用原厂“毛坯房”?
当ChatGPT、Gemini、Claude等大模型以惊人的速度席卷全球,AI已经从科幻走进了我们的日常。然而,一个普遍的痛点也随之浮现:官方提供的AI对话界面,往往功能单一、界面简陋,缺乏个性化与扩展性。就像住进了精装房,却总觉得少了点“家的味道”。
我们渴望一个能真正掌控AI、自由定制、高效互动的平台。一个不仅拥有极致美学,更能承载无限可能,将AI的潜能发挥到极致的界面。
今天,我要向大家隆重推荐一个划时代的开源项目——Lobe Chat!它不仅仅是一个AI对话界面,更是一个集美观、高性能、高扩展性、极致隐私于一体的下一代AI交互工作站。它彻底颠覆了我们与AI的互动方式,让每个人都能打造属于自己的AI“梦幻别墅”。
本文将从多个维度深入剖析Lobe Chat,带你了解它的核心魅力、手把手教你如何部署,并深入探讨其强大的插件开发能力,助你成为AI时代的弄潮儿。无论是AI爱好者、开发者,还是追求极致体验的普通用户,Lobe Chat都将是你的不二之选。准备好了吗?让我们一起踏上这场AI交互的全新旅程!
第一章:Lobe Chat的魅力:为何它是你的不二之选?
Lobe Chat在GitHub上已获得了数万星标,其火爆程度可见一斑。但它的成功绝非偶然,而是源于对用户痛点的深刻洞察和对技术细节的极致追求。
1.1 极致的用户体验:美学与功能的完美融合
作为一款用户界面产品,Lobe Chat将UI/UX设计提升到了一个全新的高度。
设计美学: Lobe Chat的界面设计简约而不简单,色彩搭配和谐,动画流畅自然。无论是在PC端还是移动端,都能提供原生应用般的舒适体验。它支持亮色和暗色主题,并可根据系统偏好自动切换,细节之处彰显品质。响应式布局: 完美适配各种屏幕尺寸,无论你是在宽屏显示器上工作,还是在平板或手机上随时随地与AI互动,Lobe Chat都能提供无缝衔接的视觉体验。PWA支持: 作为渐进式Web应用(PWA),Lobe Chat可以被安装到桌面或手机主屏幕,提供类似原生应用的离线能力和更快的加载速度,让你随时随地都能“唤醒”AI。内容呈现优化: 对Markdown的完美支持,让AI生成的内容格式清晰、美观,包括代码高亮、表格、列表等。这对于开发者阅读代码、查阅文档尤其友好。
1.2 强大的多模态与多模型支持:兼容并蓄
AI模型层出不穷,Lobe Chat的兼容性使其成为真正的“模型聚合器”。
多模型支持: Lobe Chat不仅支持OpenAI(GPT-3.5, GPT-4, GPT-4o等),还原生支持Anthropic (Claude), Google (Gemini), Perplexity AI等多种主流LLM服务商。这意味着你无需在不同平台间切换,即可集中管理和使用你偏好的模型。自定义API接入: 对于拥有私有模型或希望接入第三方服务但未被Lobe Chat原生支持的用户,它提供了灵活的自定义API配置选项,通过配置代理和API Key,即可轻松接入。语音交互(TTS & STT): Lobe Chat集成了文本转语音(Text-to-Speech, TTS)和语音转文本(Speech-to-Text, STT)功能。你可以直接通过语音与AI对话,或者让AI将回复朗读给你听,极大地提升了交互的便捷性和趣味性,特别适合驾驶、跑步等不方便打字的场景。
1.3 无与伦比的扩展性:插件与函数调用的力量
Lobe Chat最大的亮点之一在于其开放的插件生态系统,这使其从一个简单的聊天工具,蜕变为一个功能强大的AI工作平台。
插件商店: Lobe Chat内置了插件商店,用户可以根据需求安装各种插件,例如网页搜索、图片生成、PDF阅读、图表绘制等,让AI的能力不再局限于文本对话。自定义插件开发: 真正的力量在于其开放的插件开发接口。开发者可以根据Lobe Chat的规范,轻松开发并集成自己的个性化插件,实现与任何外部服务或数据的连接,将AI的应用场景无限扩展。函数调用(Function Calling): Lobe Chat充分利用了大型语言模型的函数调用能力。这意味着AI不仅能理解你的意图,还能通过调用预设的工具或服务来完成特定任务,比如帮你查询天气、预订机票、编写代码并运行结果等,真正实现了AI与外部世界的无缝交互。
1.4 隐私与安全:数据尽在掌控
在数据隐私日益受到关注的今天,Lobe Chat提供了令人安心的解决方案。
数据本地存储: 所有的对话记录、设置、插件配置等数据,都默认存储在你的浏览器本地(IndexedDB),不经过Lobe Chat的服务器。这意味着你的敏感信息和对话内容完全由你自己掌控,无需担心数据泄露或被滥用。自托管选项: Lobe Chat是完全开源的,你可以将其部署到自己的服务器、VPS,甚至是无服务器平台(如Vercel、Netlify)。这进一步增强了数据的控制权和安全性。无用户追踪: 项目明确声明不进行任何用户追踪或数据收集,纯粹为用户提供一个本地化、私密的AI交互环境。
1.5 面向开发者友好:开放性与可维护性
对于开发者而言,Lobe Chat不仅仅是一个产品,更是一个高质量的学习和二次开发范本。
开源项目: 完整的源代码公开在GitHub上,你可以自由地学习其架构、设计模式、实现细节。现代化技术栈: 项目采用Next.js、React、TypeScript、Tailwind CSS等前端主流技术栈,易于理解和贡献。其代码结构清晰、模块化程度高,为二次开发提供了极大的便利。完善的文档: 尽管项目还在快速迭代,但其GitHub仓库提供了较为完善的README和开发文档,方便开发者快速上手和参与贡献。
第二章:核心特性深度剖析
Lobe Chat的每一个核心特性都经过精心打磨,共同构建了一个功能强大且用户友好的AI交互生态。
2.1 智能体(Agent)系统:打造你的专属AI人格
Lobe Chat的智能体(Agent)系统是其强大的核心之一。它允许用户为AI预设“人格”和行为模式,从而在特定场景下获得更专业、更符合预期的回复。
你可以为每个Agent定义:
名称 (Name): 如“前端开发专家”、“文案撰写助手”、“幽默段子手”。描述 (Description): 简要说明该Agent的功能和应用场景。头像 (Avatar): 识别不同Agent的视觉标识。人设提示词 (Prompt): 这是核心,通过自然语言描述AI应该扮演的角色、语气、回复风格、知识范围等。例如:“你是一个资深的前端架构师,精通React, Next.js, TypeScript。你的回答应严谨、详细,并给出具体的代码示例。”模型参数 (Model Parameters): 为该Agent指定特定的AI模型、温度(Temperature)、最大长度(Max Tokens)等参数,进一步微调其行为。
Agent配置示例 (JSON格式,示意):
{
"id": "frontend-architect",
"name": "前端架构师",
"description": "精通React、Next.js、TypeScript的资深前端架构师。",
"avatar": "📦",
"prompt": "你现在是一位经验丰富的前端架构师,专注于高性能、可维护的Web应用开发。你的任务是解答与前端技术栈相关的问题,提供最佳实践,并给出结构清晰、可直接运行的代码示例。请以专业、严谨的语气回答,并尽量深入浅出地解释概念。当被要求提供代码时,请使用TypeScript。",
"model": "gpt-4-turbo",
"params": {
"temperature": 0.7,
"top_p": 1,
"frequency_penalty": 0,
"presence_penalty": 0
},
"plugins": ["web-search"] // 可以绑定特定插件
}
通过智能体系统,你可以轻松切换不同的AI角色,无论是寻求技术指导、创作灵感、学习新知识,还是进行日常闲聊,都能获得定制化的、高质量的AI服务。
2.2 会话管理:清晰高效的对话流程
Lobe Chat提供了直观且高效的会话管理功能,确保你的对话历史清晰可循。
多会话并存: 你可以同时开启多个对话,每个对话独立保存,方便你针对不同主题或Agent进行交流。会话搜索与归档: 通过关键词搜索快速定位历史会话,或将会话进行归档,保持侧边栏的整洁。消息编辑与删除: 可以对发送的消息进行编辑,或删除单条消息,甚至清空整个会话历史。会话导出: 支持将完整的会话内容导出为Markdown、JSON、PNG等多种格式,方便保存、分享或二次分析。
2.3 插件生态:无限可能
Lobe Chat的插件系统是其实现“无限扩展”的关键。插件本质上是一段代码,它扩展了Lobe Chat与外部世界交互的能力。
插件架构示意图:
插件工作流程:
用户在Lobe Chat中输入指令(例如:“帮我搜索最新的AI新闻”)。Lobe Chat将用户指令和可用插件的信息一同发送给AI模型。AI模型(例如GPT-4)根据其函数调用能力,判断是否需要调用某个插件来完成任务。如果需要,AI会生成一个包含插件名称和参数的调用请求。Lobe Chat的插件管理器接收到请求,根据请求调用对应的外部插件API。插件API执行任务(例如进行网络搜索),并将结果返回给Lobe Chat。Lobe Chat将插件返回的结果再次发送给AI模型。AI模型根据插件返回的数据,生成最终的自然语言回复并展示给用户。
常见插件类型:
网页搜索插件: 使AI能够访问互联网获取实时信息。图片生成插件: 调用DALL-E、Midjourney等服务生成图片。代码执行插件: 在沙箱环境中执行代码,验证逻辑或计算结果。PDF/文档阅读插件: 让AI能够理解并摘要文档内容。日程管理插件: 与日历应用集成,帮助用户安排日程。
2.4 函数调用(Function Calling):让AI不止于聊天
函数调用是大型语言模型的一项高级能力,Lobe Chat充分利用了这一点。它允许AI模型在对话过程中,识别用户的意图并自动调用外部工具或执行特定功能。
例如:
用户说:“明天上海天气怎么样?” AI识别到“天气”和“上海”,可以调用一个“获取天气”的函数,传入“上海”作为参数,然后将获取到的天气数据组织成自然语言回复给用户。用户说:“帮我生成一张宇航员在月球上打篮球的图片。” AI识别到“生成图片”的意图,可以调用一个“图片生成”函数,传入描述,并最终展示生成的图片。
这大大拓展了AI的应用边界,让AI从一个被动的回答者变成了一个主动的问题解决者。
2.5 性能优化:快如闪电的响应
Lobe Chat在性能方面也做了大量优化,确保用户获得流畅的体验:
流式传输(Streaming): AI模型生成回复时采用流式传输,文字会像打字一样逐字显示,而不是等待整个回复生成完毕才显示,显著提升了用户感知到的响应速度。客户端渲染与SSR结合: 利用Next.js的优势,在需要时进行服务端渲染(SSR)以优化首次加载速度和SEO(虽然对于AI聊天工具SEO并非首要),大部分交互和数据加载都在客户端进行,确保流畅的用户体验。轻量级状态管理: 采用Zustand等轻量级状态管理库,减少不必要的渲染和性能开销。缓存策略: 合理利用SWR(Stale-while-revalidate)等数据请求库进行数据缓存,减少重复请求,提升数据加载效率。
这些技术细节共同铸就了Lobe Chat“快如闪电”的流畅体验。
第三章:从零开始部署你的Lobe Chat
Lobe Chat提供了多种部署方式,从新手友好的“一键部署”到开发者偏爱的“Docker部署”,总有一种适合你。
3.1 前期准备:GitHub & Vercel/Docker
在开始部署之前,你需要:
GitHub 账号: Lobe Chat 是一个开源项目,我们需要从 GitHub 上 Fork 它的代码库。AI 服务商 API Key: 部署 Lobe Chat 后,你需要配置你的 AI 服务商 API Key,例如 OpenAI API Key。确保你的账户有足够的余额或者免费额度。Vercel 账号 (推荐新手): Vercel 是一个强大的前端托管平台,提供免费额度,部署 Next.js 应用非常方便快捷。Docker 环境 (推荐进阶用户): 如果你想在自己的服务器上部署,或者更喜欢容器化管理,需要预装 Docker 和 Docker Compose。
3.2 一键部署(Vercel):最快上手方式
Vercel 部署是 Lobe Chat 官方推荐也是最快捷的方式,无需任何编码知识。
步骤:
Fork Lobe Chat 仓库:
访问 Lobe Chat 的 GitHub 仓库:https://github.com/lobehub/lobe-chat点击右上角的 按钮,将项目复制到你自己的 GitHub 账号下。
Fork
通过 Vercel 部署:
访问 Vercel 官网:https://vercel.com/点击 使用 GitHub 账号登录。登录后,点击
Log in ->
Add New...。选择
Project,找到你刚刚 Fork 的
Import Git Repository 仓库,点击
lobe-chat。在配置页面,Vercel 会自动检测到这是一个 Next.js 项目。配置环境变量 (Environment Variables): 这是最关键的一步。
Import
点击 旁的
Environment Variables。添加以下变量。至少需要
Add。
OPENAI_API_KEY
| 变量名 | 变量值 | 说明 |
|---|---|---|
|
|
你的 OpenAI API Key。如果你使用其他模型,对应填写 , 等。 |
|
|
(可选)如果你在中国大陆,OpenAI 官方 API 不可直接访问,可以配置代理 URL。替换为你的实际代理地址。如果无需代理,则不填。 |
|
|
(可选)你的 OpenAI 组织 ID。 |
|
|
(可选)如果你希望你的部署有访问密码,可以在这里设置。多个密码用逗号分隔,例如 。用户访问时需要输入其中一个密码。 |
|
|
(可选)配置默认加载的 Agent ID。 |
|
|
(可选)在设置界面隐藏服务器信息,如 API Key 和代理配置项,避免用户修改。设置为 即可。 |
|
|
(可选)允许使用的插件列表,用逗号分隔。未在此列表中的插件将不显示。例如: |
|
|
(可选)如果想在 Vercel 部署后也允许用户使用本地存储数据(而不是强制使用云同步),设置为 。注意: 通常 Vercel 部署下会禁用本地存储,除非你非常明确需要。 |
|
|
(可选)开启调试模式,可以在控制台输出更多信息。 |
|
|
(可选)开启 Prompt Pay 模式,可以在输入框显示当前模型的使用费用。 |
* 点击 `Deploy`。
* Vercel 会自动拉取代码,安装依赖,并进行构建。整个过程可能需要几分钟。
* 部署成功后,你会得到一个 Vercel 提供的 URL。点击访问即可开始使用你的 Lobe Chat!
部署流程图:
3.3 Docker部署:本地化与可控性
Docker 部署适合希望在自己的服务器、VPS 或本地环境中运行 Lobe Chat 的用户,提供更高的可控性。
环境要求: 确保你的机器已安装 Docker 和 Docker Compose。
方式一:直接运行 Docker 镜像 (快速启动)
docker run -d
-e OPENAI_API_KEY="sk-your-openai-api-key"
-e OPENAI_PROXY_URL="https://api.openai-proxy.com/v1"
-e ACCESS_CODE="lobechat-2024"
-p 3000:3000
--name lobe-chat
lobehub/lobe-chat
: 后台运行容器。
-d: 设置环境变量。根据你的实际情况替换
-e、
OPENAI_API_KEY 和
OPENAI_PROXY_URL。
ACCESS_CODE: 将容器的 3000 端口映射到主机的 3000 端口。你可以修改主机的端口号。
-p 3000:3000: 给容器命名为
--name lobe-chat。
lobe-chat: Lobe Chat 官方提供的 Docker 镜像。
lobehub/lobe-chat
运行成功后,在浏览器访问 (如果部署在服务器上,则访问
http://localhost:3000) 即可。
http://你的服务器IP:3000
方式二:使用 Docker Compose (推荐生产环境)
Docker Compose 允许你通过一个 YAML 文件定义和运行多容器应用,更易于管理和持久化数据。
创建 文件:
docker-compose.yml
version: '3.8'
services:
lobe-chat:
image: lobehub/lobe-chat
container_name: lobe-chat
ports:
- "3000:3000"
environment:
# OpenAI API Key,必填
- OPENAI_API_KEY=sk-your-openai-api-key
# OpenAI 代理 URL,可选
- OPENAI_PROXY_URL=https://api.openai-proxy.com/v1
# 访问密码,可选,多个密码用逗号分隔
- ACCESS_CODE=lobechat-2024
# 隐藏服务器信息,可选,设置为 1
- HIDE_SERVER_INFO=1
# 允许的插件列表,可选
- PLUGINS_ALLOWLIST=web-search,image-generator
# 开启调试模式,可选
- DEBUG_MODE=1
# 如果需要持久化数据,可以挂载卷 (适用于开发或特殊场景,通常聊天记录存储在浏览器本地)
# volumes:
# - ./data:/app/data
restart: always # 容器退出后自动重启
注意:
将 、
OPENAI_API_KEY 和
OPENAI_PROXY_URL 替换为你的实际值。
ACCESS_CODE 挂载通常不用于存储聊天记录(因为Lobe Chat默认存储在浏览器本地),但可以用于插件数据、配置文件等如果未来有需求。
volumes
启动容器:
在 文件所在的目录下,运行:
docker-compose.yml
docker-compose up -d
: 启动所有服务。
up: 后台运行。
-d
停止容器:
docker-compose down
3.4 环境配置详解:API Key与代理设置
无论是Vercel还是Docker部署,正确配置环境变量都是Lobe Chat正常工作的关键。
/
OPENAI_API_KEY /
ANTHROPIC_API_KEY 等: 这是你与LLM服务商进行通信的凭证。务必妥善保管,不要泄露。如果你使用了多个模型,可以配置多个对应的API Key。
GOOGLE_API_KEY /
OPENAI_PROXY_URL 等: 对于某些地区用户(如中国大陆)无法直接访问OpenAI等API的情况,需要配置代理。你可以使用自建代理服务或第三方的API代理服务。例如,
ANTHROPIC_PROXY_URL (仅为示例,请使用你自己可用的代理)。
https://api.openai-proxy.com/v1: Lobe Chat 提供了一个简单的访问密码机制,如果你希望你的部署不是公开可访问的,可以设置一个或多个密码。当用户访问时,需要输入正确的密码才能进入界面。这对于团队内部使用或个人私有部署非常实用。
ACCESS_CODE: 默认情况下,Lobe Chat 的设置页面会显示一些服务器配置信息(如 API Key 和代理 URL)。如果你的部署是公开的,或者你不希望用户修改这些关键配置,可以将此变量设置为
HIDE_SERVER_INFO,Lobe Chat 将在设置页面隐藏这些敏感信息和修改入口。
1: 如果你只希望Lobe Chat加载和使用特定的插件,可以在这里列出允许的插件ID,用逗号分隔。例如
PLUGINS_ALLOWLIST。未在此列表中或不安全的插件将不会被加载。
web-search,dall-e
正确理解和配置这些环境变量,将确保你的Lobe Chat部署能够安全、稳定地运行,并满足你的个性化需求。
第四章:Lobe Chat进阶:定制与开发
Lobe Chat不仅仅是一个开箱即用的AI对话工具,更是一个充满潜力的开发平台。如果你是一名开发者,它的开放性将为你带来无限可能。
4.1 深入代码结构:前端技术栈浅析
Lobe Chat 的代码库结构清晰,采用了现代前端开发的主流技术栈:
Next.js (React 框架): 作为前端框架,提供服务器端渲染 (SSR)、静态站点生成 (SSG) 和客户端渲染的混合能力,优化性能和开发体验。其 路由结构使得页面和 API 路由组织有序。React: 构建用户界面的核心库,组件化开发,提高代码复用性和可维护性。TypeScript: 静态类型检查,提升代码质量、可读性和开发效率,减少运行时错误。Tailwind CSS: 原子化 CSS 框架,通过组合实用工具类快速构建和定制界面,极大地提高了样式开发的效率和灵活性。Zustand: 轻量级状态管理库,简单、快速、灵活,适合管理 Lobe Chat 中的各种UI状态和会话数据。SWR: 用于数据请求和缓存的 React Hooks 库,简化了数据获取逻辑,并提供了缓存、重新验证等功能,提升数据加载性能。Vite/Turbopack (构建工具): 项目可能使用这些工具进行快速开发和构建。
app
核心目录结构 (简要):
├── app/ # Next.js App Router 路由目录,包含页面和API路由
│ ├── (chat)/ # 主聊天界面路由
│ ├── api/ # 后端API路由 (处理代理、插件调用等)
│ └── layout.tsx # 全局布局
├── components/ # 可复用的UI组件
├── const/ # 常量定义
├── hooks/ # 自定义 React Hooks
├── locales/ # 国际化语言文件
├── plugins/ # 内置插件的定义与实现
├── services/ # 封装的 API 调用服务
├── store/ # Zustand 状态管理模块
├── styles/ # 全局样式和 Tailwind 配置
├── types/ # TypeScript 类型定义
└── utils/ # 通用工具函数
对于想要二次开发或贡献的开发者来说,理解这些核心技术栈和目录结构是第一步。
4.2 定制你的专属主题与样式
Lobe Chat 的 UI 是基于 Tailwind CSS 构建的,这意味着你可以非常灵活地定制其外观。
修改 :
tailwind.config.ts
这个文件是 Tailwind CSS 的配置文件。你可以在这里扩展颜色、字体、断点等。
// tailwind.config.ts
import type { Config } from 'tailwindcss';
const config: Config = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
colors: {
// 添加你的自定义颜色
'primary-brand': '#FF6B6B',
'secondary-accent': '#4ECDC4',
},
fontFamily: {
// 添加自定义字体
'sans': ['YourCustomFont', 'sans-serif'],
},
},
},
plugins: [],
};
export default config;
直接修改组件样式:
由于 Tailwind CSS 是原子化的,你可以在任何 JSX/TSX 文件中直接修改元素的 来改变样式。
className
例如,修改聊天气泡的背景色:
找到对应组件(可能在 或
components/chat 下),修改其
app/(chat)/features。
className
// 假设是某个消息气泡组件
<div className="bg-blue-500 text-white p-2 rounded-lg">
{/* ... 消息内容 ... */}
</div>
// 更改为你的自定义颜色
<div className="bg-primary-brand text-white p-2 rounded-lg">
{/* ... 消息内容 ... */}
</div>
主题切换(暗色/亮色模式):
Lobe Chat 内置了对暗色/亮色模式的支持,你可以根据其实现方式(通常是基于 元素的
html 或
class 属性)来定制不同主题下的颜色方案。
data-theme
通过这种方式,你可以创建出完全符合你个人品牌或审美的主题。
4.3 开发一个简单的Lobe Chat插件
Lobe Chat 的插件系统是其核心扩展能力。开发一个插件需要理解其基本概念:插件清单 (Manifest) 和 插件 API。
插件开发工作流:
示例:开发一个简单的“当前时间”插件
这个插件将允许AI获取当前的日期和时间。
第一步:创建插件 Manifest ()
manifest.json
Manifest 文件是插件的元数据,告诉 Lobe Chat 你的插件叫什么、做什么、有哪些功能以及如何调用。
在你的 Lobe Chat 项目的 目录下(或者一个独立的服务中),创建一个文件夹,例如
plugins,并在其中创建
plugins/time-plugin:
manifest.json
// plugins/time-plugin/manifest.json
{
"name": "Time Plugin",
"identifier": "time_plugin",
"version": "1.0.0",
"description": {
"zh-CN": "获取当前的日期和时间。",
"en-US": "Get the current date and time."
},
"api": [
{
"name": "getCurrentTime",
"description": {
"zh-CN": "获取当前的日期和时间,返回字符串格式。",
"en-US": "Get the current date and time, returned as a string."
},
"parameters": {
"type": "object",
"properties": {},
"required": []
}
}
],
"author": "YourName",
"homepage": "https://yourwebsite.com",
"repo": "https://github.com/your/time-plugin",
"is _free": true,
"plugin_type": "api"
}
: 插件的唯一标识符。AI 模型在调用时会用到它。
identifier: 定义插件提供的 API 接口。
api
: API 的方法名。
name: API 的功能描述,AI 模型会根据这个描述来判断何时调用。
description: API 的参数定义,遵循 OpenAPI Specification (OAS) 格式。这里
parameters 不需要参数,所以是空对象。
getCurrentTime
第二步:实现插件 API
插件的 API 可以是一个独立的 Web 服务。Lobe Chat 会通过配置的 URL 调用它。
你可以使用 Node.js (Express/Koa/Fastify)、Python (Flask/Django)、Go 等任何你熟悉的语言来编写这个 API 服务。
这里以 Node.js (Express) 为例:
// server.ts (假设是一个简单的 Node.js Express 服务)
import express from 'express';
import cors from 'cors';
const app = express();
const port = 3001; // 插件服务端口,确保与 Lobe Chat 的部署端口不同
app.use(cors()); // 允许跨域请求
app.use(express.json());
// 插件 API 接口
app.post('/api/v1/time_plugin', (req, res) => {
const { name, arguments: args } = req.body; // Lobe Chat 会发送 name 和 arguments
if (name === 'getCurrentTime') {
const now = new Date();
// 返回格式可以根据需要调整,但通常是 JSON
res.json({
success: true,
data: now.toLocaleString('zh-CN', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
})
});
} else {
res.status(404).json({ error: 'Method not found' });
}
});
// 提供插件 Manifest
app.get('/.well-known/ai-plugin.json', (req, res) => {
res.json({
schema_version: "v1",
name_for_model: "time_plugin",
name_for_human: "Time Plugin",
description_for_model: "Plugin for getting the current date and time. Use this when the user asks for the current time or date.",
description_for_human: "获取当前日期和时间的插件",
auth: {
type: "none"
},
api: {
type: "openapi",
url: `http://localhost:${port}/openapi.json` // 提供 OpenAPI 规范的 URL
},
logo_url: "https://yourdomain.com/time-logo.png", // 插件图标
contact_email: "your@email.com",
legal_info_url: "https://yourdomain.com/legal"
});
});
// 提供 OpenAPI 规范
app.get('/openapi.json', (req, res) => {
res.json({
openapi: "3.0.0",
info: {
title: "Time Plugin API",
version: "1.0.0"
},
servers: [
{
url: `http://localhost:${port}` // 插件服务的根URL
}
],
paths: {
"/api/v1/time_plugin": {
"post": {
"operationId": "callPlugin",
"summary": "Calls a specific plugin function",
"requestBody": {
"required": true,
"content": {
"application/json": {
"schema": {
"type": "object",
"properties": {
"name": {
"type": "string",
"description": "The name of the plugin function to call"
},
"arguments": {
"type": "object",
"description": "The arguments to pass to the plugin function"
}
},
"required": ["name"]
}
}
}
},
"responses": {
"200": {
"description": "Success",
"content": {
"application/json": {
"schema": {
"type": "object",
"properties": {
"success": { "type": "boolean" },
"data": { "type": "string" }
}
}
}
}
}
}
}
}
}
});
});
app.listen(port, () => {
console.log(`Time plugin server running on http://localhost:${port}`);
});
第三步:在 Lobe Chat 中加载插件
启动你的插件服务: 运行上述 Node.js 服务。确保它能在 Lobe Chat 部署的环境中被访问到。在 Lobe Chat 中添加自定义插件:
打开你的 Lobe Chat 部署页面。进入 ->
设置。点击
插件,输入你的插件服务的 Manifest URL。对于上面的例子,如果你在本地运行插件服务,并且 Lobe Chat 也能访问到,那么 Manifest URL 就是
添加插件。Lobe Chat 会加载并显示你的插件。 启用插件: 在插件列表中,找到你的“Time Plugin”并启用它。开始测试: 在聊天框中输入:“现在几点了?” 或者“告诉我今天的日期和时间。” Lobe Chat 的 AI 模型应该能够识别到意图并调用你的插件来获取时间。
http://localhost:3001/.well-known/ai-plugin.json
4.4 函数调用实践:让AI与外部世界互动
在 Lobe Chat 中,函数调用能力是与插件系统紧密结合的。当你启用一个插件并与AI互动时,如果AI判断需要外部信息或能力来完成任务,它就会自动“调用”对应的插件函数。
例如,你安装了“网页搜索”插件,并在 Lobe Chat 中提问:“最新的AI新闻是什么?”
Lobe Chat 将你的问题和“网页搜索”插件的能力描述( 中定义的
manifest.json 部分)一同发送给 AI 模型。AI 模型(如 GPT-4)判断:要回答这个问题,我需要访问最新的网页信息,所以应该调用
api 插件的
web_search 函数,参数是
search。AI 将调用请求(
"最新的AI新闻" 类似这样的结构)返回给 Lobe Chat。Lobe Chat 收到请求,调用其内部处理逻辑,实际执行
{"tool_code": "web_search", "args": {"query": "最新的AI新闻"}} 插件的搜索操作。搜索结果返回给 Lobe Chat,Lobe Chat 再将结果作为新的上下文传递回 AI 模型。AI 模型根据搜索结果,生成最终的自然语言回复:“根据我检索到的最新消息,近期AI领域的热点包括…”。
web_search
作为开发者,如何利用函数调用:
设计清晰的插件 API: 确保你的 中的
manifest.json 描述准确、清晰,让 AI 模型能更好地理解何时调用你的函数以及需要传递什么参数。处理 AI 返回的参数: 你的插件 API 需要能够正确解析 AI 传递过来的参数,并根据这些参数执行相应的业务逻辑。返回结构化的结果: 将插件执行的结果以 AI 易于理解的结构化数据(如 JSON)返回,以便 AI 能够准确地将这些数据整合到最终回复中。
api
理解并掌握 Lobe Chat 的插件开发和函数调用机制,将让你能够为 AI 赋予无限的能力,将其深度集成到你的工作流或应用场景中。
第五章:Lobe Chat的未来展望与社区
Lobe Chat 的发展势头强劲,这离不开其活跃的开源社区和清晰的未来规划。
5.1 持续发展与迭代
Lobe Chat 的项目团队正在积极迭代,不断推出新功能、优化性能、修复BUG。
可以预见,未来的 Lobe Chat 将:
支持更多主流LLM模型: 随着新模型的不断涌现,Lobe Chat 会持续集成最新的模型,保持其作为“模型聚合器”的领先地位。更强大的插件生态: 更多官方和社区贡献的插件将极大地丰富 Lobe Chat 的功能,覆盖更广泛的应用场景。高级AI工作流: 可能会引入更复杂的AI工作流编排能力,允许用户组合多个AI步骤和工具来完成复杂任务。更深入的本地化与定制: 提供更细致的界面定制选项和更完善的国际化支持。性能与稳定性持续优化: 作为一款用户每天可能使用的工具,性能和稳定性永远是重中之重。
5.2 活跃的社区贡献
Lobe Chat 的成功离不开全球范围内的开发者社区。GitHub 上的 Issues、Pull Requests、Discussions 都非常活跃。
作为一个开源项目,它欢迎并鼓励社区的参与:
贡献代码: 参与新功能开发、BUG修复、性能优化等。提交 Issue: 报告BUG、提出功能建议。参与讨论: 在 GitHub Discussions 中分享经验、寻求帮助、交流想法。翻译文档: 帮助项目推广到更多非英语用户。分享你的部署和插件: 将你的 Lobe Chat 部署经验或开发的插件分享给社区,共同成长。
参与 Lobe Chat 社区不仅能让你深度学习其技术栈和设计理念,更能结识一群志同道合的AI爱好者和开发者。
结语:你的AI,由你定义
Lobe Chat 远不止一个简单的AI聊天界面,它更是一个哲学:让AI真正为你所用,让你的数据尽在掌控,让你的AI交互体验无限扩展。
它将美学、性能、隐私和开放性完美融合,为我们描绘了下一代AI交互的蓝图。无论你是想拥有一个美观且功能强大的私人AI助手,还是想深入AI应用开发,Lobe Chat都提供了一个理想的平台。
现在,是时候告别那些简陋的“毛坯房”AI界面了!立即部署你的专属 Lobe Chat,开始你的AI“别墅”定制之旅吧!
🌟 强烈推荐大家:
访问项目主页: 亲自探索 Lobe Chat 的魅力:https://github.com/lobehub/lobe-chat上手体验: 按照本文的部署指南,快速搭建你的 Lobe Chat。参与社区: 给项目点个 Star,提出你的建议,甚至贡献你的代码。
你的每一次阅读、点赞、收藏,都是对Lobe Chat和开源社区最大的支持!如果你觉得这篇文章对你有帮助,请不吝点赞、收藏并分享给更多需要的朋友。也欢迎在评论区分享你的部署经验或对Lobe Chat的看法!
















暂无评论内容