DOCSEARCHbyAlgolia
Submit Docs

Deep Chat

website·Indexed 33 days ago

https://deepchat.dev/

A framework-agnostic chat component designed to integrate AI services into websites. It supports direct connections to popular AI APIs including OpenAI, Claude, Gemini, Mistral, DeepSeek, and Groq, as well as custom API connections and browser-based web models.

Tokens
41.3K
Snippets
226
Records
283
Agent score
68%

What's inside Deep Chat

  1. Overview of Deep Chat capabilities

    Deep Chat is a chat component that can connect to any API, allowing communication with popular AI providers directly from the browser or via custom servers. It supports the transfer of media (images, audio, gifs, spreadsheets) and renders text messages using MarkDown. The component includes built-in support for capturing photos via camera, recording audio via microphone, and implementing speech-to-text transcription and text-to-speech synthesis for enhanced accessibility.

  2. Overview of Deep Chat AI component

    Deep Chat is a framework-agnostic web component designed to connect to any AI API with minimal effort. It is fully customizable in terms of interactive features and styling, allowing developers to adapt the UX to specific API requirements and website designs. Because it is shipped as a cross-framework plug-and-play package, it can be integrated into any platform quickly.

  4. Use Signals to communicate request status in custom connections

    The signals object provides a set of functions to notify the Deep Chat component about the state of a request. Some signals are methods to be called by the developer, while others are listeners that the developer can assign functions to.
    {
  // Call these to notify Deep Chat
  onResponse: (response: Response) => Promise<void>,
  onOpen: () => void,
  onClose: () => void,

  // Assign functions to these listeners
  stopClicked: { listener: () => void },
  newUserMessage: { listener: (body: any) => void }
}

  5. Capture photos and audio using Deep Chat hardware integration

    Deep Chat includes built-in functionality to create new files within the component. Users can capture photos via a camera button or record audio via a microphone button.

  6. Implement speech-to-text and text-to-speech in Deep Chat

    Deep Chat supports real-time speech-to-text transcription for user input and automatic text-to-speech synthesis to read responses aloud.

  7. Connect Deep Chat to external APIs and AI providers

    Deep Chat is designed to be API-agnostic, allowing it to connect to any external service. This includes communicating directly with popular AI providers from the browser or routing requests through custom backend servers.

  8. Handle media files and Markdown in Deep Chat

    Deep Chat supports the transfer of various media types, including images, audio, GIFs, and spreadsheets, both as sent and received messages. Text messages support Markdown for layout control and code rendering.

  9. Send and receive media and Markdown in Deep Chat

    Deep Chat supports the transfer of various media types, including images, audio, GIFs, and spreadsheets, both sent to and received from the chat. Additionally, text messages support Markdown for controlling text layout and rendering code blocks.

  10. Connect Deep Chat to external APIs and AI providers

    Deep Chat is designed to connect to any API. It can be configured to communicate directly with popular AI providers from the browser or routed through custom backend servers.

  11. Use preconfigured backend server examples for Deep Chat

    Deep Chat provides several preconfigured backend example projects that can be used to host a service or act as a proxy for AI APIs such as OpenAI, HuggingFace, and Cohere. Most of these servers are designed to work out-of-the-box with the Deep Chat example UI project.

  12. Integrate external modules into Deep Chat

    To keep the core library lightweight, Deep Chat requires external modules for specific advanced features. These modules must be assigned to the global window object for the component to recognize them.
    FunctionalityModuleWindow Property
    Code Highlightinghighlight.jswindow.hljs
    Remarkable pluginsCustom pluginswindow.remarkable_plugins
    Math renderingKaTeXwindow.katex
    Azure Speech-to-textmicrosoft-cognitiveservices-speech-sdkwindow.SpeechSDK
    Web LLM modeldeep-chat-web-llmwindow.webLLM