@lobehub/chat
Advanced tools
An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application
LobeChat is an open-source, high-performance chatbot framework
that supports speech synthesis, multimodal, and extensible (Function Call) plugin system.
Supports one-click free deployment of your private ChatGPT/LLM web application.
English · 简体中文 · Changelog · Wiki · Report Bug · Request Feature
Share LobeChat Repository
Pioneering the new age of thinking and creating. Built for you, the Super Individual.
Please be aware that LobeChat is currently under active development, and feedback is welcome for any issues encountered.
 | No installation or registration necessary! Visit our website to experience it firsthand. |
|---|---|
 | 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 ~ ⭐️
Beside these features, LobeChat also have much better basic technique underground:
[!NOTE]
You can find our upcoming Roadmap plans in the Projects section.
1 Visual Model SupportLobeChat now supports OpenAI's latest gpt-4-vision model with visual recognition capabilities,
a multimodal intelligence that can perceive visuals. Users can easily upload or drag and drop images into the dialogue box,
and the agent will be able to recognize the content of the images and engage in intelligent conversation based on this,
creating smarter and more diversified chat scenarios.
This feature opens up new interactive methods, allowing communication to transcend text and include a wealth of visual elements. Whether it's sharing images in daily use or interpreting images within specific industries, the agent provides an outstanding conversational experience.
2 TTS & STT Voice SpeechLobeChat supports Text-to-Speech (TTS) and Speech-to-Text (STT) technologies, enabling our application to convert text messages into clear voice outputs, allowing users to interact with our conversational agent as if they were talking to a real person. Users can choose from a variety of voices to pair with the agent.
Moreover, TTS offers an excellent solution for those who prefer auditory learning or desire to receive information while busy. In LobeChat, we have meticulously selected a range of high-quality voice options (OpenAI Audio, Microsoft Edge Speech) to meet the needs of users from different regions and cultural backgrounds. Users can choose the voice that suits their personal preferences or specific scenarios, resulting in a personalized communication experience.
[!NOTE]
In the process of implementing this feature, we found that there was no satisfactory TTS (Text-to-Speech) frontend library available on the market. As a result, we invested a lot of effort, including data conversion, audio progress management, and speech visualization, among other tasks.
[!IMPORTANT] Therefore, we decided to refine our implementation and make it open source, hoping to assist developers who wish to implement TTS. @lobehub/tts is a high-quality TTS toolkit developed in TypeScript, which supports usage both on the server-side and in the browser.
- Server-side: With just 15 lines of code, you can achieve high-quality voice generation capabilities comparable to OpenAI's TTS service. It currently supports EdgeSpeechTTS, MicrosoftTTS, OpenAITTS, and OpenAISTT.
- Browser-side: It provides high-quality React Hooks and visual audio components, supporting common functions such as loading, playing, pausing, and dragging the timeline. Additionally, it offers a very rich set of capabilities for adjusting the audio track styles.
3 Function Calling Plugin SystemThe plugin ecosystem of LobeChat is a significant extension of its core functionalities, greatly enhancing the practicality and flexibility of ChatGPT. By leveraging plugins, ChatGPT can perform real-time information retrieval and processing, such as automatically fetching the latest news headlines to provide users with immediate and relevant information. Moreover, these plugins are not limited to news aggregation but can also extend to other practical functions, such as quick document retrieval, e-commerce platform data access, and various third-party services.
[!TIP]
To aid developers in joining this ecosystem, we provide comprehensive development resources in the 🧩 Plugin System section. This includes detailed component development documentation, a fully-featured software development kit (SDK), and template files—all designed to simplify the development process and lower the barrier to entry for developers.
[!IMPORTANT]
We welcome developers to use these resources to unleash their creativity and write feature-rich, user-friendly plugins. With collective efforts, we can continuously expand the boundaries of chat applications and explore a more intelligent and efficient creativity platform.
https://github.com/lobehub/lobe-chat/assets/28616219/f29475a3-f346-4196-a435-41a6373ab9e2
| Official Plugin | Repository | Description |
|---|---|---|
| Clock Time By LobeHub on 2023-11-01 | lobehub/chat-plugin-clock-time | Display a clock to show current timeclock time |
| Website Crawler By LobeHub on 2023-08-17 | lobehub/chat-plugin-web-crawler | Extract content from web linksweb content-crawler |
| Search Engine By LobeHub on 2023-08-15 | lobehub/chat-plugin-search-engine | Query search engine to get informationweb search |
| Realtime Weather By LobeHub on 2023-08-12 | lobehub/chat-plugin-realtime-weather | Get realtime weather informationweather realtime |
📊 Total plugins: 4
4 Prompt Agent MarketIn the LobeChat Agent Marketplace, creators can discover a vibrant and innovative community that brings together a multitude of well-designed agents, which not only play an important role in work scenarios but also offer great convenience in learning processes. Our marketplace is not just a showcase platform but also a collaborative space. Here, everyone can contribute their wisdom and share the agents they have developed.
[!TIP]
By 🤖/🏪 Submit Agents, you can easily submit your agent creations to our platform. Importantly, LobeChat has established a sophisticated automated internationalization (i18n) workflow, capable of seamlessly translating your agent into multiple language versions. This means that no matter what language your users speak, they can experience your agent without barriers.
[!IMPORTANT]
We welcome all users to join this growing ecosystem and participate in the iteration and optimization of agents. Together, we can create more interesting, practical, and innovative agents, further enriching the diversity and practicality of the agent offerings.
| Recent Submits | Description |
|---|---|
| Short Video Script Assistant By aihoom on 2023-11-17 | Designed to help users write engaging and trendy short video scriptsshort-video tkitok screenwriter |
| Expert Agent Mentor By tcmonster on 2023-11-16 | Call on expert agents perfectly suited for the task to support your goalstask-guidance execution-plan communication support |
| Full-stack Developer By cloverfield11 on 2023-11-15 | Full-stack web developer with experience in HTML, CSS, JavaScript, Python, Java, Ruby, and frameworks such as React, Angular, Vue.js, Express, Django, Next.js, Flask, or Ruby on Rails. Experience in databases, application architecture, security, and testing.web-development front-end back-end programming databases |
| Graphic Creative Master By yingxirz on 2023-11-15 | Specializes in graphic creative design and graphic creativitygraphic creative design graphic-design |
📊 Total agents: 48
5 Progress Web AppWe deeply understand the importance of providing a seamless experience for users in today's multi-device environment. Therefore, we have adopted Progressive Web Application (PWA) technology, a modern web technology that elevates web applications to an experience close to that of native apps.
Through PWA, LobeChat can offer a highly optimized user experience on both desktop and mobile devices while maintaining its lightweight and high-performance characteristics. Visually and in terms of feel, we have also meticulously designed the interface to ensure it is indistinguishable from native apps, providing smooth animations, responsive layouts, and adapting to different device screen resolutions.
[!NOTE]
If 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 Install icon.
- Follow the instructions on the screen to complete the PWA Installation.
6 Theme Mode SelectionAs a design-engineering-oriented application, LobeChat places great emphasis on users' personalized experiences, hence introducing flexible and diverse theme modes, including a light mode for daytime and a dark mode for nighttime. Beyond switching theme modes, a range of color customization options allow users to adjust the application's theme colors according to their preferences. Whether it's a desire for a sober dark blue, a lively peach pink, or a professional gray-white, users can find their style of color choices in LobeChat.
[!TIP]
The default configuration can intelligently recognize the user's system color mode and automatically switch themes to ensure a consistent visual experience with the operating system. For users who like to manually control details, LobeChat also offers intuitive setting options and a choice between chat bubble mode and document mode for conversation scenarios.
7 Mobile Device AdaptationWe 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...
[!NOTE]
The complete list of reports can be found in the 📘 Lighthouse Reports
| Desktop | Mobile |
|---|---|
 |  |
