An extensible high-performance chatbot framework using Next.js
Tags: chat
Published: 2023-11-11 02:56:19

---
title: An extensible high-performance chatbot framework using Next.js
published: true
date: 2023-11-11 00:35:00 UTC
tags: Chat
canonical_url: https://reactjsexample.com/an-extensible-high-performance-chatbot-framework-using-next-js/
---

## 👋🏻 Getting Started & Join Our Community
 ![An extensible high-performance chatbot framework using Next.js](https://reactjsexample.com/content/images/2023/11/Code_2023-11_22-44-05.jpg)

Please be aware that LobeChat is currently under active development, and feedback is welcome for any [issues](https://img.shields.io/github/issues/lobehub/lobe-chat.svg?style=flat) encountered.

| [![An extensible high-performance chatbot framework using Next.js](https://camo.githubusercontent.com/dfdaf944130f89d1d6cfc0035d48139ea58eaf8571e28ca925e0561d78c20191/68747470733a2f2f696d672e736869656c64732e696f2f776562736974653f646f776e5f6d6573736167653d6f66666c696e65266c6162656c3d7472792532306c6f626563686174266c6162656c436f6c6f723d626c61636b266c6f676f3d76657263656c267374796c653d666f722d7468652d62616467652675705f6d6573736167653d6f6e6c696e652675726c3d6874747073253341253246253246636861742d707265766965772e6c6f62656875622e636f6d)](https://chat-preview.lobehub.com) | No installation or registration necessary! Visit our website to experience it firsthand. |
| --- | --- |
| [![An extensible high-performance chatbot framework using Next.js](https://camo.githubusercontent.com/3358838b78191fd7b6cea5dd9cd2fcbdd4b75f0dbd767d984cd69331d79517f5/68747470733a2f2f696d672e736869656c64732e696f2f646973636f72642f313132373137313137333938323135343839333f636f6c6f723d353836354632266c6162656c3d646973636f7264266c6162656c436f6c6f723d626c61636b266c6f676f3d646973636f7264266c6f676f436f6c6f723d7768697465267374796c653d666f722d7468652d6261646765)](https://discord.gg/AYFPHvv2jT) | Join our Discord community! This is where you can connect with developers and other enthusiastic users of LobeHub. |

Important **Star Us** , You will receive all release notifications from GitHub without any delay ~ ⭐️

![An extensible high-performance chatbot framework using Next.js](https://camo.githubusercontent.com/3a2c48927efe0f3819eb7e755cb5e77d5eeab336c1eb9116f823deafa5796ccd/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f6b69746368656e2f3068634f3851695539632f737461722e77656270)

#<kbd>Star History</kbd>

![An extensible high-performance chatbot framework using Next.js](https://camo.githubusercontent.com/a21698d17430a35b6d3d1ab261f53411a39f611dcc0a322a3bebcd78e661349e/68747470733a2f2f6170692e737461722d686973746f72792e636f6d2f7376673f7265706f733d6c6f62656875622532466c6f62652d6368617426747970653d44617465)

## ✨ Features

- 💨 **Quick Deployment** : Using the Vercel platform, you can deploy with just one click and complete the process within 1 minute without any complex configuration.
- 💎 **Exquisite UI Design** : With a carefully designed interface, it offers an elegant appearance and smooth interaction. It supports light and dark themes and is mobile-friendly. PWA support provides a more native-like experience.
- 🗣️ **Smooth Conversation Experience** : Fluid responses ensure a smooth conversation experience. It fully supports Markdown rendering, including code highlighting, LaTex formulas, Mermaid flowcharts, and more.
- 🧩 **Plugin Support & Custom Plugin Development** : Conversations are extendable with plugins. Users can install and use various plugins, such as search engines, web extraction, etc. It also supports the development of custom plugins to meet custom needs.
- 🔒 **Privacy Protection** : All data is stored locally in the user’s browser, ensuring user privacy.
- 🤖 **Customizable Agent Roles** : Users can create, share, and debug personalized dialogue agent roles according to their needs, providing more flexible and customized dialogue functions.
- 🌐 **Custom Domain** : If users have their own domain, they can bind it to the platform for quick access to the dialogue agent from anywhere.
- 🏬 **Role Market** : A Role Market is provided where users can select their preferred dialogue agent roles, enriching the content and style of the dialogue.

NoteYou can find our upcoming [Roadmap](https://github.com/lobehub/lobe-chat/projects) plans in the Projects section.

[![An extensible high-performance chatbot framework using Next.js](https://camo.githubusercontent.com/c70843827a03ea484667bad1f2971073f14f4a6cd26d6dc7b9bfa0a4f2523493/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d4241434b5f544f5f544f502d3135313531353f7374796c653d666c61742d737175617265)](#readme-top)

## 📸 Snapshot

![An extensible high-performance chatbot framework using Next.js](https://camo.githubusercontent.com/58a5a8e2cfee4c6cf523ca563f06240c59325ba4fd48fb5e76bf2782ddab5240/68747470733a2f2f6769746875622d70726f64756374696f6e2d757365722d61737365742d3632313064662e73332e616d617a6f6e6177732e636f6d2f31373837303730392f3236383637303838332d33336334336135632d613531322d343637652d383535632d6661323939353438636365352e706e67)

#### `1` Function Calling Plugin System

By establishing a versatile plugin system, ChatGPT becomes capable of delivering real-time news updates and enhancing your ability to interact with documents and e-commerce data more effectively. This extended functionality positions ChatGPT as a valuable resource across diverse domains. If you have an interest in creating plugins, we offer comprehensive component development documentation, software development kits (SDKs), and pre-made templates in the [🧩 Plugin System](#-plugins) section below. Join us in our collective efforts to empower ChatGPT, making it both more potent and user-friendly.

![An extensible high-performance chatbot framework using Next.js](https://camo.githubusercontent.com/9fd2c1595f90df75fdeeae5965f9d00e17fd5b8d35165270fbc0fe1e74fe63aa/68747470733a2f2f6769746875622d70726f64756374696f6e2d757365722d61737365742d3632313064662e73332e616d617a6f6e6177732e636f6d2f31373837303730392f3236383637303836392d66316666626636362d343262362d343263662d613933372d3963653166383332383531342e706e67)

#### `2` Prompt Agent Market

In our agent market. We have accumulated a large number of practical, prompt agents that have been used in daily work and study. You can also share your agents here and iterate and optimize your prompt agents with more people. You can submit your agents through [🤖/🏪 Submit Agents](https://github.com/lobehub/lobe-chat-agents), and our automated i18n workflow will automatically translate your agents into multiple languages, allowing users worldwide to enjoy your wisdom.

| Recent Submits | Description |
| --- | --- |
| [LobeChat Technical Documentation Expert](https://chat-preview.lobehub.com/market?agent=lobe-chat-develop-doc-writter)<sup>By <strong><a href="https://github.com/arvinxx">arvinxx</a></strong> on <strong>2023-11-05</strong></sup> | LobeChat is an AI conversation application built with the Next.js framework. I will help you write the development documentation for LobeChat.`development-documentation` `technical-introduction` `next-js` `react` `lobe-chat` |
| [Sketch Feature Summary Expert](https://chat-preview.lobehub.com/market?agent=sketch-changelog-highlighter)<sup>By <strong><a href="https://github.com/arvinxx">arvinxx</a></strong> on <strong>2023-11-02</strong></sup> | Skilled at extracting key changes from Sketch release notes`experience-design` `sketch` `update` `feature` `text-summary` |
| [Master of Debating](https://chat-preview.lobehub.com/market?agent=tqg-20231026)<sup>By <strong><a href="https://github.com/cake79">cake79</a></strong> on <strong>2023-10-26</strong></sup> | Simulates people who enjoy debating and can express counterarguments to any user input`writing` `dialogue` |
| [Graph Generator](https://chat-preview.lobehub.com/market?agent=graph-generator)<sup>By <strong><a href="https://github.com/choldrim">choldrim</a></strong> on <strong>2023-10-23</strong></sup> | Automatic Graph Generator`graph` |

> 📊 Total agents: [<kbd><strong>38</strong></kbd>](https://github.com/lobehub/lobe-chat-agents)

![An extensible high-performance chatbot framework using Next.js](https://camo.githubusercontent.com/aad597a6e6ea63b8112b5bb4bf707d015e02459da1f62c3a4f699f9bc5f79035/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f6b69746368656e2f36397836626c6c6b58332f7077612e77656270)

#### `3` Progress Web App

Utilize the Progressive Web Application ([PWA](https://support.google.com/chrome/answer/9658361)) technology to achieve a seamless LobeChat experience on your computer or mobile device.

NoteIf you are unfamiliar with the installation process of PWA, you can add LobeChat as your desktop application (also applicable to mobile devices) by following these steps:

- Launch the Chrome or Edge browser on your computer.
- Visit the LobeChat webpage.
- In the upper right corner of the address bar, click on the <kbd>Install</kbd> icon.
- Follow the instructions on the screen to complete the PWA Installation.

![An extensible high-performance chatbot framework using Next.js](https://camo.githubusercontent.com/f12e93a549c60f91a3bca9d6721c868e0323a615dd3d32982687d6014a1eb8fa/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f6b69746368656e2f70767573316c6f2532365a372f6461726b6d6f64652e77656270)

#### `4` Theme Mode Selection

LobeChat offers two unique theme modes – Light Mode and Dark Mode, as well as rich color customization options to meet your personalized needs. By default, our themes will intelligently switch based on your system settings, but if you prefer manual control, you can easily switch in the settings.

![An extensible high-performance chatbot framework using Next.js](https://camo.githubusercontent.com/ad838e22e7a96b0bfab7a230d6c16c6361214bfbdda93acc1a362c9a773d0a83/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f6b69746368656e2f523434314175465334572f6d6f62696c652e77656270)

#### `5` Mobile Device Adaptation

We have carried out a series of optimization designs for mobile devices to enhance the user’s mobile experience. Currently, we are iterating on the mobile user experience to achieve smoother and more intuitive interactions. If you have any suggestions or ideas, we welcome you to provide feedback through GitHub Issues or Pull Requests.

> 🚧 Additional snapshots and demonstrations are being progressively added…

## ⚡️ Performance

NoteThe complete list of reports can be found in the [📘 Lighthouse Reports](https://github.com/lobehub/lobe-chat/wiki/Lighthouse)

| Desktop | Mobile |
| --- | --- |
| ![An extensible high-performance chatbot framework using Next.js](https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/desktop/pagespeed.svg) | ![An extensible high-performance chatbot framework using Next.js](https://raw.githubusercontent.com/lobehub/lobe-chat/lighthouse/lighthouse/chat/mobile/pagespeed.svg) |
| [📑 Lighthouse Report](https://lobehub.github.io/lobe-chat/lighthouse/chat/desktop/chat_preview_lobehub_com_chat.html) | [📑 Lighthouse Report](https://lobehub.github.io/lobe-chat/lighthouse/chat/mobile/chat_preview_lobehub_com_chat.html) |

## 🛳 Self Hosting

LobeChat provides Self-Hosted Version with Vercel and [Docker Image](https://hub.docker.com/r/lobehub/lobe-chat). This allows you to deploy your own chatbot within a few minutes without any prior knowledge.

### `A` Deploying with Vercel

If you want to deploy this service yourself on Vercel, you can follow these steps:

- Prepare your [OpenAI API Key](https://platform.openai.com/account/api-keys).
- Click the button below to start deployment: Deploy with Vercel. Log in directly with your GitHub account, and remember to fill in the `OPENAI_API_KEY`(required) and `ACCESS_CODE` (recommended) on the environment variable section.
- After deployment, you can start using it.
- Bind a custom domain (optional): The DNS of the domain assigned by Vercel is polluted in some areas; binding a custom domain can connect directly.

[![An extensible high-performance chatbot framework using Next.js](https://camo.githubusercontent.com/5e471e99e8e022cf454693e38ec843036ec6301e27ee1e1fa10325b1cb720584/68747470733a2f2f76657263656c2e636f6d2f627574746f6e)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat&env=OPENAI_API_KEY&envDescription=Find%20your%20OpenAI%20API%20Key%20by%20click%20the%20right%20Learn%20More%20button.&envLink=https%3A%2F%2Fplatform.openai.com%2Faccount%2Fapi-keys&project-name=lobe-chat&repository-name=lobe-chat)

#### Keep Updated

If you have deployed your own project following the one-click deployment steps in the README, you might encounter constant prompts indicating “updates available.” This is because Vercel defaults to creating a new project instead of forking this one, resulting in an inability to detect updates accurately.

ImportantWe suggest you redeploy using the following steps, [📘 Maintaining Updates with LobeChat Self-Deployment](https://github.com/lobehub/lobe-chat/wiki/Upstream-Sync).

### `B` Deploying with Docker

[![An extensible high-performance chatbot framework using Next.js](https://camo.githubusercontent.com/cb224e92853f567bdba92a1dff2a2e6b02cb57c469001a632619a47ab4bdd9ca/68747470733a2f2f696d672e736869656c64732e696f2f646f636b65722f762f6c6f62656875622f6c6f62652d636861743f636f6c6f723d333639656666266c6162656c3d646f636b6572266c6162656c436f6c6f723d626c61636b266c6f676f3d646f636b6572266c6f676f436f6c6f723d7768697465267374796c653d666c61742d737175617265)](https://hub.docker.com/r/lobehub/lobe-chat)[![An extensible high-performance chatbot framework using Next.js](https://camo.githubusercontent.com/4f30ceb7e50afcd50b1b7982e6a0985d608586d5625c16d3ca7c68d7aa0a942e/68747470733a2f2f696d672e736869656c64732e696f2f646f636b65722f696d6167652d73697a652f6c6f62656875622f6c6f62652d636861743f636f6c6f723d333639656666266c6162656c436f6c6f723d626c61636b267374796c653d666c61742d737175617265)](https://hub.docker.com/r/lobehub/lobe-chat)[![An extensible high-performance chatbot framework using Next.js](https://camo.githubusercontent.com/b76ca1bba036341ba79f3bcbb0e202cb3e6e922eda7665675386c7b4fd8a9ca5/68747470733a2f2f696d672e736869656c64732e696f2f646f636b65722f70756c6c732f6c6f62656875622f6c6f62652d636861743f636f6c6f723d343563633131266c6162656c436f6c6f723d626c61636b267374796c653d666c61742d737175617265)](https://hub.docker.com/r/lobehub/lobe-chat)

We provide a Docker image for deploying the LobeChat service on your own private device. Use the following command to start the LobeChat service:

```
$ docker run -d -p 3210:3210 \
  -e OPENAI_API_KEY=sk-xxxx \
  -e ACCESS_CODE=lobe66 \
  lobehub/lobe-chat
```

NoteIf you need to use the OpenAI service through a proxy, you can configure the proxy address using the `OPENAI_PROXY_URL` environment variable:

```
$ docker run -d -p 3210:3210 \
  -e OPENAI_API_KEY=sk-xxxx \
  -e OPENAI_PROXY_URL=https://api-proxy.com/v1 \
  -e ACCESS_CODE=lobe66 \
  lobehub/lobe-chat
```

NoteFor detailed instructions on deploying with Docker, please refer to the [📘 Docker Deployment Guide](https://github.com/lobehub/lobe-chat/wiki/Docker-Deployment)

### Environment Variable

This project provides some additional configuration items set with environment variables:

| Environment Variable | Required | Description | Example |
| --- | --- | --- | --- |
| `OPENAI_API_KEY` | Yes | This is the API key you apply on the OpenAI account page | `sk-xxxxxx...xxxxxx` |
| `OPENAI_PROXY_URL` | No | If you manually configure the OpenAI interface proxy, you can use this configuration item to override the default OpenAI API request base URL | `https://api.chatanywhere.cn/v1`The default value is`https://api.openai.com/v1` |
| `ACCESS_CODE` | No | Add a password to access this service; the password should be a 6-digit number or letter | `awCT74` or `e3@09!` |

NoteThe complete list of environment variables can be found in the [📘 Environment Variables](https://github.com/lobehub/lobe-chat/wiki/Environment-Variable)

[![An extensible high-performance chatbot framework using Next.js](https://camo.githubusercontent.com/c70843827a03ea484667bad1f2971073f14f4a6cd26d6dc7b9bfa0a4f2523493/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d4241434b5f544f5f544f502d3135313531353f7374796c653d666c61742d737175617265)](#readme-top)

## 📦 Ecosystem

| NPM | Repository | Description | Version |
| --- | --- | --- | --- |
| [@lobehub/ui](https://www.npmjs.com/package/@lobehub/ui) | [lobehub/lobe-ui](https://github.com/lobehub/lobe-ui) | Lobe UI is an open-source UI component library dedicated to building AIGC web applications. | [![An extensible high-performance chatbot framework using Next.js](https://camo.githubusercontent.com/3afbc8bffefa817848b9e54929bcbafdfceac0fdcb713af3e8431ec8e6036823/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f406c6f62656875622f75693f636f6c6f723d333639656666266c6162656c436f6c6f723d626c61636b266c6f676f3d6e706d266c6f676f436f6c6f723d7768697465267374796c653d666c61742d737175617265)](https://www.npmjs.com/package/@lobehub/ui) |
| [@lobehub/lint](https://www.npmjs.com/package/@lobehub/lint) | [lobehub/lobe-lint](https://github.com/lobehub/lobe-lint) | LobeLint provides configurations for ESlint, Stylelint, Commitlint, Prettier, Remark, and Semantic Release for LobeHub. | [![An extensible high-performance chatbot framework using Next.js](https://camo.githubusercontent.com/088dd98682f898fb27023860d18c6bff6dfed96951663829a222d4fa7644fd04/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f406c6f62656875622f6c696e743f636f6c6f723d333639656666266c6162656c436f6c6f723d626c61636b266c6f676f3d6e706d266c6f676f436f6c6f723d7768697465267374796c653d666c61742d737175617265)](https://www.npmjs.com/package/@lobehub/lint) |
| @lobehub/assets | [lobehub/assets](https://github.com/lobehub/lobe-assets) | Logo assets, favicons, webfonts for LobeHub. | |

## GitHub

[View Github](https://github.com/lobehub/lobe-chat?ref=reactjsexample.com)