@lobehub/chat 1.0.0 → 1.0.2

package/docs/usage/features/tts.zh-CN.mdx

@@ -0,0 +1,46 @@
+---
+title: LobeChat 支持 TTS & STT 语音会话
+description: LobeChat 支持文字转语音（TTS）和语音转文字（STT）技术，提供高品质声音选项，个性化交流体验。了解更多关于 Lobe TTS 工具包。
+tags:
+  - TTS
+  - STT
+  - 语音会话
+  - LobeChat
+  - Lobe TTS
+  - 文字转语音
+  - 语音转文字
+---
+
+# TTS & STT 语音会话
+
+<Image
+  alt={'TTS & STT 语音会话'}
+  borderless
+  cover
+  src={
+    'https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/284072124-c9853d8d-f1b5-44a8-a305-45ebc0f6d19a.png'
+  }
+/>
+
+LobeChat 支持文字转语音（Text-to-Speech，TTS）和语音转文字（Speech-to-Text，STT）技术，我们的应用能够将文本信息转化为清晰的语音输出，用户可以像与真人交谈一样与我们的对话代理进行交流。用户可以从多种声音中选择，给助手搭配合适的音源。 同时，对于那些倾向于听觉学习或者想要在忙碌中获取信息的用户来说，TTS 提供了一个极佳的解决方案。
+
+在 LobeChat 中，我们精心挑选了一系列高品质的声音选项 (OpenAI Audio, Microsoft Edge Speech)，以满足不同地域和文化背景用户的需求。用户可以根据个人喜好或者特定场景来选择合适的语音，从而获得个性化的交流体验。
+
+## Lobe TTS
+
+<Image
+  alt={'LobeTTS @lobehub/tts'}
+  borderless
+  src={'https://github.com/lobehub/lobe-chat/assets/28616219/52d20fdc-48c0-45e4-9c51-ee150fc18be7'}
+/>
+
+[`@lobehub/tts`](https://tts.lobehub.com) 是一个使用 TS 语言开发的，高质量 TTS 工具包，支持在服务端和浏览器中使用。
+
+- **服务端**：只要使用 15 行代码，即可实现对标 OpenAI TTS 服务的高质量语音生成能力。目前支持 EdgeSpeechTTS 与 MicrosoftTTS 与 OpenAITTS、OpenAISTT。
+- **浏览器**：提供了高质量的 React Hooks 与可视化音频组件，支持加载、播放、暂停、拖动时间轴等常用功能，且提供了非常丰富的音轨样式调整能力。
+
+<Callout type={'info'}>
+  我们在实现 LobeChat 的 TTS 功能过程中，发现市面上并没有一款很好的 TTS
+  前端库，导致在实现上耗费了很多精力，包括数据转换、音频进度管理、语音可视化等。秉承「 Community
+  First 」 的理念，我们把这套实现打磨并开源了出来，希望能帮助到想要实现 TTS 的社区开发者们。
+</Callout>

package/docs/usage/features/vision.mdx

@@ -0,0 +1,28 @@
+---
+title: LobeChat support Vision Recognition
+description: >-
+  Discover how LobeChat integrates visual recognition capabilities like OpenAI's
+  gpt-4-vision and Google Gemini Pro vision for intelligent conversations based
+  on uploaded images.
+tags:
+  - LobeChat
+  - Model Vision Recognition
+  - Multimodal Interaction
+  - Visual Elements
+  - Intelligent Conversations
+---
+
+# Model Vision Recognition
+
+<Image
+  alt={'Model Vision Recognition'}
+  borderless
+  cover
+  src={
+    'https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/284072129-382bdf30-e3d6-4411-b5a0-249710b8ba08.png'
+  }
+/>
+
+LobeChat now supports large language models with visual recognition capabilities such as OpenAI's [`gpt-4-vision`](https://platform.openai.com/docs/guides/vision), Google Gemini Pro vision, and Zhipu GLM-4 Vision, enabling LobeChat to have multimodal interaction capabilities. Users can easily upload or drag and drop images into the chat box, and the assistant will be able to recognize the content of the images and engage in intelligent conversations based on them, creating more intelligent and diverse chat scenarios.
+
+This feature opens up new ways of interaction, allowing communication to extend beyond text and encompass rich visual elements. Whether it's sharing images in daily use or interpreting images in specific industries, the assistant can provide an excellent conversational experience.

package/docs/usage/features/vision.zh-CN.mdx

@@ -0,0 +1,25 @@
+---
+title: LobeChat 支持多模态交互：视觉识别助力智能对话
+description: LobeChat 支持多种具有视觉识别能力的大语言模型，用户可上传或拖拽图片，助手将识别内容并展开智能对话，打造更智能、多元化的聊天场景。
+tags:
+  - LobeChat
+  - 多模态交互
+  - 视觉识别
+  - 智能对话
+  - 大语言模型
+---
+
+# 模型视觉识别
+
+<Image
+  alt={'模型视觉识别'}
+  borderless
+  cover
+  src={
+    'https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/284072129-382bdf30-e3d6-4411-b5a0-249710b8ba08.png'
+  }
+/>
+
+LobeChat 已经支持 OpenAI 的 [`gpt-4-vision`](https://platform.openai.com/docs/guides/vision) 、Google Gemini Pro vision、智谱 GLM-4 Vision 等具有视觉识别能力的大语言模型，这使得 LobeChat 具备了多模态交互的能力。用户可以轻松上传图片或者拖拽图片到对话框中，助手将能够识别图片内容，并在此基础上进行智能对话，构建更智能、更多元化的聊天场景。
+
+这一特性打开了新的互动方式，使得交流不再局限于文字，而是可以涵盖丰富的视觉元素。无论是日常使用中的图片分享，还是在特定行业内的图像解读，助手都能提供出色的对话体验。

package/docs/usage/plugins/basic-usage.mdx

@@ -0,0 +1,69 @@
+---
+title: Enhance Your LobeChat Assistant with Plugins
+description: >-
+  Learn how to expand your LobeChat assistant's capabilities by enabling and
+  using various plugins. Access the Plugin Store, install plugins, and configure
+  them to enhance your assistant's functionality.
+tags:
+  - LobeChat plugins
+  - Plugin Store
+  - Using Plugins
+  - Plugin Configuration
+---
+
+# Plugin Usage
+
+The plugin system is a key element in expanding the capabilities of assistants in LobeChat. You can enhance the assistant's abilities by enabling a variety of plugins.
+
+Watch the following video to quickly get started with using LobeChat plugins:
+
+<Video
+  height={840}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/94d4c312-1699-4e24-8782-138883678c9e"
+/>
+
+## Plugin Store
+
+You can access the Plugin Store by navigating to "Extension Tools" -> "Plugin Store" in the session toolbar.
+
+<Image
+  alt="Plugin Store S1"
+  height={472}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/ab4e60d0-1293-49ac-8798-cb29b3b789e6"
+/>
+
+The Plugin Store allows you to directly install and use plugins within LobeChat.
+
+<Image
+  alt="Plugin Store S2"
+  height={612}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/d7a5d821-116f-4be6-8a1a-38d81a5ea0ea"
+/>
+
+## Using Plugins
+
+After installing a plugin, simply enable it under the current assistant to use it.
+
+<Image
+  alt="Using Plugins"
+  height={472}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/76ab1ae7-a4f9-4285-8ebd-45b90251aba1"
+/>
+
+## Plugin Configuration
+
+Some plugins may require specific configurations, such as API keys.
+
+After installing a plugin, you can click on "Settings" to enter the plugin's settings and fill in the required configurations:
+
+<Image
+  alt="Plugin Configuration S1"
+  height={472}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/10eb3023-4528-4b06-8092-062e7b3865cc"
+/>
+
+<Image
+  alt="Plugin Configuration S2"
+  height={472}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/ab2e4c25-4b11-431b-9266-442d8b14cb41"
+/>

package/docs/usage/plugins/basic-usage.zh-CN.mdx

@@ -0,0 +1,67 @@
+---
+title: LobeChat 插件使用指南
+description: 了解如何在 LobeChat 中使用插件来增强助手功能，包括插件商店浏览、安装、配置等操作。
+tags:
+  - LobeChat
+  - 插件
+  - 助手功能
+  - 插件商店
+  - 插件配置
+---
+
+# 插件使用
+
+插件体系是 LobeChat 中扩展助理的能力的关键要素，你可以通过为助手启用各式各样的插件来增强助手的各项能力。
+
+查看以下视频，快速上手使用 LobeChat 插件：
+
+<Video
+  height={840}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/94d4c312-1699-4e24-8782-138883678c9e"
+/>
+
+## 插件商店
+
+你可以在会话工具条中的 「扩展工具」 -> 「插件商店」，进入插件商店。
+
+<Image
+  alt="插件商店 S1"
+  height={472}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/ab4e60d0-1293-49ac-8798-cb29b3b789e6"
+/>
+
+插件商店中会在 LobeChat 中可以直接安装并使用的插件。
+
+<Image
+  alt="插件商店 S2"
+  height={612}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/d7a5d821-116f-4be6-8a1a-38d81a5ea0ea"
+/>
+
+## 使用插件
+
+安装完毕插件后，只需在当前助手下开启插件即可使用。
+
+<Image
+  alt="使用插件"
+  height={472}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/76ab1ae7-a4f9-4285-8ebd-45b90251aba1"
+/>
+
+## 插件配置
+
+部分插件可能需要你进行相应的配置，例如 API Key 等。
+
+你可以在安装插件后，点击设置进入插件的设置填写配置：
+
+<Image
+  alt="插件配置 S1"
+  height={472}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/10eb3023-4528-4b06-8092-062e7b3865cc"
+/>
+
+<Image
+  alt="插件配置 S2"
+  height={472}
+  src="https://github.com/lobehub/lobe-chat/assets/28616219/ab2e4c25-4b11-431b-9266-442d8b14cb41"
+/>

package/docs/usage/plugins/custom-plugin.mdx

@@ -0,0 +1,37 @@
+---
+title: Custom LobeChat Plugins Installation and Development Guide
+description: >-
+  Learn how to install custom plugins in LobeChat and develop your own plugins
+  to enhance your AI assistant's capabilities.
+tags:
+  - Custom Plugins
+  - LobeChat
+  - Plugin Installation
+  - Plugin Development
+  - ChatGPT Plugins
+---
+
+# Custom Plugins
+
+## Installing Custom Plugins
+
+If you wish to install a plugin that is not available in the LobeChat plugin store, such as a custom-developed LobeChat plugin, you can click on "Custom Plugins" to install it:
+
+<Video src="https://github.com/lobehub/lobe-chat/assets/28616219/034a328c-8465-4499-8f93-fdcdb03343cd" />
+
+In addition, LobeChat's plugin mechanism is compatible with ChatGPT plugins, so you can easily install corresponding ChatGPT plugins.
+
+If you want to try installing custom plugins on your own, you can use the following links to try:
+
+- `Custom Lobe Plugin` Mock Credit Card: [https://lobe-plugin-mock-credit-card.vercel.app/manifest.json](https://lobe-plugin-mock-credit-card.vercel.app/manifest.json)
+- `ChatGPT Plugin` Access Links: [https://www.accesslinks.ai/.well-known/ai-plugin.json](https://www.accesslinks.ai/.well-known/ai-plugin.json)
+
+<Cards rows={2}>
+  <Image alt="Installing Custom Plugins S1" height={472} src="https://github.com/lobehub/lobe-chat/assets/28616219/bb9cd00f-b20c-4d7b-9c60-b921d350e319" />
+
+  <Image alt="Installing Custom Plugins S2" height={472} src="https://github.com/lobehub/lobe-chat/assets/28616219/bdeb678e-6502-4667-86b1-504221ee7ded" />
+</Cards>
+
+## Developing Custom Plugins
+
+If you wish to develop a LobeChat plugin on your own, feel free to refer to the [Plugin Development Guide](/docs/usage/plugins/development) to expand the possibilities of your AI assistant!

package/docs/usage/plugins/custom-plugin.zh-CN.mdx

@@ -0,0 +1,35 @@
+---
+title: 自定义插件 - LobeChat 插件安装与开发指南
+description: 学习如何安装自定义插件和开发 LobeChat 插件，扩展你的 AI 智能助手的功能。
+tags:
+  - 自定义插件
+  - LobeChat
+  - 插件安装
+  - 插件开发
+  - AI 智能助手
+---
+
+# 自定义插件
+
+## 安装自定义插件
+
+如果你希望安装一个不在 LobeChat 插件商店中的插件，例如自己开发的 LobeChat，你可以点击「自定义插件」进行安装：
+
+<Video src="https://github.com/lobehub/lobe-chat/assets/28616219/034a328c-8465-4499-8f93-fdcdb03343cd" />
+
+此外，LobeChat 的插件机制兼容了 ChatGPT 的插件，因此你可以一键安装相应的 ChatGPT 插件。
+
+如果你希望尝试自行安装自定义插件，你可以使用以下链接来尝试：
+
+- `自定义 Lobe 插件` Mock Credit Card：[https://lobe-plugin-mock-credit-card.vercel.app/manifest.json](https://lobe-plugin-mock-credit-card.vercel.app/manifest.json)
+- `ChatGPT 插件` Access Links：[https://www.accesslinks.ai/.well-known/ai-plugin.json](https://www.accesslinks.ai/.well-known/ai-plugin.json)
+
+<Cards rows={2}>
+  <Image alt="安装自定义插件 S1" height={472} src="https://github.com/lobehub/lobe-chat/assets/28616219/bb9cd00f-b20c-4d7b-9c60-b921d350e319" />
+
+  <Image alt="安装自定义插件 S2" height={472} src="https://github.com/lobehub/lobe-chat/assets/28616219/bdeb678e-6502-4667-86b1-504221ee7ded" />
+</Cards>
+
+## 开发自定义插件
+
+如果你希望自行开发一个 LobeChat 的插件，欢迎查阅 [插件开发指南](/docs/usage/plugins/development) 以扩展你的 AI 智能助手的可能性边界！

package/docs/usage/plugins/development.mdx

@@ -0,0 +1,329 @@
+---
+title: LobeChat Plugin Development Guide
+description: >-
+  Learn how to create and integrate custom plugins in LobeChat, including plugin
+  composition, custom plugin workflow, local plugin development, manifest
+  structure, project structure, server-side implementation, plugin UI interface,
+  deployment, and release.
+tags:
+  - Plugin Development
+  - LobeChat
+  - Custom Plugins
+  - Plugin Workflow
+  - Manifest Structure
+  - Server-side Implementation
+  - Plugin UI Interface
+  - Deployment
+  - Release
+---
+
+# Plugin Development Guide
+
+## Plugin Composition
+
+A LobeChat plugin consists of the following components:
+
+1. **Plugin Index**: Used to display basic information about the plugin, including the plugin name, description, author, version, and a link to the plugin manifest. The official plugin index can be found at [lobe-chat-plugins](https://github.com/lobehub/lobe-chat-plugins). If you want to publish a plugin to the official plugin marketplace, you need to [submit a PR](https://github.com/lobehub/lobe-chat-plugins/pulls) to this repository.
+2. **Plugin Manifest**: Used to describe the functionality of the plugin, including the server-side description, frontend display information, and version number. For a detailed introduction to the manifest, see [manifest][manifest-docs-url].
+3. **Plugin Services**: Used to implement the server-side and frontend modules described in the plugin manifest, as follows:
+   - **Server-side**: Needs to implement the interface capabilities described in the `api` section of the manifest.
+   - **Frontend UI** (optional): Needs to implement the interface described in the `ui` section of the manifest. This interface will be displayed in plugin messages, allowing for a richer display of information than plain text.
+
+## Custom Plugin Workflow
+
+This section will introduce how to add and use a custom plugin in LobeChat.
+
+<Steps>
+  ### Create and Launch Plugin Project
+
+You need to first create a plugin project locally, you can use the template we have prepared [lobe-chat-plugin-template][lobe-chat-plugin-template-url]
+
+```bash
+$ git clone https://github.com/lobehub/chat-plugin-template.git
+$ cd chat-plugin-template
+$ npm i
+$ npm run dev
+```
+
+When you see `ready started server on 0.0.0.0:3400, url: http://localhost:3400`, it means the plugin service has been successfully launched locally.
+
+<Image
+  alt="Create and Launch Plugin Project"
+  height={483}
+  inStep
+  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259526-9ef25272-4312-429b-93bc-a95515727ed3.png"
+/>
+
+### Add Local Plugin in LobeChat Role Settings
+
+Next, go to LobeChat, create a new assistant, and go to its session settings page:
+
+<Image
+  alt="Add Local Plugin in LobeChat Role Settings S1"
+  height={483}
+  inStep
+  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259643-1a9cc34a-76f3-4ccf-928b-129654670efd.png"
+/>
+
+Click the <kbd>Add</kbd> button on the right of the plugin list to open the custom plugin adding popup:
+
+<Image
+  alt="Add Local Plugin in LobeChat Role Settings S2"
+  height={483}
+  inStep
+  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259748-2ef6a244-39bb-483c-b359-f156ffcbe1a4.png"
+/>
+
+Fill in the **Plugin Description File Url** with `http://localhost:3400/manifest-dev.json`, which is the manifest address of the plugin we started locally.
+
+At this point, you should see that the identifier of the plugin has been automatically recognized as `chat-plugin-template`. Next, you need to fill in the remaining form fields (only the title is required), and then click the <kbd>Save</kbd> button to complete the custom plugin addition.
+
+<Image
+  alt="Add Local Plugin in LobeChat Role Settings S3"
+  height={483}
+  inStep
+  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265259964-59f4906d-ae2e-4ec0-8b43-db36871d0869.png"
+/>
+
+After adding, you can see the newly added plugin in the plugin list. If you need to modify the plugin configuration, you can click the <kbd>Settings</kbd> button on the far right to make changes.
+
+<Image
+  alt="Add Local Plugin in LobeChat Role Settings S4"
+  height={483}
+  inStep
+  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265260093-a0363c74-0b5b-48dd-b103-2db6b4a8262e.png"
+/>
+
+### Test Plugin Function in Session
+
+Next, we need to test whether the plugin's function is working properly.
+
+Click the <kbd>Back</kbd> button to return to the session area, and then send a message to the assistant: "What should I wear?" At this point, the assistant will try to ask you about your gender and current mood.
+
+<Image
+  alt="Test Plugin Function in Session S1"
+  height={483}
+  inStep
+  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265260291-f0aa0e7c-0ffb-486c-a834-08e73d49896f.png"
+/>
+
+After answering, the assistant will initiate the plugin call, retrieve recommended clothing data from the server based on your gender and mood, and push it to you. Finally, it will provide a text summary based on this information.
+
+<Image
+  alt="Test Plugin Function in Session S2"
+  height={483}
+  inStep
+  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265260461-c22ae797-2809-464b-96fc-d0c020f4807b.png"
+/>
+
+After completing these operations, you have understood the basic process of adding custom plugins and using them in LobeChat.
+
+</Steps>
+
+## Local Plugin Development
+
+In the above process, we have learned how to add and use plugins. Next, we will focus on the process of developing custom plugins.
+
+### Manifest
+
+The `manifest` aggregates information on how the plugin's functionality is implemented. The core fields are `api` and `ui`, which respectively describe the server-side interface capabilities and the front-end rendering interface address of the plugin.
+
+Taking the `manifest` in the template we provided as an example:
+
+```json
+{
+  "api": [
+    {
+      "url": "http://localhost:3400/api/clothes",
+      "name": "recommendClothes",
+      "description": "Recommend clothes to the user based on their mood",
+      "parameters": {
+        "properties": {
+          "mood": {
+            "description": "The user's current mood, with optional values: happy, sad, anger, fear, surprise, disgust",
+            "enums": ["happy", "sad", "anger", "fear", "surprise", "disgust"],
+            "type": "string"
+          },
+          "gender": {
+            "type": "string",
+            "enum": ["man", "woman"],
+            "description": "The user's gender, which needs to be asked for from the user to obtain this information"
+          }
+        },
+        "required": ["mood", "gender"],
+        "type": "object"
+      }
+    }
+  ],
+  "gateway": "http://localhost:3400/api/gateway",
+  "identifier": "chat-plugin-template",
+  "ui": {
+    "url": "http://localhost:3400",
+    "height": 200
+  },
+  "version": "1"
+}
+```
+
+In this manifest, it mainly includes the following parts:
+
+1. `identifier`: This is the unique identifier of the plugin, used to distinguish different plugins. This field needs to be globally unique.
+2. `api`: This is an array containing all the API interface information of the plugin. Each interface includes the url, name, description, and parameters fields, all of which are required. The `description` and `parameters` fields will be sent to GPT as the `functions` parameter of the [Function Call](https://sspai.com/post/81986), and the parameters need to comply with the [JSON Schema](https://json-schema.org/) specification. In this example, the API interface is named `recommendClothes`, and its function is to recommend clothes based on the user's mood and gender. The interface parameters include the user's mood and gender, both of which are required.
+3. `ui`: This field contains information about the plugin's user interface, indicating from which address LobeChat loads the plugin's front-end interface. Since LobeChat plugin interface loading is implemented based on iframes, the height and width of the plugin interface can be specified as needed.
+4. `gateway`: This field specifies the gateway for LobeChat to query the plugin's API interface. LobeChat's default plugin gateway is a cloud-based service, and requests for custom plugins need to be sent to a locally launched service. Remote calls to a local address are generally not feasible. The `gateway` field solves this problem. By specifying the gateway in the manifest, LobeChat will send plugin requests to this address, and the local gateway address will dispatch requests to the local plugin service. Published online plugins do not need to specify this field.
+5. `version`: This is the version number of the plugin, which currently has no effect.
+
+In actual development, you can modify the plugin's description list according to your own needs to declare the functionality you want to implement. For a complete introduction to each field in the manifest, see: [manifest][manifest-docs-url].
+
+### Project Structure
+
+The [lobe-chat-plugin-template][lobe-chat-plugin-template-url] template project uses Next.js as the development framework, and its core directory structure is as follows:
+
+```
+➜  chat-plugin-template
+├── public
+│   └── manifest-dev.json            # Manifest file
+├── src
+│   └── pages
+│   │   ├── api                      # Next.js server-side folder
+│   │   │   ├── clothes.ts           # Implementation of the recommendClothes interface
+│   │   │   └── gateway.ts           # Local plugin proxy gateway
+│   │   └── index.tsx                # Front-end display interface
+```
+
+This template uses Next.js as the development framework. You can use any development framework and language you are familiar with, as long as it can implement the functionality described in the manifest.
+
+Contributions of more plugin templates using different frameworks and languages are also welcome.
+
+### Server-Side
+
+The server-side needs to implement the API interfaces described in the manifest. In the template, we use Vercel's [Edge Runtime](https://nextjs.org/docs/pages/api-reference/edge) to eliminate the need for maintenance.
+
+#### API Implementation
+
+For the Edge Runtime, we provide the `createErrorResponse` method in `@lobehub/chat-plugin-sdk` to quickly return error responses. Currently, the provided error types are detailed in: [PluginErrorType][plugin-error-type-url].
+
+The implementation of the clothes interface in the template is as follows:
+
+```ts
+export default async (req: Request) => {
+  if (req.method !== 'POST') return createErrorResponse(PluginErrorType.MethodNotAllowed);
+
+  const { gender, mood } = (await req.json()) as RequestData;
+
+  const clothes = gender === 'man' ? manClothes : womanClothes;
+
+  const result: ResponseData = {
+    clothes: clothes[mood] || [],
+    mood,
+    today: Date.now(),
+  };
+
+  return new Response(JSON.stringify(result));
+};
+```
+
+Where `manClothes` and `womanClothes` are mock data and can be replaced with database queries in actual scenarios.
+
+#### Plugin Gateway
+
+Since the default plugin gateway for LobeChat is a cloud service `/api/plugins`, the cloud service sends requests to the address specified in the manifest's `api.url` to solve cross-origin issues.
+
+For custom plugins, plugin requests need to be sent to the local service. Therefore, by specifying the gateway in the manifest ([http://localhost:3400/api/gateway](http://localhost:3400/api/gateway)), LobeChat> will directly request this address, and then only the corresponding gateway needs to be created at that address.
+
+```ts
+import { createLobeChatPluginGateway } from '@lobehub/chat-plugins-gateway';
+
+export const config = {
+  runtime: 'edge',
+};
+
+export default createLobeChatPluginGateway();
+```
+
+[`@lobehub/chat-plugins-gateway`](https://github.com/lobehub/chat-plugins-gateway) contains the implementation of the plugin gateway in LobeChat [here](https://github.com/lobehub/lobe-chat/blob/main/src/pages/api/plugins.api.ts). You can use this package directly to create a gateway, allowing LobeChat to access the local plugin service.
+
+### Plugin UI Interface
+
+The custom UI interface for plugins is optional. For example, the official plugin [Web Content Extraction](https://github.com/lobehub/chat-plugin-web-crawler) does not have a corresponding user interface.
+
+<Image
+  alt="Plugin UI Interface S1"
+  height={483}
+  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265263241-0e765fdc-3463-4c36-a398-aef177a30df9.png"
+/>
+
+If you want to display richer information in plugin messages or include some interactive operations, you can customize a user interface for the plugin. For example, the following image shows the user interface for the [Search Engine](https://github.com/lobehub/chat-plugin-search-engine) plugin.
+
+<Image
+  alt="Plugin UI Interface S2"
+  height={483}
+  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265263427-9bdc03d5-aa61-4f62-a2ce-88683f3308d8.png"
+/>
+
+#### Implementation of Plugin UI Interface
+
+LobeChat implements the loading of plugin UI through `iframe` and uses `postMessage` to communicate with the plugin. Therefore, the implementation of the plugin UI is consistent with regular web development. You can use any frontend framework and development language you are familiar with.
+
+<Image
+  alt="Implementation of Plugin UI Interface"
+  height={483}
+  src="https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/265263653-4ea87abc-249a-49f3-a241-7ed93ddb1ddf.png"
+/>
+
+In the template we provide, we use React + Next.js + [antd](https://ant.design/) as the frontend interface framework. You can find the implementation of the user interface in [`src/pages/index.tsx`](https://github.com/lobehub/chat-plugin-template/blob/main/src/pages/index.tsx).
+
+As for plugin communication, we provide relevant methods in [`@lobehub/chat-plugin-sdk`](https://github.com/lobehub/chat-plugin-sdk) to simplify communication between the plugin and LobeChat. You can actively retrieve the current message data from LobeChat using the `fetchPluginMessage` method. For detailed information about this method, see: [fetchPluginMessage][fetch-plugin-message-url].
+
+```tsx
+import { fetchPluginMessage } from '@lobehub/chat-plugin-sdk';
+import { memo, useEffect, useState } from 'react';
+
+import { ResponseData } from '@/type';
+
+const Render = memo(() => {
+  const [data, setData] = useState<ResponseData>();
+
+  useEffect(() => {
+    // Retrieve the current plugin message from LobeChat
+    fetchPluginMessage().then((e: ResponseData) => {
+      setData(e);
+    });
+  }, []);
+
+  return <>...</>;
+});
+
+export default Render;
+```
+
+## Plugin Deployment and Release
+
+Once you have finished developing the plugin, you can deploy it using your preferred method, such as using Vercel or packaging it as a Docker container for release, and so on.
+
+If you want more people to use your plugin, feel free to [submit it for listing](https://github.com/lobehub/lobe-chat-plugins) on the plugin marketplace.
+
+[![][submit-plugin-shield]][submit-plugin-url]
+
+### Plugin Shield
+
+[![lobe-chat-plugin](https://img.shields.io/badge/%F0%9F%A4%AF%20%26%20%F0%9F%A7%A9%20LobeHub-Plugin-95f3d9?labelColor=black&style=flat-square)](https://github.com/lobehub/lobe-chat-plugins)
+
+```md
+[![lobe-chat-plugin](https://img.shields.io/badge/%F0%9F%A4%AF%20%26%20%F0%9F%A7%A9%20LobeHub-Plugin-95f3d9?labelColor=black&style=flat-square)](https://github.com/lobehub/lobe-chat-plugins)
+```
+
+## Links
+
+- **📘 Pluging SDK Documentation**: [https://chat-plugin-sdk.lobehub.com](https://chat-plugin-sdk.lobehub.com)
+- **🚀 chat-plugin-template**: [https://github.com/lobehub/chat-plugin-template](https://github.com/lobehub/chat-plugin-template)
+- **🧩 chat-plugin-sdk**: [https://github.com/lobehub/chat-plugin-sdk](https://github.com/lobehub/chat-plugin-sdk)
+- **🚪 chat-plugin-gateway**: [https://github.com/lobehub/chat-plugins-gateway](https://github.com/lobehub/chat-plugins-gateway)
+- **🏪 lobe-chat-plugins**: [https://github.com/lobehub/lobe-chat-plugins](https://github.com/lobehub/lobe-chat-plugins)
+
+[fetch-plugin-message-url]: https://github.com/lobehub/chat-plugin-template
+[lobe-chat-plugin-template-url]: https://github.com/lobehub/chat-plugin-template
+[manifest-docs-url]: https://chat-plugin-sdk.lobehub.com/guides/plugin-manifest
+[plugin-error-type-url]: https://github.com/lobehub/chat-plugin-template
+[submit-plugin-shield]: https://img.shields.io/badge/🧩/🏪_submit_plugin-%E2%86%92-95f3d9?labelColor=black&style=for-the-badge
+[submit-plugin-url]: https://github.com/lobehub/lobe-chat-plugins