OvidijusParsiunas/deep-chat

Deep Chat is a fully customizable AI chat component that can be injected into your website with just _one line of code_. Whether you want to create a chatbot that leverages popular APIs such as ChatGPT or connect to your own custom service, this component can do it all! Explore deepchat.dev to view all of the available features, how to use them, examples and more!

:rocket: Main Features

• Connect to any API
• Avatars
• Names
• Send/Receive files
• Capture photos via webcam
• Record audio via microphone
• Speech To Speech communication
• Speech To Text for message input
• Text To Speech to hear message responses
• Support for MarkDown and custom elements to help structure text and render code
• Introduction panel and dynamic modals to help describe functionality for your users
• Connect to more than 20 popular AI APIs such as OpenAI or Claude directly from the browser
• Communicate with Speech to Speech models
• Support for all major ui frameworks/libraries
• Host a model on the browser
• Focus mode to only display the latest messages
• Everything is customizable!

:tada: Latest Updates

2.5.1 update:

• Requesty, liteLLM and Dify are now available in directConnection
• Better support for webModel across modern browsers
• Multiple bug fixes
• See 2.5.0 and 2.5.1 release notes for more!

2.4.0 update:

• New scrollButton and hiddenMessages components used to enhance UX in long conversations!
• upwardsMode can be used to populate messages upwards.
• directConnection now supports Open WebUI.
• browserStoarage can now store inputText and scrollHeight values for better session recovery experience.
• See release notes for more!

2.3.0 update:

• directConnection now supports more than 20 AI APIs!
• htmlWrappers can now be used to standardize custom styling for all messages.
• You can now use custom plugins for remarkable such as Katex.
• Change the loading bubble style via the toggle function in displayLoadingBubble.
• See release notes for more!

2.2.2 update:

• browserStorage allows you to store messages locally on your browser without worrying about a backend message integration.
• Button tooltips.
• Place your streamed messages inside custom htmlWrappers.
• See release notes for more!

2.2.0 update:

• OpenAI Realtime API for Speech to Speech communication
• Focus mode to only display the latest message exchanges and provide a modern AI Chatbot experience
• Custom buttons
• A Response can now have multiple messages
• Ability to connect to Readable Stream APIs
• See release notes for more!

:computer: Getting started

npm install deep-chat

If using React, install the following instead:

npm install deep-chat-react

Simply add the following to your markup:

The exact syntax for the above will vary depending on the framework of your choice (see here).

:computer: Install with AI

Use the llms.txt file as a reference for installing and configuring Deep Chat with your code assistant:

"Use https://github.com/OvidijusParsiunas/deep-chat/blob/main/llms.txt to add a chat component to my website."

:zap: Connect

Connecting to a service is simple, all you need to do is define its API details using the request property:

The service will need to be able to handle request and response formats used in Deep Chat. Please read the Connect section in documentation and check out the server template examples.

Alternatively, if you want to connect without changing the target service, use the interceptor properties to augment the transferred objects or the handler function to control the request code.

:electric_plug: Direct connection

Connect to popular AI APIs directly from the browser via the use of the directConnection property:

Please note that this approach should be used for local/prototyping/demo purposes ONLY as it exposes the API Key to the browser. When ready to go live, please switch to using the connect property described above along with a proxy service.

:robot: Web model

No servers, no connections, host an LLM model entirely on your browser.

Simply add the deep-chat-web-llm module and define the webModel property:

:camera: :microphone: Camera and Microphone

Use Deep Chat to capture photos with your webcam and record audio with the microphone. You can enable this using the camera and microphone properties:

:microphone: :sound: Speech

https://github.com/OvidijusParsiunas/deep-chat/assets/18709577/e103a42e-b3a7-4449-b9db-73fed6d7876e

Input text with your voice using Speech To Text capabilities and have the responses read out to you with Text To Speech. You can enable this functionality via the speechToText and textToSpeech properties.

:beginner: Examples

Check out live codepen examples for your UI framework/library of choice:

| React | Vue 2 | Vue 3 | Svelte | SvelteKit | Angular | Solid | Next | Nuxt | VanillaJS | | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | | | | |

Setting up your own server has never been easier with the following server templates. From creating your own service to establishing proxies for other APIs such as OpenAI, everything has been documented with clear examples to get you up and running in seconds:

| Express | Nest | Flask | Spring | Go | SvelteKit | Next | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | | | | | |

All examples are ready to be deployed on a hosting platform such as Vercel.

:tv: Tutorials

Demo videos are available on YouTube:

:joystick: Playground

Create, configure and use Deep Chat components without writing any code in the official Playground!

:tada: Update - components can now be stretched to full screen dimensions using the new Expanded View:

:heart: Contributions

Open source is built by the community for the community. All contributions to this project are welcome!
Additionally, if you have any suggestions for enhancements, ideas on how to take the project further or have discovered a bug, do not hesitate to create a new issue ticket and we will look into it as soon as possible!