DeepChat
Deep Chat is a chat component designed to facilitate communication with various AI APIs. It offers the functionality to connect directly to...
Last verified:
What is DeepChat?
Deep Chat is a fully customizable, framework-agnostic AI chat component that can be injected into any website with minimal to no effort. It enables developers to create chatbots that connect to popular AI APIs like ChatGPT, Perplexity, Claude, Gemini, and many others directly from the browser, or configure it to connect to their own custom servers and APIs. The component is open source and built by the community for the community.
Key features include direct connections to over 20 AI providers (OpenAI, HuggingFace, Cohere, Stability AI, Azure, AssemblyAI, DeepSeek, Groq, Mistral, and more), support for transferring media files (images, audio, gifs, spreadsheets), Markdown rendering for text layout and code, built-in camera and microphone integration for photo capture and audio recording, real-time speech-to-text transcription, and text-to-speech synthesis for responses. It also supports WebSocket connections, streaming responses with simulation options, and extensive styling customization from interactive features to minute visual details.
Deep Chat is designed for developers who want to quickly integrate AI chat functionality into their websites without building a custom chat component from scratch. It works with React, Vue, Svelte, Angular, Solid, Next.js, Nuxt, and Vanilla JavaScript, making it suitable for any tech stack. The component emphasizes developer experience with cross-framework plug-and-play packages that allow getting started in just a few seconds.
DeepChat pricing
Pricing model: Free
Deep Chat is open source and free to use. It is available on npm as 'deep-chat' for vanilla JavaScript and 'deep-chat-react' for React projects. There are no paid plans mentioned on the website - the component is completely free with no tier restrictions. The open source nature means developers can use it without cost and contribute to the project.
DeepChat pros
- Fully customizable chat component with extensive styling options
- Framework agnostic - works with React, Vue, Angular, Svelte, Solid, Next, Nuxt, Vanilla JS
- Preconfigured direct connections to 20+ AI APIs out of the box
- Open source and community-driven project
- Inject into website with just one line of code
- Supports media file transfer including images, audio, gifs, spreadsheets
- Built-in camera button for photo capture
- Built-in microphone button for audio recording
- Real-time speech-to-text transcription support
- Text-to-speech synthesis for reading responses aloud
- Markdown rendering for text layout and code blocks
- WebSocket connection support for real-time communication
- Streaming responses with simulation for non-stream connections
- Cross-framework plug-and-play packages for quick setup
- Connect to any custom API with flexible connect property
- Request body limits to control messages sent to API
- Interceptor properties to augment transferred objects
- Handler function gives full control over server requests
DeepChat cons
- directConnection and key properties only for prototyping, not production deployment
- API keys in directConnection can be accessed in browser (security risk)
- Target server must handle Deep Chat's specific request/response formats
- Requires custom server endpoint for production use with API keys
- Web model requires additional deep-chat-web-llm module
- Angular requires CUSTOM_ELEMENTS_SCHEMA configuration
- Nuxt requires dynamic import with process.client check
- Next.js App Router requires
- directive
Frequently asked questions about DeepChat
What is Deep Chat?
Deep Chat is a fully customizable AI chat component that can be injected into your website with just one line of code. It is framework agnostic and built to bring AI services to life by connecting to popular AI APIs directly from the browser or to your own custom servers.
Is Deep Chat open source?
Yes, Deep Chat is open source at the heart of what the developers do. It is built by the community for the community, and all contributions to the project are welcome. Users can create issue tickets for suggestions, enhancement ideas, or bug reports.
Which AI APIs can Deep Chat connect to?
Deep Chat supports direct connections to OpenAI, HuggingFace, Cohere, Stability AI, Azure, AssemblyAI, BigModel, Claude, DeepSeek, Dify, Gemini, Groq, Kimi, MiniMax, Mistral, Ollama, OpenRouter, OpenWebUI, Perplexity, Qwen, Together, and X (Twitter).
Can I use Deep Chat with React?
Yes, for React you should install the 'deep-chat-react' package and define the element tag as 'DeepChat'. The component works with React and also supports Next.js using the deep-chat-react package with lazy loading.
How do I connect Deep Chat to my own API?
Define your API details using the 'connect' property with your endpoint URL, method, headers, and additional body properties. Your server must accept and respond using Deep Chat's Request message and Response JSON formats described in the documentation.
Does Deep Chat support streaming responses?
Yes, Deep Chat supports streaming by setting 'stream: true' to handle server-sent events. It also supports 'simulation' for non-stream connections to create a stream-like experience, 'readable' for ReadableStream responses, and 'partialRender' to only re-render the latest message paragraph.
Can users send images and files through Deep Chat?
Yes, Deep Chat supports transferring media and files including images, audio, gifs, spreadsheets, and other files to and from the chat. When sending files, the request body is serialized inside FormData with files stored in an array property.
How do I enable voice input and output?
Enable camera and microphone properties to capture photos and record audio. For speech-to-text, input text using real-time transcription. For text-to-speech, have responses read out automatically using speech synthesis. These can be enabled using the 'camera' and 'microphone' properties.
What frameworks does Deep Chat support?
Deep Chat supports React (via deep-chat-react), Vue, Svelte, SvelteKit, Angular, Solid, Next.js, Nuxt, and Vanilla JavaScript. Each framework may have specific configuration requirements like dynamic imports for Nuxt or CUSTOM_ELEMENTS_SCHEMA for Angular.
Is directConnection safe for production use?
No, the directConnection and key properties are intended for prototyping purposes ONLY and should not be deployed to a public website. API keys and values can be accessed in the browser. Before going live, switch to using the 'connect' property to connect to your own server where API keys are safely stored.