Frameworks
The following are links to live UI frameworks/libraries that can be used to implement Deep Chat.
React
Make sure to use the deep-chat-react package and define the element tag as DeepChat.
Click for Live Example
Click for GitHub
Vue
Depending on your configuration, you may notice a "Failed to resolve component..." warning in the console. This can be fixed by following the simple steps outlined here.
Click for Live Example - Vue 3
Click for Live Example - Vue 2
Svelte
The Svelte browser app should work right out of the box. The SvelteKit implementation requires the component to be imported using onMount and
deep-chat to be rendered when it has loaded.
Click for Live Example - Svelte
Click for Live Example - SvelteKit
Angular
Please add the CUSTOM_ELEMENTS_SCHEMA into your module's schemas array and import the component
as import 'deep-chat';. See this blog for more information.
Solid
Make sure to declare a solid-js module when working with TypeScript and use hyphen-case syntax for properties that are accessed directly through markup.
Next
Use the deep-chat-react package and lazy load it using Next's dynamic extension.
When using App Router - make sure to set "use client" at the top of your file.
Click for Live Example - App Router
Click for Live Example - Pages Router
Click for GitHub
Nuxt
Make sure to import deep-chat dynamically using await import along with the process.client check.
Vanilla JS
The Live Example demonstrates how to set values via properties (recommended) and attributes, which should also be used as a fallback approach for other frameworks. This example also demonstrates how to import the component via a CDN.
Troubleshooting
If your platform has not been listed and Vanilla JS approach does not work as fallback, or if you are having issues with any of the existing examples; please see github issues or create a new issue ticket and we will look into it as soon as possible.