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:
2.4.0 update:
2.3.0 update:
2.2.2 update:
2.2.0 update:
: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:
<deep-chat></deep-chat>
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:
<deep-chat request='{"url":"https://service.com/chat"}'/>
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:
<deep-chat directConnection='{"openAI":true}'/>
<deep-chat directConnection='{"openAI":{"key": "optional-key-here"}}'/>
This is the beginning of the README. Read the rest at the original. Read the full README ↗