| 📑 Lighthouse Report | 📑 Lighthouse Report |
LobeChat provides Self-Hosted Version with Vercel and Docker Image. This allows you to deploy your own chatbot within a few minutes without any prior knowledge.
A Deploying with VercelIf you want to deploy this service yourself on Vercel, you can follow these steps:
OPENAI_API_KEY(required) and ACCESS_CODE (recommended) on the environment variable section.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.
[!TIP]
We suggest you redeploy using the following steps, 📘 Maintaining Updates with LobeChat Self-Deployment.
B Deploying with Docker
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
[!TIP]
If you need to use the OpenAI service through a proxy, you can configure the proxy address using the
OPENAI_PROXY_URLenvironment 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
[!NOTE]
For detailed instructions on deploying with Docker, please refer to the 📘 Docker Deployment Guide
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/v1The 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! |
[!NOTE]
The complete list of environment variables can be found in the 📘 Environment Variables
| NPM | Repository | Description | Version |
|---|---|---|---|
| @lobehub/ui | lobehub/lobe-ui | Lobe UI is an open-source UI component library dedicated to building AIGC web applications. |  |
| @lobehub/tts | lobehub/lobe-tts | Lobe TTS is a high-quality & reliable TTS/STT React Hooks library |  |
| @lobehub/lint | lobehub/lobe-lint | LobeLint provides configurations for ESlint, Stylelint, Commitlint, Prettier, Remark, and Semantic Release for LobeHub. |  |
| @lobehub/assets | lobehub/assets | Logo assets, favicons, webfonts for LobeHub. |
Plugins provide a means to extend the Function Calling capabilities of LobeChat. They can be used to introduce new function calls and even new ways to render message results. If you are interested in plugin development, please refer to our 📘 Plugin Development Guide in the Wiki.
[!NOTE]
The plugin system is currently undergoing major development. You can learn more in the following issues:
- Plugin Phase 1: Implement separation of the plugin from the main body, split the plugin into an independent repository for maintenance, and realize dynamic loading of the plugin.
- Plugin Phase 2: The security and stability of the plugin's use, more accurately presenting abnormal states, the maintainability of the plugin architecture, and developer-friendly.
- Plugin Phase 3: Higher-level and more comprehensive customization capabilities, support for plugin authentication, and examples.
You can use GitHub Codespaces for online development:
Or clone it for local development:
$ git clone https://github.com/lobehub/lobe-chat.git
$ cd lobe-chat
$ bun install
$ bun dev
Contributions of all types are more than welcome; if you are interested in contributing code, feel free to check out our GitHub Issues and Projects to get stuck in to show us what you’re made of.
FAQs
Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.
The npm package @lobehub/chat receives a total of 4,038 weekly downloads. As such, @lobehub/chat popularity was classified as popular.
We found that @lobehub/chat demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
